Problems with ui element mask

[Question2u]

Hi,

i have a weird problem with my ui elements / masks.

i created textures and want to create a progress bar. To keep the proportions of the gradient and the rounded corners, i created a mask element i want to scale down / up.

the thing is: when i enable the mask functionality, the textures appears very fragmentated like:

I played around with the settings but could not determine the issue here. Is this an engine bug? i also dropped it into another project and got the same results
This is how the elements are positionated:

result if “mask” is activated by the parent progressBar entity (progressBar_Mask is a child)

Another example image with no mask texture (progressBar / progressBarMask) but same result:

There are no settings or something else which could cause this - the textures are simple .png files too. all the 2d Screen entities have an element component attached. It also happens if i use sprites.

Does somebody know why this is appearing? Thank you very much!

@mvaligursky is this maybe a bug within the engine?

[mvaligursky]

Have a look here, this could help. It seems the progress bar using mask works there: Dynamically rendering circle mask

[Question2u]

@mvaligursky,

thanks for your input.

Hmmm, I don’t know, it doesn’t seem to fix the problem - or am I doing something wrong here understanding a simple UI mask?

https://playcanvas.com/editor/scene/2072436

You can try it here: It’s the project from your previous answer - I just put the images there.

The graphics are somehow still fragmented - the mask would work as intended, but I can’t figure out why this visual issue occurs

[mvaligursky]

One thing to note is that the masks are binary, there are no levels of transparency. (I have not checked your textures)