UI - positioning elements on scaled root container?

Questions
1

Hi:
I am trying to position some controls on a GUI scaled to the window.devicePixelRatio as per the playground example https://playground.babylonjs.com/#2ARI2W#114.

engine.setHardwareScalingLevel(1 / window.devicePixelRatio);    
advancedTexture.rootContainer.scaleX = window.devicePixelRatio;
advancedTexture.rootContainer.scaleY = window.devicePixelRatio;

How can I specify the position of the upper left corner? if I specify top & left as zero, then and use alignment, the control is drawn off-canvas.

button1.top = 0;
button1.left = 0;
button1.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
button1.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;

Thanks,

Eric

2

I don’t think you should update the scaleX/scaleY properties, but I don’t have a device with devicePixelRatio != 1 so I’m not sure.

3

My devicePixelRatio is 2.625. If I don’t update scaleX/scaleY, the UI elements are shrunk down drastically.

Edit: the best workaround I’ve found so far is to not set the scaleX/scaleY properties (as per Evgeni’s suggestion) and instead just manually multiply values width, height, top, left and fontSize by the devicePixelRatio. This does take some care since values such as advancedTexture.getSize().width & height are already multiplied. For example, if I want to place an element 40 px above the bottom of the screen, the calculation for top is: this.advancedTexture.getSize().height - 40 * window.devicePixelRatio;

BTW: The playground example I am referencing is the “Crisp Text Resolution Example” referenced by the documentation at: GUI | Babylon.js Documentation

1 Like
4

Going to add our UI expert @msDestiny14 on this one

5

Don’t know if this could be what you are looking for but using
advancedTexture.idealWidth
advancedTexture.renderAtIdealSize

might be something to take a look at? Assuming you know the size you need.:slight_smile:

6

Hi @ericre, I’m having the same issue and found this thread very informative: Proper way to support HDPI/Retina display at full resolution and scaled properly?. Hope it helps.

7

I’ve played with this a few days and posted something related that could help: Billboard UI with zoom based scaling (including retina screens)