csganja

GUI scaling

Recommended Posts

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

image.thumb.png.53c5b8238182cd0daf7cfcbf12a7ce42.png

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;

Share this post


Link to post
Share on other sites

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

image.thumb.png.e70497d2b4e326484ebe7585583238b2.png

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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

image.thumb.png.34c12fd3240cd7a2b2c9c9320fca11cf.png

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.