UI - positioning elements on scaled root container?

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;



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.

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

Going to add our UI expert @msDestiny14 on this one

Don’t know if this could be what you are looking for but using

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