You "draw" the GUI to the screen by writing XML code. We will be referring to the following elements:
id="start"
. Name any others whatever you like. 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:
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 font="verdana-24-shadow.fnt" text="Hello World!" align="center" valign="center" />
...
or
...
<label text="this is my text" align="left"/>
...
<image filename="Textures/jme-logo.png" ></image>
Nifty additionally offers predefined controls – learn more from the NiftyGUI page:
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: