Starting from a new js project, I added this code in app.js:
var Wsize = cc.winSize, W = Wsize.width * 0.85, H = Wsize.height * 0.85;
var Clipper = new cc.ClippingNode();
Clipper.attr({
width : W,
height : H,
anchorX : 0.5,
anchorY : 0.5,
x : Wsize.width / 2,
y : Wsize.height / 2
});
var Stencil = new cc.DrawNode();
var Shape = [cc.p(-100, 120), cc.p(120, 120), cc.p(10, 0)];
var StencilColor = cc.color(0, 255, 0, 255);
Stencil.drawPoly(Shape, StencilColor, 0, StencilColor);
Stencil.setPosition(50, 0);
Clipper.stencil = Stencil;
Clipper.alphaThreshold = 0.05;
this.addChild(Clipper);
Clipper.inverted = true;
Rect = cc.rect(0, 0, W, H);
var YellowWin = new cc.Sprite();
YellowWin.setTextureRect(Rect);
YellowWin.setPosition(-W / 2, -H / 2);
YellowWin.setColor(cc.color.YELLOW);
YellowWin.setOpacity(40);
YellowWin.setAnchorPoint(0, 0);
Clipper.addChild(YellowWin, 1);It works as expected on browsers, Win32 and OSX:
It doesn’t on Android and IOS:
It seems that Stencil position is referred to the Clipper’s parent. Also, on Android and IOS Stencil.setPosition is totally ignored.
Both on 3.6.1 and latest github (3.7 RC0).