Reduce ClippingRectangleNode draw calls

I want to use multiple ClippingRectangleNodes in my game. However, every ClippingRectangleNode triggers an extra draw call. The contents of the ClippingRectangleNodes all use the same texture, and, if drawn without the clipping they do not use extra draw calls.

I also tried with ProgressTimer, with the same result. Is there any way to reduce/batch draw calls when using ClippingRectangleNode?

If your goal is to have all children (content) inside the clip rects then you could instead create a DrawNode, draw the multiple rects into it with black background and white rects (or inverse). Then you can create only one ClippingNode (instead of CRNode) and set its stencil to the DrawNode. Then add all children to clip as children of the clipnode.

There’s other options, but that might be simplest if it meets your needs. You could also look at Layout as it allows for similar stencil.

My goal is to animate sprites with children by showing them from top to bottom, like the progresstimer does. I have a lot of sprites that can be animated like this at the same time, so that’s why I wanted to find out if batching is possible for this. Would your solution with DrawNode perform well with changing content (for the animation)?

First thing: Are you sure you need to worry about the number of draw calls? Are you actually seeing perf issues on the devices you want to support? I think you can have 50-200 draw calls (if they’re simple enough) on even low-end devices from several years ago.

I’m not sure, you’d probably have to try. The method I mentioned should be easy and quick to setup and test, however.

You could also do some hacks where you overlay another node on top (ideally rendered first, with depth buffering enabled) such that instead of “clipping” through OpenGL’s clip state behavior you would just “cover up” where you want by putting flat colored sprite (scale9 or whatever) or even a draw node that exists at a Z level above all the others.

Lot’s of ways I can think of how to do this, but unfortunately I’m not entirely sure which will be more performant.

You could even render into a buffer (ideally where batching would work just fine) and use that single RenderTexture as the child that’s clipped.

Again there’s other methods using shaders and such I can think of, but those would be more work to even test and might not be worth it.

I am not seeing performance issues (yet). I just want to be sure to choose the right direction and use as less draw calls as possible if I can do it easily. The target platform is desktop, so I do not think I’ll have to worry a lot about performance loss caused by draw calls, but still. Anyways, thanks for the suggested solutions, I think I will choose a path in which I do not need clipping.

The reason that Clipping increase draw call is because clipping changes the render state ( turn stencil buffer on and off), so you should only use clipping node if it’s necessary.

@nite The guys from Spine are currently also about to implement some kind of masking for Cocos2d-x. They’re having quite some issues since it’s not easily possible to keep batch rendering active while using Stencil Clipping. Ideally it should be possible to do Stencil Clipping of an arbitrary amount of nodes with two draw calls. One for the batched drawing of the stencils, and one for the batched drawing of the nodes.
Is that somehow possible already? I think they’d be very happy if you guys have some hints for them how to get batched clipping.

http://de.esotericsoftware.com/forum/Spine-3-6-beta-is-available-7529?start=25

yes, that is possible, if we can get our hands on a sample we can see what we can do to improve it.