Resize does not work in GUI

Questions
1

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 …

2

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 https://www.babylonjs-playground.com/#3VMTI9#42 from the code you shared it looks like it should work to me

3

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”;
btn_4.top = “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);

4

Does this playground work as expected?
https://www.babylonjs-playground.com/#3VMTI9#44

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

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

1 Like
5

Yes, the playground works!
I fix the code >> {
btn_4.left = “550px”;
btn_4.top = “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.

6

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
7

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.
https://doc.babylonjs.com/how_to/gui

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

1 Like