java
/
jMonkeyEngine-wiki
spegling av https://github.com/jMonkeyEngine/wiki.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
							<!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, click, state, states, sound, effect"><title>Nifty GUI 1.4.2 - Usecase Scenarios</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_scenarios.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>Nifty GUI 1.4.2 - Usecase Scenarios</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="#switch-game-states">Switch Game States</a></li><li><a href="#get-access-to-application-and-update-loop">Get Access to Application and Update Loop</a></li><li><a href="#know-your-variables">Know Your Variables</a></li><li><a href="#use-screencontrollers-for-mutally-exclusive-functionality">Use ScreenControllers for Mutally Exclusive Functionality</a></li><li><a href="#create-a-loading-screen">Create a "Loading&#8230;&#8203;" Screen</a></li><li><a href="#create-a-popup-menu">Create a Popup Menu</a></li><li><a href="#add-visual-effects">Add Visual Effects</a></li><li><a href="#add-sound-effects">Add Sound Effects</a></li><li><a href="#pass-clickloc-from-nifty-to-java">Pass ClickLoc From Nifty to Java</a></li><li><a href="#load-several-xml-files">Load Several XML Files</a></li><li><a href="#register-additional-explicit-screen-controllers">Register additional explicit screen controllers</a></li><li><a href="#design-your-own-styles">Design Your Own Styles</a></li></ul></div></div><div id="content"><div id="preamble"><div class="sectionbody"><div class="paragraph"><p>This document contains typical NiftyGUI usecase scenarios, such as adding effects, game states, and creating typical game screens.</p></div>
