How to mask sprite using clipping node in cocos2d-x

How to mask sprite using clipping node in cocos2d-x
0.0 0

#1

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


Showing only a parent size content of all child sprites
#2

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());

addChild(clipper);

And then simply add all children to clipper object.


#3

Hello,
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.


#4

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.


#5

What are you using for code?


#6

-(void) init()
{

auto backGroundImage = Sprite::create(imageToReveal);
backGroundImage->setPosition(midOfScreen);
addChild(backGroundImage);

auto target = Sprite::create(upperImage);
target->setAnchorPoint(Vec2::ZERO);

_outerClipper = ClippingNode::create();
_outerClipper->retain();
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->setPosition(midOfScreen);
_outerClipper->setStencil( target );

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

holesClipper->addChild(target);

_holes = Node::create();
_holes->retain();

holesClipper->addChild(_holes);

_holesStencil = Node::create();
_holesStencil->retain();

holesClipper->setStencil( _holesStencil);

_outerClipper->addChild(holesClipper);

this->addChild(_outerClipper);

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 );

_holes->addChild(hole);

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

}

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;
    this->pokeHoleAtPoint(point);
    if (_holesStencil->getChildrenCount() > 50)
    {
        _eventDispatcher->removeEventListener(listener);
        Director::getInstance()->popScene();
    }
   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.

Thanks.
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,
Rav

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


#7

BUMP

please help somebody.


#8

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


#9

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