| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221 |
- <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]--><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="generator" content="Asciidoctor 1.5.4"><meta name="keywords" content="gui, documentation, nifty, hud"><title>Laying out the GUI in XML</title><link rel="stylesheet" href="./asciidoctor.css">
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
- <link rel="stylesheet" href="./coderay-asciidoctor.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css"><link rel="stylesheet" href="/home/travis/build/jMonkeyEngine/wiki/build/asciidoc/html5/jme3/advanced/twemoji-awesome.css"></head><body class="article toc2 toc-left"><div id="header"><div id="toolbar"><a href="https://github.com/jMonkeyEngine/wiki/edit/master/src/docs/asciidoc/jme3/advanced/nifty_gui_xml_layout.adoc"><i class="fa fa-pencil-square" aria-hidden="true"></i></a><a href="https://github.com/jMonkeyEngine/wiki/new/master/src/docs/asciidoc/jme3/advanced/"><i class="fa fa-plus-square" aria-hidden="true"></i></a><input dir="auto" style="position: relative; vertical-align: top;" spellcheck="false" autocomplete="off" class="searchbox__input aa-input" id="doc-search" name="search" placeholder="Search in the doc" required="required" type="search"></div><h1>Laying out the GUI in XML</h1><div class="details"><span class="author" id="author"></span><br><span id="revnumber">version ,</span> <span id="revdate">2016/03/17 20:48</span></div><div id="toc" class="toc2"><div id="toctitle">Table of Contents</div><ul class="sectlevel1"><li><a href="#plan-your-gui-layout">Plan Your GUI Layout</a></li><li><a href="#implement-your-gui-layout">Implement Your GUI Layout</a><ul class="sectlevel2"><li><a href="#make-screens">Make Screens</a></li><li><a href="#make-layers">Make Layers</a></li><li><a href="#make-panels">Make Panels</a></li></ul></li><li><a href="#adding-content-to-panels">Adding Content to Panels</a><ul class="sectlevel2"><li><a href="#add-images">Add Images</a></li><li><a href="#add-static-text">Add Static Text</a></li><li><a href="#add-controls">Add Controls</a></li></ul></li><li><a href="#intermediate-result">Intermediate Result</a></li><li><a href="#next-steps">Next Steps</a></li></ul></div></div><div id="content"><div id="preamble"><div class="sectionbody"><div class="olist arabic"><ol class="arabic"><li><p><a href="../../jme3/advanced/nifty_gui.html">Nifty GUI Concepts</a></p></li><li><p><a href="../../jme3/advanced/nifty_gui_best_practices.html">Nifty GUI Best Practices</a></p></li><li><p><strong>Nifty <abbr title="Graphical User Interface">GUI</abbr> XML Layout</strong> or <a href="../../jme3/advanced/nifty_gui_java_layout.html">Nifty GUI Java Layout</a></p></li><li><p><a href="../../jme3/advanced/nifty_gui_overlay.html">Nifty GUI Overlay</a> or <a href="../../jme3/advanced/nifty_gui_projection.html">Nifty GUI Projection</a></p></li><li><p><a href="../../jme3/advanced/nifty_gui_java_interaction.html">Interact with the GUI from Java</a></p></li></ol></div>
- <div class="paragraph"><p>You can “draw” the <abbr title="Graphical User Interface">GUI</abbr> to the screen by writing XML code (alternatively you can also use Java).</p></div></div></div>
- <div class="sect1"><h2 id="plan-your-gui-layout">Plan Your GUI Layout</h2><div class="sectionbody"><div style="text-align: left;" class="imageblock"><div class="content"><img src="../../jme3/advanced/gui-layout-draft.png" alt="gui-layout-draft.png" width="" height=""></div></div>
- <div class="paragraph"><p>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 <a href="http://en.wikipedia.org/wiki/HUD_%28video_gaming%29">HUD</a> 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.</p></div>
- <div class="paragraph"><p>The StartScreen contains:</p></div>
- <div class="ulist"><ul><li><p>The background layer has a centered layout and contains an image.</p></li><li><p>The top layer has a vertical layout, containing 3 panels:</p><div class="ulist"><ul><li><p>The top panel contains a label with the game title,</p></li><li><p>The middle panel contains a text field with the game description.</p></li><li><p>The bottom panel has a horizontal layout and contains two more panels:</p><div class="ulist"><ul><li><p>The left panel contains a Start button.</p></li><li><p>The right panel contains a Quit button.</p></li></ul></div></li></ul></div></li></ul></div>
- <div class="paragraph"><p>The HUD contains:</p></div>
- <div class="ulist"><ul><li><p>The background layer has a centered layout, and contains the partially transparent HUD image.</p></li><li><p>The top layer has a horizontal layout, containing 2 panels:</p><div class="ulist"><ul><li><p>The left panel as transparent spacer.</p></li><li><p>The right panel has a vertical layout containing 2 panels, a label and an image.</p></li></ul></div></li></ul></div></div></div>
- <div class="sect2"><h3 id="implement-your-gui-layout">Implement Your GUI Layout</h3><div style="text-align: left;" class="imageblock"><div class="content"><img src="../../jme3/advanced/nifty-screen-layer-panel.png" alt="nifty-screen-layer-panel.png" width="366" height="136"></div></div>
- <div class="paragraph"><p>Create an empty <strong>screen</strong>.xml file in the <code>assets/Interface/</code> directory of your project.</p></div>
- <div class="admonitionblock caution"><table><tr><td class="icon"><i class="fa icon-caution" title="Caution"></i></td><td class="content">Do not use the SDK built in Nifty file editor. It does not work and is full of bugs that will lead to significant hair loss. Instead, create an empty XML file.</td></tr></table></div>
- <div class="olist arabic"><div class="title">Create XML File</div>
- <ol class="arabic"><li><p><b class="button">RMB</b> click on <code><span class="menuseq"><span class="menu">Interface</span> ▸ <span class="submenu">New</span> ▸ <span class="submenu">Other</span> ▸ <span class="submenu">GUI</span> ▸ <span class="menuitem">Empty Gui</span></span></code> followed by the <b class="button">Next ></b> button.</p></li><li><p>Name the file “screen” and when ready select <b class="button">Finish</b>.</p></li></ol></div>
- <div class="paragraph"><p>Afterwards create the directory <code>assets/Interface/Fonts</code> and add a new font, e.g. Arial.</p></div>
- <div class="olist arabic"><div class="title">Create Fonts Folder</div>
- <ol class="arabic"><li><p><b class="button">RMB</b> click on <code>Interface</code> and select <code><span class="menuseq"><span class="menu">New</span> ▸ <span class="submenu">Other</span> ▸ <span class="submenu">Other</span> ▸ <span class="menuitem">Folder</span></span></code> followed by the <b class="button">Next ></b> button.</p></li><li><p>Name the folder “Fonts” and when ready select <b class="button">Finish</b>.</p></li></ol></div>
- <div class="olist arabic"><div class="title">Create Font</div>
- <ol class="arabic"><li><p><b class="button">RMB</b> click the newly created <code>Fonts</code> folder and select <code><span class="menuseq"><span class="menu">New</span> ▸ <span class="submenu">Other</span> ▸ <span class="submenu">GUI</span> ▸ <span class="menuitem">Font</span></span></code>.</p></li><li><p>In the <code>New Font</code> dialog, select font “Arial”.</p></li><li><p>Click the <b class="button">Next ></b> button when ready.</p></li><li><p>Accept the defaults by selecting <b class="button">Finish</b>.</p></li></ol></div>
- <div class="paragraph"><p>Lastly, see: <a href="../../jme3/advanced/nifty_gui_overlay.html">Nifty Gui Overlay</a> on how to setup your game to display your GUI.</p></div>
- <div class="paragraph"><p>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).</p></div>
- <div class="sect2"><h3 id="make-screens">Make Screens</h3><div class="paragraph"><p>The following minimal XML file contains a start screen and a HUD screen. (Neither has been defined yet.) Copy and paste the following code into your scene.xml file.</p></div>
- <div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="xml"><span class="preprocessor"><?xml version="1.0" encoding="UTF-8"?></span>
- <span class="tag"><nifty</span> <span class="attribute-name">xmlns</span>=<span class="string"><span class="delimiter">"</span><span class="content">http://nifty-gui.lessvoid.com/nifty-gui</span><span class="delimiter">"</span></span> <span class="attribute-name">xmlns:xsi</span>=<span class="string"><span class="delimiter">"</span><span class="content">http://www.w3.org/2001/XMLSchema-instance</span><span class="delimiter">"</span></span> <span class="attribute-name">xsi:schemaLocation</span>=<span class="string"><span class="delimiter">"</span><span class="content">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</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="tag"><screen</span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">start</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="comment"><!-- ... --></span>
- <span class="tag"></screen></span>
- <span class="tag"><screen</span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">hud</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="comment"><!-- ... --></span>
- <span class="tag"></screen></span>
- <span class="tag"></nifty></span></code></pre></div></div>
- <div class="paragraph"><p>Every Nifty <abbr title="Graphical User Interface">GUI</abbr> must have a start screen. The others (in this example, the HUD screen) are optional.</p></div>
- <div class="admonitionblock note"><table><tr><td class="icon"><i class="fa icon-note" title="Note"></i></td><td class="content">In the following examples, the XML schema header is abbreviated to just <code><nifty></code>.</td></tr></table></div></div>
- <div class="sect2"><h3 id="make-layers">Make Layers</h3><div class="paragraph"><p>The following minimal XML file shows how we added layers to the start screen and HUD screen.
- Delete all from the file and add following code.</p></div>
- <div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="xml"><span class="tag"><nifty></span>
- <span class="tag"><screen</span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">start</span><span class="delimiter">"</span></span> <span class="attribute-name">controller</span>=<span class="string"><span class="delimiter">"</span><span class="content">de.lessvoid.nifty.screen.DefaultScreenController</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="tag"><layer</span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">background</span><span class="delimiter">"</span></span> <span class="attribute-name">backgroundColor</span>=<span class="string"><span class="delimiter">"</span><span class="content">#000f</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="comment"><!-- ... --></span>
- <span class="tag"></layer></span>
- <span class="tag"><layer</span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">foreground</span><span class="delimiter">"</span></span> <span class="attribute-name">backgroundColor</span>=<span class="string"><span class="delimiter">"</span><span class="content">#0000</span><span class="delimiter">"</span></span> <span class="attribute-name">childLayout</span>=<span class="string"><span class="delimiter">"</span><span class="content">vertical</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="comment"><!-- ... --></span>
- <span class="tag"></layer></span>
- <span class="tag"></screen></span>
- <span class="tag"><screen</span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">hud</span><span class="delimiter">"</span></span> <span class="attribute-name">controller</span>=<span class="string"><span class="delimiter">"</span><span class="content">de.lessvoid.nifty.screen.DefaultScreenController</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="tag"><layer</span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">background</span><span class="delimiter">"</span></span> <span class="attribute-name">backgroundColor</span>=<span class="string"><span class="delimiter">"</span><span class="content">#000f</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="comment"><!-- ... --></span>
- <span class="tag"></layer></span>
- <span class="tag"><layer</span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">foreground</span><span class="delimiter">"</span></span> <span class="attribute-name">backgroundColor</span>=<span class="string"><span class="delimiter">"</span><span class="content">#0000</span><span class="delimiter">"</span></span> <span class="attribute-name">childLayout</span>=<span class="string"><span class="delimiter">"</span><span class="content">horizontal</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="comment"><!-- ... --></span>
- <span class="tag"></layer></span>
- <span class="tag"></screen></span>
- <span class="tag"></nifty></span></code></pre></div></div>
- <div class="paragraph"><p>In a layer, you can now add panels and arrange them. Panels are containers that mark the areas where you want to display text, images, or controls (buttons etc) later. To connect a screen with a ScreenController you need to specify the fully qualified class name of
- your ScreenController in the controller attribute of the <screen> tag. For this example, we use the <code>DefaultScreenController</code>.</p></div></div>
- <div class="sect2"><h3 id="make-panels">Make Panels</h3><div class="paragraph"><p>A panel is the inner-most container (that will contain the actual content: text, images, or controls). You place panels inside layers. The following panels go into in the <code>start</code> screen’s <code>foreground</code> layer:</p></div>
- <div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="xml"><span class="tag"><panel</span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">panel_top</span><span class="delimiter">"</span></span> <span class="attribute-name">height</span>=<span class="string"><span class="delimiter">"</span><span class="content">25%</span><span class="delimiter">"</span></span> <span class="attribute-name">width</span>=<span class="string"><span class="delimiter">"</span><span class="content">75%</span><span class="delimiter">"</span></span> <span class="attribute-name">align</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span> <span class="attribute-name">childLayout</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span>
- <span class="attribute-name">backgroundColor</span>=<span class="string"><span class="delimiter">"</span><span class="content">#f008</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="tag"></panel></span>
- <span class="tag"><panel</span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">panel_mid</span><span class="delimiter">"</span></span> <span class="attribute-name">height</span>=<span class="string"><span class="delimiter">"</span><span class="content">50%</span><span class="delimiter">"</span></span> <span class="attribute-name">width</span>=<span class="string"><span class="delimiter">"</span><span class="content">75%</span><span class="delimiter">"</span></span> <span class="attribute-name">align</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span> <span class="attribute-name">childLayout</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span>
- <span class="attribute-name">backgroundColor</span>=<span class="string"><span class="delimiter">"</span><span class="content">#0f08</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="tag"></panel></span>
- <span class="tag"><panel</span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">panel_bottom</span><span class="delimiter">"</span></span> <span class="attribute-name">height</span>=<span class="string"><span class="delimiter">"</span><span class="content">25%</span><span class="delimiter">"</span></span> <span class="attribute-name">width</span>=<span class="string"><span class="delimiter">"</span><span class="content">75%</span><span class="delimiter">"</span></span> <span class="attribute-name">align</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span> <span class="attribute-name">childLayout</span>=<span class="string"><span class="delimiter">"</span><span class="content">horizontal</span><span class="delimiter">"</span></span>
- <span class="attribute-name">backgroundColor</span>=<span class="string"><span class="delimiter">"</span><span class="content">#00f8</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="tag"><panel</span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">panel_bottom_left</span><span class="delimiter">"</span></span> <span class="attribute-name">height</span>=<span class="string"><span class="delimiter">"</span><span class="content">50%</span><span class="delimiter">"</span></span> <span class="attribute-name">width</span>=<span class="string"><span class="delimiter">"</span><span class="content">50%</span><span class="delimiter">"</span></span> <span class="attribute-name">valign</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span> <span class="attribute-name">childLayout</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span>
- <span class="attribute-name">backgroundColor</span>=<span class="string"><span class="delimiter">"</span><span class="content">#44f8</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="tag"></panel></span>
- <span class="tag"><panel</span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">panel_bottom_right</span><span class="delimiter">"</span></span> <span class="attribute-name">height</span>=<span class="string"><span class="delimiter">"</span><span class="content">50%</span><span class="delimiter">"</span></span> <span class="attribute-name">width</span>=<span class="string"><span class="delimiter">"</span><span class="content">50%</span><span class="delimiter">"</span></span> <span class="attribute-name">valign</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span> <span class="attribute-name">childLayout</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span>
- <span class="attribute-name">backgroundColor</span>=<span class="string"><span class="delimiter">"</span><span class="content">#88f8</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="tag"></panel></span>
- <span class="tag"></panel></span></code></pre></div></div>
- <div class="paragraph"><p>The following panels go into in the <code>hud</code> screen’s <code>foreground</code> layer:</p></div>
- <div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="xml"><span class="tag"><panel</span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">panel_left</span><span class="delimiter">"</span></span> <span class="attribute-name">width</span>=<span class="string"><span class="delimiter">"</span><span class="content">80%</span><span class="delimiter">"</span></span> <span class="attribute-name">height</span>=<span class="string"><span class="delimiter">"</span><span class="content">100%</span><span class="delimiter">"</span></span> <span class="attribute-name">childLayout</span>=<span class="string"><span class="delimiter">"</span><span class="content">vertical</span><span class="delimiter">"</span></span> <span class="attribute-name">backgroundColor</span>=<span class="string"><span class="delimiter">"</span><span class="content">#0f08</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="comment"><!-- spacer --></span>
- <span class="tag"></panel></span>
- <span class="tag"><panel</span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">panel_right</span><span class="delimiter">"</span></span> <span class="attribute-name">width</span>=<span class="string"><span class="delimiter">"</span><span class="content">20%</span><span class="delimiter">"</span></span> <span class="attribute-name">height</span>=<span class="string"><span class="delimiter">"</span><span class="content">100%</span><span class="delimiter">"</span></span> <span class="attribute-name">childLayout</span>=<span class="string"><span class="delimiter">"</span><span class="content">vertical</span><span class="delimiter">"</span></span> <span class="attribute-name">backgroundColor</span>=<span class="string"><span class="delimiter">"</span><span class="content">#00f8</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="tag"><panel</span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">panel_top_right1</span><span class="delimiter">"</span></span> <span class="attribute-name">width</span>=<span class="string"><span class="delimiter">"</span><span class="content">100%</span><span class="delimiter">"</span></span> <span class="attribute-name">height</span>=<span class="string"><span class="delimiter">"</span><span class="content">15%</span><span class="delimiter">"</span></span> <span class="attribute-name">childLayout</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span>
- <span class="attribute-name">backgroundColor</span>=<span class="string"><span class="delimiter">"</span><span class="content">#00f8</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="tag"></panel></span>
- <span class="tag"><panel</span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">panel_top_right2</span><span class="delimiter">"</span></span> <span class="attribute-name">width</span>=<span class="string"><span class="delimiter">"</span><span class="content">100%</span><span class="delimiter">"</span></span> <span class="attribute-name">height</span>=<span class="string"><span class="delimiter">"</span><span class="content">15%</span><span class="delimiter">"</span></span> <span class="attribute-name">childLayout</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span>
- <span class="attribute-name">backgroundColor</span>=<span class="string"><span class="delimiter">"</span><span class="content">#44f8</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="tag"></panel></span>
- <span class="tag"><panel</span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">panel_bot_right</span><span class="delimiter">"</span></span> <span class="attribute-name">width</span>=<span class="string"><span class="delimiter">"</span><span class="content">100%</span><span class="delimiter">"</span></span> <span class="attribute-name">height</span>=<span class="string"><span class="delimiter">"</span><span class="content">70%</span><span class="delimiter">"</span></span> <span class="attribute-name">valign</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span> <span class="attribute-name">backgroundColor</span>=<span class="string"><span class="delimiter">"</span><span class="content">#88f8</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="tag"></panel></span>
- <span class="tag"></panel></span></code></pre></div></div>
- <div class="paragraph"><p>The result should look as follows:</p></div>
- <div style="text-align: center;" class="imageblock"><div class="content"><img src="../../jme3/advanced/nifty-gui-panels.png" alt="nifty-gui-panels.png" width="" height=""></div></div></div></div>
- <div class="sect2"><h3 id="adding-content-to-panels">Adding Content to Panels</h3><div class="paragraph"><p>See also <a href="https://github.com/nifty-gui/nifty-gui/raw/1.4/nifty-core/manual/nifty-gui-the-manual-1.3.2.pdf">Nifty GUI - the Manual: Layouts</a> on the Nifty <abbr title="Graphical User Interface">GUI</abbr> site.</p></div>
- <div class="sect2"><h3 id="add-images">Add Images</h3><div class="paragraph"><p>The
- <a href="https://github.com/jMonkeyEngine/wiki/blob/master/src/docs/images/jme3/advanced/start-background.png">start-background.png</a> image is a fullscreen background picture. Add it to <code>Interface</code>. In the <code>start</code> screen, add the following image element:</p></div>
- <div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="xml"><span class="tag"><layer</span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">background</span><span class="delimiter">"</span></span> <span class="attribute-name">childLayout</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="tag"><image</span> <span class="attribute-name">filename</span>=<span class="string"><span class="delimiter">"</span><span class="content">Interface/start-background.png</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="tag"></image></span>
- <span class="tag"></layer></span></code></pre></div></div>
- <div class="paragraph"><p>The <a href="https://github.com/jMonkeyEngine/wiki/blob/master/src/docs/images/jme3/advanced/hud-frame.png">hud-frame.png</a> image is a transparent frame that we use as HUD decoration. Add it to <code>Interface</code>. In the <code>hud</code> screen, add the following image element:</p></div>
- <div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="xml"><span class="tag"><layer</span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">background</span><span class="delimiter">"</span></span> <span class="attribute-name">childLayout</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="tag"><image</span> <span class="attribute-name">filename</span>=<span class="string"><span class="delimiter">"</span><span class="content">Interface/hud-frame.png</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="tag"></image></span>
- <span class="tag"></layer></span></code></pre></div></div>
- <div class="paragraph"><p>In order to make the hud-frame.png independent of the screen resolution you are using, you could use the <code>imageMode</code> attribute on the image element <a href="https://github.com/nifty-gui/nifty-gui/raw/1.4/nifty-core/manual/nifty-gui-the-manual-1.3.2.pdf">Nifty GUI - the Manual: Images (ImageMode=resize)</a>.</p></div>
- <div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="xml"><span class="tag"><layer</span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">background</span><span class="delimiter">"</span></span> <span class="attribute-name">childLayout</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="tag"><image</span> <span class="attribute-name">filename</span>=<span class="string"><span class="delimiter">"</span><span class="content">Interface/hud-frame.png</span><span class="delimiter">"</span></span>
- <span class="attribute-name">imageMode</span>=<span class="string"><span class="delimiter">"</span><span class="content">resize:40,490,110,170,40,560,40,270,40,560,40,40</span><span class="delimiter">"</span></span> <span class="attribute-name">width</span>=<span class="string"><span class="delimiter">"</span><span class="content">100%</span><span class="delimiter">"</span></span> <span class="attribute-name">height</span>=<span class="string"><span class="delimiter">"</span><span class="content">100%</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="tag"></image></span>
- <span class="tag"></layer></span></code></pre></div></div>
- <div class="paragraph"><p>The <a href="https://github.com/jMonkeyEngine/wiki/blob/master/src/docs/images/jme3/advanced/face1.png">face1.png</a> image is an image that you want to use as a status icon. Add it to <code>Interface</code>.
- In the <code>hud</code> screen’s <code>foreground</code> layer, add the following image element:</p></div>
- <div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="xml"><span class="tag"><panel</span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">panel_top_right2</span><span class="delimiter">"</span></span> <span class="attribute-name">width</span>=<span class="string"><span class="delimiter">"</span><span class="content">100%</span><span class="delimiter">"</span></span> <span class="attribute-name">height</span>=<span class="string"><span class="delimiter">"</span><span class="content">15%</span><span class="delimiter">"</span></span> <span class="attribute-name">childLayout</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="tag"><image</span> <span class="attribute-name">filename</span>=<span class="string"><span class="delimiter">"</span><span class="content">Interface/face1.png</span><span class="delimiter">"</span></span> <span class="attribute-name">valign</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span> <span class="attribute-name">align</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span> <span class="attribute-name">height</span>=<span class="string"><span class="delimiter">"</span><span class="content">50%</span><span class="delimiter">"</span></span>
- <span class="attribute-name">width</span>=<span class="string"><span class="delimiter">"</span><span class="content">30%</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="tag"></image></span>
- <span class="tag"></panel></span></code></pre></div></div>
- <div class="paragraph"><p>This image is scaled to use 50% of the height and 30% of the width of its container.</p></div></div>
- <div class="sect2"><h3 id="add-static-text">Add Static Text</h3><div class="paragraph"><p>The game title is a typical example of static text. In the <code>start</code> screen, add the following text element:</p></div>
- <div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="xml"><span class="tag"><panel</span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">panel_top</span><span class="delimiter">"</span></span> <span class="attribute-name">height</span>=<span class="string"><span class="delimiter">"</span><span class="content">25%</span><span class="delimiter">"</span></span> <span class="attribute-name">width</span>=<span class="string"><span class="delimiter">"</span><span class="content">75%</span><span class="delimiter">"</span></span> <span class="attribute-name">align</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span> <span class="attribute-name">childLayout</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="tag"><text</span> <span class="attribute-name">text</span>=<span class="string"><span class="delimiter">"</span><span class="content">My Cool Game</span><span class="delimiter">"</span></span> <span class="attribute-name">font</span>=<span class="string"><span class="delimiter">"</span><span class="content">Interface/Fonts/Default.fnt</span><span class="delimiter">"</span></span> <span class="attribute-name">width</span>=<span class="string"><span class="delimiter">"</span><span class="content">100%</span><span class="delimiter">"</span></span> <span class="attribute-name">height</span>=<span class="string"><span class="delimiter">"</span><span class="content">100%</span><span class="delimiter">"</span></span><span class="tag">/></span>
- <span class="tag"></panel></span></code></pre></div></div>
- <div class="paragraph"><p>For longer pieces of static text, such as an introduction, you can use <code>wrap="true"</code>. Setting <code>wrap="true"</code> will only work when you set a width for the text element, so that Nifty knows when to wrap a line. Add the following text element to the <code>Start screen</code>:</p></div>
- <div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="xml"><span class="tag"><panel</span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">panel_mid</span><span class="delimiter">"</span></span> <span class="attribute-name">height</span>=<span class="string"><span class="delimiter">"</span><span class="content">50%</span><span class="delimiter">"</span></span> <span class="attribute-name">width</span>=<span class="string"><span class="delimiter">"</span><span class="content">75%</span><span class="delimiter">"</span></span> <span class="attribute-name">align</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span> <span class="attribute-name">childLayout</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="tag"><text</span> <span class="attribute-name">text</span>=<span class="string"><span class="delimiter">"</span><span class="content">Here goes some text describing the game and the rules and stuff. Incidentally,</span>
- <span class="content">the text is quite long and needs to wrap at the end of lines. ...</span><span class="delimiter">"</span></span>
- <span class="attribute-name">font</span>=<span class="string"><span class="delimiter">"</span><span class="content">Interface/Fonts/Default.fnt</span><span class="delimiter">"</span></span> <span class="attribute-name">width</span>=<span class="string"><span class="delimiter">"</span><span class="content">100%</span><span class="delimiter">"</span></span> <span class="attribute-name">height</span>=<span class="string"><span class="delimiter">"</span><span class="content">100%</span><span class="delimiter">"</span></span> <span class="attribute-name">wrap</span>=<span class="string"><span class="delimiter">"</span><span class="content">true</span><span class="delimiter">"</span></span><span class="tag">/></span>
- <span class="tag"></panel></span></code></pre></div></div>
- <div class="paragraph"><p>The font used is jME3’s default font “Interface/Fonts/Default.fnt” which is included in the jMonkeyEngine.JAR. You can add your own fonts to your own <code>assets/Interface/Fonts</code> directory.
- Adjust the path to your font-name.</p></div></div>
- <div class="sect2"><h3 id="add-controls">Add Controls</h3><div class="paragraph"><p>Before you can use any control, you must load a Control Definition first. Add the following two lines <em>before</em> your screen definitions:</p></div>
- <div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="xml"><span class="tag"><useStyles</span> <span class="attribute-name">filename</span>=<span class="string"><span class="delimiter">"</span><span class="content">nifty-default-styles.xml</span><span class="delimiter">"</span></span><span class="tag">/></span>
- <span class="tag"><useControls</span> <span class="attribute-name">filename</span>=<span class="string"><span class="delimiter">"</span><span class="content">nifty-default-controls.xml</span><span class="delimiter">"</span></span><span class="tag">/></span></code></pre></div></div>
- <div class="paragraph"><p>Note that the useStyles tag must be the first child of the nifty tag, otherwise you will see an error in design view.</p></div>
- <div class="sect3"><h4 id="label-control">Label Control</h4><div class="paragraph"><p>Use label controls for text that you want to edit dynamically from Java. One example for this is the score display.
- In the <code>hud</code> screen’s <code>foreground</code> layer, add the following text element:</p></div>
- <div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="xml"><span class="tag"><panel</span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">panel_top_right1</span><span class="delimiter">"</span></span> <span class="attribute-name">width</span>=<span class="string"><span class="delimiter">"</span><span class="content">100%</span><span class="delimiter">"</span></span> <span class="attribute-name">height</span>=<span class="string"><span class="delimiter">"</span><span class="content">15%</span><span class="delimiter">"</span></span> <span class="attribute-name">childLayout</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="tag"><control</span> <span class="attribute-name">name</span>=<span class="string"><span class="delimiter">"</span><span class="content">label</span><span class="delimiter">"</span></span> <span class="attribute-name">color</span>=<span class="string"><span class="delimiter">"</span><span class="content">#000</span><span class="delimiter">"</span></span> <span class="attribute-name">text</span>=<span class="string"><span class="delimiter">"</span><span class="content">123</span><span class="delimiter">"</span></span> <span class="attribute-name">width</span>=<span class="string"><span class="delimiter">"</span><span class="content">100%</span><span class="delimiter">"</span></span> <span class="attribute-name">height</span>=<span class="string"><span class="delimiter">"</span><span class="content">100%</span><span class="delimiter">"</span></span><span class="tag">/></span>
- <span class="tag"></panel></span></code></pre></div></div>
- <div class="paragraph"><p>Note that the width and height do not scale the bitmap font, but indirectly make certain it is centered. If you want a different size for the font, you need to provide an extra bitmap font (they come with fixed sizes and don’t scale well).</p></div></div>
- <div class="sect3"><h4 id="button-control">Button Control</h4><div class="paragraph"><p>Our <abbr title="Graphical User Interface">GUI</abbr> plan asks for two buttons on the start screen. You add the Start and Quit buttons to the bottom panel of the <code>start</code> screen using the <code><control></code> element:</p></div>
- <div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="xml"><span class="tag"><panel</span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">panel_bottom_left</span><span class="delimiter">"</span></span> <span class="attribute-name">height</span>=<span class="string"><span class="delimiter">"</span><span class="content">50%</span><span class="delimiter">"</span></span> <span class="attribute-name">width</span>=<span class="string"><span class="delimiter">"</span><span class="content">50%</span><span class="delimiter">"</span></span> <span class="attribute-name">valign</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span> <span class="attribute-name">childLayout</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="tag"><control</span> <span class="attribute-name">name</span>=<span class="string"><span class="delimiter">"</span><span class="content">button</span><span class="delimiter">"</span></span> <span class="attribute-name">label</span>=<span class="string"><span class="delimiter">"</span><span class="content">Start</span><span class="delimiter">"</span></span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">StartButton</span><span class="delimiter">"</span></span> <span class="attribute-name">align</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span> <span class="attribute-name">valign</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="tag"></control></span>
- <span class="tag"></panel></span>
- <span class="tag"><panel</span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">panel_bottom_right</span><span class="delimiter">"</span></span> <span class="attribute-name">height</span>=<span class="string"><span class="delimiter">"</span><span class="content">50%</span><span class="delimiter">"</span></span> <span class="attribute-name">width</span>=<span class="string"><span class="delimiter">"</span><span class="content">50%</span><span class="delimiter">"</span></span> <span class="attribute-name">valign</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span> <span class="attribute-name">childLayout</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="tag"><control</span> <span class="attribute-name">name</span>=<span class="string"><span class="delimiter">"</span><span class="content">button</span><span class="delimiter">"</span></span> <span class="attribute-name">label</span>=<span class="string"><span class="delimiter">"</span><span class="content">Quit</span><span class="delimiter">"</span></span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">QuitButton</span><span class="delimiter">"</span></span> <span class="attribute-name">align</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span> <span class="attribute-name">valign</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="tag"></control></span>
- <span class="tag"></panel></span></code></pre></div></div>
- <div class="paragraph"><p>Note that these controls don’t do anything yet – we’ll get to that soon.</p></div>
- <div class="paragraph"><p>Now remove all <strong>backgroundColor=""</strong> tags from your code. They were only needed to show the layout.</p></div>
- <div class="paragraph"><p>Your screen.xml should look like this:</p></div>
- <div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="xml"><span class="preprocessor"><?xml version="1.0" encoding="UTF-8"?></span>
- <span class="tag"><nifty</span> <span class="attribute-name">xmlns</span>=<span class="string"><span class="delimiter">"</span><span class="content">http://nifty-gui.lessvoid.com/nifty-gui</span><span class="delimiter">"</span></span> <span class="attribute-name">xmlns:xsi</span>=<span class="string"><span class="delimiter">"</span><span class="content">http://www.w3.org/2001/XMLSchema-instance</span><span class="delimiter">"</span></span> <span class="attribute-name">xsi:schemaLocation</span>=<span class="string"><span class="delimiter">"</span><span class="content">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</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="tag"><useStyles</span> <span class="attribute-name">filename</span>=<span class="string"><span class="delimiter">"</span><span class="content">nifty-default-styles.xml</span><span class="delimiter">"</span></span><span class="tag">/></span>
- <span class="tag"><useControls</span> <span class="attribute-name">filename</span>=<span class="string"><span class="delimiter">"</span><span class="content">nifty-default-controls.xml</span><span class="delimiter">"</span></span><span class="tag">/></span>
- <span class="tag"><screen</span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">start</span><span class="delimiter">"</span></span> <span class="attribute-name">controller</span>=<span class="string"><span class="delimiter">"</span><span class="content">de.lessvoid.nifty.screen.DefaultScreenController</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="tag"><layer</span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">background</span><span class="delimiter">"</span></span> <span class="attribute-name">childLayout</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="tag"><image</span> <span class="attribute-name">filename</span>=<span class="string"><span class="delimiter">"</span><span class="content">Interface/start-background.png</span><span class="delimiter">"</span></span><span class="tag">></span><span class="tag"></image></span>
- <span class="tag"></layer></span>
- <span class="tag"><layer</span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">foreground</span><span class="delimiter">"</span></span> <span class="attribute-name">childLayout</span>=<span class="string"><span class="delimiter">"</span><span class="content">vertical</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="tag"><panel</span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">panel_top</span><span class="delimiter">"</span></span> <span class="attribute-name">height</span>=<span class="string"><span class="delimiter">"</span><span class="content">25%</span><span class="delimiter">"</span></span> <span class="attribute-name">width</span>=<span class="string"><span class="delimiter">"</span><span class="content">75%</span><span class="delimiter">"</span></span> <span class="attribute-name">align</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span> <span class="attribute-name">childLayout</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="tag"><text</span> <span class="attribute-name">text</span>=<span class="string"><span class="delimiter">"</span><span class="content">My Cool Game</span><span class="delimiter">"</span></span> <span class="attribute-name">font</span>=<span class="string"><span class="delimiter">"</span><span class="content">Interface/Fonts/Default.fnt</span><span class="delimiter">"</span></span> <span class="attribute-name">width</span>=<span class="string"><span class="delimiter">"</span><span class="content">100%</span><span class="delimiter">"</span></span>
- <span class="attribute-name">height</span>=<span class="string"><span class="delimiter">"</span><span class="content">100%</span><span class="delimiter">"</span></span><span class="tag">/></span>
- <span class="tag"></panel></span>
- <span class="tag"><panel</span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">panel_mid</span><span class="delimiter">"</span></span> <span class="attribute-name">height</span>=<span class="string"><span class="delimiter">"</span><span class="content">50%</span><span class="delimiter">"</span></span> <span class="attribute-name">width</span>=<span class="string"><span class="delimiter">"</span><span class="content">75%</span><span class="delimiter">"</span></span> <span class="attribute-name">align</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span> <span class="attribute-name">childLayout</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="tag"><text</span> <span class="attribute-name">text</span>=<span class="string"><span class="delimiter">"</span><span class="content">Here goes some text describing the game and the rules and stuff.</span>
- <span class="content">Incidentally, the text is quite long and needs to wrap at the end of lines.</span><span class="delimiter">"</span></span>
- <span class="attribute-name">font</span>=<span class="string"><span class="delimiter">"</span><span class="content">Interface/Fonts/Default.fnt</span><span class="delimiter">"</span></span> <span class="attribute-name">width</span>=<span class="string"><span class="delimiter">"</span><span class="content">100%</span><span class="delimiter">"</span></span> <span class="attribute-name">height</span>=<span class="string"><span class="delimiter">"</span><span class="content">100%</span><span class="delimiter">"</span></span> <span class="attribute-name">wrap</span>=<span class="string"><span class="delimiter">"</span><span class="content">true</span><span class="delimiter">"</span></span><span class="tag">/></span>
- <span class="tag"></panel></span>
- <span class="tag"><panel</span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">panel_bottom</span><span class="delimiter">"</span></span> <span class="attribute-name">height</span>=<span class="string"><span class="delimiter">"</span><span class="content">25%</span><span class="delimiter">"</span></span> <span class="attribute-name">width</span>=<span class="string"><span class="delimiter">"</span><span class="content">75%</span><span class="delimiter">"</span></span> <span class="attribute-name">align</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span>
- <span class="attribute-name">childLayout</span>=<span class="string"><span class="delimiter">"</span><span class="content">horizontal</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="tag"><panel</span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">panel_bottom_left</span><span class="delimiter">"</span></span> <span class="attribute-name">height</span>=<span class="string"><span class="delimiter">"</span><span class="content">50%</span><span class="delimiter">"</span></span> <span class="attribute-name">width</span>=<span class="string"><span class="delimiter">"</span><span class="content">50%</span><span class="delimiter">"</span></span> <span class="attribute-name">valign</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span>
- <span class="attribute-name">childLayout</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="tag"><control</span> <span class="attribute-name">name</span>=<span class="string"><span class="delimiter">"</span><span class="content">button</span><span class="delimiter">"</span></span> <span class="attribute-name">label</span>=<span class="string"><span class="delimiter">"</span><span class="content">Start</span><span class="delimiter">"</span></span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">StartButton</span><span class="delimiter">"</span></span> <span class="attribute-name">align</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span>
- <span class="attribute-name">valign</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="tag"></control></span>
- <span class="tag"></panel></span>
- <span class="tag"><panel</span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">panel_bottom_right</span><span class="delimiter">"</span></span> <span class="attribute-name">height</span>=<span class="string"><span class="delimiter">"</span><span class="content">50%</span><span class="delimiter">"</span></span> <span class="attribute-name">width</span>=<span class="string"><span class="delimiter">"</span><span class="content">50%</span><span class="delimiter">"</span></span> <span class="attribute-name">valign</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span>
- <span class="attribute-name">childLayout</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="tag"><control</span> <span class="attribute-name">name</span>=<span class="string"><span class="delimiter">"</span><span class="content">button</span><span class="delimiter">"</span></span> <span class="attribute-name">label</span>=<span class="string"><span class="delimiter">"</span><span class="content">Quit</span><span class="delimiter">"</span></span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">QuitButton</span><span class="delimiter">"</span></span> <span class="attribute-name">align</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span>
- <span class="attribute-name">valign</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="tag"></control></span>
- <span class="tag"></panel></span>
- <span class="tag"></panel></span>
- <span class="tag"></layer></span>
- <span class="tag"></screen></span>
- <span class="tag"><screen</span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">hud</span><span class="delimiter">"</span></span> <span class="attribute-name">controller</span>=<span class="string"><span class="delimiter">"</span><span class="content">de.lessvoid.nifty.screen.DefaultScreenController</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="tag"><layer</span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">background</span><span class="delimiter">"</span></span> <span class="attribute-name">childLayout</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="tag"><image</span> <span class="attribute-name">filename</span>=<span class="string"><span class="delimiter">"</span><span class="content">Interface/hud-frame.png</span><span class="delimiter">"</span></span>
- <span class="attribute-name">imageMode</span>=<span class="string"><span class="delimiter">"</span><span class="content">resize:40,490,110,170,40,560,40,270,40,560,40,40</span><span class="delimiter">"</span></span> <span class="attribute-name">width</span>=<span class="string"><span class="delimiter">"</span><span class="content">100%</span><span class="delimiter">"</span></span>
- <span class="attribute-name">height</span>=<span class="string"><span class="delimiter">"</span><span class="content">100%</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="tag"></image></span>
- <span class="tag"></layer></span>
- <span class="tag"><layer</span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">foreground</span><span class="delimiter">"</span></span> <span class="attribute-name">childLayout</span>=<span class="string"><span class="delimiter">"</span><span class="content">horizontal</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="tag"><panel</span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">panel_left</span><span class="delimiter">"</span></span> <span class="attribute-name">width</span>=<span class="string"><span class="delimiter">"</span><span class="content">80%</span><span class="delimiter">"</span></span> <span class="attribute-name">height</span>=<span class="string"><span class="delimiter">"</span><span class="content">100%</span><span class="delimiter">"</span></span> <span class="attribute-name">childLayout</span>=<span class="string"><span class="delimiter">"</span><span class="content">vertical</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="tag"></panel></span>
- <span class="tag"><panel</span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">panel_right</span><span class="delimiter">"</span></span> <span class="attribute-name">width</span>=<span class="string"><span class="delimiter">"</span><span class="content">20%</span><span class="delimiter">"</span></span> <span class="attribute-name">height</span>=<span class="string"><span class="delimiter">"</span><span class="content">100%</span><span class="delimiter">"</span></span> <span class="attribute-name">childLayout</span>=<span class="string"><span class="delimiter">"</span><span class="content">vertical</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="tag"><panel</span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">panel_top_right1</span><span class="delimiter">"</span></span> <span class="attribute-name">width</span>=<span class="string"><span class="delimiter">"</span><span class="content">100%</span><span class="delimiter">"</span></span> <span class="attribute-name">height</span>=<span class="string"><span class="delimiter">"</span><span class="content">15%</span><span class="delimiter">"</span></span> <span class="attribute-name">childLayout</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="tag"><control</span> <span class="attribute-name">name</span>=<span class="string"><span class="delimiter">"</span><span class="content">label</span><span class="delimiter">"</span></span> <span class="attribute-name">color</span>=<span class="string"><span class="delimiter">"</span><span class="content">#000</span><span class="delimiter">"</span></span> <span class="attribute-name">text</span>=<span class="string"><span class="delimiter">"</span><span class="content">123</span><span class="delimiter">"</span></span> <span class="attribute-name">width</span>=<span class="string"><span class="delimiter">"</span><span class="content">100%</span><span class="delimiter">"</span></span> <span class="attribute-name">height</span>=<span class="string"><span class="delimiter">"</span><span class="content">100%</span><span class="delimiter">"</span></span><span class="tag">/></span>
- <span class="tag"></panel></span>
- <span class="tag"><panel</span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">panel_top_right2</span><span class="delimiter">"</span></span> <span class="attribute-name">width</span>=<span class="string"><span class="delimiter">"</span><span class="content">100%</span><span class="delimiter">"</span></span> <span class="attribute-name">height</span>=<span class="string"><span class="delimiter">"</span><span class="content">15%</span><span class="delimiter">"</span></span> <span class="attribute-name">childLayout</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="tag"><image</span> <span class="attribute-name">filename</span>=<span class="string"><span class="delimiter">"</span><span class="content">Interface/face1.png</span><span class="delimiter">"</span></span> <span class="attribute-name">valign</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span> <span class="attribute-name">align</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span>
- <span class="attribute-name">height</span>=<span class="string"><span class="delimiter">"</span><span class="content">50%</span><span class="delimiter">"</span></span> <span class="attribute-name">width</span>=<span class="string"><span class="delimiter">"</span><span class="content">30%</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="tag"></image></span>
- <span class="tag"></panel></span>
- <span class="tag"><panel</span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">panel_bot_right</span><span class="delimiter">"</span></span> <span class="attribute-name">width</span>=<span class="string"><span class="delimiter">"</span><span class="content">100%</span><span class="delimiter">"</span></span> <span class="attribute-name">height</span>=<span class="string"><span class="delimiter">"</span><span class="content">70%</span><span class="delimiter">"</span></span> <span class="attribute-name">valign</span>=<span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span><span class="tag">></span>
- <span class="tag"></panel></span>
- <span class="tag"></panel></span>
- <span class="tag"></layer></span>
- <span class="tag"></screen></span>
- <span class="tag"></nifty></span></code></pre></div></div></div>
- <div class="sect3"><h4 id="other-controls">Other Controls</h4><div class="paragraph"><p>Nifty additionally offers many customizable controls such as check boxes, text fields, menus, chats, tabs, …</p></div>
- <div class="paragraph"><p>See also:</p></div>
- <div class="ulist"><ul><li><p><a href="https://github.com/nifty-gui/nifty-gui/raw/1.4/nifty-core/manual/nifty-gui-the-manual-1.3.2.pdf">Nifty GUI - the Manual: Elements</a></p></li><li><p><a href="https://github.com/nifty-gui/nifty-gui/wiki/Controls">Controls</a></p></li></ul></div></div></div></div>
- <div class="sect1"><h2 id="intermediate-result">Intermediate Result</h2><div class="sectionbody"><div class="paragraph"><p>When you preview this code in the jMonkeyEngine SDK, our tutorial demo should looks as follows: A start screen with two buttons, and a game screen with a simple HUD frame and a blue cube (which stands for any jME3 game content).</p></div>
- <div style="text-align: center;" class="imageblock"><div class="content"><img src="../../jme3/advanced/nifty-gui-simple-demo.png" alt="nifty-gui-simple-demo.png" width="" height=""></div></div>
- <div class="paragraph"><p>Compare this result with the layout draft above.</p></div></div></div>
- <div class="sect1"><h2 id="next-steps">Next Steps</h2><div class="sectionbody"><div class="paragraph"><p>Integrate the <abbr title="Graphical User Interface">GUI</abbr> into the game. Typically, you will overlay the <abbr title="Graphical User Interface">GUI</abbr>.</p></div>
- <div class="ulist"><ul><li><p><a href="../../jme3/advanced/nifty_gui_overlay.html">Nifty GUI Overlay</a> (recommended)</p></li><li><p><a href="../../jme3/advanced/nifty_gui_projection.html">Nifty GUI Projection</a> (optional)</p></li></ul></div></div></div></div><div id="footer"><div id="footer-text">Version <br>Last updated 2019-12-20 23:30:51 +00:00</div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script><script>docsearch({
- apiKey: 'a736b6d93de805e26ec2f49b55013fbd',
- indexName: 'jmonkeyengine',
- inputSelector: '#doc-search',
- debug: false // Set debug to true if you want to inspect the dropdown
- });</script></body></html>
|
