cocos2dx 3.6 How to Mask sprite in circle


#1

HI All.

How to mask a sprite in circle with cocos2dx 3.6 ?.

Thanks.


#2

Look into ClippingNodeTest.cpp.

Use one of the drawCircle functions of the DrawNode as stencil, instead of a triangle as in the example.


#3

Thanks iQD.


#4

i did not get it for cocos2d- 3. 8 version
please reply me where it is found.
thanks in advance
please reply as fast as possible


#5

@jdboss,

In Cocos Framework check with CPP Test.
cocos2d-x-3.8/tests/cpp-tests/Classes/ClippingNodeTest


#6

please provide me code snippet to mask the sprite in round shape
i did not get it properly


#7

The position of the node added to the clipping node is independent to the position of the clipping node, regardless of it’s children state.

auto stencil = DrawNode::create();
stencil->drawSolidCircle(center, 50.0f, 0.0f, 32.0f, Color4F::GREEN);

// create the clipping node and set the stencil 
auto clipper = ClippingNode::create();
clipper->setStencil(stencil);

// create the sprite, which should be clipped
auto sprite = Sprite::create();
sprite->setSpriteFrame("mysprite.png");
sprite->setPosition(center);

// add the sprite to the clipping node, so it can be clipped
clipper->addChild(sprite);

// add the clipping node to the main node
addChild(clipper);

#8

thanks iQD
it’s completely working for me
thank you so much for the help :smile:


#9

You’r welcome!

Just in case there is some confusion about the position independence, regardless of it’s children state. I just wanted to point out, that you can position the clipping node, the stencil and the clipped node independently.

If you set the position of the clipping node to the center, the children (stencil and the sprite) of course have a standard relative position of (0 ,0) to the clipping node. So this will have the same result, as it is not needed to set both the stencil and the sprite to the center, but only the clipping node.

auto stencil = DrawNode::create();
stencil->drawSolidCircle(Vec2(0.0f, 0.0f), 50.0f, 0.0f, 32.0f, Color4F::GREEN);

// create the clipping node and set the stencil 
auto clipper = ClippingNode::create();
clipper->setStencil(stencil);
clipper->setPosition(center);

// create the sprite, which should be clipped
auto sprite = Sprite::create();
sprite->setSpriteFrame("mysprite.png");

// add the sprite to the clipping node, so it can be clipped
clipper->addChild(sprite);

// add the clipping node to the main node
addChild(clipper);

Showing only a parent size content of all child sprites
Radial Gradient
#10

Hi guys!

It is possible to use a Sprite as clipping mask?
I mean the children nodes should be drawn only if a pixel of the mask has a positive opacity.
I tried “setStencil” with a circle created with GIMP, but the clipping is done on the image rect! :pensive:


#11

Sure you can, but you have to set the alpha threshold accordingly.

cliper->setAlphaThreshold(thresholdValue);

Every pixel with an alpha value greater or equal to the thresholdValue will be clipped.


#12

Thanks iQD, very useful! :grinning: