GUI scaling

[csganja]

I get a gap between "bottom" and the real bottom

I am using a "Container" to group my action bar images, the images are for 1920x1080 resolution and i am using this

		container.scaleY = this.engine.getRenderHeight()/1080;
		container.scaleX = this.engine.getRenderWidth()/1920;

to scale the images to the engine resolution.

The container is 1920x250 (exactly as the image resolution) aligned to bottom...

 

Tried to replicate this in playground

https://playground.babylonjs.com/#YIZWMB

As you can see the rectangle is not aligned neither to left or bottom;

[csganja]

Solved the problem by adding another BABYLON.GUI.Container, rescale then add the other BABYLON.GUI.Container to the first container (and not to the CreateFullscreenUI). This way the second container get proper position and inherit the scale.

Edit: Yep, it gets proper positioning top/mid/bot

[QuintusHegie]

You can try setting the horizontalAlignment and/or verticalAlignment as well on the GUI controls.

These provide constants for gui left/center/right alignment and top/middle/bottom GUI control alignment.

A StackPanel would be a GUI control of choice for this, set as child on the Full-Screen GUI Texture.

In my Model Train Simulation game I use it to position GUI elements in the same areas as you do on your screenshot (e.g. bottom-left for speed gauge, bottom-center for messages and bottom-right for a VR action button).

Q

[csganja]

Quote

You can try setting the horizontalAlignment and/or verticalAlignment as well on the GUI controls.

No need to set h/v alignement as the image and the container have the same width/height, the problem was the container alignment. But it's solved now.

Container is aligned to left/bottom but after scale the original size is acting as a wrapper and the scaled container is aligned to center/middle

ignore my painting skills

[Guest]

Hello, to help solving this kind of issue I would highly recommend using the new Inspector as it can display the containers: https://doc.babylonjs.com/features/playground_debuglayer#gui-control-actions