How to make layer transparent in touch point?

cocos2d-x C++
#1

Hello.
I have black layer and I want to set opacity of this layer’s part in the point where touch was. Not on the whole layer, but on the small touch circle.
Is for that RenderTexture?
But I want to refresh/add this opacity effect on every touch moved. Wouldn’t it work slow? What I want is a simple paint layer in touch points, but we don’t paint with color but with opacity.

#2

You can achieve this using a CCClippingNode and a CCRenderTexture. I have a class that does exactly this, if you’d like I can share it with you.

The general idea is that you have :

  1. A background sprite which will be revealed.
  2. An overlay sprite which will be erased.
  3. A brush sprite which defines the shape that you will be painting with.
  4. Two ClippingNodes

You add the overlay sprite as a stencil to first of the ClippingNodes, and the RenderTexture to the second one. Then the second ClippingNode is added as a child to the first one, and the first one is added as a child to the background sprite.
Then in your touch handlers you simply draw the brush sprite on a render texture, and this gives you transparency.

And it works quite fast.

#3

Can you share your class for this method you explained ? It seems like a must have class !

#4

Why not use a CCLayerRGBA and set the color to (0,0,0,255) for opaque, and then set it to (0,0,0,0) when you want it to be transparent upon touch?

#5

I’m able to erase a layer using following code snippet :

`bool HelloWorld::init()
{

if ( !CCLayer::init() )
{
    return false;
}

CCMenuItemImage *pCloseItem = CCMenuItemImage::create(
                                        "CloseNormal.png",
                                        "CloseSelected.png",
                                        this,
                                        menu_selector(HelloWorld::menuCloseCallback) );
    pCloseItem->setPosition( ccp(CCDirector::sharedDirector()->getWinSize().width - 20, 20) );

    // create menu, it's an autorelease object
    CCMenu* pMenu = CCMenu::create(pCloseItem, NULL);
    pMenu->setPosition( CCPointZero );
    this->addChild(pMenu, 1);

CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();
CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin();

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

//this is the layer that we want to "cut"
CCLayer* layer1 = CCLayerColor::create(ccc4(122, 144, 0, 255), visibleSize.width, visibleSize.height);

this->setTouchEnabled(true);

//we need to create a ccnode, which will be a stencil for ccclipingnode, draw node is a good choice for that
stecil = CCDrawNode::create();

//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(layer1);
addChild(cliper);

return true;

}

void HelloWorld::ccTouchesMoved(CCSet* touches, CCEvent* event)
{
CCTouch* touch = (CCTouch*)touches->anyObject();

// get start & end location
CCPoint start = touch->getLocationInView();
CCPoint end = touch->getPreviousLocationInView();

// get corrected location
start = CCDirector::sharedDirector()->convertToGL(start);
end = CCDirector::sharedDirector()->convertToGL(end);

stecil->drawDot(start, 25, ccc4f(0, 0, 0, 255));
//stecil->drawSegment(start, end, 25, ccc4f(0, 0, 0, 255));

}`

Now I want to get the percentage that how much part has been changed to transparent… so that I can make call to another event if its greater than 90% or something…

Any help regarding this is thankful…

1 Like
#6

Hello Losiawaty, i have a problem with this can you give me a help? iam working with cocos2d javascript binding, thank’s