Creating User Interfaces with Nifty GUI

You may want your players to press a button to save a game, you want a scrolling text field for highscores, a text label to display the score, drop-downs to select keymap preferences, or checkboxes to specify multi-media options. Usually you solve these tasks by using Swing controls. Although it is possible to embed a jME3 canvas in a Swing GUI, a 3D game typically runs full-screen, or in a window of its own.

This document introduces you to , a Java library for building interactive graphical user interfaces (GUIs) for games or similar applications. Nifty GUI (the de.lessvoid.nifty package) is well integrated with jME3 through the com.jme3.niftygui package. You define the base GUI layout in XML, and control it dynamically from your Java code. The necessary JAR libraries are included in your jME3 download, you do not need to install anything extra. (Just make sure they are on the classpath.)

Overview

To add a Nifty GUI to your jME3 game:

  1. Understand the Nifty GUI Concepts described on this page.
  2. Lay out your graphical user interface:
  3. Integrate the GUI into the game:
  4. Interact with the GUI from Java

Nifty GUI Concepts

Nifty GUIs are made up of the following elements:

General usage tips about elements:

Some Pro Tips...

XML or Java? Both!

The XML and Java syntax are equivalent, so is it an either-or choice? Not quite. We recommend to use XML to lay out the static parts of the GUI. Then use Java syntax to control the dynamic parts of the GUI at runtime.

Activate Debug Highlighting

During development (and during this tutorial), the following debug code makes all panels visible. This helps you arrange them and find errors.

nifty.setDebugOptionPanelColors(true);

Before the release, and for testing, set it to false again.

Use the jMonkeyEngine SDK

The SDK includes an XML editor and previewer for Nifty GUI files. Open an XML file, and switch between XML and Preview mode.

Use XML Schema

Include the following XML schema in the first line of your NiftyGUI XML files and your IDE gives you hints and code completion.

<?xml version="1.0" encoding="UTF-8"?>
<nifty xmlns="http://nifty-gui.sourceforge.net/nifty-1.3.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://nifty-gui.sourceforge.net/nifty-1.3.xsd http://nifty-gui.sourceforge.net/nifty-1.3.xsd">
     <!-- Your IDE now tells you that one <screen></screen> element is expected here, etc. -->
</nifty>

JME-Nifty Sample Code

External Documentation

Learn more from the NiftyGUI page!

Next Steps

Next, learn how to lay out your graphical user interface. Typically, you start with XML.

gui, documentation, nifty, hud

view online version