java
/
jMonkeyEngine-wiki
şunun yansıması https://github.com/jMonkeyEngine/wiki.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445
							<!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, texture"><title>Integrating Nifty GUI: Projection</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_projection.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: Projection</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="#projecting-the-user-interface-onto-a-texture">Projecting the User Interface Onto a Texture</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><a href="../../jme3/advanced/nifty_gui_overlay.html">Nifty GUI Overlay</a> or <strong>Nifty <abbr title="Graphical User Interface">GUI</abbr> Projection</strong></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 style="text-align: left;" class="imageblock"><div class="content"><img src="../../jme3/advanced/nifty-gui.png" alt="nifty-gui.png" width="310" height="250"></div></div>
<div class="paragraph"><p>Typically you define a key (for example escape) to switch the <abbr title="Graphical User Interface">GUI</abbr> on and off. Then you <a href="../../jme3/advanced/nifty_gui_overlay.html">overlay</a> the running game with the <abbr title="Graphical User Interface">GUI</abbr> (you will most likely pause the game then).</p></div>
<div class="paragraph"><p>Alternatively, you can also project the <abbr title="Graphical User Interface">GUI</abbr> as a texture onto a mesh textures inside the game. Allthough this looks cool and “immersive, this approach is rarely used since it is difficult to record clicks this way. You can only interact with this projected <abbr title="Graphical User Interface">GUI</abbr> by keyboard, or programmatically. You can select input fields using the arrow keys, and trigger actions using the return key.</p></div>
<div class="paragraph"><p>This <abbr title="Graphical User Interface">GUI</abbr> projection variant is less commonly used than the <abbr title="Graphical User Interface">GUI</abbr> overlay variant. Usecases for <abbr title="Graphical User Interface">GUI</abbr> projection are, for example, a player avatar using an in-game computer screen.</p></div></div></div>
<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/TestNiftyToMesh.java">TestNiftyToMesh.java</a></p></li></ul></div></div></div>
<div class="sect1"><h2 id="projecting-the-user-interface-onto-a-texture">Projecting the User Interface Onto a Texture</h2><div class="sectionbody"><div class="paragraph"><p>You can project the Nifty <abbr title="Graphical User Interface">GUI</abbr> onto a texture, load the texture into a material, and assign it to a Geometry (Quads or Boxes are best).</p></div>
<div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="java"><span class="comment">/** Create a special viewport for the Nifty GUI */</span>
ViewPort niftyView = renderManager.createPreView(<span class="string"><span class="delimiter">&quot;</span><span class="content">NiftyView</span><span class="delimiter">&quot;</span></span>, <span class="keyword">new</span> Camera(<span class="integer">1024</span>, <span class="integer">768</span>));
niftyView.setClearEnabled(<span class="predefined-constant">true</span>);
<span class="comment">/** Create a new NiftyJmeDisplay for the integration */</span>
NiftyJmeDisplay niftyDisplay = NiftyJmeDisplay.newNiftyJmeDisplay(
  assetManager,  inputManager,  audioRenderer,  niftyView);
<span class="comment">/** Create a new NiftyGUI object */</span>
Nifty nifty = niftyDisplay.getNifty();
<span class="comment">/** Read your XML and initialize your custom ScreenController */</span>
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(data));

<span class="comment">/** Prepare a framebuffer for the texture niftytex */</span>
niftyView.addProcessor(niftyDisplay);
FrameBuffer fb = <span class="keyword">new</span> FrameBuffer(<span class="integer">1024</span>, <span class="integer">768</span>, <span class="integer">0</span>);
fb.setDepthBuffer(<span class="predefined-type">Format</span>.Depth);
Texture2D niftytex = <span class="keyword">new</span> Texture2D(<span class="integer">1024</span>, <span class="integer">768</span>, <span class="predefined-type">Format</span>.RGB8);
fb.setColorTexture(niftytex);
niftyView.setClearEnabled(<span class="predefined-constant">true</span>);
niftyView.setOutputFrameBuffer(fb);

<span class="comment">/** This is the 3D cube we project the GUI on */</span>
<span class="predefined-type">Box</span> b = <span class="keyword">new</span> <span class="predefined-type">Box</span>(Vector3f.ZERO, <span class="integer">1</span>, <span class="integer">1</span>, <span class="integer">1</span>);
Geometry geom = <span class="keyword">new</span> Geometry(<span class="string"><span class="delimiter">&quot;</span><span class="content">Box</span><span class="delimiter">&quot;</span></span>, b);
Material mat = <span class="keyword">new</span> Material(assetManager, <span class="string"><span class="delimiter">&quot;</span><span class="content">Common/MatDefs/Misc/Unshaded.j3md</span><span class="delimiter">&quot;</span></span>);
mat.setTexture(<span class="string"><span class="delimiter">&quot;</span><span class="content">m_ColorMap</span><span class="delimiter">&quot;</span></span>, niftytex); <span class="comment">/** Here comes the texture! */</span>
geom.setMaterial(mat);
rootNode.attachChild(geom);</code></pre></div></div>
<div class="paragraph"><p>The MySettingsScreen class is a custom de.lessvoid.nifty.screen.ScreenController in which you implement your <abbr title="Graphical User Interface">GUI</abbr> behaviour.  The variable <code>data</code> contains an object that you use to exchange state info with the game. See <a href="../../jme3/advanced/nifty_gui_java_interaction.html">Nifty GUI Java Interaction</a> for details on how to create this class.</p></div>
<div class="paragraph"><p>Run the code sample. You select buttons on this <abbr title="Graphical User Interface">GUI</abbr> with the arrow keys and then press return. Note that clicking on the texture will not work!</p></div></div></div>
<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.</p></div>
<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({
  apiKey: 'a736b6d93de805e26ec2f49b55013fbd',
  indexName: 'jmonkeyengine',
  inputSelector: '#doc-search',
  debug: false // Set debug to true if you want to inspect the dropdown
});</script></body></html>