Search code examples
c++cocos2d-x

Cocos2d-x - how to set part of CCLayer transparent?


I'm newbie in cocos2d-x and I need your help.

I need to make transparent a touched portion of the layer.

How to make a portion of the layer transparent? I had thought to use ССClippingNode, but I'm not find examples or docs.

I use C++. Thanks.


Solution

  • In TestCpp, project that was added to all cocos2d-x version, you can find examples of CCClipingNode.

    If you want to hide part of CCNode(for example "layer") using CCClipingNode, you should add your layer to CCClipingNode.

    This is the example that you can paste in the HelloWorld init:

    bool HelloWorld::init()
    {
    
        if ( !CCLayer::init() )
        {
            return false;
        }
    
        CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();
        CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin();
        addChild(CCLayerColor::create(ccc4(122, 144, 0, 255), visibleSize.width, visibleSize.height));
    
        //this is the layer that we want to "cut"
        CCLayer *layer = CCLayer::create();
        CCSprite* pSprite = CCSprite::create("HelloWorld.png");
        pSprite->setPosition(ccp(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));
        layer->addChild(pSprite, 0);
    
        //we need to create a ccnode, which will be a stencil for ccclipingnode, draw node is a good choice for that
        CCDrawNode * stecil = CCDrawNode::create();
        stecil->drawDot(ccp(visibleSize.width/2 + origin.x - 100, visibleSize.height/2 + origin.y), 30, ccc4f(0, 0, 0, 255));
        stecil->drawSegment(ccp(0, 0), ccp(visibleSize.width, visibleSize.height), 20, ccc4f(0, 0, 0, 255));
    
        //CCClipingNode show the intersection of stencil and theirs children
        CCClippingNode *cliper = CCClippingNode::create(stecil);
        //you want to hide intersection so we setInverted to true
        cliper->setInverted(true);
        cliper->addChild(layer);
        addChild(cliper);
    
        return true;
    }