java
/
jMonkeyEngine-wiki
同期ミラー https://github.com/jMonkeyEngine/wiki.git


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
							<!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, display, documentation, hud"><title>Head-Up Display (HUD)</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/hud.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>Head-Up Display (HUD)</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="#simple-hud-gui-node">Simple HUD: GUI Node</a><ul class="sectlevel2"><li><a href="#displaying-pictures-in-the-hud">Displaying Pictures in the HUD</a></li><li><a href="#displaying-text-in-the-hud">Displaying Text in the HUD</a></li><li><a href="#positioning-hud-elements">Positioning HUD Elements</a></li><li><a href="#displaying-geometries-in-the-hud">Displaying Geometries in the HUD</a></li><li><a href="#keeping-the-hud-up-to-date">Keeping the HUD Up-To-Date</a></li></ul></li><li><a href="#advanced-hud-nifty-gui">Advanced HUD: Nifty GUI</a></li><li><a href="#see-also">See also</a></li></ul></div></div><div id="content"><div id="preamble"><div class="sectionbody"><div class="paragraph"><p>A HUD (Head-Up Display) is part of a game&#8217;s visual user interface. It&#8217;s an overlay that displays additional information as (typically) 2-dimensional text or icons on the screen, on top of the 3D scene. Not all games have, or need a HUD. To avoid breaking the immersion and cluttering the screen, only use a HUD if it is the only way to convey certain information.</p></div>
