Clipping Node "smearing"

Hi, I am using Cocos2d-x v2.2.6. I have a ClippingNode with a Sprite stencil. A white LayerColor is added to the ClippingNode and the ClippingNode is added to a node. The idea is that I have a bottle and use the color layer to show how empty or full the bottle is.

I want to the bottle to be a node with the center in the center of the bottle image. I also want to be able to scale and rotate the bottle. To do this, I want to size the ClippingNode to the necessary size and place its center on the center of the parent node.

My problem is that when I rotate the stencil image, any part of it that is to the left of or below the ClippingNode’s parent’s anchor point will not be cleared when the stencil rotates again. That is, if I place the stencil somewhere and then use an action to move it somewhere else, the stencil will now show where the stencil image was and where it is now, at the same time.

Am I right in thinking that the stencil cannot be placed to the left of or below the anchor point of the ClippingNode’s parent?

This is not an issue with placing the stencil outside the bounds of the ClippingNode. In that case, the stencil is just cut off.

It would be nice to have some screenshots

Sorry, been away for a few days.

Here’s some Javascript code for Cocos2d-x v2.2.6:

// size of the screen
var size = cc.Director.getInstance().getWinSize();

// the node that contains everything
this.myNode = cc.Node.create();
this.addChild(this.myNode);
this.myNode.setPosition(cc.p(size.width / 2, size.height / 2));
this.myNode.setScale(3); // scale to see better

// the stencil for the clipping node
this.stencil = cc.Sprite.create("res/CloseNormal.png");

// the clipping node
this.clipNode = cc.ClippingNode.create();
this.clipNode.setAlphaThreshold(0.5);
this.clipNode.setStencil(this.stencil);
this.clipNode.setContentSize(this.stencil.getContentSize());
this.myNode.addChild(this.clipNode);

// place center of clipping node at the center of the myNode
this.clipNode.setPosition(cc.p(
  -this.clipNode.getContentSize().width / 2,
  -this.clipNode.getContentSize().height / 2
));

// center stencil on clipping node to make sure this isn't an issue
// with the stencil passing the left and/or bottom of the ClippingNode
this.stencil.setPosition(cc.p(
  this.clipNode.getContentSize().width / 2,
  this.clipNode.getContentSize().height / 2
));
    
// the part of the stencil to fill in
this.visiblePart = cc.LayerColor.create(cc.c4b(255, 255, 255, 255));
this.visiblePart.setContentSize(this.stencil.getContentSize());
this.clipNode.addChild(this.visiblePart);

// rotate node to see the problem
this.schedule(function(dt) {
  this.myNode.setRotation(this.myNode.getRotation() + 10);
}, .1);

I have tested this code on the iPad 2 simulator, but the original issue was observed on an actual iPad 2.

When the app starts:

When the node first rotates:

Next rotation:

Rotated until about 180 degrees:

And after rotating a bit more than 180 degrees:

The center of the image will be the center point of myNode. So, the part of the last image that looks correct will be the part of the stencil that is to the right of and above the anchor point of myNode. As the node is rotated, the parts of the stencil that are left of and/or below the node’s anchor point will not be cleared when the rotation happens, while the part right of and above the anchor point will be cleared. N.B. I have moved the ClippingNode and the stencil so that the stencil should be away from the left and bottom edges of the clipping node, while still centered on myNode.

I found a way around this by using a layer instead of node for myNode, setting its anchor point to (0.5, 0.5) and positioning the stencil and visiblePart layer in the center of the layer, but I am still wondering why the code above has this issue.