If the clipping stencil node has any child, it turns white.

[iAbdulQadirKhan]

We have a background sprite and it has a sprite child. I set the clipping stencil to the background sprite. This turns the node white. This problem can also be reproduced on cpp test project. I have added this line of code
stencil->addChild(Sprite::create());

`void NestedTest::setup()
{
static int depth = 9;

Node* parent = this;

for (int i = 0; i < depth; i++)
{

    int size = 225 - i * (225 / (depth * 2));

    auto clipper = ClippingNode::create();
    clipper->setContentSize(Size(size, size));
    clipper->setAnchorPoint(Vec2(0.5f, 0.5f));
    clipper->setPosition(parent->getContentSize().width / 2, parent->getContentSize().height / 2);
    clipper->setAlphaThreshold(0.05f);
    clipper->runAction(RepeatForever::create(RotateBy::create(i % 3 ? 1.33f : 1.66f, i % 2 ? 90.0f : -90.0f)));
    parent->addChild(clipper);

    auto stencil = Sprite::create(s_pathGrossini);
    stencil->addChild(Sprite::create());
    stencil->setScale(2.5f - (i * (2.5f / depth)));
    stencil->setAnchorPoint(Vec2(0.5f, 0.5f));
    stencil->setPosition(clipper->getContentSize().width / 2, clipper->getContentSize().height / 2);
    stencil->setVisible(false);
    stencil->runAction(Sequence::createWithTwoActions(DelayTime::create(i), Show::create()));
    clipper->setStencil(stencil);

    clipper->addChild(stencil);

    parent = clipper;
}

}`

[rh101]

Can you please show example images of what you actually see, and what you expect to see (even if you create them in a paint program). Having something like that makes things very clear, without having to guess what you actually expect.

Also, check the clipping tests in the cpp-tests project. They all seem to work, so check what is different about your code to the test implementations.

[iAbdulQadirKhan]

I have added a sprite as child of the clipping stencil sprite. It turns the node white. I have added these lines of code
auto childSprite = Sprite::create(); stencil->addChild(childSprite);

`void NestedTest::setup()
{
static int depth = 9;

Node* parent = this;

for (int i = 0; i < depth; i++)
{

    int size = 225 - i * (225 / (depth * 2));

    auto clipper = ClippingNode::create();
    clipper->setContentSize(Size(size, size));
    clipper->setAnchorPoint(Vec2(0.5f, 0.5f));
    clipper->setPosition(parent->getContentSize().width / 2, parent->getContentSize().height / 2);
    clipper->setAlphaThreshold(0.05f);
    clipper->runAction(RepeatForever::create(RotateBy::create(i % 3 ? 1.33f : 1.66f, i % 2 ? 90.0f : -90.0f)));
    parent->addChild(clipper);

    auto stencil = Sprite::create(s_pathGrossini);
    
    auto childSprite = Sprite::create();
    stencil->addChild(childSprite);
    
    stencil->setScale(2.5f - (i * (2.5f / depth)));
    stencil->setAnchorPoint(Vec2(0.5f, 0.5f));
    stencil->setPosition(clipper->getContentSize().width / 2, clipper->getContentSize().height / 2);
    stencil->setVisible(false);
    stencil->runAction(Sequence::createWithTwoActions(DelayTime::create(i), Show::create()));
    clipper->setStencil(stencil);

    clipper->addChild(stencil);

    parent = clipper;
}

}`

Simulator.Screen.Recording.-.iPhone.SE.3rd.generation.-.2023-12-18.at.11.10.38.mp4

[rh101]

I understand what it is you're seeing, but what do you expect to see? Show an example of what you expect to see. If you to, mock it up in Windows Paint or something similar.

[iAbdulQadirKhan]

It was working fine on cocos-2dx-v3.

Expected

Actual:

[rh101]

The other option that you provide the relevant code and the assets for the images you have posted (with those bars).

You also need to state which platforms you have done your tests on. Testing on one platform is not enough, because you would need to see if it's happening on just one or multiple.

[iAbdulQadirKhan]

Sorry for the confusion. Here is sample with grossini.

Expected:
https://github.com/axmolengine/axmol/assets/79637143/a3beb1b2-5bef-4afc-8411-6f455be4ff7a

Actual:
https://github.com/axmolengine/axmol/assets/79637143/720fc3f9-8952-4111-91ab-11de40090694

[rh101]

Delete this line from your code: stencil->addChild(Sprite::create());

Based on your expected output, it's working fine on Axmol:

You could have easily found this problem yourself, and all that was required is to start at the minimum amount of code to get a clipping node working, meaning getting rid of unnecessary code. If that was done, you would have seen that it does in fact clip correctly. Then, and only then, do you add more and more of your code, one change at a time, test that change, then add another etc., until you finally see the problem.

If you did that, you would have hit this line: stencil->addChild(Sprite::create());. Without it, everything works, With it, everything goes white. At that point, you ask yourself, "Why is it white?"... well, just follow it. Step into the the sprite creation and see why it is white. It would have led you to this:

