engine
engine copied to clipboard
playcanvas
Masked text renders differently between Editor view and Runtime
Edit by @yaustar
In project: https://playcanvas.com/project/977066
The text is rendered and masked in Editor:
But at runtime it isn't rendered
It looks like it is related to the size/bounds of the text element which is smaller than the area that the text is rendered as seen in this video. When the text element bounds are in the area of the mask element, the text is rendered and masked at runtime.
https://user-images.githubusercontent.com/16639049/188634955-28dd3f4c-8244-40a1-8286-0084e4e562eb.mp4
Please watch attached video
https://user-images.githubusercontent.com/5656275/188206528-b305bfe9-2364-4a11-b2b6-6ad1545f19c7.mp4
Here's the project.
This is not a bug that happens just on play mode, I tried actually publishing and hosting the build, it has the same issue.
Albertos guided me through the issue and I was able to fix it, but according to him there seems to be a bug in the editor.
In this project, I made a visualisation of the mask and the text is being masked correctly to me:
None of the text is being rendered outside the white area (the mask area)
https://user-images.githubusercontent.com/16639049/188266320-8da9d2e4-28fa-4165-bbb7-b63c0df5255c.mp4
https://playcanvas.com/project/977066/overview/masking-text-bug
The issue is that in the editor it shows the text, but on play mode it doesn't, as the video I recorded shows. On second 14 in the editor, you can see the text. On second 19, in play mode, you can't. And then I scroll the text until it's showing in the editor and in play mode. So sometimes the text shows as unmasked in the editor but in actuality it is masked. Albertos explains about the height of the text element and once I set the height of the text correctly this discrepancy disappears....so it's a visual glitch.
There is no difference between editor and launch when you use a text element on it's own. Then all text is shown regardless of the height of the text element. Strange that the height of the text element seems to have an effect in this use case.
Okay, I see the issue here.
https://user-images.githubusercontent.com/16639049/188634243-64e59966-fac8-4854-9b23-6af87859752b.mp4
Looks like the bounds of the text element is used to check if the text should be rendered or not at runtime 🤔