How to mask sprite using clipping node in cocos2d-x


how to mask sprite using clipping node in cocos2d-x?
thanks in advance

Showing only a parent size content of all child sprites

Hi, if I correctly understand what you need, then:

Sprite *stencil = Sprite::create();
stencil->setTextureRect (Rect(Point::ZERO, getContentSize()));
stencil->setPosition    (getContentSize()/2);

clipper = ClippingNode::create(stencil);
clipper->setContentSize (getContentSize());


And then simply add all children to clipper object.


How can i figure out that whole clipper is filled with children.
Means the background image is revealed fully.
I am stuck at this for 3 days. I little help would be appreciated. Thanks a lot.


Sorry for bumping this old thread. I really need a solution. I have been stuck on this problem for two days. Someone from the community please help.


What are you using for code?


-(void) init()

auto backGroundImage = Sprite::create(imageToReveal);

auto target = Sprite::create(upperImage);

_outerClipper = ClippingNode::create();
AffineTransform tranform = AffineTransform::IDENTITY;
tranform = AffineTransformScale(tranform, target->getScale(), target->getScale());
_outerClipper->setContentSize( SizeApplyAffineTransform(target->getContentSize(), tranform));
_outerClipper->setAnchorPoint( Vec2(0.5, 0.5) );
_outerClipper->setStencil( target );

auto holesClipper = ClippingNode::create();
holesClipper->setAlphaThreshold( 0.05f );


_holes = Node::create();


_holesStencil = Node::create();

holesClipper->setStencil( _holesStencil);



listener = EventListenerTouchAllAtOnce::create();
listener->onTouchesMoved = CC_CALLBACK_2(DrawLetterScene::onTouchesMoved, this);
_eventDispatcher->addEventListenerWithSceneGraphPriority(listener, this);
void DrawLetterScene::pokeHoleAtPoint(Vec2 point)


auto hole = Sprite::create("hole_effect.png");
hole->setPosition( point );


auto holeStencil = Sprite::create("hole_stencil.png");
holeStencil->setPosition( point );


void DrawLetterScene::onTouchesMoved(& touches, event){
Touch *touch = (Touch *)touches[0];
for (int i = 0; i < touches.size(); i++)
    Vec2 point = _outerClipper->convertToNodeSpace(Director::getInstance()->convertToGL(touch->getLocationInView()));
    auto rect = Rect(0, 0, _outerClipper->getContentSize().width, _outerClipper->getContentSize().height);
    if (!rect.containsPoint(point)) continue;
    if (_holesStencil->getChildrenCount() > 50)
   CCLOG("Children %zd",_holesStencil->getChildrenCount());

Please ignore function braces.

This is the code i am using to display an image in the background which is hidden under the upper image. And then i have an upper image that is clipped to reveal the background.

I can remove all the clipping by removing children from the two arrays i am using.
But i can’t seem to find out which the whole image has been clipped or a few areas are left. Actually a percentage value would be even better. Thanks and regards,

P.S. - Right now i am dependent on the number of children the stencil has and uses it to go back the previous scene.



please help somebody.


Do you really need to use “clipping node”? Maybe use simple shader with the mask texture?


If your hole children are simple shapes, we can do some geometry calculation to check.