void Sprite::setTexture(Texture2D* texture)
{
    // ...
    if (texture == nullptr)
    {
        // Gets the texture by key firstly.
        texture = _director->getTextureCache()->getWhiteTexture();   <=== BINGO
    }
// ...
// ...
}

[iAbdulQadirKhan]

In our game implementation we are using a sprite as a clipper stencil. This sprite contains a child that we are using for other purposes. It turns into white because of the child.

[rh101]

In our game implementation we are using a sprite as a clipper stencil. This sprite contains a child that we are using for other purposes. It turns into white because of the child.

Sorry, I deleted my previous response since it may not actually be the solution to this. I had another look at it, and realised that when a sprite is added as a child to the stencil, it does create an issue, and the result seems to depend on the content and size of that image. There is a difference between Cocos2d-x v3 and Cocos2d-x v4/Axmol, which may be the reason for the results you're seeing.

The difference is that v3 only applied a shader to the stencil, and not the children of the stencil. In v4/Axmol, the shader is applied to the stencil and all child nodes. I don't know what the purpose of the change is, but this isn't something specific to Axmol.

You can see the changes in ClippingNode::visit and the new method in v4/Axmol, ClippingNode::setProgramStateRecursively.

Perhaps someone else can shed some light on why this was changed, and more importantly, why adding a sprite as a child of the stencil causes this issue. The change was made in this Cocos2d-x v4 commit: cocos2d/cocos2d-x@816289c

If a white blank image is added as a child of the stencil, as what would happen with Sprite::create() using the default white texture, then all that can be seen is a solid white rectangles.

If an image with some transparency is added as the child, then that image can actually be seen. For example, instead of stencil->addChild(Sprite::create());, using stencil->addChild(Sprite::create("HelloWorld.png")); results in this:

Is it supposed to show the "grossini.png" image as well?

I'm assuming that the child nodes of the stencil are somehow affecting the stencil?

[rh101]

@iAbdulQadirKhan What is the purpose of adding a child sprite to the stencil? Understanding the use-case for this may make things clearer.

Also, why is the stencil sprite being added as a child of the clipping node? Wouldn't it have made more sense to create a separate sprite for that purpose, given that the stencil is modified by the clipping node?

For example, this code results in the expected output, even with the line addChild(Sprite::create());:

  static int depth = 9;

  Node* parent = this;

  for (int i = 0; i < depth; i++)
  {

      int size = 225 - i * (225 / (depth * 2));

      auto clipper = ClippingNode::create();
      clipper->setContentSize(Size(size, size));
      clipper->setAnchorPoint(Vec2(0.5f, 0.5f));
      clipper->setPosition(parent->getContentSize().width / 2, parent->getContentSize().height / 2);
      clipper->setAlphaThreshold(0.05f);
      clipper->runAction(RepeatForever::create(RotateBy::create(i % 3 ? 1.33f : 1.66f, i % 2 ? 90.0f : -90.0f)));
      parent->addChild(clipper);

      auto stencil = Sprite::create("grossini.png");
      stencil->setScale(2.5f - (i * (2.5f / depth)));
      stencil->setAnchorPoint(Vec2(0.5f, 0.5f));
      stencil->setPosition(clipper->getContentSize().width / 2, clipper->getContentSize().height / 2);
      clipper->setStencil(stencil);

      auto clippedSprite = Sprite::create("grossini.png");
      clippedSprite->addChild(Sprite::create()); // You can still add a blank sprite here if you need it
      clippedSprite->setScale(2.5f - (i * (2.5f / depth)));
      clippedSprite->setAnchorPoint(Vec2::ANCHOR_MIDDLE);
      clippedSprite->setPosition(clipper->getContentSize().width / 2, clipper->getContentSize().height / 2);
      clippedSprite->setVisible(false);
      clippedSprite->runAction(Sequence::createWithTwoActions(DelayTime::create(i), Show::create()));
      clipper->addChild(clippedSprite);

      parent = clipper;
  }

Note that the above code is running in a new project, with the relevant graphic assets added to the project, and not just modified code in the cpp-test project.

[iAbdulQadirKhan]

We are not applying shaders to the children of the stencil. This solution is working.

void ClippingNode::setProgramStateRecursively(Node* node, backend::ProgramState* programState)
{
    _originalStencilProgramState[node] = node->getProgramState();
    node->setProgramState(programState);

//    auto& children = node->getChildren();
//    for (const auto& child : children)
//    {
//        setProgramStateRecursively(child, programState);
//    }
}

[rh101]

We are not applying shaders to the children of the stencil. This solution is working.

Unless I'm misunderstanding what you're stating, the shader isn't applied to the child nodes in your code, but in the ClippingNode:

auto* program = backend::Program::getBuiltinProgram(backend::ProgramType::POSITION_TEXTURE_COLOR_ALPHA_TEST);
auto programState  = new backend::ProgramState(program);
auto alphaLocation = programState->getUniformLocation("u_alpha_value");
programState->setUniform(alphaLocation, &alphaThreshold, sizeof(alphaThreshold));
setProgramStateRecursively(_stencil, programState);

I'm just curious why this was actually changed between v3 to v4 of Cocos2d-x.