AdvancedDynamicTexture disappears when adding styles to canvas

Bugs
1

Hello,
I am trying to add text to my mesh following this PG https://www.babylonjs-playground.com/#XCPP9Y#16 and everything works, but when I add styles width and height 100% to the canvas the text disappears.

Anyhow solvable or add styles to the AdvancedDynamicTexture?

2

Hey do you have the example of the playground not working. Not entirely sure what you are doing and want some clarification.

1 Like
3

The canvas have a size of 600x400 pixels, when I add CSS styles to fit the whole screen (100% width and height) the AdvancedDynamicTexture behaves different, I don’t know how I can reproduce that in the playground.
Here you can see how it should work but currently only in the small canvas without resizing it.
The text is linked to the black sphere.
1

Applying 33% width and height styles to the canvas shifts the text away depending how far its gone from the camera.
2

Closer to the camera
3

4

Ok! Without seeing any of the code here are a couple of my suggestions…

  1. Make sure all of your GUIS are in %
  2. There are some settings you can do with the camera to account for screen size adjusting.
    Cameras | Babylon.js Documentation
  3. There is a setting on advance texture idealWidth/idealHeight you can set. This works best when I’m using a playground and I want the UI to shrink and grow with the camera.
1 Like
5

Maybe to add:
It shouldn’t act as a gui, just a label of a player/mesh with the name of it under the mesh.
Without resizing the canvas the text just follows the mesh and stays always below it without any shifting. After the resize all the shifting happens.
I just can not understand why this happens.

6

Ok I had to set the idealHeight and idealWidth of the whole AdvancedDynamicTexture to the screen size, thought that would happen automatically.

Thank you for the help!

1 Like