Nifty Tutorial? (also unable to get out of Nifty interface)

Any chance we can get an example tutorial like in the “HelloTutorial” series for Nifty GUI? I found that when provided with the code for a full implementation of the stuff very helpful in understand how all the components fit together. On that note, I’ve been struggling to get some of the elements of the nifty GUI to work together and have been unsuccessful with yet other elements.



Here’s basically what I have so far…



in Main.java:



[java]

import com.jme3.niftygui.NiftyJmeDisplay;

import de.lessvoid.nifty.Nifty;

import mygame.MainGameScreen;



public class Main extends SimpleBulletApplication {



public static void main(String[] args) {

Main app = new Main();

app.setPauseOnLostFocus(false);

app.start();

}



public int gameState = 0;

public Nifty nifty;



@Override

public void simpleInitApp() {



if (gameState == 0) {

loadStartScreen();

}

}



public void loadStartScreen() {

NiftyJmeDisplay niftyDisplay = new NiftyJmeDisplay(assetManager, inputManager, audioRenderer, guiViewPort);

nifty = niftyDisplay.getNifty();



nifty.fromXml(“assets/Interface/startscreen.xml”, “start”);



// attach the nifty display to the gui view port as a processor

guiViewPort.addProcessor(niftyDisplay);



// disable the fly cam

flyCam.setEnabled(false);



}

}

[/java]



in MainGameScreen.java:



[java]

package mygame;



import com.jme3.niftygui.NiftyJmeDisplay;

import de.lessvoid.nifty.Nifty;

import de.lessvoid.nifty.screen.Screen;

import de.lessvoid.nifty.screen.ScreenController;

import mygame.Main;



public class MainGameScreen extends Main implements ScreenController {



public void bind(Nifty nifty, Screen screen) {



}



public void onStartScreen() { }



public void onEndScreen() { }



public void quit() {

nifty.exit();

gameState = 1;

simpleInitApp();

}

}



[/java]



in the XML file:



[xml]

<?xml version=“1.0” encoding=“UTF-8”?>

<nifty>

<screen id=“start” controller=“mygame.MainGameScreen”>



<layer id=“mainLayer” backgroundImage = “Interface/mainscreen.png” childLayout=“vertical”>



<panel id=“SPACER” backgroundColor="#0000" height=“50%” width=“100%” align=“center” childLayout=“center” visibleToMouse=“false”>

</panel>



<panel id=“SPACER2” height=“8%” width=“100%” align=“center” backgroundColor="#0000" childLayout=“center” visibleToMouse=“false”>

</panel>



<panel id=“gameStart” height=“10%” width=“25%” align=“center” backgroundColor="#BBBF" childLayout=“center” visibleToMouse=“true”>

<interact onClick=“quit()”/>

<effect>

<onStartScreen name=“move” mode=“in” direction=“top” length=“300” startDelay=“0” inherit=“true”/>

<onActive name=“border” color="#2F2F2FFF" border=“5px” />

<onEndScreen name=“move” mode=“out” direction=“bottom” length=“300” startDelay=“0” inherit=“true”/>

<onHover name=“pulsate” scaleFactor=“0.008” startColor="#EE7F" endColor="#EE7F" post=“true”/>

</effect>

<text id=“text” font=“aurulent-sans-17.fnt” color="#000F" text=“Start Game” align=“center” valign=“center” />

</panel>



<panel id=“SPACER3” height=“3%” width=“100%” align=“center” backgroundColor="#0000" childLayout=“center” visibleToMouse=“false”>

</panel>



<panel id=“gameOptions” height=“10%” width=“25%” align=“center” backgroundColor="#BBBF" childLayout=“center” visibleToMouse=“true”>

<interact onClick=“quit()”/>

<effect>

<onStartScreen name=“move” mode=“in” direction=“top” length=“300” startDelay=“0” inherit=“true”/>

<onActive name=“border” color="#2F2F2FFF" border=“5px” />

<onEndScreen name=“move” mode=“out” direction=“bottom” length=“300” startDelay=“0” inherit=“true”/>

<onHover name=“pulsate” scaleFactor=“0.008” startColor="#EE7F" endColor="#EE7F" post=“true”/>

</effect>

<text id=“text” font=“aurulent-sans-17.fnt” color="#000F" text=“Options” align=“center” valign=“center” />

</panel>



<panel id=“SPACER4” height=“3%” width=“100%” align=“center” backgroundColor="#0000" childLayout=“center” visibleToMouse=“false”>

</panel>



<panel id=“gameExit” height=“10%” width=“25%” align=“center” backgroundColor="#BBBF" childLayout=“center” visibleToMouse=“true”>

<interact onClick=“quit()”/>

<effect>

<onStartScreen name=“move” mode=“in” direction=“top” length=“300” startDelay=“0” inherit=“true”/>

<onActive name=“border” color="#2F2F2FFF" border=“5px” />

<onEndScreen name=“move” mode=“out” direction=“bottom” length=“300” startDelay=“0” inherit=“true”/>

<onHover name=“pulsate” scaleFactor=“0.008” startColor="#EE7F" endColor="#EE7F" post=“true”/>

</effect>

<text id=“text” font=“aurulent-sans-17.fnt” color="#000F" text=“Exit Game” align=“center” valign=“center” />

</panel>



</layer>



</screen>

</nifty>



[/xml]







I have the screen loading up okay w/ the buttons appearing, but I am currently unable to make them call a method to do anything. Any suggestions?

What do you mean by “unable to make them call a method to do anything”? The “quit()” method is not called or is it?



