bio photo

Nifty can be used as a standalone GUI. So when your game enters its menu or option screens Nifty is all there is on the screen and all user input is handled by Nifty.

When using Nifty together with Slick2d this is represented by the NiftyGameState class. Using this class your Slick2d StateBasedGame can easliy switch from your in game state to the NiftyGameState and display the GUI.

But</strong> this is not the only way Nifty can be used. You can easily use Nifty to render your in-game GUI too! Nifty plays well with others (as long as they use OpenGL/lwjgl for rendering that is).</p>

It's not complicated at all and I wanted to write example code that demonstrates how easy it is for a long time. Motivated by a question at the Nifty Forum at souceforge.net</a> I did now :)</p>

What's demonstrated in the new slick example is, how you can use Nifty to render a GUI on top of a normal slick GameState.

Here is a screenshot of the example which renderes Text from within Slick that changes color when you press the keys 1-3. On top of this it renders a Nifty GUI that responds to mouse events. Additionally if you press 1-3 the colored Nifty boxes start to shake :D

[caption id="attachment_92" align="aligncenter" width="300" caption="Slick Overlay with Nifty GUI"]<img class="size-medium wp-image-92" title="Slick Overlay with Nifty GUI" src="http://nifty-gui.lessvoid.com/wp-content/2009/09/bildschirmfoto-2009-09-13-um-145515-300x225.png" alt="Slick Overlay with Nifty GUI" width="300" height="225" /></a>[/caption]</p>

You can try it out with the Webstart:

http://nifty-gui.sourceforge.net/webstart/nifty-slick-overlay-demo.jnlp</a></p>

and you can find the example in svn or you can browse it online here:

http://nifty-gui.svn.sourceforge.net/viewvc/nifty-gui/nifty-examples/trunk/src/main/java/de/lessvoid/nifty/examples/slick/niftyoverlay/</a> (Java classes)</p>

http://nifty-gui.svn.sourceforge.net/viewvc/nifty-gui/nifty-examples/trunk/src/main/resources/slick/niftyoverlay/overlay.xml?revision=534&view=markup</a> (Nifty XML for the Screen - overlay.xml)</p>

Keep reading the full Article to see the details on how we get this to work and what you need to consider.

The way it works is pretty easy and it even works with anything you've rendered in lwjgl. Slick is not required but as shown it works very well with Slick too.

So you just need to:

  1. Save your current OpenGL-State and enable 2d Mode</strong>
    You have to make sure you save your current OpenGL state and make sure you are in 2d "mode" before calling Nifty. Which means that everything is setup for 2d OpenGL rendering (orthogonal projection, modelview matrix aligned with the screen, etc. In Slick this is all handled by a single call to SlickCallable.enterSafeBlock(). This makes sure that the current Slick state is saved and changes in Slick or Nifty don't disturb each other (we're already in 2d mode too because of slick).</li></p>
  2. Call Nifty to render its GUI</strong>
    You call Nifty.render() to render the Nifty GUI. You can call render() with a boolean parameter that tells Nifty to clear the screen (parameter = true) or if it should not clear the screen at all (parameter = false). If you are rendering an overlay you probably want to leave the screen as is and render your GUI on top. So in this case simply call nifty.render(false).</li></p>
  3. Restore your State and continue your own Rendering</strong>
    When nifty.render() returns you can reset your state so that you can continue rendering 3d triangles or whatever you want to render on top (!) of Nifty GUI. Again in Slick this is a single SlickCallable.leaveSafeBlock() call.</li></p>
  4. Forward KeyEvents</strong>
    You decide if keyEvents get past through to Nifty by calling nifty.keyEvent() with the events you want that Nifty gets. If you don't call keyEvent() no key events will get to Nifty what might or might not be what you want.</li></p>
  5. Forward MouseEvents</strong>
    Handling mouse events are a bit trickier because they are handled through the InputSystem interface which you need to call the Nifty constructor with. But creating an implementation of the InputSystem is easy because at the moment it only consists of one method that Nifty uses to request a List of current available MouseEvents. So you're implementation can decide when and what mouse events get through to Nifty in the InputSystem-Implementation.</li>
    </ol>
    The example in nifty-examples svn demonstrates how to forward MouseEvents but does not care about keyboard Events.</p>

    And that's it! Nifty GUI playing together with others! Nifty! :D

    void