New BabylonJS UI: Scale Button Height with Screen Width Percentage

Questions
,
1

Hello,

I recently upgraded to BabylonJS 5 and started using the new Alpha GUI Editor.
Now I wanted to implement some scaled circular buttons. I want their width and height to be the same and both of them to be a certain percentage (lets say 5%) of the general screen width. I know I can set a percentage of the screensize in the GUI Editor, however then the button height scales with screen height and button width with screen width, making them oval instead of perfectly round on non square screen sizes.

Is there any way to get a UI elements true size in pixels, even if I configured it to be a screen percentage in the editor? The only thing I can seem to get is a string like “5%” or a percentage value from 0 to 1.

I also tried to do it all manually, but I also cannot get the current viewport dimensions for the life of me. It always just returns 1 instead of actual pixel size.

Is there any way to do this within BabylonJS? Im hesitant to use normal JS screensize methods as I might embed the BabylonJS viewport into a website someday and want the viewport dimensions to be used instead of the whole websites dimensions.

Thank You in advance!

3

Hey @Leolele99 cool to see you using the GUI Editor :heart:

As for the pixel size of the element I have a couple of suggestions for you. First of all, if you want an element to be in pixels you can do “50px” for example. The px stands for pixel.

Another thing I would recommend you do is depending on what your end goal for your UI is you might want to toggle this button on the main screen. What this will do is set all the sizes to automatically pixels (unless you explicitly state otherwise)

image

Under this toggle, you can also explicitly set the dimensions you want your canvas to be. This can be very helpful in the future when exporting and then importing back into your Babylon project. When you load it back into your project you may want to do this which will scale the desired resolution regardless of canvas size.:

// Load a GUI from the snippet server.
let advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("GUI", true, scene);  
let loadedGUI = await advancedTexture.parseFromSnippetAsync("#MMWSUI");

// Set the ideal W and H if you wish to scale with the window.
advancedTexture.idealWidth = 1024;  
advancedTexture.idealHeight = 1024;

If you want to get the size of the canvas for example in the playground. Here is the code for that:

var canvas = document.getElementById("renderCanvas");
var width = canvas.width /2;
var height = canvas.height / 2;

Hope this unblocks you. :slight_smile: and let me know if you have any other questions!

1 Like
4

Thank you, this helped so much!

2 Likes