Resize does not work in GUI

I already tried several browsers!
a function:
window.addEventListener (‘resize’, function () {
engine.resize ();

it’s working! But the GUI is not a screen that can be used on the screen, but resizing the screen is not combined.

here is my index.html>
<! DOCTYPE html>

RTSs html, body { overflow: hidden; width: 100%; height: 100%; margin: 0; fill: 0; }

#renderCanvas {
width: 100%;
height: 100%;
touch action: none;
</ style>
</ head>

</ canvas>
</ body>
</ html>

this is the code>

window.addEventListener (‘DOMContentLoaded’, function () {
var canvas, motor, scene, camera, light;
var floor_1, floor_2, wall_1;

canvas = document.getElementById (‘renderCanvas’);
engine = new BABYLON.Engine (screen, true);

// scene creation function that creates and returns the scene
var createScene = function () {
scene = new BABYLON.Cena (engine);
scene.collisionsEnabled = true;
camera = new BABYLON.ArcRotateCamera (“camera1”, Math.PI / 2, Math.PI / 4, 3, new BABYLON.Vector3 (0, 0,6, 0), scene);
camera.attachControl (screen, true);
camera.lowerRadiusLimit = 2;
camera.upperRadiusLimit = 82;
camera.wheelDeltaPercentage = 0.006;
// (x: 0, y: 5, z: -10)

light = new BABYLON.HemisphericLight (“light1”, new BABYLON.Vector3 (0, 4, 0), scene);
light.intensity = 1;
light.specular = BABYLON.Color3.Black ();
// cfg_start_end

// cfg_path

return scene;

// and_scene
var scene = createScene ();
// execute the render loop
engine.runRenderLoop (function () {
scene.render ();
// the screen / window resizing event handler
window.addEventListener (‘resize’, function () {
engine.resize ();


I honestly should not have the code like that, but … the playerground;
works differently from an index.html page in js linked files.

Can someone help me with this, please? How do I get a GUI to work with rezise!

The code is complete is not complete! And as parts that I found important to show …

How are you setting up your gui, is it with an advanced dynamic texture? If the playground doesn’t work for your repro, could you try to create a js fiddle (eg. Cube in Babylon.js - JSFiddle) with your setup?

In this playground you can see the fullscreen gui being updated as expected from the code you shared it looks like it should work to me

Hello, Thanks for replying. :slightly_smiling_face:

This is how I move my GUI.

var advancedTxt = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI (“UI”);
var btn_4 = BABYLON.GUI.Button.CreateSimpleButton (“but1”, “SL”);
btn_4.width = “60px”;
btn_4.height = “60px”;
btn_4.left = “550px”; = “560”;
btn_4.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAlALIGNMENT_LEFT;
btn_4.verticalAlignment = BABYLON.GUI.Control.VERTICALALIGNMENT_TOP;
btn_4.color = “white”;
btn_4.cornerRadius = 20;
btn_4.background = “green”;
btn_4.onPointerUpObservable.add (function () {
sw_unit ();
advancedTxt.addControl (btn_4);

Does this playground work as expected?

when you manually specify
btn_4.left = “550px”; = “560”;

it will always be that many pixels from the top and left

1 Like

Yes, the playground works!
I fix the code >> {
btn_4.left = “550px”; = “560px”;

but the problem still I have also changed the 550px and 560px to 250 and 300 values lower and nothing.

I believe there is to be >>
window.addEventListener (‘DOMContentLoaded’, function () {
my scene is all inside this key and when I try it puts it in index.html. He does not find the engine.

in the Playground it is not necessary to capture the DOM.

I don’t think I understand. Can you create a jsfiddle that shows the issue?

Are you saying you want to aligned to the right side instead of the left or you want its position to be % based on the width?

1 Like

I have read the api of babylon and the problem is necessary to define >>
advancedTexture.idealHeight = 360;
advancedTexture.idealWidth = 640;
I read the documentation that she really addresses this;
I do not have a GUI.

so that it accompanies the rezie and works correctly! Thanks for answering xD.

1 Like