Game Development Reference
In-Depth Information
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 ac-
tual 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.
