Spritebuilder CCClippingNode

Spritebuilder CCClippingNode

Quick setup of CCClippingNode



I ran into some situations where I needed to "hide" or "mask" content when it was outside of my CCNode Content size. Searching hide content outside content size returned nothing useful. Turned out there is no setting for this. I did, however, find this. It was a bit confusing and drawn out. So I wanted to make a quick version. The steps are as follows...


  1. drag a node to stage. 
  2. drag another node to stage. We will call this node "clip_node" and set that as the "doc root var" value. Now make this node a child of the one in step 1.
  3. Set the custom class of "clip_node" to "CCClippingNode"
  4. Now add a black CCNodeColor to the stage. Make it a child of the original node created in step 1 as well. We now have one parent with two child nodes. One is a black color node and the other is our "clip_node"
  5. Set the "doc root var" name of the black node layer to something like "the_stencil". 
  6. Now you can add one or more layers as children to the "clip_node". These are the layers that will obey the clipping or "mask" created by the black node.


Once you have completed the above, you can add some code. I did this in swift so the following two lines I added at the top of my object file. Substitue the names to whatever you called the above nodes. 


weak var clip_node: CCClippingNode!
weak var the_stencil:CCNodeColor!


After that, in the onEnter I did the following... 


override func onEnter() {
        clip_node.stencil = the_stencil
        clip_node.alphaThreshold = 0.0


And that should do it. If now, you may want to run through each step in the link above but it is a bit tedious. 


One side note, the positioning of the nodes does matter. For starters just set all at 0 , 0 and give the black color node a large width and height for testing. 



The Swift file :)


Spritebuilder CCClippingNode