Show or hidde button, impossible

i need show or hide a button but it not happens:

Button creation code :

store_btn_accept = BABYLON.GUI.Button.CreateImageWithCenterTextButton('btn_store_accept', I18N.generic_accept, "IMGS/button_next.png");
    store_btn_accept.width = "180px";
    store_btn_accept.height = "50px";
    store_btn_accept.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_BOTTOM;
    store_btn_accept.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;    
    store_btn_accept.top = "-100px";
    store_btn_accept.thickness = 0;
    store_btn_accept.color = "white";
    store_btn_accept.fontFamily = "Digi";
    store_btn_accept.isVisible=true;
    store_btn_accept.fontSize = 15;

    store_btn_accept.onPointerClickObservable.add(function (position, event) {
      // console.log(event.target.name);
      // store_btn_accept.isVisible=false;
    });

function to set :

inventarySetTurret(_turret){
    active_turret_data.loaded=true;
    // console.log( "a poner turret ", _turret);
    
    //esta habilitada ?
    let _avail = 0;
    if (turrets_enabled[_turret] == 1) {
      //esta activa
      store_icon_block.alpha=0.0;
      // active_turret_data.mesh.material.alpha=1.0;
      store_btn_accept.isVisible=true;
      // store_btn_accept.alpha=1.0;
      // store_btn_accept.isEnabled = true;
      store_ui.addControl(store_btn_accept);
      _avail = 1;
    }else{
      //no esta activa , it's unable
      store_icon_block.alpha=1.0;
	//HERE I TRIED TO HIDE IT
      // store_btn_accept.isVisible=false;
      // store_btn_accept.alpha=0.0;
      // store_btn_accept.isEnabled = false;      
      // store_ui.removeControl(store_btn_accept);
    }

    game.showTurretPanel(_avail);
    
    
  }//fin de inventary Set Turret


Hello,

It’s hard to help, out of context. Did you log turrets_enabled[_turret] to make sure that your code hiding the button is called ? Can you reproduce the issue in a Playground ?

++
Tricotou

Here is the example - https://playground.babylonjs.com/#JELD75#1
Right click on the ground restores the button visibility if hidden.

2 Likes

i tried :
store_btn_accept.isVisible=false;
store_btn_accept.alpha=0.0;
store_btn_accept.isEnabled = false;
store_ui.removeControl(store_btn_accept);//remove from UI

one by one obviously

call for “next turret” :

store_next_turret = BABYLON.GUI.Button.CreateImageOnlyButton("but", "IMGS/option_next.png",scenes[SC_STORE]);
    store_next_turret.width = "72px";
    store_next_turret.height = "72px";
    store_next_turret.color = "white";
    store_next_turret.background = "transparent";
    store_next_turret.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
    store_next_turret.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
    store_next_turret.left = "200px";
    store_next_turret.thickness = 0;
    store_next_turret.onPointerClickObservable.add(function (position, event) {
      if( active_scene == SC_STORE ){
        if( !game.working ){
          game.nextTurret();
        }        
        store_next_turret.isEnabled = false;
      }
     
     
    });

game next turret method (i not apply the turret restriction yet)

nextTurret(){
    let _act = player.turret;
    _act+=1;
    if( _act == 8 )_act = 9;
    if( _act > 9 )_act = 1;

    console.log( "new turret es ", _act,", escena activa ",active_scene);
    player.setTurret(_act);
    player.setMesh();
    gameplay_camera.setTarget(player.mesh.position);
    Bullet.setTypeBullet();
    active_turret = player.turret;

    if( active_scene == SC_STORE ){
      game.inventarySetTurret(player.turret);
    }
  }//end of next turret 

I would advice to debug your code with the console.
This example is working - https://playground.babylonjs.com/#JELD75#1

2 Likes

i have thousans of line codes in different files…

the unique difference is that i am not using “scene.onPointerPick”… but

I have multiple scenes…

As @labris kindly advised, I would indeed advise to debug your code step by step. Maybe your reference to store_btn_accept is lost. Also, I see that your logs is written 4 times in console, are you clicking only once ? Because if one click triggers 4 logs, you might have some doubles (either multiple GUIs instead of only one (depending on your scene structure), or multiple instance of the button at the same place, or something like this, etc…)

++
Tricotou

1 Like

@bitmo_games I totally get how frustrated it can be and I agree that without seeing the rest of your code (we all love your space intruder initiave) it looks like a bug.

Unfortunately we have no way to repro and just changing isVisible or anything works correctly in our cases,

So as @Tricotou mentioned the reference might have change or something else is making it visible again.

You could try to log store_btn_accept and maybe change other properties like font size to unvalidate some possibilities. Also I d suggest to change the color for instance, in the main code and the callback.

oh no, i made click 4 times

good advice… thx

Solved:

this method wass calling 2 times (error in store_total_sources variable).

