java
/
jMonkeyEngine-wiki
oglindă de https://github.com/jMonkeyEngine/wiki.git


			
				
					
						
						
							12345678910111213141516171819202122
							<!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>Creating JME3 User Interfaces with Nifty GUI</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.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>Creating JME3 User Interfaces with Nifty GUI</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="#tutorial-overview">Tutorial Overview</a></li><li><a href="#must-know-nifty-gui-concepts">Must Know: Nifty GUI Concepts</a><ul class="sectlevel2"><li><a href="#jme-nifty-sample-code">JME-Nifty Sample Code</a></li><li><a href="#external-documentation">External Documentation</a></li></ul></li><li><a href="#nifty-logging-nifty-1-4-2">Nifty Logging (Nifty 1.4.2)</a></li></ul></div></div><div id="content"><div id="preamble"><div class="sectionbody"><div style="text-align: left;" class="imageblock"><div class="content"><img src="../../jme3/advanced/nifty-gui-13.png" alt="nifty-gui-13.png" width="276" height="217"></div></div>
<div class="paragraph"><p>You may want your players to press a button to save a game, you want a scrolling text field for highscores, a text label to display the score, drop-downs to select keymap preferences, or checkboxes to specify multi-media options. Usually you solve these tasks by using Swing controls. Although it is possible to embed a <a href="../../jme3/advanced/swing_canvas.html">jME3 canvas</a> in a Swing <abbr title="Graphical User Interface">GUI</abbr>, a 3D game typically runs full-screen, or in a window of its own.</p></div>
<div class="paragraph"><p>This document introduces you to <a href="https://github.com/nifty-gui/nifty-gui/">Nifty GUI</a>, a Java library for building interactive graphical user interfaces (GUIs) for games or similar applications. Nifty <abbr title="Graphical User Interface">GUI</abbr> (the <code>de.lessvoid.nifty</code> package) is well integrated with jME3 through the <code>com.jme3.niftygui</code> package. You define the base <abbr title="Graphical User Interface">GUI</abbr> layout in XML, and control it dynamically from your Java code. The necessary JAR libraries are included in your jME3 download, you do not need to install anything extra. (Just make sure they are on the classpath.)</p></div>
<div class="ulist"><ul><li><p><a href="http://vimeo.com/25637085">Video demo of Nifty GUI 1.3</a></p></li></ul></div></div></div>
<div class="sect1"><h2 id="tutorial-overview">Tutorial Overview</h2><div class="sectionbody"><div class="paragraph"><p>Learn to add a Nifty <abbr title="Graphical User Interface">GUI</abbr> to your jME3 game by going through this multi-part tutorial:</p></div>
<div class="olist arabic"><ol class="arabic"><li><p>Understand the Nifty GUI Concepts described on this page.</p></li><li><p><a href="../../jme3/advanced/nifty_gui_best_practices.html">Browse this short list of Best Practices</a></p></li><li><p>Lay out your graphical user interface:</p><div class="ulist"><ul><li><p><a href="../../jme3/advanced/nifty_gui_xml_layout.html">Lay out the GUI in XML</a> – or –</p></li><li><p><a href="../../jme3/advanced/nifty_gui_java_layout.html">Lay out the GUI in Java</a></p></li></ul></div></li><li><p>Integrate the <abbr title="Graphical User Interface">GUI</abbr> into the game:</p><div class="ulist"><ul><li><p><a href="../../jme3/advanced/nifty_gui_overlay.html">Overlay the User Interface Over the Screen</a>  – or –</p></li><li><p><a href="../../jme3/advanced/nifty_gui_projection.html">Project the User Interface Onto a Texture</a></p></li></ul></div></li><li><p><a href="../../jme3/advanced/nifty_gui_java_interaction.html">Interact with the GUI from Java</a></p></li></ol></div></div></div>
<div class="sect2"><h3 id="must-know-nifty-gui-concepts">Must Know: Nifty GUI Concepts</h3><div class="paragraph"><p><span class="image"><img src="../../jme3/advanced/nifty-screen-layer-panel.png" alt="nifty-screen-layer-panel.png" width="" height=""></span></p></div>
<div class="paragraph"><p>Nifty GUIs are made up of the following <strong>elements</strong>:</p></div>
<div class="ulist"><ul><li><p>A Nifty <abbr title="Graphical User Interface">GUI</abbr> contains one or more <strong>screens</strong>.</p><div class="ulist"><ul><li><p>Only one screen is visible at a time.</p></li><li><p>Name the first screen <code>start</code>. Name any others whatever you like.</p></li><li><p>Screen are <a href="../../jme3/advanced/nifty_gui_java_interaction.html">controlled by a Java Controller class</a>.</p></li></ul></div></li><li><p>A screen contains one or more <strong>layers</strong>.</p><div class="ulist"><ul><li><p>Layers are containers that impose alignment on their contents (vertical, horizontal, or centered)</p></li><li><p>Layers can overlap (z-order), and cannot be nested.</p></li></ul></div></li><li><p>A layer contains <strong>panels</strong>.</p><div class="ulist"><ul><li><p>Panels are containers that impose alignment on their contents (vertical, horizontal, or centered)</p></li><li><p>Panels can be nested, and cannot overlap.</p></li></ul></div></li><li><p>A panel contains <strong>images, text, or controls (buttons, etc)</strong>.</p></li></ul></div>
<div class="sect2"><h3 id="jme-nifty-sample-code">JME-Nifty Sample Code</h3><div class="ulist"><ul><li><p>XML examples</p><div class="ulist"><ul><li><p><a href="https://github.com/jMonkeyEngine/jmonkeyengine/blob/master/jme3-testdata/src/main/resources/Interface/Nifty/HelloJme.xml">HelloJme.xml</a> - Can be found in <a href="../../sdk/sample_code.html#jme3testdata-assets">jme-testdata/Interface/Nifty</a> also.</p></li></ul></div></li><li><p>Java examples</p><div class="ulist"><ul><li><p><a href="https://github.com/jMonkeyEngine/jmonkeyengine/blob/master/jme3-examples/src/main/java/jme3test/niftygui/TestNiftyGui.java">TestNiftyGui.java</a> - Can be found in <a href="../../sdk/sample_code.html#the-jme3tests-project-template">jme3 tests</a> also.</p></li><li><p><a href="https://github.com/jMonkeyEngine/jmonkeyengine/blob/master/jme3-examples/src/main/java/jme3test/niftygui/TestNiftyToMesh.java">TestNiftyToMesh.java</a> - Can be found in <a href="../../sdk/sample_code.html#the-jme3tests-project-template">jme3 tests</a> also.</p></li></ul></div></li><li><p>jME3-ready version of the Nifty <abbr title="Graphical User Interface">GUI</abbr> 1.3 demo (sample code, Java)</p><div class="ulist"><ul><li><p><a href="http://files.seapegasus.org/NiftyGuiDemo.zip">NiftyGuiDemo.zip</a></p></li></ul></div></li><li><p>Find more sample code in the <a href="https://github.com/nifty-gui/nifty-gui/tree/1.4/nifty-examples/src/main/java/de/lessvoid/nifty/examples">nifty-examples</a> repositories.</p><div class="ulist"><ul><li><p><a href="https://github.com/nifty-gui/nifty-gui/wiki/Examples">Running The Nifty Examples</a></p></li></ul></div></li></ul></div></div>
<div class="sect2"><h3 id="external-documentation">External Documentation</h3><div class="paragraph"><p>Learn more from the NiftyGUI page:</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</a></p></li><li><p><a href="https://github.com/nifty-gui/nifty-gui/wiki">Nifty GUI - Wiki</a></p></li><li><p><a href="http://nifty-gui.sourceforge.net/projects/1.4.2/nifty/nifty/apidocs/index.html">Nifty 1.4.2 JavaDoc</a></p></li><li><p><a href="http://nifty-gui.sourceforge.net/projects/1.4.2/nifty/nifty-default-controls/apidocs/index.html">Nifty 1.4.2 Controls JavaDoc</a></p></li><li><p><a href="https://hub.jmonkeyengine.org/t/anyone-succeeded-in-changing-text-in-nifty-programatically/14424">Forum post: Changing Text in Nifty GUIs programmatically</a></p></li></ul></div></div></div>
<div class="sect1"><h2 id="nifty-logging-nifty-1-4-2">Nifty Logging (Nifty 1.4.2)</h2><div class="sectionbody"><div class="paragraph"><p>If you want to disable the nifty log lines, add this code after you created nifty:</p></div>
<div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code>Logger.getLogger("de.lessvoid.nifty").setLevel(Level.SEVERE);
Logger.getLogger("NiftyInputEventHandlingLog").setLevel(Level.SEVERE);</code></pre></div></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>