Viewport clipping?

Viewport clipping?
0.0 0



I want to do the following thing:

  1. I have a Layer which has all decoration sprites + background.
  2. Now I have some Sprites that I would like to draw in the middle (into a rectangular box — I am not sure can I name this rectangle as an inner “viewport”.), but if I put Sprites directly to the Layer they can go outside of the rectangle’s borders.
  3. Is there a good way to make clipping for the Sprites (obviously, I can start perform the clipping of all sprites individually)?

Google does not produce a lot of results (at least it is hard to search without knowing the right keywords). From there I have got two things which I should look into: RenderTexture and Viewport clipping. There is also some discussion on screen separation (with viewports and use of visit pattern).

Does anyone have experience with that? Any suggestions? Thanks.


Hi laser,

Does the effect you’re wanting like the first testcase of clippingNode test in our tests.
This test runs on WebGL mode only.

Best regards


Yes, that is exactly what I want. Thank you for the reply.

PS: My bad, I should have paid more attention to all the test cases.


The ClippingNode’s canvas version will be implemented soon.
Here is the issue address:


Thank you. I am using WebGL mode.

Do you know why cc.ClippingNode is missing from documentation ?


Because it hasn’t been supported on Canvas, so we don’t add it to document list, but you can reference the document of cocos2d-x at:

note: because some openGL’s features haven’t been supported on WebGL, some ClippingNode’s features also haven’t been supported on HTML5.