In my game I have a 2D world where I can move with a camera. When you click on some interactive objects camera focus on it and white overlaying layer (with a circle view pointing to the selected object) appears above the world layer so you can see only the selected object. As shown in the following picture:
I implement this with Mask functionality. It works in cocos creator editor, but it does not work in web browser. Although dimensions of the white overlaying node are much larger than the whole map of the world. When I move with the camera then the overlying layer with the mask is in web browser cropped by the shape of the canvas. As shown in the following picture:
I use Creator version 2.0.9.
How do you mean that “mask shoul rendered by moving camera …”? In my case it seems that masked content is rendered only inside the Canvas area.
You must have an individual camera to render the scene area (such as mask), by setting mask’s node group and camera’s cullingMask property. So the scene area will rendered individually, has no influence of Canvas. Or you can submit a demo project?
I have individual camera with (i believe) proper settings of culingMask and mask’s node is also in group which camera should see because cullingMask is set to “Everything”.
I created a demo project with a showcase of the problem: Test-2_0_9.zip (636.1 KB)
In the project is WhiteOverley node cropped by shape of the canvas.
During my further exploration of the problem I found out that the inverted mask is not cropped by shape of canvas but probably by shape of camera as the camera would be located at (0,0) coordinates of canvas.