<div class="paragraph"><p>Requirements: These tips assume that you have read and understood the <a href="../../jme3/advanced/nifty_gui.html">Creating JME3 User Interfaces with Nifty GUI</a> tutorial, and have already laid out a basic <abbr title="Graphical User Interface">GUI</abbr> that interacts with your JME3 application. Here you learn how you integrate the <abbr title="Graphical User Interface">GUI</abbr> better, and add effects and advanced controls.</p></div></div></div>
<div class="sect1"><h2 id="switch-game-states">Switch Game States</h2><div class="sectionbody"><div class="paragraph"><p>In a JME game, you typically have three game states:</p></div>
<div class="olist arabic"><ol class="arabic"><li><p>Stopped: The game is stopped, a StartScreen is displayed.</p></li><li><p>Running: The game is running, the in-game HudScreen is displayed.</p></li><li><p>Paused: The game is paused, a PausedScreen is displayed.</p></li></ol></div>
<div class="paragraph"><p>(Aside: Additionally, the Stopped state often contains a LoadScreen, LogonScreen, OptionsScreen, CharacterCreationScreen, HighScoreScreen, CreditsScreen, etc. Some games let you access the OptionsScreen in the Paused state as well. The Running state can also contain an InventoryScreen, ItemShopScreen, StatsScreen, SkillScreen, etc.)</p></div>
<div class="paragraph"><p>In JME, game states are implemented as custom <a href="../../jme3/advanced/application_states.html">AppState</a> objects. Write each AppState so it brings its own input mappings, rootNode content, update loop behaviour, etc with it.</p></div>
<div class="olist arabic"><ol class="arabic"><li><p>Stopped: StartScreen AppState + GuiInputs AppState</p></li><li><p>Paused: PausedScreen AppState + GuiInputs AppState</p></li><li><p>Running: HudScreen AppState + InGameInputs AppState + BulletAppState (jme physics), …</p></li></ol></div>
<div class="paragraph"><p>When the player switches between game states, you detach one set of AppStates, and attach another. For example, when the player pauses the running game, you use a boolean switch to pause the game loop and deactivate the game inputs (shooting, navigation). The screen is overlayed with a PausedScreen, which contains a visible mouse pointer and a Continue button. When the player clicks Continue, the mouse pointer is deactivated, the in-game input and navigational mappings are activated, and the game loop continues.</p></div></div></div>
<div class="sect1"><h2 id="get-access-to-application-and-update-loop">Get Access to Application and Update Loop</h2><div class="sectionbody"><div class="paragraph"><p>Since you are writing a jME3 application, you can additionally make any ScreenController class extend the <a href="../../jme3/advanced/application_states.html">BaseAppState</a> class.
This gives the ScreenController access to the application object and to the update loop!</p></div>
<div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="java"><span class="directive">public</span> <span class="type">class</span> <span class="class">StartScreenState</span> <span class="directive">extends</span> BaseAppState <span class="directive">implements</span> ScreenController {

    <span class="directive">private</span> Node localRootNode = <span class="keyword">new</span> Node(<span class="string"><span class="delimiter">&quot;</span><span class="content">Start Screen RootNode</span><span class="delimiter">&quot;</span></span>);
    <span class="directive">private</span> Node localGuiNode = <span class="keyword">new</span> Node(<span class="string"><span class="delimiter">&quot;</span><span class="content">Start Screen GuiNode</span><span class="delimiter">&quot;</span></span>);
    <span class="directive">private</span> <span class="directive">final</span> ColorRGBA backgroundColor = ColorRGBA.Gray;

    <span class="annotation">@Override</span>
    <span class="directive">protected</span> <span class="type">void</span> initialize(Application app) {
        <span class="comment">//It is technically safe to do all initialization and cleanup in the</span>
        <span class="comment">//onEnable()/onDisable() methods. Choosing to use initialize() and</span>
        <span class="comment">//cleanup() for this is a matter of performance specifics for the</span>
        <span class="comment">//implementor.</span>
        <span class="comment">//TODO: initialize your AppState, e.g. attach spatials to rootNode</span>
        ((SimpleApplication) app).getRootNode().attachChild(localRootNode);
        ((SimpleApplication) app).getGuiNode().attachChild(localGuiNode);
        ((SimpleApplication) app).getViewPort().setBackgroundColor(backgroundColor);

        <span class="comment">/** init the screen */</span>
    }

    <span class="annotation">@Override</span>
    <span class="directive">protected</span> <span class="type">void</span> cleanup(Application app) {
        <span class="comment">//TODO: clean up what you initialized in the initialize method,</span>
        <span class="comment">//e.g. remove all spatials from rootNode</span>
        ((SimpleApplication) app).getRootNode().detachChild(localRootNode);
        ((SimpleApplication) app).getGuiNode().detachChild(localGuiNode);
    }

    <span class="comment">//onEnable()/onDisable() can be used for managing things that should</span>
    <span class="comment">//only exist while the state is enabled. Prime examples would be scene</span>
    <span class="comment">//graph attachment or input listener attachment.</span>
    <span class="annotation">@Override</span>
    <span class="directive">protected</span> <span class="type">void</span> onEnable() {
        <span class="comment">//Called when the state is fully enabled, ie: is attached and</span>
        <span class="comment">//isEnabled() is true or when the setEnabled() status changes after the</span>
        <span class="comment">//state is attached.</span>
    }

    <span class="annotation">@Override</span>
    <span class="directive">protected</span> <span class="type">void</span> onDisable() {
        <span class="comment">//Called when the state was previously enabled but is now disabled</span>
        <span class="comment">//either because setEnabled(false) was called or the state is being</span>
        <span class="comment">//cleaned up.</span>
    }

    <span class="annotation">@Override</span>
    <span class="directive">public</span> <span class="type">void</span> update(<span class="type">float</span> tpf) {
        <span class="comment">//TODO: implement behavior during runtime</span>
    }

    <span class="annotation">@Override</span>
    <span class="directive">public</span> <span class="type">void</span> bind(Nifty nifty, Screen screen) {
    }

    <span class="annotation">@Override</span>
    <span class="directive">public</span> <span class="type">void</span> onStartScreen() {
    }

    <span class="annotation">@Override</span>
    <span class="directive">public</span> <span class="type">void</span> onEndScreen() {
    }

}</code></pre></div></div>
<div class="admonitionblock important"><table><tr><td class="icon"><i class="fa icon-important" title="Important"></i></td><td class="content"><div class="paragraph"><p>It is not sufficient to just inherit from BaseAppState. You need to instantiate your controller class, register it with app&#8217;s stateManager and then pass it to nifty. Remember, to connect a screen with a ScreenController you still need to specify the fully qualified class name of
your ScreenController in the controller attribute of the &lt;screen&gt; tag in the xml file. See code sample below.</p></div></td></tr></table></div>
<div class="listingblock"><div class="title">XML example</div>
<div class="content"><pre class="CodeRay highlight"><code data-lang="java"><span class="directive">public</span> <span class="type">class</span> <span class="class">TestNiftyGui</span> <span class="directive">extends</span> SimpleApplication {
  <span class="directive">public</span> <span class="type">void</span> simpleInitApp() {
     StartScreenState startScreenState = <span class="keyword">new</span> StartScreenState();
     stateManager.attach(startScreenState);
     <span class="comment">// [...] boilerplate init nifty omitted</span>
     nifty.fromXml(<span class="string"><span class="delimiter">&quot;</span><span class="content">Interface/myGui.xml</span><span class="delimiter">&quot;</span></span>, <span class="string"><span class="delimiter">&quot;</span><span class="content">start</span><span class="delimiter">&quot;</span></span>, startScreenState); <span class="comment">//one of the XML screen elements needs to reference StartScreenState controller class</span>
  }
}</code></pre></div></div></div></div>
<div class="sect1"><h2 id="know-your-variables">Know Your Variables</h2><div class="sectionbody"><table class="tableblock frame-all grid-all spread"><colgroup><col style="width: 50%;"><col style="width: 50%;"></colgroup><thead><tr><th class="tableblock halign-left valign-top">Variable</th><th class="tableblock halign-left valign-top">Description</th></tr></thead><tbody><tr><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>${CALL.myMethod()}</p></div></div></td><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>Calls a method in the current ScreenController and gets the method&#8217;s return String. The method can also be void and have a side effect, e.g. play a sound etc.</p></div></div></td></tr><tr><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>${ENV.HOME}</p></div></div></td><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>Returns the path to user&#8217;s home directory.</p></div></div></td></tr><tr><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>${ENV.key}</p></div></div></td><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>Looks up <code>key</code> in the environment variables. Use it like Java&#8217;s System.getEnv(“key).</p></div></div></td></tr><tr><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>${PROP.key}</p></div></div></td><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>looks up <code>key</code> in the Nifty properties. Use Nifty.setGlobalproperties(properties) and Nifty.getGlobalproperties(“key). Or SystemGetProperties(key);</p></div></div></td></tr></tbody></table>
<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: XML GUI (Special XML Markup)</a></p></div></div></div>
<div class="sect1"><h2 id="use-screencontrollers-for-mutally-exclusive-functionality">Use ScreenControllers for Mutally Exclusive Functionality</h2><div class="sectionbody"><div class="paragraph"><p>Technically you are free to create one ScreenController class for each screen, or reuse the same ScreenController for all or some of them. In the end it may be best to create individual ScreenControllers for functionality that is mutually exclusive.</p></div>
<div class="paragraph"><p>For example, create a <code>MyHudScreen.java</code> for the <code>hud</code> screen, and a <code>MyStartScreen.java</code> for the <code>start</code> screen.</p></div>
<div class="ulist"><ul><li><p>Include all user interface methods that are needed during the game (while the HUD is up) in <code>MyHudScreen.java</code>. Then make this class control all screens that can be up during the game (the HUD screen, a MiniMap screen, an Inventory screen, an Abilities or Skills screen, etc). All these screens possibly share data (game data, player data), so it makes sense to control them all with methods of the same <code>MyHudScreen.java</code> class.</p></li><li><p>The start screen, however, is mostly independent of the running game. Include all user interface methods that are needed outside the game (while you are on the start screen) in <code>MyStartScreen.java</code>. Then make this class control all screens that can be up outside the game (the Start screen, a Settings/Options screen, a HighScore screen, etc). All these classes need to read and write saved game data, so it makes sense to control them all with methods of the same <code>MyStartScreen.java</code> class.</p></li></ul></div></div></div>
<div class="sect1"><h2 id="create-a-loading-screen">Create a "Loading&#8230;&#8203;" Screen</h2><div class="sectionbody"><div class="paragraph"><p>Get the full <a href="../../jme3/advanced/loading_screen.html">Loading Screen</a> tutorial here.</p></div></div></div>
<div class="sect1"><h2 id="create-a-popup-menu">Create a Popup Menu</h2><div class="sectionbody"><div class="paragraph"><p>Get the full <a href="../../jme3/advanced/nifty_gui_popup_menu.html">Nifty GUI PopUp Menu</a> tutorial here.</p></div></div></div>
<div class="sect1"><h2 id="add-visual-effects">Add Visual Effects</h2><div class="sectionbody"><div class="paragraph"><p>You can register effects to screen elements.</p></div>
<div class="ulist"><ul><li><p>Respond to element events such as onStartScreen, onEndScreen, onHover, onFocus, onActive,</p></li><li><p>Trigger effects that change movement, blending, size, color, fading, and much more.</p></li></ul></div>
<div class="paragraph"><p>Here is an example that moves a panel when the startScreen opens. You place an &lt; effect &gt; tag inside the element that you want to  be affected.</p></div>
<div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="xml"><span class="tag">&lt;panel</span> <span class="attribute-name">height</span>=<span class="string"><span class="delimiter">&quot;</span><span class="content">25%</span><span class="delimiter">&quot;</span></span> <span class="attribute-name">width</span>=<span class="string"><span class="delimiter">&quot;</span><span class="content">35%</span><span class="delimiter">&quot;</span></span> <span class="attribute-name">...</span><span class="tag">&gt;</span>
  <span class="tag">&lt;effect&gt;</span>
    <span class="tag">&lt;onStartScreen</span> <span class="attribute-name">name</span>=<span class="string"><span class="delimiter">&quot;</span><span class="content">move</span><span class="delimiter">&quot;</span></span> <span class="attribute-name">mode</span>=<span class="string"><span class="delimiter">&quot;</span><span class="content">in</span><span class="delimiter">&quot;</span></span> <span class="attribute-name">direction</span>=<span class="string"><span class="delimiter">&quot;</span><span class="content">top</span><span class="delimiter">&quot;</span></span> <span class="attribute-name">length</span>=<span class="string"><span class="delimiter">&quot;</span><span class="content">300</span><span class="delimiter">&quot;</span></span> <span class="attribute-name">startDelay</span>=<span class="string"><span class="delimiter">&quot;</span><span class="content">0</span><span class="delimiter">&quot;</span></span> <span class="attribute-name">inherit</span>=<span class="string"><span class="delimiter">&quot;</span><span class="content">true</span><span class="delimiter">&quot;</span></span><span class="tag">/&gt;</span>
  <span class="tag">&lt;/effect&gt;</span>
