FengGUI Button shows beneath my background Quad

Troubleshooting gui
1

Hi all,



First, great work on both the engine and the documentation. Both are really accessible and understandable.



However, (of course :slight_smile: ) is post here because I have a little problem with my GUI. Basically, I want a main menu on startup of the game that shows a nice background and some GUI controls. I use FengGUI for this (since writing my own handling of textboxes, labels, butoons, etc. seems double work) and it does work (it shows a simple button on my main menu). This looks like:



The code is all inside a GameState (I use CameraGameState) and called from my BaseGame extended game class. The button on the menu shown here is created using (called form the game state constructor):



      // Create FengGUI display and handling
      gui = new org.fenggui.Display(new org.fenggui.render.lwjgl.LWJGLBinding());
      input = new FengJMEInputHandler(gui);
      
      // Set up menu labels
      org.fenggui.Button btnStart = new org.fenggui.Button("Start new game");
      gui.addWidget(btnStart);
      btnStart.setSize(100, 50);
      btnStart.setXY(50, 100);
      
      btnStart.addButtonPressedListener(new IButtonPressedListener() {
         public void buttonPressed(ButtonPressedEvent evt) {
            // newGames() sets up players, environment and show the human player's shop
            CreatureGame.instance.newGame();
            CreatureGame.instance.getStates().getChild("mainMenu").setActive(false);
         }
      });
      
      gui.layout();
      


And the GUI is rendered in my stateRender of the gamestate:


   @Override
   protected void stateRender(float tpf) {
      gui.display();
   }



The problem is it shows up beneath my main menu's background image when I turn this on! The background image is a (and this might better be done otherwise, but I'm not sure) Quad with a texture. This looks like:

The background is created using (called form the game state constructor):


      Node backNode = new Node("backNode");

      Quad back = new Quad("mainMenuBack", display.getWidth(), display.getHeight());
      back.setRenderQueueMode(Renderer.QUEUE_ORTHO);
      back.setLocalTranslation(display.getWidth() / 2, display.getHeight() / 2, 0);
      back.setLightCombineMode(LightState.OFF);
      back.updateRenderState();

      TextureState ts = display.getRenderer().createTextureState();
      ts.setTexture(TextureManager.loadTexture(
            this.getClass().getClassLoader().getResource("nl/ekok/data/mainMenu.png"),
            Texture.MM_LINEAR, Texture.FM_LINEAR, 1.0f, true));
      ts.setEnabled(true);
      back.setRenderState(ts);
      backNode.attachChild(back);

      rootNode.attachChild(backNode);



Of course I want the button to appear on top of my Quad (background).

I am a total newbie with jMonkeyEngine (though not with java luckily), so it's probably me missing something stupid... Thanks in advance for any help!
2

How did you solve this?

3

When I played around with FengGUI some months ago, the regular advice with GUI being behind stuff, was to add the GUI gamestate to the GameStateManager LAST, after other gamestates.

4

I'm not separating my GUI into a game state though… what would be the advantage of that?

5

if you have your gui in a gamestate, you can easily enable / disable it.

GameStates can also help you to structure your code better.

6

I do use gamestates… just not for my GUI. I'll consider it, though.

7

There is a tutorial on this somewhere in the wiki… You have to make sure everything is rendered and the ZBuffer cleared (Renderer.renderQueue() + Renderer.clearZBuffer()) before you call desk.display() on the FengGUI Display object.