createStoreUI(){
    console.log( "primer store ui" );
    store_ui = new BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("STORE_main_menu", true, scenes[SC_STORE]);
    store_ui.thickness = 0;

    let store_title = new BABYLON.GUI.TextBlock("store_title");
    store_title.text = I18N.store_title;
    store_title.color = "white";
    store_title.fontFamily = "Digi";
    store_title.fontSize = UI_TITLES_SIZE;
    store_title.textHorizontalAlignment = BABYLON.GUI.TextBlock.HORIZONTAL_ALIGNMENT_CENTER;
    store_title.textVerticalAlignment = BABYLON.GUI.TextBlock.VERTICAL_ALIGNMENT_TOP;
    store_title.top = "20px";

    //botones de cambio de torreta
    store_next_turret = BABYLON.GUI.Button.CreateImageOnlyButton("but", "IMGS/option_next.png",scenes[SC_STORE]);
    store_next_turret.width = "72px";
    store_next_turret.height = "72px";
    store_next_turret.color = "white";
    store_next_turret.background = "transparent";
    store_next_turret.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
    store_next_turret.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
    store_next_turret.left = "200px";
    store_next_turret.thickness = 0;    
    store_next_turret.onPointerClickObservable.add(function (position, event) {
      if( active_scene == SC_STORE ){
        if( !game.working ){
          game.nextTurret();
        }        
        store_next_turret.isEnabled = false;
      }
     
     
    });


    store_back_turret = BABYLON.GUI.Button.CreateImageOnlyButton("but", "IMGS/option_back.png",scenes[SC_STORE]);
    store_back_turret.width = "72px";
    store_back_turret.height = "72px";
    store_back_turret.color = "white";
    store_back_turret.background = "transparent";
    store_back_turret.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
    store_back_turret.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
    store_back_turret.left = "-200px";
    store_back_turret.thickness = 0;
    store_back_turret.onPointerClickObservable.add(function (position, event) {
      if( active_scene == SC_STORE ){
        
        if( !game.working ){
          game.lastTurret();
        }
        store_back_turret.isEnabled = false;
      }
      
    });
    
    //aceptar, blockeada y volver
    store_icon_block = new BABYLON.GUI.Image("t_block", "IMGS/block_icon.png",scenes[SC_STORE]);
    store_icon_block.width = "64px";
    store_icon_block.height = "64px";
    store_icon_block.populateNinePatchSlicesFromImage = true;
    store_icon_block.stretch = BABYLON.GUI.Image.STRETCH_NINE_PATCH;
    store_icon_block.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
    store_icon_block.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
    store_icon_block.top = "-150px";
    store_icon_block.alpha=0.0;

    //aceptar 
    store_btn_accept = BABYLON.GUI.Button.CreateImageWithCenterTextButton('btn_store_accept', I18N.generic_accept, "IMGS/button_next.png",scenes[SC_STORE]);
    store_btn_accept.width = "180px";
    store_btn_accept.height = "50px";
    store_btn_accept.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_BOTTOM;
    store_btn_accept.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;    
    store_btn_accept.top = "-100px";
    
    store_btn_accept.thickness = 0;
    store_btn_accept.color = "white";
    store_btn_accept.fontFamily = "Anta";
    // store_btn_accept.isVisible=true;
    store_btn_accept.fontSize = 15;

    console.log( "store btn a" );
    console.log( store_btn_accept );

    store_btn_accept.onPointerClickObservable.add(function (position, event) {
      // console.log("jueputa",event.target.name);
      store_btn_accept.isVisible=false;
      // store_btn_use_turret.top="-200px";
      // store_ui.removeControl(store_btn_use_turret);
      
    });
    
    //return to menu 
    let _btn_to_menu = BABYLON.GUI.Button.CreateImageWithCenterTextButton('btn_store_menu', I18N.generic_return_menu, "IMGS/button_next.png");
    _btn_to_menu.width = "180px";
    _btn_to_menu.height = "50px";
    _btn_to_menu.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_BOTTOM;
    _btn_to_menu.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;    
    _btn_to_menu.top = "-50px";
    _btn_to_menu.thickness = 0;
    _btn_to_menu.color = "white";
    _btn_to_menu.fontFamily = "Digi";
    _btn_to_menu.isVisible=true;
    _btn_to_menu.fontSize = 15;
    _btn_to_menu.onPointerClickObservable.add(function (position, event) {
      // console.log(event.target.name);
      _btn_to_menu.isVisible=false;

    });

    //stats turret 
    gb_stats_panel = new BABYLON.GUI.Rectangle();
    gb_stats_panel.background = "black";
    gb_stats_panel.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
    gb_stats_panel.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT;  
    gb_stats_panel.width = "250px";
    gb_stats_panel.height = "220px";
    gb_stats_panel.left = "-200px";
    gb_stats_panel.color = COLORES_HEXA.Turquesa;
    gb_stats_panel.thickness = 1;

    store_ui.addControl(store_title);
    store_ui.addControl(store_next_turret);
    store_ui.addControl(store_back_turret);
    store_ui.addControl(store_icon_block);
    store_ui.addControl(store_btn_accept);
    store_ui.addControl(_btn_to_menu);
    
    gb_ui_active = SC_STORE;
    // console.log( "a crear UI de store", gb_ui_active);
  }//end of create store UI
    

the strange is, only the button “store_btn_accept” was created 2 times.

3 Likes

thanks for everyone it is working :

i have other problem, only if someone knows this:

i am using this font:

but the text not centered correctly in buttons (in the video you can see that)

Let s add @RaananW for the centered text in case he has an idea

1 Like

would you be able to reproduce this on the playground? a simple text object with this font? would be a great help to be able to help :slight_smile:

Hi, please see :

This is because the font is loaded after the GUI has initialized, so the size of the text is incorrectly calculated. A simple way of solving this would be to call engine.resize() after you are sure the font is loaded. You can also do something like this:

butons bad font2 | Babylon.js Playground (babylonjs.com)

Which should work on all browsers.

1 Like

Hi, with engine.resize() not works, but adding asynchronous works fine.

2 Likes