<span class="tag">&lt;/panel&gt;</span></code></pre></div></div>
<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: Effects</a></p></li><li><p><a href="https://github.com/nifty-gui/nifty-gui/wiki/Effects">Effects</a></p></li></ul></div></div></div>
<div class="sect1"><h2 id="add-sound-effects">Add Sound Effects</h2><div class="sectionbody"><div class="paragraph"><p>Playing sounds using Nifty is also possible with a <code>playSound</code> effect as trigger. Remember to first register the sound that you want to play:</p></div>
<div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="xml"><span class="tag">&lt;registerSound</span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">&quot;</span><span class="content">myclick</span><span class="delimiter">&quot;</span></span> <span class="attribute-name">filename</span>=<span class="string"><span class="delimiter">&quot;</span><span class="content">Interface/sounds/ButtonClick.ogg</span><span class="delimiter">&quot;</span></span> <span class="tag">/&gt;</span>
...
<span class="tag">&lt;label&gt;</span>
  <span class="tag">&lt;effect&gt;</span>
    <span class="tag">&lt;onClick</span> <span class="attribute-name">name</span>=<span class="string"><span class="delimiter">&quot;</span><span class="content">playSound</span><span class="delimiter">&quot;</span></span> <span class="attribute-name">sound</span>=<span class="string"><span class="delimiter">&quot;</span><span class="content">myclick</span><span class="delimiter">&quot;</span></span><span class="tag">/&gt;</span>
  <span class="tag">&lt;/effect&gt;</span>
<span class="tag">&lt;/label&gt;</span></code></pre></div></div></div></div>
<div class="sect1"><h2 id="pass-clickloc-from-nifty-to-java">Pass ClickLoc From Nifty to Java</h2><div class="sectionbody"><div class="paragraph"><p>After a mouse click, you may want to record the 2D clickLoc and send this info to your Java application. Typical ScreenController methods however only have a String argument. You&#8217;d have to convert the String to ints.</p></div>
<div class="paragraph"><p>To pass the clickLoc as two ints, you can use the special <code>(int x, int y)</code> syntax in the ScreenController:</p></div>
<div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="java">  <span class="directive">public</span> <span class="type">void</span> clicked(<span class="type">int</span> x, <span class="type">int</span> y) {
    <span class="comment">// here you can use the x and y of the clickLoc</span>
  }</code></pre></div></div>
<div class="paragraph"><p>In the Nifty <abbr title="Graphical User Interface">GUI</abbr> screen code (e.g. XML file) you must call the <code>(int x, int y)</code> method <em>without</em> any parameters!</p></div>
<div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="xml"><span class="tag">&lt;interact</span> <span class="attribute-name">onClick</span>=<span class="string"><span class="delimiter">&quot;</span>clicked()<span class="delimiter">&quot;</span></span><span class="tag">/&gt;</span></code></pre></div></div>
<div class="paragraph"><p>You can name the method (here <code>clicked</code>) what ever you like, as long as you keep the argument syntax.</p></div></div></div>
<div class="sect1"><h2 id="load-several-xml-files">Load Several XML Files</h2><div class="sectionbody"><div class="paragraph"><p>The basic Nifty <abbr title="Graphical User Interface">GUI</abbr> example showed how to use the <code>nifty.fromXML()</code> method to load one XML file containing all Nifty <abbr title="Graphical User Interface">GUI</abbr> screens.
The following code sample shows how you can load several XML files into one nifty object. Loading several files with <code>nifty.addXml()</code> allows you to split up each screen into one XML file, instead of all into one hard-to-read XML file.</p></div>
<div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="java">NiftyJmeDisplay niftyDisplay = <span class="keyword">new</span> NiftyJmeDisplay(assetManager, inputManager, audioRenderer, viewPort);
Nifty nifty = niftyDisplay.getNifty();
nifty.addXml(<span class="string"><span class="delimiter">&quot;</span><span class="content">Interface/Screens/OptionsScreen.xml</span><span class="delimiter">&quot;</span></span>);
nifty.addXml(<span class="string"><span class="delimiter">&quot;</span><span class="content">Interface/Screens/StartScreen.xml</span><span class="delimiter">&quot;</span></span>);
nifty.gotoScreen(<span class="string"><span class="delimiter">&quot;</span><span class="content">startScreen</span><span class="delimiter">&quot;</span></span>);
StartScreenControl screenControl = (StartScreenControl) nifty.getScreen(<span class="string"><span class="delimiter">&quot;</span><span class="content">startScreen</span><span class="delimiter">&quot;</span></span>).getScreenController();
OptionsScreenControl optionsControl = (OptionsScreenControl) nifty.getScreen(<span class="string"><span class="delimiter">&quot;</span><span class="content">optionsScreen</span><span class="delimiter">&quot;</span></span>).getScreenController();
stateManager.attach(screenControl);
stateManager.attach(optionsControl);
guiViewPort.addProcessor(niftyDisplay);</code></pre></div></div></div></div>
<div class="sect1"><h2 id="register-additional-explicit-screen-controllers">Register additional explicit screen controllers</h2><div class="sectionbody"><div class="paragraph"><p>In addition to the <code>nifty.addXml()</code> methods to attach many nifty XML files, there exists a <code>nifty.registerScreenController()</code> method to explicitly attach more screen controllers.</p></div>
<div class="paragraph"><p>The following code sample shows how you can explicitly attach several screen controllers before adding the XML file to nifty, which would otherwise cause nifty to implicitly instantiate the screen controller class.</p></div>
<div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="java">NiftyJmeDisplay niftyDisplay = NiftyJmeDisplay.newNiftyJmeDisplay(assetManager, inputManager, audioRenderer, viewPort);
Nifty nifty = niftyDisplay.getNifty();

nifty.registerScreenController(<span class="keyword">new</span> OptionsScreenController(randomConstructorArgument));
nifty.addXml(<span class="string"><span class="delimiter">&quot;</span><span class="content">Interface/Screens/OptionsScreen.xml</span><span class="delimiter">&quot;</span></span>);</code></pre></div></div></div></div>
<div class="sect1"><h2 id="design-your-own-styles">Design Your Own Styles</h2><div class="sectionbody"><div class="paragraph"><p>By default, your Nifty XML screens use the built.in styles:</p></div>
<div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="xml"> <span class="tag">&lt;useStyles</span> <span class="attribute-name">filename</span>=<span class="string"><span class="delimiter">&quot;</span><span class="content">nifty-default-styles.xml</span><span class="delimiter">&quot;</span></span> <span class="tag">/&gt;</span></code></pre></div></div>
<div class="paragraph"><p>But you can switch to a set of custom styles in your game project&#8217;s asset directory like this:</p></div>
<div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="xml"> <span class="tag">&lt;useStyles</span> <span class="attribute-name">filename</span>=<span class="string"><span class="delimiter">&quot;</span><span class="content">Interface/Styles/myCustomStyles.xml</span><span class="delimiter">&quot;</span></span> <span class="tag">/&gt;</span></code></pre></div></div>
<div class="paragraph"><p>Inside myCustomStyles.xml you define styles like this:</p></div>
<div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="xml"><span class="preprocessor">&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;</span>
<span class="tag">&lt;nifty-styles&gt;</span>
  <span class="tag">&lt;useStyles</span> <span class="attribute-name">filename</span>=<span class="string"><span class="delimiter">&quot;</span><span class="content">Interface/Styles/Font/myCustomFontStyle.xml</span><span class="delimiter">&quot;</span></span> <span class="tag">/&gt;</span>
  <span class="tag">&lt;useStyles</span> <span class="attribute-name">filename</span>=<span class="string"><span class="delimiter">&quot;</span><span class="content">Interface/Styles/Button/myCustomButtonStyle.xml</span><span class="delimiter">&quot;</span></span> <span class="tag">/&gt;</span>
  <span class="tag">&lt;useStyles</span> <span class="attribute-name">filename</span>=<span class="string"><span class="delimiter">&quot;</span><span class="content">Interface/Styles/Label/myCustomLabelStyle.xml</span><span class="delimiter">&quot;</span></span> <span class="tag">/&gt;</span>
  ...
<span class="tag">&lt;/nifty-styles&gt;</span></code></pre></div></div>
<div class="paragraph"><p>Learn more about how to create styles by looking at the <a href="https://github.com/nifty-gui/nifty-gui/wiki/Working-from-Source">Nifty GUI source code</a> for “nifty-style-black”. Copy it as a template and change it to create your own style.</p></div>
<hr>
<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/wiki/Effects">https://github.com/nifty-gui/nifty-gui/wiki/Effects</a></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>