cocos2dx 3.6 How to Mask sprite in circle

HI All.

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

Thanks.

Look into ClippingNodeTest.cpp.

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

Thanks iQD.

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

@jdboss,

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

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

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

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

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

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:

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.

Thanks iQD, very useful! :grinning:

How do i adapt this to have the effect of a round clipping mask so the facebook user image is round?

this works so far;

var photoUrl = FBInstant.player.getPhoto();
    cc.loader.load(photoUrl, (err, texture) => {
    this.getComponent(cc.Sprite).SpriteFrame = new cc.SpriteFrame(texture);
    });

I add the user image as the sprite to my player1 prefab then instantiate it and add it to the scene. That works fine. But i cant figure out how to get the clipping mask to work.

i have tried this but it doesn’t work;
var photoUrl = FBInstant.player.getPhoto();
cc.loader.load(photoUrl, (err, texture) => {

		this.getComponent(cc.Sprite).SpriteFrame = new cc.SpriteFrame(texture);
		/////////////////

		var sprite = this.getComponent(cc.Sprite).SpriteFrame; 

		var circle = new cc.DrawNode();
		circle.drawCircle(
		cc.p(0,0),
		Math.PI,
		0,
		128,
		false,
		sprite.width / 2,
		console.log(sprite.width),
		console.log('-----'),
		);

		var mask = new cc.ClippingNode(circle);
		mask.addChild(sprite);

anyone see why?