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 usi…

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?

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.

You can set the opacityTexture of the UI material: Babylon.js Playground Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

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: Babylon.js Playground Babylon.js playground is a live…

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. Eve…

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

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

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

Questions

roland June 18, 2024, 10:27am 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:

Topic		Replies	Views
Loading/Timer circular UI Questions gui	23	426	June 18, 2024
Babylonjs use two layer one for background and one for title in center Questions	4	275	August 1, 2023
May I ask if it is possible to add custom shader effects on the GUI of Babylonjs, Questions gui , material , shader	20	287	September 18, 2024
How would I even start to create a GUI in Babylon JS with an animating gradient border Questions gui	3	857	July 26, 2020
Perfect Circle and GUI Questions	6	1096	February 23, 2021

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

Related topics