Initializing Nifty and managing an options menu

To start things off, let's begin with a simple recipe that will provide us with the basics of setting up the application to use Nifty GUI and tell us how to manage the options menu. An options menu is usually found in games; it acts as a link between different screens. For this reason, it's suitable to create it using the control pattern so it can be easily handled across screens.

We'll initialize Nifty GUI inside AppState to offset it from the main application code and then access the application from Nifty and control Nifty through code.

Getting ready

Let's look at how to initialize Nifty in an application. We start off by defining a new AppState to handle our Nifty functions. We can call it NiftyAppState and have it extend AbstractAppState.

In the initialize method, we need to create the Nifty display with the following line of code, giving Nifty access to various functionalities within the application and telling it to render o in the GUI view:

NiftyJmeDisplay niftyDisplay = new NiftyJmeDisplay(app.getAssetManager(),
                app.getInputManager(),
                app.getAudioRenderer(),
                app.getRenderManager().getPostView("Gui Default"));

We should also store the Nifty instance in the class for use later, using niftyDisplay.getNifty(). With this done, we need to add niftyDisplay as a processor to the same view we just specified, using the following code:

app.getRenderManager().getPostView("Gui Default").addProcessor(niftyDisplay);

The last thing that needs to be done before Nifty could show anything is to tell it what to draw. We do this with nifty.fromXml and pass the XML file to be used as well as the name of the screen (if several screens are stored in the same XML).

How to do it...

We start by defining the XML files for our options menu and the screen that will contain it. Perform the following steps to do this:

  1. First of all, we should create a new file called optionsMenu.xml. It should reside in the Interface/Controls folder.
  2. The first tag we need to have is a <nifty-controls> tag to let Nifty know that the elements inside should be parsed as controls.
  3. Then, we add <controlDefinition name="options">, which is the actual options menu instance.
  4. This is where the actual layout starts, and it does so with a <panel> element, as shown in the following code:
    <panel id="optionsPanel" childLayout="vertical" width="40%" height="60%" align="center" valign="center" backgroundColor="#333f">
  5. At the top, we'll have <panel> that will include <control name="label"> element with text="Options".
  6. To the right of this panel, there should be a small button with the familiar x to close the menu and an interact element to call a method in the Controller class, as shown in the following code:
    <control name="button" id="closeButton" align="right" label="x" height="30px" width="30px" >
  <interact onClick="toggleOptionsMenu()"/>
</control>
  7. After this, we can have as many <control name="button"> elements we want for our options menu to work. There should at least be one that calls quit() in the Controller class to stop the application.
  8. Now, we can define a screen to contain our options menu. If we right-click on the Projects window and select New/Empty Nifty GUI file, we will get a basic setup for a screen.
  9. Clean out everything between the <layer> tags, and change the controller of the <screen> element to gui.controls.NiftyController.
  10. Next, we need to define what styles to include using the <useStyles> tag, which should appear before the <screen> element.
  11. We add <useControls filename="nifty-default-controls.xml" /> to include access to basic nifty controls such as buttons, and we should add another <useControls> tag for our options menu. These should also be added before the <screen> element.

Now, we can start looking at the Controller code for this. Perform the following five steps to do this:

  1. We should define a class that implements the ScreenController interface, which will become the link between the GUI and the code. We can make it abstract and call it NiftyController.
  2. It should have two protected fields, namely, Nifty nifty and Screen screen, which will be set from the values provided in the bind method.
  3. We also need a Boolean field called optionsMenuVisible.
  4. We need to add methods for each of the methods specified in the optionsMenu.xml file, and toggleOptionsMenu() should either show or hide the menu depending on whether optionsMenuVisible is true or not. A handy way to get hold of an element is by using the following code:
    nifty.getCurrentScreen().findElementByName("options");
  5. Then, we can call either hide() or show() on the element to control visibility.

Normally, the application is shut down when Esc is pressed. Let's make the options menu handle this instead; this consists of the following four steps:

  1. Start by deleting the related mapping by adding the following line to the NiftyAppState initialization method:
    app.getInputManager().deleteMapping(SimpleApplication.INPUT_MAPPING_EXIT);
  2. Now, we need to add our own mapping for the Esc key, as shown in the following code:
    app.getInputManager().addMapping("TOGGLE_OPTIONS", new KeyTrigger(KeyInput.KEY_ESCAPE));
app.getInputManager().addListener(this, "TOGGLE_OPTIONS");
  3. The NiftyAppState method also needs to implement ActionListener and handle the key press:
    public void onAction(String name, boolean isPressed, float tpf) {
  if(name.equals(TOGGLE_OPTIONS) && isPressed){
 ((NiftyController)nifty.getCurrentScreen().getScreenController()).toggleOptionsMenu();
  }
}
  4. With the normal shut down routine removed, we need to add functionality inside NiftyController to handle this instead. Since this class will be shared by the screens, we provide the application with static access and a setter method. The quit method just has to call app.stop() to shut it down.

How it works...

Nifty was initialized inside AppState to offset the code from the main application and make it more modular. This also made it easier to add some more general functionalities related to controlling the GUI.

Every nifty Controller class must implement the ScreenController interface for Nifty to be able to find it. Since some functions will be shared across the screens, we created an abstract class called NiftyController to avoid duplicating the code. Apart from handling the generic Options menu, it was also given access to the application itself.

The link between the XML file and the Controller class doesn't need to be specified beyond providing the qualified name of the controller in the screen. Likewise, Nifty will find methods automatically using the name provided in the interact tag of ButtonControl.

The <panel> elements are versatile objects that can be used for many parts of the layout and can contain most other types of layout items.

It's OK to contain several <controlDefinition> elements within a <nifty-controls> tag.

There's more…

It's very easy to use a properties file to back a Nifty file for localization purposes, as given in the following points:

  • First of all, the following tag needs to be present to link the properties file:
    <resourceBundle id="localization" filename="packagename.filename" />
  • It can be called, for example, from a label control:
    <control name="label" text="${localization.STR_HELLO_WORLD}"/>
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.133.141.219