Problem, only work last elemnt added to GUI

Hi for all, i have this situation :

createSeetingsGUIAndGo(){
    gb_ui_active="";
    menu_ui_main_menu.dispose();

    menu_ui_settings = new BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI_main_menu_settings", true, scenes[SC_LANGUAGE]);
    menu_ui_settings.thickness = 0;
    menu_ui_settings.uScale=1.0;

    //
    const imageRectangle = new BABYLON.GUI.Rectangle("mm_st_imageRectangle");
    
    imageRectangle.width = "380px"; // Ancho completo de la pantalla
    imageRectangle.height = "190px"; // Altura arbitraria
    imageRectangle.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
    imageRectangle.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
    imageRectangle.top = "20px";
    imageRectangle.thickness = 0;
    let _image = new BABYLON.GUI.Image("mm_image", "IMGS/logo_game_1b.png");
    
    
    _image.stretch = BABYLON.GUI.Image.STRETCH_FILL;
    _image.thickness = 0;
    imageRectangle.addControl(_image);

    const bgRectangle = new BABYLON.GUI.Rectangle("mm_bgRectangle");
    bgRectangle.width = "610px"; // Ancho completo de la pantalla
    bgRectangle.height = "509px"; // Altura arbitraria
    bgRectangle.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
    bgRectangle.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
    bgRectangle.top = "50px";
    bgRectangle.thickness = 0;

    let _image_bg = new BABYLON.GUI.Image("mm_image_bg", "IMGS/bg_menu.png");
   
    _image_bg.stretch = BABYLON.GUI.Image.STRETCH_FILL;
    _image_bg.thickness = 0;

    menu_ui_settings.addControl(imageRectangle);
    bgRectangle.addControl(_image_bg);
    menu_ui_settings.addControl(bgRectangle);


    let settings_title = new BABYLON.GUI.TextBlock("settings_title");
    settings_title.text = I18N.mm_btn_settings.toUpperCase();
    settings_title.color = COLORES_HEXA.Blanco;
    settings_title.fontFamily = "Digi";
    settings_title.fontSize = 16;
    settings_title.textHorizontalAlignment = BABYLON.GUI.TextBlock.HORIZONTAL_ALIGNMENT_CENTER;
    settings_title.textVerticalAlignment = BABYLON.GUI.TextBlock.VERTICAL_ALIGNMENT_CENTER;
    settings_title.top = "-50px";
    menu_ui_settings.addControl(settings_title);
    //slider de volumen musica

    let _texts = new BABYLON.GUI.TextBlock("st_ms_volume_txt");
    slider_music = new BABYLON.GUI.Slider("st_slider_vol_music",scenes[SC_LANGUAGE]);
    slider_music.minimum = 0;
    slider_music.maximum = 100;
    slider_music.isThumbClamped = false;
    slider_music.isVertical = false;
    slider_music.displayThumb = false;    
    slider_music.height = "22px";
    slider_music.width = "200px";          
    slider_music.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
    slider_music.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
    slider_music.top = "-20px";
    slider_music.left = "100px";
    slider_music.isThumbCircle = false;      
    slider_music.color = "#00ffff";
    slider_music.background = "#b5094e";
    slider_music.borderColor = "#ffffff";
    slider_music.value = 50;
    slider_music.onValueChangedObservable.add(function(_val) {
      console.log( "music volume", _val);
    });

    _texts.text = I18N.settings_music_volume;
    _texts.color = COLORES_HEXA.Turquesa;
    _texts.fontFamily = "Anta";
    _texts.fontSize = 14;
    _texts.textHorizontalAlignment = BABYLON.GUI.TextBlock.HORIZONTAL_ALIGNMENT_CENTER;
    _texts.textVerticalAlignment = BABYLON.GUI.TextBlock.VERTICAL_ALIGNMENT_CENTER;
    _texts.onPointerClickObservable.add((position, event) => {
      console.log( "click bg" );
      
    });    
    _texts.left = "-100px";
    _texts.top = "-20px";

    
    menu_ui_settings.addControl(_texts);
    menu_ui_settings.addControl(slider_music);
    // return;//return 1

    //slider de volumen de sonido
    let _textz = new BABYLON.GUI.TextBlock("st_snd_volume_txt");
    slider_sound = new BABYLON.GUI.Slider("st_slider_vol_sonido",scenes[SC_LANGUAGE]);
    slider_sound.minimum = 0;
    slider_sound.maximum = 100;
    slider_sound.isThumbClamped = false;
    slider_sound.isVertical = false;
    slider_sound.displayThumb = false;    
    slider_sound.height = "22px";
    slider_sound.width = "200px";          
    slider_sound.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
    slider_sound.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
    slider_sound.top = "10px";
    slider_sound.left = "100px";
    slider_sound.isThumbCircle = false;      
    slider_sound.color = "#00ffff";
    slider_sound.background = "#b5094e";
    slider_sound.borderColor = "#ffffff";
    slider_sound.value = 50;
    slider_sound.onValueChangedObservable.add(function(_val) {
      console.log( "sound volume", _val);
    });

    _textz.text = I18N.settings_sound_volume;
    _textz.color = COLORES_HEXA.Turquesa;
    _textz.fontFamily = "Anta";
    _textz.fontSize = 14;
    _textz.textHorizontalAlignment = BABYLON.GUI.TextBlock.HORIZONTAL_ALIGNMENT_CENTER;
    _textz.textVerticalAlignment = BABYLON.GUI.TextBlock.VERTICAL_ALIGNMENT_CENTER;
    _textz.top = "10px";
    _textz.left = "-100px";

    menu_ui_settings.addControl(_textz);
    menu_ui_settings.addControl(slider_sound);
    // return;//return 2

    //vibracion  
    let _textq = new BABYLON.GUI.TextBlock("st_vibration_txt");
    _textq.text = I18N.settings_vibration;
    _textq.color = COLORES_HEXA.Turquesa;
    _textq.fontFamily = "Anta";
    _textq.fontSize = 14;
    _textq.textHorizontalAlignment = BABYLON.GUI.TextBlock.HORIZONTAL_ALIGNMENT_CENTER;
    _textq.textVerticalAlignment = BABYLON.GUI.TextBlock.VERTICAL_ALIGNMENT_CENTER;
    _textq.top = "40px";
    _textq.left = "-100px";
      
    check_vibration = new BABYLON.GUI.Checkbox("st_check_vibration");
    check_vibration.width = "18px";
    check_vibration.height = "18px";
    check_vibration.isChecked = true;
    check_vibration.color = COLORES_HEXA.Turquesa;
    check_vibration.textHorizontalAlignment = BABYLON.GUI.TextBlock.HORIZONTAL_ALIGNMENT_CENTER;
    check_vibration.textVerticalAlignment = BABYLON.GUI.TextBlock.VERTICAL_ALIGNMENT_CENTER;
    check_vibration.top = "40px";
    check_vibration.left = "10px";
    check_vibration.onIsCheckedChangedObservable.add(function(value) {
      console.log( "vibracion ",value);
    });

    menu_ui_settings.addControl(_textq);
    menu_ui_settings.addControl(check_vibration);

    //seleccion de lenguaje
    let _textw = new BABYLON.GUI.TextBlock("st_lang_sel_txt");
    _textw.text = I18N.generic_language;
    _textw.color = COLORES_HEXA.Blanco;
    _textw.fontFamily = "Anta";
    _textw.fontSize = 14;
    _textw.textHorizontalAlignment = BABYLON.GUI.TextBlock.HORIZONTAL_ALIGNMENT_CENTER;
    _textw.textVerticalAlignment = BABYLON.GUI.TextBlock.VERTICAL_ALIGNMENT_CENTER;
    _textw.top = "70px";
    _textw.left = "0px";

    lang_text_choosen = new BABYLON.GUI.TextBlock("st_lang_sel_txt");
    lang_text_choosen.text = utils.languages[utils.lang_index[active_lang]];
    lang_text_choosen.color = COLORES_HEXA.Turquesa;
    lang_text_choosen.fontFamily = "Anta";
    lang_text_choosen.fontSize = 14;
    lang_text_choosen.textHorizontalAlignment = BABYLON.GUI.TextBlock.HORIZONTAL_ALIGNMENT_CENTER;
    lang_text_choosen.textVerticalAlignment = BABYLON.GUI.TextBlock.VERTICAL_ALIGNMENT_CENTER;
    lang_text_choosen.top = "0px";
    lang_text_choosen.left = "0px";

    let rect_lang = new BABYLON.GUI.Rectangle();
    rect_lang.width = "160px";
    rect_lang.height = "30px";
    rect_lang.cornerRadius = 0;
    rect_lang.color = COLORES_HEXA.Turquesa;
    rect_lang.thickness = 2;
    rect_lang.background = "transparent";
    rect_lang.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
    rect_lang.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
    rect_lang.top = "100px";
    rect_lang.addControl(lang_text_choosen);

    let _next_lang = BABYLON.GUI.Button.CreateImageOnlyButton("but", "IMGS/option_next.png",scenes[SC_LANGUAGE]);
    _next_lang.width = "50px";
    _next_lang.height = "50px";
    _next_lang.color = "white";
    _next_lang.background = "transparent";
    _next_lang.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
    _next_lang.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
    _next_lang.top = "100px";
    _next_lang.left = "105px";
    _next_lang.thickness = 0;
    _next_lang.onPointerClickObservable.add(function (position, event) {
      game.setLanguage(1);    
    });

    let _back_lang = BABYLON.GUI.Button.CreateImageOnlyButton("but", "IMGS/option_back.png",scenes[SC_LANGUAGE]);
    _back_lang.width = "50px";
    _back_lang.height = "50px";
    _back_lang.color = "white";
    _back_lang.background = "transparent";
    _back_lang.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
    _back_lang.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
    _back_lang.top = "100px";
    _back_lang.left = "-105px";
    _back_lang.thickness = 0;
    _back_lang.onPointerClickObservable.add(function (position, event) {
      // console.log( "a back lang" );
      game.setLanguage(-1);
    });

    //botones de lang
    menu_ui_settings.addControl(_textw);
    menu_ui_settings.addControl(rect_lang);
    menu_ui_settings.addControl(_next_lang);
    menu_ui_settings.addControl(_back_lang);
    // return;//return 4
    //boton volver al menu desde settings
    let _btn_to_menu = BABYLON.GUI.Button.CreateImageWithCenterTextButton('btn_fr_sett_to_menu', I18N.generic_return_menu, "IMGS/button_selected.png");
    _btn_to_menu.width = "160px";
    _btn_to_menu.height = "32px";
    _btn_to_menu.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
    _btn_to_menu.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;    
    _btn_to_menu.top = "160px";
    _btn_to_menu.thickness = 0;
    _btn_to_menu.color = "white";
    _btn_to_menu.fontFamily = "Digi";
    _btn_to_menu.isVisible=true;
    _btn_to_menu.fontSize = 12;
    _btn_to_menu.onPointerClickObservable.add(function (position, event) {
      console.log( "al menu desde settings" );
      // menu_ui_settings_buttons.isVisible = false;
      // menu_ui_main_buttons.isVisible = true;
    });

    menu_ui_settings.addControl(_btn_to_menu);
    gb_ui_active = SC_SETTINGS;
    console.log( "active ui es ", gb_ui_active);
  }//end ui settings creation

cc @RaananW

As always, a reproduction would be very helpful. It’s quite hard saying what is wrong by just looking at code, especially when the entire context of the running function is not there. A playground showing the issue is the best way to help us help you.

Sorry, appears zIndex problem… i solved it with grid…

1 Like