Mask overlay closes other display objects

[denisgl7]

Two display objects https://ibb.co/hmBpKa In this case, the left object is a composite of three images, a system of particles and a line On the left image I impose a mask and that's what I get https://ibb.co/nQvukF The second object and line disappeared

var _width:Number = leftSideConductor.width / leftSideConductor.scale;
var _heigth:Number = leftSideConductor.height / leftSideConductor.scale;
vertexData.setPoint(0, "position", 0, 0);
vertexData.setPoint(1, "position", _width, 0);
vertexData.setPoint(2, "position", 0, _heigth);
indexData.addTriangle(0, 1, 2);
leftSideMask = new Mesh(vertexData, indexData);
leftSideConductor.mask = leftSideMask;

In general, the mask achieves the same effect on any image The mesh was replaced by canvas, the same effect

[PrimaryFeather]

Thanks a lot for the report! Is this a problem that's new in Starling 2.2, or did this also happen previously? (If you can say.)

If you just display the mask (i.e. not assign it to the "mask" property, but simply add it to the display list), does it look correct (and appear on the correct position)? Try if it changes anything if the mask is part of the display list.

If all of that doesn't help: could you prepare a complete, minimal sample I can run to reproduce the problem? Thanks a lot in advance!

[denisgl7]

At the moment I'm testing 2.2 But until this point I do not remember the problem with the mask

During the test, it turned out that something else To specify the correct size of the mask, I need to take scale. Is it correct?

var leftSideConductor:Image;
leftSideConductor.maskInverted = true; 
var leftSideMask:Mesh;
var _width:Number = leftSideConductor.width * leftSideConductor.scale;
var _heigth:Number = leftSideConductor.height * leftSideConductor.scale;
var vertexData:VertexData = new VertexData();
var indexData:IndexData = new IndexData();
vertexData.setPoint(0, "position", 0, 0);
vertexData.setPoint(1, "position", 0, _heigth);
vertexData.setPoint(2, "position", _width, _heigth);
indexData.addTriangle(0, 1, 2);
leftSideMask = new Mesh(vertexData, indexData);
leftSideConductor.mask = leftSideMask;
//addChild(leftSideMask);

When adding to the display list, I will have to change the code for the correct size

var _width:Number = leftSideConductor.width ;
var _heigth:Number = leftSideConductor.height;
addChild(leftSideMask);

In this case, everything is displayed normally The size and position of the mask and other objects

[PrimaryFeather]

Sorry for the late reply — I've only just returned from a vacation!

Hm, no, it should not be necessary to multiply width and scale as you're doing in your sample. And when I try to reproduce your sample, it's not necessary. I can even set _width to leftSideConductor.texture.width (and ...height), and the mask appears correct to me.

Could you maybe try again with a standalone example code, including a screenshot with what comes out when you run that code, vs. what you would expect? Keep it as simple as possible.

Thanks in advance!

[denisgl7]

I add other dysplay objects to stage, and some of them are not displayed, If I use a mask I did not do new pictures, because the effect is exactly the same https://ibb.co/hmBpKa https://ibb.co/nQvukF leftSideConductor.texture.width - I used this works well

[PrimaryFeather]

I'm glad to hear that the texture.width workaround helps!

For the other problem(s): again, I'd be happy about a complete standalone example I can try out. Make it as easy for possible for me to reproduce the problem – that would be a huge help. Thanks!

[denisgl7]

I seem to have found a problem!

var image:Image = new Image(Texture.fromColor(400, 30, 0xff0000));
addChild(image);

var _width:Number = image.texture.width;
var _heigth:Number =  image.texture.height;
var vertexData:VertexData = new VertexData();
var indexData:IndexData = new IndexData();
vertexData.setPoint(0, "position", 0, 0);
vertexData.setPoint(1, "position", _width, 0);
vertexData.setPoint(2, "position", 0, _heigth);
indexData.addTriangle(0, 1, 2);
var  leftSideMask:Mesh = new Mesh(vertexData, indexData);
leftSideMask.maskInverted = true;
image.mask = leftSideMask;

var canvas:Canvas = new Canvas();
canvas.beginFill(0x00ff00);
canvas.drawCircle(400, 400, 30);
canvas.endFill();
addChild(canvas);

var fragmentFilter:FragmentFilter = new FragmentFilter ();
fragmentFilter.antiAliasing = 1;    
canvas.filter = fragmentFilter;

The object disappears when we add a fragment filter That is, a filter without a mask works A mask without a filter on another object also works together there is no

[PrimaryFeather]

Hm ... that's weird. It seems that this problem only appears when you activate antiAliasing on the filter (as you're doing). If you set it to zero (or remove that line altogether), it seems to work just fine.

Since I'm only forwarding this information to Stage3D, i.e. the code is exactly the same with or without anti-aliasing (except that a flag is changed on the render context), this smells like a stage3D problem to me. The question is: what exactly triggers it? Somehow, the mask's changing the stencil value prevents the anti-aliasing from working.

As a workaround, you can disable anti-aliasing on the filter, or use the resolution property as a replacement. In the meantime, I have to investigate what chain of events leads to the stage3d issue.

[PrimaryFeather]

I'm closing this issue now, since it's a bug in Stage3D. The referenced Adobe-Runtime-Support issue is now used to track this.