<div class="paragraph"><p>HUDs are used to supply players with essential information about the game state.</p></div>
<div class="ulist"><ul><li><p>Status: Score, minimap, points, stealth mode, …</p></li><li><p>Resources: Ammunition, lives/health, time, …</p></li><li><p>Vehicle instruments: Cockpit, speedometer, …</p></li><li><p>Navigational aides: Crosshairs, mouse pointer or hand, …</p></li></ul></div>
<div class="paragraph"><p>You have multiple options how to create HUDs.</p></div>
<table class="tableblock frame-all grid-all spread"><colgroup><col style="width: 33.3333%;"><col style="width: 33.3333%;"><col style="width: 33.3334%;"></colgroup><thead><tr><th class="tableblock halign-left valign-top">Option</th><th class="tableblock halign-left valign-top">Pros</th><th class="tableblock halign-left valign-top">Cons</th></tr></thead><tbody><tr><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>Attach elements to default guiNode:</p></div></div></td><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>Easy to learn. jMonkeyEngine built-in <abbr title="Application Programming Interface">API</abbr> for attaching plain images and bitmap text.</p></div></div></td><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>Only basic features.<br>
You will have to write custom controls / buttons / effects if you need them.</p></div></div></td></tr><tr><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>Use advanced <a href="../../jme3/advanced/nifty_gui.html">Nifty GUI</a> integration:</p></div></div></td><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>Full-featured interactive user interface.<br>
Includes buttons, effects, controls.<br>
Supports XML and Java layouts.</p></div></div></td><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>Steeper learning curve.</p></div></div></td></tr><tr><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>Use user contributed <abbr title="Graphical User Interface">GUI</abbr> libraries such as <a href="../../jme3/contributions/tonegodgui.html">tonegodgui</a> or <a href="http://hub.jmonkeyengine.org/t/lemur-api-documentation/27209">Lemur</a>:</p></div></div></td><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>Both have many features that would be difficult to do with Nifty<br>
Includes buttons, effects, controls.<br>
New features are still being released</p></div></div></td><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>Are not necessarily guaranteed future updates, not as well documented</p></div></div></td></tr></tbody></table>
<div class="paragraph"><p>Using the <abbr title="Graphical User Interface">GUI</abbr> Node is the default approach in jme3 to create simple HUDs. If you just quickly want to display a line of text, or a simple icon on the screen, use the no-frills <abbr title="Graphical User Interface">GUI</abbr> Node, it&#8217;s easier.</p></div></div></div>
<div class="sect2"><h3 id="simple-hud-gui-node">Simple HUD: GUI Node</h3><div class="paragraph"><p>You already know the <code>rootNode</code> that holds the 3-dimensional scene graph. jME3 also offers a 2-dimension (orthogonal) node, the <code>guiNode</code>.</p></div>
<div class="paragraph"><p>This is how you use the guiNode for HUDs:</p></div>
<div class="ulist"><ul><li><p>Create a <abbr title="Graphical User Interface">GUI</abbr> element: a BitmapText or Picture object.</p></li><li><p>Attach the element to the guiNode.</p></li><li><p>Place the element in the orthogonal render queue using <code>setQueueBucket(Bucket.Gui)</code>.</p></li></ul></div>
<div class="paragraph"><p>The BitmapTexts and Pictures appear as 2 dimensional element on the screen.</p></div>
<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>By default, the guiNode has some scene graph statistics attached. To clear the guiNode before you attach your own <abbr title="Graphical User Interface">GUI</abbr> elements, use the following methods:</p></div>
<div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="java">setDisplayStatView(<span class="predefined-constant">false</span>); setDisplayFps(<span class="predefined-constant">false</span>);</code></pre></div></div></td></tr></table></div>
<div class="sect2"><h3 id="displaying-pictures-in-the-hud">Displaying Pictures in the HUD</h3><div class="paragraph"><p>A simple image can be displayed using <code>com.jme3.ui.Picture</code>.</p></div>
<div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="java">Picture pic = <span class="keyword">new</span> Picture(<span class="string"><span class="delimiter">&quot;</span><span class="content">HUD Picture</span><span class="delimiter">&quot;</span></span>);
pic.setImage(assetManager, <span class="string"><span class="delimiter">&quot;</span><span class="content">Textures/ColoredTex/Monkey.png</span><span class="delimiter">&quot;</span></span>, <span class="predefined-constant">true</span>);
pic.setWidth(settings.getWidth()/<span class="integer">2</span>);
pic.setHeight(settings.getHeight()/<span class="integer">2</span>);
pic.setPosition(settings.getWidth()/<span class="integer">4</span>, settings.getHeight()/<span class="integer">4</span>);
guiNode.attachChild(pic);</code></pre></div></div>
<div class="paragraph"><p>When you set the last boolean in setImage() to true, the alpha channel of your image is rendered transparent/translucent.</p></div></div>
<div class="sect2"><h3 id="displaying-text-in-the-hud">Displaying Text in the HUD</h3><div class="paragraph"><p>You use <code>com.jme3.font.BitmapText</code> to display text on the screen.</p></div>
<div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="java">BitmapText hudText = <span class="keyword">new</span> BitmapText(guiFont, <span class="predefined-constant">false</span>);
hudText.setSize(guiFont.getCharSet().getRenderedSize());      <span class="comment">// font size</span>
hudText.setColor(ColorRGBA.Blue);                             <span class="comment">// font color</span>
hudText.setText(<span class="string"><span class="delimiter">&quot;</span><span class="content">You can write any string here</span><span class="delimiter">&quot;</span></span>);             <span class="comment">// the text</span>
hudText.setLocalTranslation(<span class="integer">300</span>, hudText.getLineHeight(), <span class="integer">0</span>); <span class="comment">// position</span>
guiNode.attachChild(hudText);</code></pre></div></div>
<div class="paragraph"><p>The BitmapFont object <code>guiFont</code> is a default font provided by SimpleApplication. Copy you own fonts as .fnt plus .png files into the <code>assets/Interface/Fonts</code> directory and load them like this:</p></div>
<div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code>BitmapFont myFont = assetManager.loadFont("Interface/Fonts/Console.fnt");
hudText = new BitmapText(myFont, false);</code></pre></div></div></div>
<div class="sect2"><h3 id="positioning-hud-elements">Positioning HUD Elements</h3><div class="ulist"><ul><li><p>When positioning <abbr title="Graphical User Interface">GUI</abbr> text and images in 2D, the <strong>bottom left corner</strong> of the screen is <code>(0f,0f)</code>, and the <strong>top right corner</strong> is at <code>(settings.getWidth(),settings.getHeight())</code>.</p></li><li><p>If you have several 2D elements in the <abbr title="Graphical User Interface">GUI</abbr> bucket that overlap, define their depth order by specifing a Z value. For example use <code>pic.move(x, y, -1)</code> to move the picture to the background, or <code>hudText.setLocalTranslation(x,y,1)</code> to move text to the foreground.</p></li><li><p>Size and length values in the orthogonal render queue are treated like pixels. A 20*20-wu big quad is rendered 20 pixels wide.</p></li></ul></div></div>
<div class="sect2"><h3 id="displaying-geometries-in-the-hud">Displaying Geometries in the HUD</h3><div class="paragraph"><p>It is technically possible to attach Quads and 3D Geometries to the HUD. They show up as flat, static <abbr title="Graphical User Interface">GUI</abbr> elements. The size unit for the guiNode is pixels, not world units. If you attach a Geometry that uses a lit Material, you must add a light to the guiNode.</p></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>If you don&#8217;t see an attached object in the <abbr title="Graphical User Interface">GUI</abbr>, check it&#8217;s position and material (add a light to guiNode). Also verify whether it is not too tiny to be seen. For comparison: A 1 world-unit wide cube is only 1 pixel wide when attached to the guiNode! You may need to scale it bigger.</p></div></td></tr></table></div></div>
<div class="sect2"><h3 id="keeping-the-hud-up-to-date">Keeping the HUD Up-To-Date</h3><div class="paragraph"><p>Use the update loop to keep the content up-to-date.</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> simpleUpdate(<span class="type">float</span> tpf) {
  ...
  hudText.setText(<span class="string"><span class="delimiter">&quot;</span><span class="content">Score: </span><span class="delimiter">&quot;</span></span> + score);
  ...
  picture.setImage(assetManager, <span class="string"><span class="delimiter">&quot;</span><span class="content">Interface/statechange.png</span><span class="delimiter">&quot;</span></span>, <span class="predefined-constant">true</span>);
  ...
}</code></pre></div></div></div></div>
<div class="sect1"><h2 id="advanced-hud-nifty-gui">Advanced HUD: Nifty GUI</h2><div class="sectionbody"><div class="paragraph"><p>The recommended approach to create HUDs is using <a href="../../jme3/advanced/nifty_gui.html">Nifty GUI</a>.</p></div>
<div class="olist arabic"><ol class="arabic"><li><p>Lay out the <abbr title="Graphical User Interface">GUI</abbr> in one or several Nifty XML or Java files.</p></li><li><p>Write the controller classes in Java.</p></li><li><p>Load the XML file with the controller object in your game&#8217;s simpleInit() method.</p></li></ol></div>
<div class="paragraph"><p>The advantage of Nifty <abbr title="Graphical User Interface">GUI</abbr> is that it is well integrated into jME and the jMonkeyEngine SDK, and that it offers all the features that you expect from a professional modern user interface.</p></div>
<div class="paragraph"><p>For HUDs, you basically follow the same instructions as for creating a normal <a href="../../jme3/advanced/nifty_gui.html">Nifty GUI</a>, you just don&#8217;t pause the game while the HUD is up.</p></div></div></div>
<div class="sect1"><h2 id="see-also">See also</h2><div class="sectionbody"><div class="ulist"><ul><li><p><a href="../../jme3/external/fonts.html">Fonts</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>