Babylonjs use two layer one for background and one for title in center

Questions
1

Is it possible to positioning the second layer in babylonjs.
scenario is:
first layer is used for full background
And second one is use as title at center top
can i do it like that???

how can i positioning the second layer???

2

You could use the GUI features.

See The Babylon GUI | Babylon.js Documentation (babylonjs.com)

and here’s a playground example:
Text GUI | Babylon.js Playground (babylonjs.com)

1 Like
3

yes i did it to put layer 2 image as a title. But is there any parameter to give some margin from top because it put it at the in header level i need somewhere at middle not exact center just margin or gap from the top.
here is my code.

  const advancedTexture =
    new BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("myUI");

  let image = new BABYLON.GUI.Image(
    "layer",
    "assets/img/textures/layerText.png"
  );
  image.width = 0.2;
  image.height = 0.2;
  image.populateNinePatchSlicesFromImage = true;
  image.stretch = BABYLON.GUI.Image.STRETCH_NONE;
  image.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
  advancedTexture.addControl(image, 0, 0);
4

Ok, cool. Can you make a playground at https://playground.babylonjs.com showing what you have done so far? It will make it easier for me to provide an answer.

Thanks!

5

Hi @docEdub , thank for your reply to suggest the layer ui image.
I found the solution there is value for desing
padding
top
and other parameter to change the postions

function loadTitleTextUI() {
  // adding the titel ui
  const advancedTexture =
    new BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("myUI");

  let image = new BABYLON.GUI.Image(
    "layer",
    "assets/img/textures/layerText.png",
    true
  );
  image.width = 0.35;
  image.height = 0.28;
  image.stretch = BABYLON.GUI.Image.STRETCH_UNIFORM;
  image.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
  // image.top = '-20%'
  image.paddingTop = 50

  advancedTexture.addControl(image);
}