Laying out the GUI in XML

  1. Nifty GUI XML Layout

You "draw" the GUI to the screen by writing XML code. We will be referring to the following elements:

How to Use Screens and Layers

Create an empty helloworld.xml file in the assets/Interfaces/ directory of your project.

Here's a minimal example showing an empty centered layer on the start screen:

<?xml version="1.0" encoding="UTF-8"?>
<nifty xmlns="http://nifty-gui.sourceforge.net/nifty.xsd" 
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
       xsi:schemaLocation="http://nifty-gui.sourceforge.net/nifty.xsd 
                           http://nifty-gui.sourceforge.net/nifty.xsd">
 
  <screen id="start" controller="de.lessvoid.nifty.examples.helloworld.HelloWorldStartScreen">
    <layer id="layer1" backgroundColor="#003f" childLayout="center">
       <!-- ... panels go here... -->
    </layer>
  </screen>
 
</nifty>

Into a layer, you add panels (text, images, etc), and specify their properties:

Panel

A panels looks like a rectangular colored box.

...
<panel height="25%" width="35%" align="center" valign="center" backgroundColor="#f60f"
       childLayout="center" visibleToMouse="true">
</panel>
...

Text

...
<text font="verdana-24-shadow.fnt" text="Hello World!" align="center" valign="center" />
...

or

...
<label text="this is my text" align="left"/>
...

Image

<image filename="Textures/jme-logo.png" ></image>

Nifty additionally offers predefined controls – learn more from the NiftyGUI page:

Effects

You can register effects to screen elements.

Here is an example that moves a panel when the startScreen opens. You place an < effect > tag inside the element that you want to want to be affected.

...
  <panel height="25%" width="35%" ...>
    <effect>
      <onStartScreen name="move" mode="in" direction="top" 
                     length="300" startDelay="0" inherit="true"/>
    </effect>
  </panel>
...

Playing sounds using nifty is also possible with effects as triggers. Remember to first register the sound you're going to play:

...
  <registerSound id="click" filename="Sounds/Gui/ButtonClick.ogg" />
...
  <label>
    <effect>
       <onClick name="playSound" sound="click"/>
    </effect>
  </label>
...

Learn more from the NiftyGUI page:


  1. Nifty GUI XML Layout
documentation, gui

view online version