Resize on different screen size


In the first image the text and other components are at there respectve defied percentage and as i change the size to the mo0bile size then the text and other components gets blurry and the text is even also not readable like this its being displayed and i have used percentage to create it plz someone help me.

@DarraghBurke can help with the GUI

This is the code we used in the Babylon 5 demo to handle screen resize: rescale GUI on window resize · BabylonJS/SpacePirates@18d8ce9 (github.com)

Primarily, you want to listen for a “resize” event on the window object and then call this:

this._adt.scaleTo(this._adt.getScene()!.getEngine().getRenderWidth(), this._adt.getScene()!.getEngine().getRenderHeight());

Let me know if that works for you.

1 Like

I could not understand can u plz elaborate it.

Every time the window resizes, you want to rescale the texture to the dimensions of the canvas. This ensures that it will always have the same resolution as the scene

// adt is your AdvancedDynamicTexture, engine is your Babylon.js engine
window.addEventListener("resize", () => {
adt.scaleTo(engine.getRenderWidth(), engine.getRenderHeight());
});
2 Likes

I added the code in my html downloded file but it did not worked and returned errors in the console this is my project

Can’t see any error. This code looks just fine. Run it at the end before returning the scene.

Edit: OK, just saw what your problem might have been. ‘adt’ in this script goes for your ‘advancedTexture’.
A matter of naming things. All you have to do is simply replace ‘adt’ by your name for the ‘advancedDynamicTexture’ which you called in this PG ‘advancedTexture’. Next it should run like a charm :magic_wand: :smiley:

thanks, i added that code in my project but when i run the project in my mobile the texts and other components are still blurry and does not look good. can u plz tell me how to improve that.

cc @DarraghBurke

@DarraghBurke can plz help me i am facing thast problem still now

You probably need to resize the canvas. There are many topics around this if you search for ‘mobile’ in the forum. The latest one is over here