As far as I know Mask-s in cocos creator are a parent node with a Mask component, which is actual mask of all children of that node. I have an example with filling up a progress bar and it’s not convenient for me to handle motions of mask, because all children are moving with the parent (mask). So the question is
Is there a better approach of working with Masks?
It would be great if one node with Mask component could be a Mask target of another Sprite Node @slackmoehrle
1.Create a couple of containers with Mask component and a renderer(sprite or spine) child node for each one and make sure the renderers overlap each other with disabled masks.
2.Dynamically increase the scale of all Nodes and the rendering of the objects will be messed up. Renderers with higher z index are rendered on other objects (through their masks) ignoring their own mask bounds.
I can provide a test project if its necessary. @jare
@jare@huanxinyin@slackmoehrle
1.How to attach a project here?
2.How to start contributing on Cocos engine development? ( I would like to participate the process if it is possible)
What type of compressed file are you using? I’ll add it as an allowed file type. Also how large is the compressed file you want to upload. I need to check the max file size.
MaskIssue.zip (535.2 KB)
Sorry for late response. This is the simplest project which reproduces the issue 100%.
-Play the Preview with landscape screen, after rotate to portrait and back. Everything works cool and correct because we were scaling down the masks.
-Play the preview in Portrait mode first. After rotate to landscape and back. In landscape mode the rendering of masks is messed up, because pictures with higher zIndex are ignoring their mask boundaries and are rendered through other node’s masks. The issue happens when we scale up the masks
This is really critical issue for me @jare@huanxinyin so if it is possible I would like to know if this issue has a high priority to fix or I have to find a workaround?
This issue was NOT happening with v1.9.3 . So after v2 the issue arrived.
What platform was you tested for? I can find this happened on web browser.
Above the plan, if you are urgent on this discuss, you can try to find a workaround.
For now I remove the mask component and add another mask component with the same width and height at view resize and it works. Would you suggest any better solution?