|
@@ -142,14 +142,19 @@ A panel is the inner-most container (that will contain the actual content: text,
|
|
|
[source,xml]
|
|
|
----
|
|
|
|
|
|
-<panel id="panel_top" height="25%" width="75%" align="center" childLayout="center" backgroundColor="#f008">
|
|
|
+<panel id="panel_top" height="25%" width="75%" align="center" childLayout="center"
|
|
|
+ backgroundColor="#f008">
|
|
|
</panel>
|
|
|
-<panel id="panel_mid" height="50%" width="75%" align="center" childLayout="center" backgroundColor="#0f08">
|
|
|
+<panel id="panel_mid" height="50%" width="75%" align="center" childLayout="center"
|
|
|
+ backgroundColor="#0f08">
|
|
|
</panel>
|
|
|
-<panel id="panel_bottom" height="25%" width="75%" align="center" childLayout="horizontal" backgroundColor="#00f8">
|
|
|
- <panel id="panel_bottom_left" height="50%" width="50%" valign="center" childLayout="center" backgroundColor="#44f8">
|
|
|
+<panel id="panel_bottom" height="25%" width="75%" align="center" childLayout="horizontal"
|
|
|
+ backgroundColor="#00f8">
|
|
|
+ <panel id="panel_bottom_left" height="50%" width="50%" valign="center" childLayout="center"
|
|
|
+ backgroundColor="#44f8">
|
|
|
</panel>
|
|
|
- <panel id="panel_bottom_right" height="50%" width="50%" valign="center" childLayout="center" backgroundColor="#88f8">
|
|
|
+ <panel id="panel_bottom_right" height="50%" width="50%" valign="center" childLayout="center"
|
|
|
+ backgroundColor="#88f8">
|
|
|
</panel>
|
|
|
</panel>
|
|
|
|
|
@@ -163,7 +168,7 @@ The following panels go into in the `hud` screen's `foreground` layer:
|
|
|
<panel id="panel_left" width="80%" height="100%" childLayout="vertical" backgroundColor="#0f08">
|
|
|
<!-- spacer -->
|
|
|
</panel>
|
|
|
-<panel id="panel_right" width="20%" height="100%" childLayout="vertical" backgroundColor="#00f8" >
|
|
|
+<panel id="panel_right" width="20%" height="100%" childLayout="vertical" backgroundColor="#00f8">
|
|
|
<panel id="panel_top_right1" width="100%" height="15%" childLayout="center" backgroundColor="#00f8">
|
|
|
</panel>
|
|
|
<panel id="panel_top_right2" width="100%" height="15%" childLayout="center" backgroundColor="#44f8">
|
|
@@ -216,7 +221,8 @@ In order to make the hud-frame.png independent of the screen resolution you are
|
|
|
----
|
|
|
|
|
|
<layer id="background" childLayout="center">
|
|
|
- <image filename="Interface/hud-frame.png" imageMode="resize:40,490,110,170,40,560,40,270,40,560,40,40" width="100%" height="100%">
|
|
|
+ <image filename="Interface/hud-frame.png"
|
|
|
+ imageMode="resize:40,490,110,170,40,560,40,270,40,560,40,40" width="100%" height="100%">
|
|
|
</image>
|
|
|
</layer>
|
|
|
|
|
@@ -229,7 +235,8 @@ In the `hud` screen's `foreground` layer, add the following image element:
|
|
|
----
|
|
|
|
|
|
<panel id="panel_top_right2" width="100%" height="15%" childLayout="center">
|
|
|
- <image filename="Interface/face1.png" valign="center" align="center" height="50%" width="30%" >
|
|
|
+ <image filename="Interface/face1.png" valign="center" align="center" height="50%"
|
|
|
+ width="30%" >
|
|
|
</image>
|
|
|
</panel>
|
|
|
|
|
@@ -246,7 +253,7 @@ The game title is a typical example of static text. In the `start` screen, add t
|
|
|
----
|
|
|
|
|
|
<panel id="panel_top" height="25%" width="75%" align="center" childLayout="center">
|
|
|
- <text text="My Cool Game" font="Interface/Fonts/Default.fnt" width="100%" height="100%" />
|
|
|
+ <text text="My Cool Game" font="Interface/Fonts/Default.fnt" width="100%" height="100%"/>
|
|
|
</panel>
|
|
|
|
|
|
----
|
|
@@ -257,8 +264,9 @@ For longer pieces of static text, such as an introduction, you can use wrap="`tr
|
|
|
----
|
|
|
|
|
|
<panel id="panel_mid" height="50%" width="75%" align="center" childLayout="center">
|
|
|
- <text text="Here goes some text describing the game and the rules and stuff. Incidentally, the text is quite long and needs to wrap at the end of lines. ..."
|
|
|
- font="Interface/Fonts/Default.fnt" width="100%" height="100%" wrap="true" />
|
|
|
+ <text text="Here goes some text describing the game and the rules and stuff. Incidentally,
|
|
|
+ the text is quite long and needs to wrap at the end of lines. ..."
|
|
|
+ font="Interface/Fonts/Default.fnt" width="100%" height="100%" wrap="true"/>
|
|
|
</panel>
|
|
|
|
|
|
----
|
|
@@ -274,8 +282,8 @@ Before you can use any control, you must load a Control Definition first. Add th
|
|
|
[source,xml]
|
|
|
----
|
|
|
|
|
|
-<useStyles filename="nifty-default-styles.xml" />
|
|
|
-<useControls filename="nifty-default-controls.xml" />
|
|
|
+<useStyles filename="nifty-default-styles.xml"/>
|
|
|
+<useControls filename="nifty-default-controls.xml"/>
|
|
|
|
|
|
----
|
|
|
|
|
@@ -291,7 +299,7 @@ In the `hud` screen's `foreground` layer, add the following text element:
|
|
|
----
|
|
|
|
|
|
<panel id="panel_top_right1" width="100%" height="15%" childLayout="center">
|
|
|
- <control name="label" color="#000" text="123" width="100%" height="100%" />
|
|
|
+ <control name="label" color="#000" text="123" width="100%" height="100%"/>
|
|
|
</panel>
|
|
|
|
|
|
----
|
|
@@ -328,27 +336,34 @@ Your screen.xml should look like this:
|
|
|
|
|
|
<?xml version="1.0" encoding="UTF-8"?>
|
|
|
<nifty xmlns="http://nifty-gui.lessvoid.com/nifty-gui" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="https://raw.githubusercontent.com/void256/nifty-gui/1.4/nifty-core/src/main/resources/nifty.xsd https://raw.githubusercontent.com/void256/nifty-gui/1.4/nifty-core/src/main/resources/nifty.xsd">
|
|
|
- <useStyles filename="nifty-default-styles.xml" />
|
|
|
- <useControls filename="nifty-default-controls.xml" />
|
|
|
+ <useStyles filename="nifty-default-styles.xml"/>
|
|
|
+ <useControls filename="nifty-default-controls.xml"/>
|
|
|
<screen id="start">
|
|
|
<layer id="background" childLayout="center">
|
|
|
<image filename="Interface/start-background.png"></image>
|
|
|
</layer>
|
|
|
<layer id="foreground" childLayout="vertical">
|
|
|
<panel id="panel_top" height="25%" width="75%" align="center" childLayout="center">
|
|
|
- <text text="My Cool Game" font="Interface/Fonts/Default.fnt" width="100%" height="100%" />
|
|
|
+ <text text="My Cool Game" font="Interface/Fonts/Default.fnt" width="100%"
|
|
|
+ height="100%"/>
|
|
|
</panel>
|
|
|
<panel id="panel_mid" height="50%" width="75%" align="center" childLayout="center">
|
|
|
- <text text="Here goes some text describing the game and the rules and stuff. Incidentally, the text is quite long and needs to wrap at the end of lines. ..."
|
|
|
- font="Interface/Fonts/Default.fnt" width="100%" height="100%" wrap="true" />
|
|
|
+ <text text="Here goes some text describing the game and the rules and stuff.
|
|
|
+ Incidentally, the text is quite long and needs to wrap at the end of lines. ..."
|
|
|
+ font="Interface/Fonts/Default.fnt" width="100%" height="100%" wrap="true"/>
|
|
|
</panel>
|
|
|
- <panel id="panel_bottom" height="25%" width="75%" align="center" childLayout="horizontal">
|
|
|
- <panel id="panel_bottom_left" height="50%" width="50%" valign="center" childLayout="center">
|
|
|
- <control name="button" label="Start" id="StartButton" align="center" valign="center">
|
|
|
+ <panel id="panel_bottom" height="25%" width="75%" align="center"
|
|
|
+ childLayout="horizontal">
|
|
|
+ <panel id="panel_bottom_left" height="50%" width="50%" valign="center"
|
|
|
+ childLayout="center">
|
|
|
+ <control name="button" label="Start" id="StartButton" align="center"
|
|
|
+ valign="center">
|
|
|
</control>
|
|
|
</panel>
|
|
|
- <panel id="panel_bottom_right" height="50%" width="50%" valign="center" childLayout="center">
|
|
|
- <control name="button" label="Quit" id="QuitButton" align="center" valign="center">
|
|
|
+ <panel id="panel_bottom_right" height="50%" width="50%" valign="center"
|
|
|
+ childLayout="center">
|
|
|
+ <control name="button" label="Quit" id="QuitButton" align="center"
|
|
|
+ valign="center">
|
|
|
</control>
|
|
|
</panel>
|
|
|
</panel>
|
|
@@ -356,7 +371,8 @@ Your screen.xml should look like this:
|
|
|
</screen>
|
|
|
<screen id="hud">
|
|
|
<layer id="background" childLayout="center">
|
|
|
- <image filename="Interface/hud-frame.png" imageMode="resize:40,490,110,170,40,560,40,270,40,560,40,40" width="100%" height="100%">
|
|
|
+ <image filename="Interface/hud-frame.png"
|
|
|
+ imageMode="resize:40,490,110,170,40,560,40,270,40,560,40,40" width="100%" height="100%">
|
|
|
</image>
|
|
|
</layer>
|
|
|
<layer id="foreground" childLayout="horizontal">
|
|
@@ -367,7 +383,8 @@ Your screen.xml should look like this:
|
|
|
<control name="label" color="#000" text="123" width="100%" height="100%" />
|
|
|
</panel>
|
|
|
<panel id="panel_top_right2" width="100%" height="15%" childLayout="center">
|
|
|
- <image filename="Interface/face1.png" valign="center" align="center" height="50%" width="30%" >
|
|
|
+ <image filename="Interface/face1.png" valign="center" align="center"
|
|
|
+ height="50%" width="30%" >
|
|
|
</image>
|
|
|
</panel>
|
|
|
<panel id="panel_bot_right" width="100%" height="70%" valign="center">
|