How to create a vertical or circular fill image effect in a 2D GUI

Questions
1

Hi
I want to create something like this:

I want to use it inside a 2D GUI, and I also want to control the alignment like this :

circular.horizontalAlignment = GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
circular.verticalAlignment = GUI.Control.VERTICAL_ALIGNMENT_TOP;

I’ve created this video using another web engine, utilizing the alpha test property of the material and a gradient textures like these

Radial%20Gradient
Radial%20Gradient512×512 12.7 KB

858aa4e37c84595a04c5242625cf3b0a_t

Is there any solution in Babylon.js for it?

2

If it doesn’t have to be done using the 2D GUI you can do the same as you did with the other engine with a place and a material. If you want to do it with the 2D GUI it might be a little more complicated. And I assume you are referring to the background, right?

3

I just want it inside a 2D GUI, and what I mean is something like this:


if I can create a shape and use it as a mask for the image, the problem can be solved. I just need it for a 2D GUI.

4

You can set the opacityTexture of the UI material:

5

Thanks, @roland, but it seems it can’t work inside

var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");

using this topic: How to mask GUI image I’ve found another solution; this is exactly what I want:

but there are two issues:

  1. The arc starts to fill from the right side; I want to fill the image from the center using arc.
  2. The rectangle starts filling the image from the center, but I want to fill the image from the right or left or top or bottom.
6

For the masking from Top to Bottom, Left right, etc… It’s almost already done in the previous playground… It’s just a matter of alignement

Please have a look at this new Playground
For the alignement I advise you to use flags such as BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT; instead of 0. Even if the result is exactly the same, you avoid confusion and also it’s better for reading the code later…

For the circular shaped, I’m not sure you can do it just using the arc of Ellipse. It might be simpler using a mesh

++
Tricotou

7

In that case I suggest you to use native canvas2d functions to draw on the canvas2d context of the AdvancedDynamicTexture. You’ll have full control of your mask. Here is a star for example:

image
image1054×1044 56.8 KB

8

Thank you @Tricotou :hugs:
Thank you, @roland, you’ve helped me a lot.

9

Please mark one as Solution so the system can close your question.