How to set anti-aliasing to stencil when we use ClippingNode?

Hi all,

I have a problem as follow

When I create a ClippingNode with the circle sprite stencil!

auto clipper = ClippingNode::create();
clipper->setAnchorPoint(Vec2(0.5f, 0.5f));
clipper->setPosition(origin + visibleSize / 2);
clipper->setStencil(Sprite::create("stencil.png"));//circle sprite
clipper->setAlphaThreshold(0.05f);
addChild(clipper);

auto content = Sprite::create("content.png");
clipper->addChild(content); 

The stencil border is not anti-aliased , you can see the image below
I searched the problem and tried several possible solutions , but I cannot find any solutions.
Can everyone help me ?


Try using blend functions.

content->setBlendFunc(BlendFunc{GL_DST_COLOR, GL_ZERO});

Hi , @crugthew thanks you for support, but I dont want to use BlendFunc for the content sprite , I just want to use the original sprite !

Sorry ! I’m very bad English ! I don’t understand what you mean ?

Here’s an example. You achieve AA by placing a sprite of the same texture behind your actual sprite that you want to show inside the clipping node. And then blend.

auto texture = "textures/block.png";

auto
stencil = Sprite::create(texture);
stencil->setPosition(getContentSize() * 0.5f);

auto
clip = ClippingNode::create(stencil);
clip->setAlphaThreshold(0.50f);
clip->setInverted(false);
addChild(clip);

auto
gradient = LayerGradient::create(Color4B(Color3B::GREEN), Color4B(Color3B::RED));
gradient->setContentSize(stencil->getBoundingBox().size);
gradient->setPosition(stencil->getPosition());
gradient->setAnchorPoint({0.5f,0.5f});
gradient->setIgnoreAnchorPointForPosition(false);
clip->addChild(gradient, 2);

auto
backSpriteToBlendWith = Sprite::create(texture);
backSpriteToBlendWith->setPosition(stencil->getPosition());
clip->addChild(backSpriteToBlendWith, 0);

gradient->setBlendFunc(BlendFunc{GL_DST_COLOR, GL_ZERO});

40

Hi @crugthew thanks for you help ! But I tried it and it does not work with cricle sprite as stencil . In your picture , I still see the aliased at the curve at 4 corners :

But I found the solution for this problem based on your answer !
My solution is : I added a sprite with border only on ClippingNode

Finally, thank you very much ! :+1: