Home Esplora Aiuto
Accedi
java
/
jMonkeyEngine-wiki
mirror da https://github.com/jMonkeyEngine/wiki.git
2
0
Forka 0
File Problemi 0 Wiki
Albero (Tree): 035c93e1e8
Rami (Branch) Tag
jMonkeyEngine-w...
/
jme3
/
advanced
/
nifty_gui_overlay.html

nifty_gui_overlay.html 8.7 KB
Cronologia Originale

12345678910111213141516171819202122232425262728293031323334 
  1. <!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>Integrating Nifty GUI: Overlay</title><link rel="stylesheet" href="./asciidoctor.css">
    2. 

  2. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
    3. 

  3. <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_overlay.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>Integrating Nifty GUI: Overlay</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="#sample-code">Sample Code</a></li><li><a href="#overlaying-the-user-interface-over-the-screen">Overlaying the User Interface Over the Screen</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><a href="../../jme3/advanced/nifty_gui_xml_layout.html">Nifty GUI XML Layout</a> or <a href="../../jme3/advanced/nifty_gui_java_layout.html">Nifty GUI Java Layout</a></p></li><li><p><strong>Nifty <abbr title="Graphical User Interface">GUI</abbr> Overlay</strong> 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>
    4. 

  4. <div style="text-align: left;" class="imageblock"><div class="content"><img src="../../jme3/advanced/nifty-gui-example.png" alt="nifty-gui-example.png" width="300" height="200"></div></div>
    5. 

  5. <div class="paragraph"><p>Typically, you define a key (for example escape) that switches the <abbr title="Graphical User Interface">GUI</abbr> on and off. The <abbr title="Graphical User Interface">GUI</abbr> can be a StartScreen, OptionsScreen, CharacterCreationScreen, etc. While the <abbr title="Graphical User Interface">GUI</abbr> is up, you pause the running game, and then overlay the <abbr title="Graphical User Interface">GUI</abbr>. You also must switch to a different set of user inputs while the game is paused, so the player can use the mouse pointer and keyboard to interact with the <abbr title="Graphical User Interface">GUI</abbr>.</p></div>
    6. 

  6. <div class="paragraph"><p>You can also <a href="../../jme3/advanced/nifty_gui_projection.html">project</a> the <abbr title="Graphical User Interface">GUI</abbr> as a texture onto a mesh texture (but then you cannot click to select).
    7. 

  7. On this page, we look at the overlay variant, which is more commonly used in games.</p></div></div></div>
    8. 

  8. <div class="sect1"><h2 id="sample-code">Sample Code</h2><div class="sectionbody"><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></p></li></ul></div>
    9. 

  9. <div class="admonitionblock tip"><table><tr><td class="icon"><i class="fa icon-tip" title="Tip"></i></td><td class="content"><div class="paragraph"><p>The jme3-niftygui library is included in jMonkeyEngine. If you installed jMonkeyEngine using one of the <a href="../../documentation.html#install">optional methods</a>, it will be added to your projects Library folder as part of the installation. If you&#8217;re using the jMonkeyEngine SDK, you add it to any project by <b class="button">RMB</b> selecting your projects <code>Library</code> folder, choosing <code><span class="menuseq"><span class="menu">Add Library</span>&#160;&#9656; <span class="menuitem">jme-niftygui</span></span></code> followed by <code>Add Library</code>.</p></div></td></tr></table></div></div></div>
    10. 

  10. <div class="sect1"><h2 id="overlaying-the-user-interface-over-the-screen">Overlaying the User Interface Over the Screen</h2><div class="sectionbody"><div class="paragraph"><p>This code shows you how to overlay anything on the screen with the <abbr title="Graphical User Interface">GUI</abbr>. This is the most common usecase.</p></div>
    11. 

  11. <div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="java">NiftyJmeDisplay niftyDisplay = NiftyJmeDisplay.newNiftyJmeDisplay(
    12. 

  12.     assetManager, inputManager, audioRenderer, guiViewPort);
    13. 

  13. <span class="comment">/** Create a new NiftyGUI object */</span>
    14. 

  14. Nifty nifty = niftyDisplay.getNifty();
    15. 

  15. <span class="comment">/** Read your XML and initialize your custom ScreenController */</span>
    16. 

  16. nifty.fromXml(<span class="string"><span class="delimiter">&quot;</span><span class="content">Interface/tutorial/step2/screen.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>);
    17. 

  17. <span class="comment">// nifty.fromXml(&quot;Interface/helloworld.xml&quot;, &quot;start&quot;, new MySettingsScreen(data));</span>
    18. 

  18. <span class="comment">// attach the Nifty display to the gui view port as a processor</span>
    19. 

  19. guiViewPort.addProcessor(niftyDisplay);
    20. 

  20. <span class="comment">// disable the fly cam</span>
    21. 

  21. flyCam.setDragToRotate(<span class="predefined-constant">true</span>);</code></pre></div></div>
    22. 

  22. <div class="paragraph"><p>Currently you do not have a ScreenController – we will create one in the next exercise. As soon  as you have a screen controller, you will use the commented variant of the XML loading method:</p></div>
    23. 

  23. <div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="java">nifty.fromXml(<span class="string"><span class="delimiter">&quot;</span><span class="content">Interface/helloworld.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>, <span class="keyword">new</span> MySettingsScreen());</code></pre></div></div>
    24. 

  24. <div class="paragraph"><p>The <code>MySettingsScreen</code> class is a custom de.lessvoid.nifty.screen.ScreenController in which you will implement your <abbr title="Graphical User Interface">GUI</abbr> behaviour.</p></div>
    25. 

  25. <div class="paragraph"><p>If you have many screens or you want to keep them organized in separate files there is a method available that will just load an additional XML file. The content of the files are
    26. 

  26. simply added to whatever XML data has been loaded before.</p></div>
    27. 

  27. <div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="java">nifty.addXml(<span class="string"><span class="delimiter">&quot;</span><span class="content">Interface/mysecondscreen.xml</span><span class="delimiter">&quot;</span></span>);</code></pre></div></div></div></div>
    28. 

  28. <div class="sect1"><h2 id="next-steps">Next Steps</h2><div class="sectionbody"><div class="paragraph"><p>Now that you have layed out and integrated the <abbr title="Graphical User Interface">GUI</abbr> in your app, you want to respond to user input and display the current game. Time to create a ScreenController!</p></div>
    29. 

  29. <div class="ulist"><ul><li><p><a href="../../jme3/advanced/nifty_gui_java_interaction.html">Interact with the GUI from Java</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({
    30. 

  30.   apiKey: 'a736b6d93de805e26ec2f49b55013fbd',
    31. 

  31.   indexName: 'jmonkeyengine',
    32. 

  32.   inputSelector: '#doc-search',
    33. 

  33.   debug: false // Set debug to true if you want to inspect the dropdown
    34. 

  34. });</script></body></html>
    35.