If that is the complete source code then could it be that nifty is null in your quit() method?



And I’d like to do a specific JME3 tutorial with Nifty - something like an ego shooter with Nifty rendering the in game HUD GUI :smiley: but so far, I’ve not yet found anybody that contributes the ego shooter part :wink:

Feel free to use and extend these:

https://wiki.jmonkeyengine.org/legacy/doku.php/jme3:advanced:nifty_gui

https://wiki.jmonkeyengine.org/legacy/doku.php/jme3:advanced:hud

Yes, somewhere in “warnings” when I click on the buttons, there is a “null” stated somewhere. I’m not sure how to fix that though. The quit() method is called when any of the 3 buttons are clicked via the "interact onClick=“quit()” "



Thanks for the links Normen, but those are the ones I’ve been referring to in order to get as far as I have, I’m just kinda stuck now. Ideally a fully working sample w/ code would be provided so that users can see how a full implementation of the Nifty GUI should be constructed. (like in the HelloTutorial series) (void, even just a simple button that calls a method and switches to a new screen and/or changes something in the main game would do wonders)

You never bind the nifty variable so its null I guess:

[java]

public void bind(Nifty nifty, Screen screen) {

this.nifty=nifty;

}

[/java]

1 Like

Yup, that totally did the trick. Thanks Normen. Maybe add that note to the tutorial somewhere. What does that code actually do though? It seems kind of redundant with the way it looks.



Also, can one call simpleInitApp() in a function to have it go through everything again? (I’m trying to set up the game so there are different game “states” for initial UI, main game, etc. and then just calling the simpleInitApp() again w/ if (gameState = 0,1, etc.) to progress the game from one state to another) Right now this doesn’t seem to be working after I exit the nifty. Is it bad to call the simpleInitApp() function? Is there a better way to break up the game and initialize the different game states?

The code sets the variable “nifty” to the current nifty object so you can use it when quit() is called. Before the controller is bound to a nifty object, how should it know which one its gonna be? Since that happens in the bind method you have to save the variable, its null by default… If you really dont see what this code does per se then you should really brush up your java skills.

About the “states”, you should do that with an AppState: http://hub.jmonkeyengine.org/groups/general-2/forum/topic/clearing-a-scene/

I agree more tutorial coverage is needed, I simply haven’t gotten to finishing it yet, don’t worry. I’m working out the best workflow myself first. Nifty feels very powerful, but the XML gives me nightmares. :wink:



@Void256: Is there, for example, a way to add padding or spacing to a panel?

not any I’m aware of :wink:


10px border on top, bottom, left, right

padding=“10px”


10px top and bottom, 20px left and right

padding=“10px,20px”


10px top, left and right 20px, bottom 30px

padding=“10px,20px,30px”


18px top, 28px right, 40px bottom, 16px left

padding=“18px,28px,40px,16px”



nifty padding is applied to the inside of the element (it’s not like margin in html/css - which is not supported in nifty right now)

Thanks, the padding works. I could have sworn I tried that. Sometimes I’m changing tags and nothing happens and I don’t know why. (That’s what I meant with nightmares.) :wink:

Maybe you dont save the file when you do the changes? The NiftyGUI preview loads the file from disk, so it has to be saved.

Thanks for the tips Normen. Yeah, this game is the first sort of project I’ve done in Java and I’ve only really programmed a few things in other languages so I apologize if some of my questions are based on standard Java things that aren’t part of the engine. Being new to both, the difference between jME code and Java can be difficult for me to spot at times.



Also, I’m almost out of the woods with the Nifty GUI stumbling blocks. :slight_smile:



I can start my game now and move around, but the cursor remains on the screen and the degree to which the movement of the mouse affects the camera’s view on the screen has been diminished.



This is the function that I’m using to create the nifty screen and it is called in simpleInitApp().

[java]

public void loadGameScreen() {

niftyDisplay = new NiftyJmeDisplay(assetManager, inputManager, audioRenderer, guiViewPort);

nifty = niftyDisplay.getNifty();



nifty.fromXml(“assets/Interface/startscreen.xml”, “start”);



// attach the nifty display to the gui view port as a processor

guiViewPort.addProcessor(niftyDisplay);



// disable the fly cam

flyCam.setEnabled(false);



}

[/java]



This is the function that is called when I want to start up the actual game:

[java]

public void newGame() {

nifty.exit();

//guiViewPort.removeProcessor(niftyDisplay);

rootNode.detachAllChildren();

app.loadMainGame();

}

[/java]



And then I enable the flycam and update my gameState variable (so the stuff in simpleUpdate() starts to run, i.e. the cam direction and player walk-direction stuff for a 1st person view) and call the rest of my game functions:

[java]

public void loadMainGame() {

flyCam.setEnabled(true);

gameState = 1;



bulletAppState = new BulletAppState();

bulletAppState.setThreadingType(BulletAppState.ThreadingType.PARALLEL);

stateManager.attach(bulletAppState);



setupKeys();

setupPlayer();



/** Initialize the scene */

//initAudio();

initMaterials();

initTerrain();

initWall();

initCrossHairs();

initSky();

}

[/java]





I’ve tried removing the guiViewPort processor in the method call that exits Nifty, but that seems to crash the game. :S Is there something else I should be removing/adding to get back to the initial 1st person view w/out the cursor that I usually had without the NiftyGUI?

Yup, as I suspected, I was missing a simple line of code somewhere.



[java] mouseInput.setCursorVisible(false);[/java]



Need that to disable the mouse cursor when ready to start the actual game. Everything works great now. :slight_smile: