|
|
@@ -5,6 +5,7 @@
|
|
|
:keywords: gui, documentation, nifty, hud
|
|
|
:relfileprefix: ../../
|
|
|
:imagesdir: ../..
|
|
|
+:experimental:
|
|
|
ifdef::env-github,env-browser[:outfilesuffix: .adoc]
|
|
|
|
|
|
|
|
|
@@ -20,7 +21,7 @@ You can "`draw`" the +++<abbr title="Graphical User Interface">GUI</abbr>+++ to
|
|
|
== Plan Your GUI Layout
|
|
|
|
|
|
|
|
|
-image::jme3/advanced/gui-layout-draft.png[gui-layout-draft.png,width="",height="",align="right"]
|
|
|
+image::jme3/advanced/gui-layout-draft.png[gui-layout-draft.png,width="",height="",align="left"]
|
|
|
|
|
|
|
|
|
In this tutorial, you want to create two game screens: An out-of-game StartScreen that the players see before the game starts; and an in-game link:http://en.wikipedia.org/wiki/HUD_%28video_gaming%29[HUD] that displays info during the game. Before writing code, you plan the +++<abbr title="Graphical User Interface">GUI</abbr>+++ layout, either on paper or in a graphic application.
|
|
|
@@ -49,11 +50,25 @@ The HUD contains:
|
|
|
== Implement Your GUI Layout
|
|
|
|
|
|
|
|
|
-image::jme3/advanced/nifty-screen-layer-panel.png[nifty-screen-layer-panel.png,width="366",height="136",align="right"]
|
|
|
+image::jme3/advanced/nifty-screen-layer-panel.png[nifty-screen-layer-panel.png,width="366",height="136",align="left"]
|
|
|
|
|
|
|
|
|
-Create an empty *screen*.xml file in the `assets/Interface/` directory of your project. ( Rightclick on Interface → New → Other… → +++<abbr title="Graphical User Interface">GUI</abbr>+++ → Empty NiftyGui file)
|
|
|
-Afterwards create the directory `assets/Interface/Fonts` and add a new font e.g. Arial. ( *Rightclick on Interface → New → Other… →* Other → Folder and +++<abbr title="Graphical User Interface">GUI</abbr>+++ → Font)
|
|
|
+Create an empty *screen*.xml file in the `assets/Interface/` directory of your project.
|
|
|
+
|
|
|
+. btn:[RMB] click on `menu:Interface[New>Other>GUI>Empty Gui]` followed by the btn:[Next >] button.
|
|
|
+. Name the file "`screen`" and when ready select btn:[Finish].
|
|
|
+
|
|
|
+Afterwards create the directory `assets/Interface/Fonts` and add a new font e.g. Arial.
|
|
|
+
|
|
|
+. btn:[RMB] click on `menu:Interface[New>Other>Other>Folder]` followed by the btn:[Next >] button.
|
|
|
+. Name the folder "`Fonts`" and when ready select btn:[Finish].
|
|
|
+
|
|
|
+With the "`Fonts`" folder still selected.
|
|
|
+
|
|
|
+. btn:[RMB] click `menu:New[Other>GUI>Font]`.
|
|
|
+. In the `New Font` dialog, select font "`Arial`".
|
|
|
+. Click the btn:[Next >] button when ready.
|
|
|
+. Accept the defaults by selecting btn:[Finish].
|
|
|
|
|
|
One XML file can contain several, or even all screens. As a reminder: Nifty displays one screen at a time; a screen contains several layers on top of one another; each layer contains panels that are embedded into another; the panels contain the actual content (text, images, or controls).
|
|
|
|
mitm