- fix remote help updating by using different server URL git-svn-id: https://jmonkeyengine.googlecode.com/svn/trunk@8435 75d07b2b-3a1a-0410-a2c5-0572b91ccdca3.0
nor..67
13 years ago
parent
d4c69da2a1
commit
38c9b14350
|
Before Width: | Height: | Size: 69 KiB After Width: | Height: | Size: 191 KiB |
@ -1,49 +1,84 @@ |
||||
<h1><a |
||||
name="models_and_scenes">Models and Scenes</a></h1><div |
||||
class="level1"><p> Like <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/shape.html">Shape</a>s, 3D models are also made up of <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/mesh.html">Mesh</a>es, but models are more complex than Shapes. While Shapes are built into jME3, you typically create models in external 3D Mesh Editors.</p></div><h2><a |
||||
name="using_models_and_scenes_with_jme3">Using Models and Scenes with jME3</a></h2><div |
||||
class="level2"><p> To use 3D models in a jME3 application:</p><ol><li |
||||
class="level1"><div |
||||
class="li"> Export the 3D model in Ogre <acronym |
||||
title="Extensible Markup Language">XML</acronym> or Wavefront OBJ format. Export Scenes as Ogre DotScene format.</div></li><li |
||||
class="level1"><div |
||||
class="li"> Save the files into a subdirectory of your jME3 project's <code>assets</code> directory.</div></li><li |
||||
class="level1"><div |
||||
class="li"> In your code, you use the <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/asset_manager.html">Asset Manager</a> to load models as <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/spatial.html">Spatial</a>s into a jME application.<pre>Spatial model = assetManager.loadModel( |
||||
"Models/MonkeyHead/MonkeyHead.mesh.xml" );</pre></div></li><li |
||||
class="level1"><div |
||||
class="li"> (For the release build:) Use the jMonkeyPlatform to convert models to .j3o format. You don't need this step as long you still develop and test the aplication within the jMonkeyPlatform.</div></li></ol></div><h2><a |
||||
name="creating_models_and_scenes">Creating Models and Scenes</a></h2><div |
||||
class="level2"><p> To create 3D models and scenes, you need a 3D Mesh Editor such as <a |
||||
href="http://www.blender.org/">Blender</a>, with an OgreXML Exporter plugin.</p><p> <strong>Tip:</strong> Consider creating <a |
||||
href="http://en.wikibooks.org/wiki/Blender_3D:_Noob_to_Pro/UV_Map_Basics">UV textures</a> for more complex models, it looks more professional.</p><p> 3D mesh editors are third-party products, so please consult their documentation for instructions how to use them. Here is an example workflow for Blender users:</p><p> To export your models as Ogre <acronym |
||||
title="Extensible Markup Language">XML</acronym> meshes with materials:</p><ol><li |
||||
class="level1"><div |
||||
class="li"> Open the menu File > Export > OgreXML Exporter to open the exporter dialog.</div></li><li |
||||
class="level1"><div |
||||
class="li"> In the Export Materials field: Give the material the same name as the model. For example, the model <code>something.mesh.xml</code> goes with <code>something.material</code>, plus (optionally) <code>something.skeleton.xml</code>, and some <acronym |
||||
title="Joint Photographics Experts Group">JPG</acronym> files.</div></li><li |
||||
class="level1"><div |
||||
class="li"> In the Export Meshes field: Select a target subdirectory of your <code>assets/Models/</code> directory. E.g. <code>assets/Models/something/</code>.</div></li><li |
||||
class="level1"><div |
||||
class="li"> Activate the following exporter settings:</div><ul><li |
||||
class="level2"><div |
||||
class="li"> Copy Textures: YES</div></li><li |
||||
class="level2"><div |
||||
class="li"> Rendering Materials: YES</div></li><li |
||||
class="level2"><div |
||||
class="li"> Flip Axis: YES</div></li><li |
||||
class="level2"><div |
||||
class="li"> Require Materials: YES</div></li><li |
||||
class="level2"><div |
||||
class="li"> Skeleton name follows mesh: YES</div></li></ul></li><li |
||||
class="level1"><div |
||||
class="li"> Click export.</div></li></ol><p> You can now use the <a |
||||
href="/com/jme3/gde/core/docs/sdk.html">jMonkeyPlatform</a> to <a |
||||
href="/com/jme3/gde/core/docs/sdk/model_loader_and_viewer.html">load and view models</a>. You can <a |
||||
href="/com/jme3/gde/core/docs/sdk/scene_composer.html">create scenes</a> from them and write cde that loads them into your application.</p></div> |
||||
<p><em><a href="http://jmonkeyengine.org/wiki/doku.php/jme3:advanced:3d_models?do=export_xhtmlbody">view online version</a></em></p> |
||||
|
||||
<h1><a>Models and Scenes</a></h1> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
Like <a href="/com/jme3/gde/core/docs/jme3/advanced/shape.html">Shape</a>s, 3D models are also made up of <a href="/com/jme3/gde/core/docs/jme3/advanced/mesh.html">Mesh</a>es, but models are more complex than Shapes. While Shapes are built into jME3, you typically create models in external 3D Mesh Editors. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Using Models and Scenes with jME3</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
To use 3D models in a jME3 application: |
||||
</p> |
||||
<ol> |
||||
<li><div> Export the 3D model in Ogre <acronym title="Extensible Markup Language">XML</acronym> or Wavefront OBJ format. Export Scenes as Ogre DotScene format.</div> |
||||
</li> |
||||
<li><div> Save the files into a subdirectory of your jME3 project's <code>assets</code> directory.</div> |
||||
</li> |
||||
<li><div> In your code, you use the <a href="/com/jme3/gde/core/docs/jme3/advanced/asset_manager.html">Asset Manager</a> to load models as <a href="/com/jme3/gde/core/docs/jme3/advanced/spatial.html">Spatial</a>s into a jME application. <pre>Spatial model = assetManager.loadModel( |
||||
"Models/MonkeyHead/MonkeyHead.mesh.xml" );</pre> |
||||
</div> |
||||
</li> |
||||
<li><div> (For the release build:) Use the jMonkeyPlatform to convert models to .j3o format. You don't need this step as long you still develop and test the aplication within the jMonkeyPlatform.</div> |
||||
</li> |
||||
</ol> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Creating Models and Scenes</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
To create 3D models and scenes, you need a 3D Mesh Editor such as <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://www.blender.org/"><param name="text" value="<html><u>Blender</u></html>"><param name="textColor" value="blue"></object>, with an OgreXML Exporter plugin. |
||||
</p> |
||||
|
||||
<p> |
||||
<strong>Tip:</strong> Consider creating <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://en.wikibooks.org/wiki/Blender_3D:_Noob_to_Pro/UV_Map_Basics"><param name="text" value="<html><u>UV textures</u></html>"><param name="textColor" value="blue"></object> for more complex models, it looks more professional. |
||||
</p> |
||||
|
||||
<p> |
||||
3D mesh editors are third-party products, so please consult their documentation for instructions how to use them. Here is an example workflow for Blender users: |
||||
</p> |
||||
|
||||
<p> |
||||
To export your models as Ogre <acronym title="Extensible Markup Language">XML</acronym> meshes with materials: |
||||
</p> |
||||
<ol> |
||||
<li><div> Open the menu File > Export > OgreXML Exporter to open the exporter dialog.</div> |
||||
</li> |
||||
<li><div> In the Export Materials field: Give the material the same name as the model. For example, the model <code>something.mesh.xml</code> goes with <code>something.material</code>, plus (optionally) <code>something.skeleton.xml</code>, and some <acronym title="Joint Photographics Experts Group">JPG</acronym> files.</div> |
||||
</li> |
||||
<li><div> In the Export Meshes field: Select a target subdirectory of your <code>assets/Models/</code> directory. E.g. <code>assets/Models/something/</code>.</div> |
||||
</li> |
||||
<li><div> Activate the following exporter settings: </div> |
||||
<ul> |
||||
<li><div> Copy Textures: YES</div> |
||||
</li> |
||||
<li><div> Rendering Materials: YES</div> |
||||
</li> |
||||
<li><div> Flip Axis: YES</div> |
||||
</li> |
||||
<li><div> Require Materials: YES</div> |
||||
</li> |
||||
<li><div> Skeleton name follows mesh: YES</div> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
<li><div> Click export.</div> |
||||
</li> |
||||
</ol> |
||||
|
||||
<p> |
||||
|
||||
You can now use the <a href="/com/jme3/gde/core/docs/sdk.html">jMonkeyPlatform</a> to <a href="/com/jme3/gde/core/docs/sdk/model_loader_and_viewer.html">load and view models</a>. You can <a href="/com/jme3/gde/core/docs/sdk/scene_composer.html">create scenes</a> from them and write cde that loads them into your application. |
||||
</p> |
||||
|
||||
</div> |
||||
<p><em><a href="http://direct.jmonkeyengine.org/wiki/doku.php/jme3:advanced:3d_models?do=export_xhtmlbody">view online version</a></em></p> |
||||
@ -1,107 +1,238 @@ |
||||
<h1><a |
||||
name="application_states">Application States</a></h1><div |
||||
class="level1"><p> <code>com.jme3.app.state.AppState</code> is a customizable jME3 interface that allows you to control the global game logic (game mechanics). To control the behaviour of a type of Spatial, see <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/custom_controls.html">Custom Controls</a> instead – both can be used together.</p><p> To implement game logic:</p><ol><li |
||||
class="level1"><div |
||||
class="li"> You define a custom AppState and implement its behaviour in the AppState's update() method.</div><ul><li |
||||
class="level2"><div |
||||
class="li"> You can pass arguments and manipulate everything inside the app's scope.</div></li></ul></li><li |
||||
class="level1"><div |
||||
class="li"> Attach the AppState to your application's AppStateManager (<code>stateManager.attach(myAppState);</code>) to activate it.</div></li><li |
||||
class="level1"><div |
||||
class="li"> Create one AppState for each type of game behavior. When you add several AppStates to one Application, they will be executed in the order they were added.</div></li></ol></div><h2><a |
||||
name="usage_examples">Usage Examples</a></h2><div |
||||
class="level2"><p> JME3 comes with a BulletAppState that implements Physical behaviour (using the jBullet library). You, for example, could write an Artificial Intelligence AppState to control all your enemy units. Existing examples in the code base include:</p><ul><li |
||||
class="level1"><div |
||||
class="li"> <a |
||||
href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/jbullet/com/jme3/bullet/">BulletAppState</a> controls physical behaviour in PhysicsControl'ed Spatials.</div></li><li |
||||
class="level1"><div |
||||
class="li"> <a |
||||
href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/app/state/TestAppStates.java">TestAppStates.java</a> an example of a custom AppState</div><ul><li |
||||
class="level2"><div |
||||
class="li"> <a |
||||
href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/app/state/RootNodeState.java">RootNodeState.java</a></div></li></ul></li></ul></div><h2><a |
||||
name="appstate">AppState</a></h2><div |
||||
class="level2"><p> The AppState interface allows you to hook a continously executing piece of code into the main loop.</p><div |
||||
class="table sectionedit1"><table |
||||
class="inline"><tr |
||||
class="row0"><th |
||||
class="col0">AppState Method</th><th |
||||
class="col1">Usage</th></tr><tr |
||||
class="row1"><td |
||||
class="col0">isActive()</td><td |
||||
class="col1">Test whether AppState is enabled or disabled.</td></tr><tr |
||||
class="row2"><td |
||||
class="col0">stateAttached(asm) <br/> stateDetached(asm)</td><td |
||||
class="col1">The AppState knows when it is attached to, or detached from, the AppStateManager. Then it triggers these methods that you implement.</td></tr><tr |
||||
class="row3"><td |
||||
class="col0">isInitialized()</td><td |
||||
class="col1">Your implementations of this interface should return the correct respective boolean value.</td></tr><tr |
||||
class="row4"><td |
||||
class="col0">initialize(asm,app)</td><td |
||||
class="col1">The RenderThread initialized the AppState and then calls this method.</td></tr><tr |
||||
class="row5"><td |
||||
class="col0">setActive(true) <br/> setActive(false)</td><td |
||||
class="col1">Temporarily enables or disables an AppState.</td></tr><tr |
||||
class="row6"><td |
||||
class="col0">update(float tpf)</td><td |
||||
class="col1">Here you implement the behaviour that you want to hook into the main update loop.</td></tr><tr |
||||
class="row7"><td |
||||
class="col0">cleanup()</td><td |
||||
class="col1">Called when when the AppState is de-initialized.</td></tr><tr |
||||
class="row8"><td |
||||
class="col0">render(RenderManager rm)</td><td |
||||
class="col1">Renders the state.</td></tr><tr |
||||
class="row9"><td |
||||
class="col0">postRender()</td><td |
||||
class="col1">Called after all rendering commands are flushed.</td></tr></table></div></div><h2><a |
||||
name="abstractappstate">AbstractAppState</a></h2><div |
||||
class="level2"><p> The AbstractAppState class already implements some common methods and makes creation of custom AppStates a bit easier: isInitialized(), setActive(), isActive(), cleanUp(). Just extend it and override the remaining AppState methods.</p><p> Definition:</p><pre>public class MyAppState extends AbstractAppState { |
||||
|
||||
<h1><a>Application States</a></h1> |
||||
<div> |
||||
|
||||
<p> |
||||
<code>com.jme3.app.state.AppState</code> is a customizable jME3 interface that allows you to control the global game logic (game mechanics). To control the behaviour of a type of Spatial, see <a href="/com/jme3/gde/core/docs/jme3/advanced/custom_controls.html">Custom Controls</a> instead – both can be used together. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Use Case</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
There will be situations during your game development where you think: |
||||
</p> |
||||
<ul> |
||||
<li><div> Can I group a set of input handler settings, and activate and deactivate them all in one step? (e.g. mouse and key inputs are handled different in-game versus in the main menu.) </div> |
||||
</li> |
||||
<li><div> Can I group a bunch of nodes and swap them in and out in one step? (e.g. the in-game scene, versus a character editor, versus a Captain's Quarters screen)</div> |
||||
</li> |
||||
<li><div> Can I define what happens while the game is paused/unpaused, and toggle that in one step? </div> |
||||
</li> |
||||
<li><div> Can I wrap up one set of game mechanics and switch it on and off in one step? (e.g. a conditional block that takes up a lot of space in my update loop)</div> |
||||
</li> |
||||
<li><div> Can I package all of the above that belongs <em>in-game</em>, and also everthing that belongs to the main menu, and switch between these two "big" states in one step? </div> |
||||
</li> |
||||
</ul> |
||||
|
||||
<p> |
||||
|
||||
Yes you can! This is what AppStates are there for. A game state can be a subset of class fields (game data), <acronym title="Graphical User Interface">GUI</acronym> elements and their interactions, a subset of input handlers, a subset of nodes in the simpleInitApp() method, a subset of actions that you branch to in the simpleUpdate() loop, a set of AppStates and Controls – or combinations thereof. |
||||
</p> |
||||
|
||||
<p> |
||||
Each AppState is such a grouped subset of such game states. Each AppState has hooks that let you define what happens to this set in the following situations: |
||||
</p> |
||||
<ul> |
||||
<li><div> the AppState is initialized: You load and initialize game data, InputHandlers, AppStates and Controls and attach nodes.</div> |
||||
</li> |
||||
<li><div> the AppState is cleaned up: You save the game state, unregister Controls, AppStates and InputHandlers, and detach nodes.</div> |
||||
</li> |
||||
<li><div> the AppState is temporarly disabled/enabled (paused/unpaused): You toggle a boolean to skip certain actions of the update loop, you display a paused screen <acronym title="Graphical User Interface">GUI</acronym>, and change the input handlers. </div> |
||||
</li> |
||||
</ul> |
||||
|
||||
<p> |
||||
|
||||
<strong>Tip:</strong> You can create AppStates that enable and disable sets of other AppStates, e.g. InGameState versus MainScreenState. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Usage</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
To implement game logic: |
||||
</p> |
||||
<ol> |
||||
<li><div> You define a custom AppState and implement its behaviour in the AppState's update() method.</div> |
||||
<ul> |
||||
<li><div> You can pass custom data as arguments in the constructor.</div> |
||||
</li> |
||||
<li><div> The AppState has access to everything inside the app's scope via the Application <code>app</code> object.</div> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
<li><div> Attach all AppStates to your application's AppStateManager (<code>stateManager.attach(myAppState);</code>), and activate and deactivate the ones you need.</div> |
||||
</li> |
||||
<li><div> Create one AppState for each set of game mechanics. </div> |
||||
</li> |
||||
</ol> |
||||
|
||||
<p> |
||||
|
||||
When you add several AppStates to one Application and activate them, their init methods and update loops are executed in the order in which the AppStates were added. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Examples</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
JME3 comes with a BulletAppState that implements Physical behaviour (using the jBullet library). You, for example, could write an Artificial Intelligence AppState to control all your enemy units. Existing examples in the code base include: |
||||
</p> |
||||
<ul> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/jbullet/com/jme3/bullet/"><param name="text" value="<html><u>BulletAppState</u></html>"><param name="textColor" value="blue"></object> controls physical behaviour in PhysicsControl'ed Spatials.</div> |
||||
</li> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/app/state/TestAppStates.java"><param name="text" value="<html><u>TestAppStates.java</u></html>"><param name="textColor" value="blue"></object> an example of a custom AppState</div> |
||||
<ul> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/app/state/RootNodeState.java"><param name="text" value="<html><u>RootNodeState.java</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>AppState</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
The AppState interface allows you to initialize sets of objects, and hook a sets of continously executing code into the main loop. |
||||
|
||||
</p> |
||||
<div><table> |
||||
<tr> |
||||
<th>AppState Method</th><th>Usage</th> |
||||
</tr> |
||||
<tr> |
||||
<td>stateAttached(asm) <br/> |
||||
stateDetached(asm)</td><td>The AppState knows when it is attached to, or detached from, the AppStateManager, and triggers these two methods. Here you implement what happens then.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>initialize(asm,app)</td><td>The RenderThread initialized the AppState and then calls this method. Here you implement initSimpleApp()-style initialization code. </td> |
||||
</tr> |
||||
<tr> |
||||
<td>isInitialized()</td><td>Your implementations of this interface should return the correct respective boolean value.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>setActive(true) <br/> |
||||
setActive(false)</td><td>Temporarily enables or disables an AppState. </td> |
||||
</tr> |
||||
<tr> |
||||
<td>isActive()</td><td>Test whether AppState is enabled or disabled. Your implementation should consider the boolean.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>update(float tpf)</td><td>Here you implement the behaviour that you want to hook into the simpleUpdate() loop.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>cleanup()</td><td>Called when when the AppState is de-initialized. Here you implement what clean-up code for this state.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>render(RenderManager rm)</td><td>Renders the state, plus your optional customizations.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>postRender()</td><td>Called after all rendering commands are flushed, including your optional customizations.</td> |
||||
</tr> |
||||
</table></div> |
||||
<!-- EDIT1 TABLE [3823-4902] --> |
||||
</div> |
||||
|
||||
<h2><a>AbstractAppState</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
The AbstractAppState class already implements some common methods and makes creation of custom AppStates a bit easier: isInitialized(), setActive(), isActive(), cleanUp(). Just extend it and override the remaining AppState methods. |
||||
Definition: |
||||
|
||||
</p> |
||||
<pre>public class MyAppState extends AbstractAppState { |
||||
private Node x = new Node("x"); // some class field |
||||
private SimpleApplication app; |
||||
|
||||
public Node getX(){ |
||||
return x; |
||||
return x; // implement custom methods for this field |
||||
} |
||||
|
||||
@Override |
||||
public void update(float tpf) { |
||||
x.doSomething(); // implement behaviour |
||||
} |
||||
}</pre><p> Usage:</p><pre>public class TestAppStates extends Application { |
||||
public static void main(String[] args){ |
||||
TestAppStates app = new TestAppStates(); |
||||
app.start(); |
||||
} |
||||
|
||||
@Override |
||||
public void initialize(){ |
||||
super.initialize(); |
||||
MyAppState state = new MyAppState(); |
||||
stateManager.attach(state); |
||||
System.out.println("Use the state's methods... " + state.getX()); |
||||
x.doSomething(); // call some methods here |
||||
} |
||||
|
||||
@Override |
||||
public void update(){ |
||||
super.update(); |
||||
stateManager.update(tpf); |
||||
stateManager.render(renderManager); |
||||
renderManager.render(tpf); |
||||
public void initialize(AppStateManager stateManager, Application app) { |
||||
super.initialize(stateManager, app); |
||||
this.app=(SimpleApplication)app; |
||||
app.doSomething(); // call some methods elsewhere |
||||
} |
||||
}</pre><p> <strong>Note:</strong> If you use the AppState together with a SimpleApplication-based class, then this <code>update()</code> loop is already set up.</p></div><h2><a |
||||
name="appstatemanager">AppStateManager</a></h2><div |
||||
class="level2"><p> The com.jme3.app.state.AppStateManager holds the list of AppStates for an application. AppStateManager ensures that active AppStates are updated and rendered. When an AppState is attached, AppStateManager calls its stateAttached() method. When an AppState is detached, AppStateManager calls its stateDetached() method.</p><p> There is one AppStateManager per application. You can attach several AppStates to one AppStateManager, but the same state can only be attached once.</p><div |
||||
class="table sectionedit2"><table |
||||
class="inline"><tr |
||||
class="row0"><th |
||||
class="col0">AppStateManager Method</th><th |
||||
class="col1">Usage</th></tr><tr |
||||
class="row1"><td |
||||
class="col0">hasState(s)</td><td |
||||
class="col1">Is AppState s attached?</td></tr><tr |
||||
class="row2"><td |
||||
class="col0">getState(Class<T> stateClass)</td><td |
||||
class="col1">Returns the first state that is an instance of a subclass of the specified class.</td></tr></table></div><p> The AppStateManager's update(), render(), postRender(), and cleanUp() methods are internal, users never call them directly.</p></div><h2><a |
||||
name="best_practices">Best Practices</a></h2><div |
||||
class="level2"><p> You can only change AppStates, or read and write to them, from certain places: In a Control's update() method, in an AppState's update() method, and it the SimpleApplication's simpleUpdate() loop (or the Application's update() loop).</p><p> To get data from the AppState <code>MyAppState</code>:</p><pre>app.getState(MyAppState.class).getInfoAboutSomething();</pre><p> To pass new data into the AppState <code>MyAppState</code>:</p><pre>app.getState(MyAppState.class).setSomething(blah);</pre><p> To trigger a one-off method in the AppState <code>MyAppState</code>:</p><pre>app.getState(MyAppState.class).doSomeMoreStuff();</pre><p> Don't mess with the AppState from other places, because from other methods you have no control over the order of updates. You don't know when (during which half-finished step of an update), your call was received.</p></div> |
||||
<p><em><a href="http://jmonkeyengine.org/wiki/doku.php/jme3:advanced:application_states?do=export_xhtmlbody">view online version</a></em></p> |
||||
}</pre> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>AppStateManager</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
The com.jme3.app.state.AppStateManager holds the list of AppStates for an application. AppStateManager ensures that active AppStates are updated and rendered. When an AppState is attached, AppStateManager calls its stateAttached() method. When an AppState is detached, AppStateManager calls its stateDetached() method. |
||||
There is one AppStateManager per application. You can attach several AppStates to one AppStateManager, but the same state can only be attached once. |
||||
</p> |
||||
<div><table> |
||||
<tr> |
||||
<th>AppStateManager Method</th><th>Usage</th> |
||||
</tr> |
||||
<tr> |
||||
<td>hasState(s)</td><td>Is AppState s attached?</td> |
||||
</tr> |
||||
<tr> |
||||
<td>getState(Class<T> stateClass)</td><td>Returns the first state that is an instance of a subclass of the specified class.</td> |
||||
</tr> |
||||
</table></div> |
||||
<!-- EDIT2 TABLE [6328-6510] --> |
||||
<p> |
||||
The AppStateManager's update(), render(), postRender(), and cleanUp() methods are internal, users never call them directly. |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Best Practices</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
You can only change AppStates, or read and write to them, from certain places: In a Control's update() method, in an AppState's update() method, and in the SimpleApplication's simpleUpdate() loop (or the Application's update() loop). |
||||
To get data from the AppState <code>MyAppState</code>: |
||||
|
||||
</p> |
||||
<pre>app.getState(MyAppState.class).getInfoAboutSomething();</pre> |
||||
|
||||
<p> |
||||
|
||||
To pass new data into the AppState <code>MyAppState</code>: |
||||
|
||||
</p> |
||||
<pre>app.getState(MyAppState.class).setSomething(blah);</pre> |
||||
|
||||
<p> |
||||
|
||||
To trigger a one-off method in the AppState <code>MyAppState</code>: |
||||
|
||||
</p> |
||||
<pre>app.getState(MyAppState.class).doSomeMoreStuff();</pre> |
||||
|
||||
<p> |
||||
|
||||
Don't mess with the AppState from other places, because from other methods you have no control over the order of updates. You don't know when (during which half-finished step of an update), your call was received. |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
<p><em><a href="http://direct.jmonkeyengine.org/wiki/doku.php/jme3:advanced:application_states?do=export_xhtmlbody">view online version</a></em></p> |
||||
@ -0,0 +1,212 @@ |
||||
|
||||
<h1><a>Audio Environment Presets</a></h1> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
Use these presets together with <a href="/com/jme3/gde/core/docs/jme3/advanced/audio.html">Audio</a> Nodes to create different "moods" for sounds. Environment effects make your audio sound as if the listener were in various places that have different types of echoes. |
||||
</p> |
||||
|
||||
<p> |
||||
Usage: |
||||
|
||||
</p> |
||||
<pre>Environment( |
||||
new float[]{ 0, 7.5f, 1f, -1000, -100, 0, 1.49f, 0.83f, 1f, -2602, |
||||
0.007f, 0f, 0f, 0f, 200, 0.011f, 0f, 0f, 0f, 0.250f, |
||||
0f, 0.250f, 0f, -5f, 5000f, 250f, 0f, 0x3f} ) ); |
||||
audioRenderer.setEnvironment(myEnvironment);</pre> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Castle</a></h2> |
||||
<div> |
||||
<pre>CastleSmallRoom = new Environment ( new float[]{ 26, 8.3f, 0.890f, -1000, -800, -2000, 1.22f, 0.83f, 0.31f, -100, 0.022f, 0f, 0f, 0f, 600, 0.011f, 0f, 0f, 0f, 0.138f, 0.080f, 0.250f, 0f, -5f, 5168.6f, 139.5f, 0f, 0x20} ) ); |
||||
CastleShortPassage = new Environment ( new float[]{ 26, 8.3f, 0.890f, -1000, -1000, -2000, 2.32f, 0.83f, 0.31f, -100, 0.007f, 0f, 0f, 0f, 200, 0.023f, 0f, 0f, 0f, 0.138f, 0.080f, 0.250f, 0f, -5f, 5168.6f, 139.5f, 0f, 0x20} ) ); |
||||
CastleMediumroom = new Environment ( new float[]{ 26, 8.3f, 0.930f, -1000, -1100, -2000, 2.04f, 0.83f, 0.46f, -400, 0.022f, 0f, 0f, 0f, 400, 0.011f, 0f, 0f, 0f, 0.155f, 0.030f, 0.250f, 0f, -5f, 5168.6f, 139.5f, 0f, 0x20} ) ); |
||||
CastleLongpassage = new Environment ( new float[]{ 26, 8.3f, 0.890f, -1000, -800, -2000, 3.42f, 0.83f, 0.31f, -100, 0.007f, 0f, 0f, 0f, 300, 0.023f, 0f, 0f, 0f, 0.138f, 0.080f, 0.250f, 0f, -5f, 5168.6f, 139.5f, 0f, 0x20} ) ); |
||||
CastleLargeroom = new Environment ( new float[]{ 26, 8.3f, 0.820f, -1000, -1100, -1800, 2.53f, 0.83f, 0.50f, -700, 0.034f, 0f, 0f, 0f, 200, 0.016f, 0f, 0f, 0f, 0.185f, 0.070f, 0.250f, 0f, -5f, 5168.6f, 139.5f, 0f, 0x20} ) ); |
||||
CastleHall = new Environment ( new float[]{ 26, 8.3f, 0.810f, -1000, -1100, -1500, 3.14f, 0.79f, 0.62f, -1500, 0.056f, 0f, 0f, 0f, 100, 0.024f, 0f, 0f, 0f, 0.250f, 0f, 0.250f, 0f, -5f, 5168.6f, 139.5f, 0f, 0x20} ) ); |
||||
CastleCupboard = new Environment ( new float[]{ 26, 8.3f, 0.890f, -1000, -1100, -2000, 0.67f, 0.87f, 0.31f, 300, 0.010f, 0f, 0f, 0f, 1100, 0.007f, 0f, 0f, 0f, 0.138f, 0.080f, 0.250f, 0f, -5f, 5168.6f, 139.5f, 0f, 0x20} ) ); |
||||
CastleCourtyard = new Environment ( new float[]{ 26, 8.3f, 0.420f, -1000, -700, -1400, 2.13f, 0.61f, 0.23f, -1300, 0.160f, 0f, 0f, 0f, -300, 0.036f, 0f, 0f, 0f, 0.250f, 0.370f, 0.250f, 0f, -5f, 5000f, 250f, 0f, 0x1f} ) ); |
||||
CastleAlcove = new Environment ( new float[]{ 26, 8.3f, 0.890f, -1000, -600, -2000, 1.64f, 0.87f, 0.31f, 00, 0.007f, 0f, 0f, 0f, 300, 0.034f, 0f, 0f, 0f, 0.138f, 0.080f, 0.250f, 0f, -5f, 5168.6f, 139.5f, 0f, 0x20} ) );</pre> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Warehouse, Factory</a></h2> |
||||
<div> |
||||
<pre>FactoryAlcove = new Environment ( new float[]{ 26, 1.8f, 0.590f, -1200, -200, -600, 3.14f, 0.65f, 1.31f, 300, 0.010f, 0f, 0f, 0f, 000, 0.038f, 0f, 0f, 0f, 0.114f, 0.100f, 0.250f, 0f, -5f, 3762.6f, 362.5f, 0f, 0x20} ) ); |
||||
FactoryShortpassage = new Environment ( new float[]{ 26, 1.8f, 0.640f, -1200, -200, -600, 2.53f, 0.65f, 1.31f, 0, 0.010f, 0f, 0f, 0f, 200, 0.038f, 0f, 0f, 0f, 0.135f, 0.230f, 0.250f, 0f, -5f, 3762.6f, 362.5f, 0f, 0x20} ) ); |
||||
FactoryMediumroom = new Environment ( new float[]{ 26, 1.9f, 0.820f, -1200, -200, -600, 2.76f, 0.65f, 1.31f, -1100, 0.022f, 0f, 0f, 0f, 300, 0.023f, 0f, 0f, 0f, 0.174f, 0.070f, 0.250f, 0f, -5f, 3762.6f, 362.5f, 0f, 0x20} ) ); |
||||
FactoryLongpassage = new Environment ( new float[]{ 26, 1.8f, 0.640f, -1200, -200, -600, 4.06f, 0.65f, 1.31f, 0, 0.020f, 0f, 0f, 0f, 200, 0.037f, 0f, 0f, 0f, 0.135f, 0.230f, 0.250f, 0f, -5f, 3762.6f, 362.5f, 0f, 0x20} ) ); |
||||
FactoryLargeroom = new Environment ( new float[]{ 26, 1.9f, 0.750f, -1200, -300, -400, 4.24f, 0.51f, 1.31f, -1500, 0.039f, 0f, 0f, 0f, 100, 0.023f, 0f, 0f, 0f, 0.231f, 0.070f, 0.250f, 0f, -5f, 3762.6f, 362.5f, 0f, 0x20} ) ); |
||||
FactoryHall = new Environment ( new float[]{ 26, 1.9f, 0.750f, -1000, -300, -400, 7.43f, 0.51f, 1.31f, -2400, 0.073f, 0f, 0f, 0f, -100, 0.027f, 0f, 0f, 0f, 0.250f, 0.070f, 0.250f, 0f, -5f, 3762.6f, 362.5f, 0f, 0x20} ) ); |
||||
FactoryCupboard = new Environment ( new float[]{ 26, 1.7f, 0.630f, -1200, -200, -600, 0.49f, 0.65f, 1.31f, 200, 0.010f, 0f, 0f, 0f, 600, 0.032f, 0f, 0f, 0f, 0.107f, 0.070f, 0.250f, 0f, -5f, 3762.6f, 362.5f, 0f, 0x20} ) ); |
||||
FactoryCourtyard = new Environment ( new float[]{ 26, 1.7f, 0.570f, -1000, -1000, -400, 2.32f, 0.29f, 0.56f, -1300, 0.140f, 0f, 0f, 0f, -800, 0.039f, 0f, 0f, 0f, 0.250f, 0.290f, 0.250f, 0f, -5f, 3762.6f, 362.5f, 0f, 0x20} ) ); |
||||
FactorySmallroom = new Environment ( new float[]{ 26, 1.8f, 0.820f, -1000, -200, -600, 1.72f, 0.65f, 1.31f, -300, 0.010f, 0f, 0f, 0f, 500, 0.024f, 0f, 0f, 0f, 0.119f, 0.070f, 0.250f, 0f, -5f, 3762.6f, 362.5f, 0f, 0x20} ) );</pre> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Ice Palace</a></h2> |
||||
<div> |
||||
<pre>IcepalaceAlcove = new Environment ( new float[]{ 26, 2.7f, 0.840f, -1000, -500, -1100, 2.76f, 1.46f, 0.28f, 100, 0.010f, 0f, 0f, 0f, -100, 0.030f, 0f, 0f, 0f, 0.161f, 0.090f, 0.250f, 0f, -5f, 12428.5f, 99.6f, 0f, 0x20} ) ); |
||||
IcepalaceShortpassage = new Environment ( new float[]{ 26, 2.7f, 0.750f, -1000, -500, -1100, 1.79f, 1.46f, 0.28f, -600, 0.010f, 0f, 0f, 0f, 100, 0.019f, 0f, 0f, 0f, 0.177f, 0.090f, 0.250f, 0f, -5f, 12428.5f, 99.6f, 0f, 0x20} ) ); |
||||
IcepalaceMediumroom = new Environment ( new float[]{ 26, 2.7f, 0.870f, -1000, -500, -700, 2.22f, 1.53f, 0.32f, -800, 0.039f, 0f, 0f, 0f, 100, 0.027f, 0f, 0f, 0f, 0.186f, 0.120f, 0.250f, 0f, -5f, 12428.5f, 99.6f, 0f, 0x20} ) ); |
||||
IcepalaceLongpassage = new Environment ( new float[]{ 26, 2.7f, 0.770f, -1000, -500, -800, 3.01f, 1.46f, 0.28f, -200, 0.012f, 0f, 0f, 0f, 200, 0.025f, 0f, 0f, 0f, 0.186f, 0.040f, 0.250f, 0f, -5f, 12428.5f, 99.6f, 0f, 0x20} ) ); |
||||
IcepalaceLargeroom = new Environment ( new float[]{ 26, 2.9f, 0.810f, -1000, -500, -700, 3.14f, 1.53f, 0.32f, -1200, 0.039f, 0f, 0f, 0f, 000, 0.027f, 0f, 0f, 0f, 0.214f, 0.110f, 0.250f, 0f, -5f, 12428.5f, 99.6f, 0f, 0x20} ) ); |
||||
IcepalaceHall = new Environment ( new float[]{ 26, 2.9f, 0.760f, -1000, -700, -500, 5.49f, 1.53f, 0.38f, -1900, 0.054f, 0f, 0f, 0f, -400, 0.052f, 0f, 0f, 0f, 0.226f, 0.110f, 0.250f, 0f, -5f, 12428.5f, 99.6f, 0f, 0x20} ) ); |
||||
IcepalaceCupboard = new Environment ( new float[]{ 26, 2.7f, 0.830f, -1000, -600, -1300, 0.76f, 1.53f, 0.26f, 100, 0.012f, 0f, 0f, 0f, 600, 0.016f, 0f, 0f, 0f, 0.143f, 0.080f, 0.250f, 0f, -5f, 12428.5f, 99.6f, 0f, 0x20} ) ); |
||||
IcepalaceCourtyard = new Environment ( new float[]{ 26, 2.9f, 0.590f, -1000, -1100, -1000, 2.04f, 1.20f, 0.38f, -1000, 0.173f, 0f, 0f, 0f, -1000, 0.043f, 0f, 0f, 0f, 0.235f, 0.480f, 0.250f, 0f, -5f, 12428.5f, 99.6f, 0f, 0x20} ) ); |
||||
IcepalaceSmallroom = new Environment ( new float[]{ 26, 2.7f, 0.840f, -1000, -500, -1100, 1.51f, 1.53f, 0.27f, -100, 0.010f, 0f, 0f, 0f, 300, 0.011f, 0f, 0f, 0f, 0.164f, 0.140f, 0.250f, 0f, -5f, 12428.5f, 99.6f, 0f, 0x20} ) );</pre> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Space Station</a></h2> |
||||
<div> |
||||
<pre>SpacestationAlcove = new Environment ( new float[]{ 26, 1.5f, 0.780f, -1000, -300, -100, 1.16f, 0.81f, 0.55f, 300, 0.007f, 0f, 0f, 0f, 000, 0.018f, 0f, 0f, 0f, 0.192f, 0.210f, 0.250f, 0f, -5f, 3316.1f, 458.2f, 0f, 0x20} ) ); |
||||
SpacestationMediumroom = new Environment ( new float[]{ 26, 1.5f, 0.750f, -1000, -400, -100, 3.01f, 0.50f, 0.55f, -800, 0.034f, 0f, 0f, 0f, 100, 0.035f, 0f, 0f, 0f, 0.209f, 0.310f, 0.250f, 0f, -5f, 3316.1f, 458.2f, 0f, 0x20} ) ); |
||||
SpacestationShortpassage = new Environment ( new float[]{ 26, 1.5f, 0.870f, -1000, -400, -100, 3.57f, 0.50f, 0.55f, 0, 0.012f, 0f, 0f, 0f, 100, 0.016f, 0f, 0f, 0f, 0.172f, 0.200f, 0.250f, 0f, -5f, 3316.1f, 458.2f, 0f, 0x20} ) ); |
||||
SpacestationLongpassage = new Environment ( new float[]{ 26, 1.9f, 0.820f, -1000, -400, -100, 4.62f, 0.62f, 0.55f, 0, 0.012f, 0f, 0f, 0f, 200, 0.031f, 0f, 0f, 0f, 0.250f, 0.230f, 0.250f, 0f, -5f, 3316.1f, 458.2f, 0f, 0x20} ) ); |
||||
SpacestationLargeroom = new Environment ( new float[]{ 26, 1.8f, 0.810f, -1000, -400, -100, 3.89f, 0.38f, 0.61f, -1000, 0.056f, 0f, 0f, 0f, -100, 0.035f, 0f, 0f, 0f, 0.233f, 0.280f, 0.250f, 0f, -5f, 3316.1f, 458.2f, 0f, 0x20} ) ); |
||||
SpacestationHall = new Environment ( new float[]{ 26, 1.9f, 0.870f, -1000, -400, -100, 7.11f, 0.38f, 0.61f, -1500, 0.100f, 0f, 0f, 0f, -400, 0.047f, 0f, 0f, 0f, 0.250f, 0.250f, 0.250f, 0f, -5f, 3316.1f, 458.2f, 0f, 0x20} ) ); |
||||
SpacestationCupboard = new Environment ( new float[]{ 26, 1.4f, 0.560f, -1000, -300, -100, 0.79f, 0.81f, 0.55f, 300, 0.007f, 0f, 0f, 0f, 500, 0.018f, 0f, 0f, 0f, 0.181f, 0.310f, 0.250f, 0f, -5f, 3316.1f, 458.2f, 0f, 0x20} ) ); |
||||
SpacestationSmallroom = new Environment ( new float[]{ 26, 1.5f, 0.700f, -1000, -300, -100, 1.72f, 0.82f, 0.55f, -200, 0.007f, 0f, 0f, 0f, 300, 0.013f, 0f, 0f, 0f, 0.188f, 0.260f, 0.250f, 0f, -5f, 3316.1f, 458.2f, 0f, 0x20} ) );</pre> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Wooden Hut or Ship</a></h2> |
||||
<div> |
||||
<pre>WoodenAlcove = new Environment ( new float[]{ 26, 7.5f, 1f, -1000, -1800, -1000, 1.22f, 0.62f, 0.91f, 100, 0.012f, 0f, 0f, 0f, -300, 0.024f, 0f, 0f, 0f, 0.250f, 0f, 0.250f, 0f, -5f, 4705f, 99.6f, 0f, 0x3f} ) ); |
||||
WoodenShortpassage = new Environment ( new float[]{ 26, 7.5f, 1f, -1000, -1800, -1000, 1.75f, 0.50f, 0.87f, -100, 0.012f, 0f, 0f, 0f, -400, 0.024f, 0f, 0f, 0f, 0.250f, 0f, 0.250f, 0f, -5f, 4705f, 99.6f, 0f, 0x3f} ) ); |
||||
WoodenMediumroom = new Environment ( new float[]{ 26, 7.5f, 1f, -1000, -2000, -1100, 1.47f, 0.42f, 0.82f, -100, 0.049f, 0f, 0f, 0f, -100, 0.029f, 0f, 0f, 0f, 0.250f, 0f, 0.250f, 0f, -5f, 4705f, 99.6f, 0f, 0x3f} ) ); |
||||
WoodenLongpassage = new Environment ( new float[]{ 26, 7.5f, 1f, -1000, -2000, -1000, 1.99f, 0.40f, 0.79f, 000, 0.020f, 0f, 0f, 0f, -700, 0.036f, 0f, 0f, 0f, 0.250f, 0f, 0.250f, 0f, -5f, 4705f, 99.6f, 0f, 0x3f} ) ); |
||||
WoodenLargeroom = new Environment ( new float[]{ 26, 7.5f, 1f, -1000, -2100, -1100, 2.65f, 0.33f, 0.82f, -100, 0.066f, 0f, 0f, 0f, -200, 0.049f, 0f, 0f, 0f, 0.250f, 0f, 0.250f, 0f, -5f, 4705f, 99.6f, 0f, 0x3f} ) ); |
||||
WoodenHall = new Environment ( new float[]{ 26, 7.5f, 1f, -1000, -2200, -1100, 3.45f, 0.30f, 0.82f, -100, 0.088f, 0f, 0f, 0f, -200, 0.063f, 0f, 0f, 0f, 0.250f, 0f, 0.250f, 0f, -5f, 4705f, 99.6f, 0f, 0x3f} ) ); |
||||
WoodenCupboard = new Environment ( new float[]{ 26, 7.5f, 1f, -1000, -1700, -1000, 0.56f, 0.46f, 0.91f, 100, 0.012f, 0f, 0f, 0f, 100, 0.028f, 0f, 0f, 0f, 0.250f, 0f, 0.250f, 0f, -5f, 4705f, 99.6f, 0f, 0x3f} ) ); |
||||
WoodenSmallroom = new Environment ( new float[]{ 26, 7.5f, 1f, -1000, -1900, -1000, 0.79f, 0.32f, 0.87f, 00, 0.032f, 0f, 0f, 0f, -100, 0.029f, 0f, 0f, 0f, 0.250f, 0f, 0.250f, 0f, -5f, 4705f, 99.6f, 0f, 0x3f} ) ); |
||||
WoodenCourtyard = new Environment ( new float[]{ 26, 7.5f, 0.650f, -1000, -2200, -1000, 1.79f, 0.35f, 0.79f, -500, 0.123f, 0f, 0f, 0f, -2000, 0.032f, 0f, 0f, 0f, 0.250f, 0f, 0.250f, 0f, -5f, 4705f, 99.6f, 0f, 0x3f} ) );</pre> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Sport</a></h2> |
||||
<div> |
||||
<pre>SportEmptystadium = new Environment ( new float[]{ 26, 7.2f, 1f, -1000, -700, -200, 6.26f, 0.51f, 1.10f, -2400, 0.183f, 0f, 0f, 0f, -800, 0.038f, 0f, 0f, 0f, 0.250f, 0f, 0.250f, 0f, -5f, 5000f, 250f, 0f, 0x20} ) ); |
||||
SportSquashcourt = new Environment ( new float[]{ 26, 7.5f, 0.750f, -1000, -1000, -200, 2.22f, 0.91f, 1.16f, -700, 0.007f, 0f, 0f, 0f, -200, 0.011f, 0f, 0f, 0f, 0.126f, 0.190f, 0.250f, 0f, -5f, 7176.9f, 211.2f, 0f, 0x20} ) ); |
||||
SportSmallswimmingpool = new Environment ( new float[]{ 26, 36.2f, 0.700f, -1000, -200, -100, 2.76f, 1.25f, 1.14f, -400, 0.020f, 0f, 0f, 0f, -200, 0.030f, 0f, 0f, 0f, 0.179f, 0.150f, 0.895f, 0.190f, -5f, 5000f, 250f, 0f, 0x0} ) ); |
||||
SportLargeswimmingpool = new Environment ( new float[]{ 26, 36.2f, 0.820f, -1000, -200, 0, 5.49f, 1.31f, 1.14f, -700, 0.039f, 0f, 0f, 0f, -600, 0.049f, 0f, 0f, 0f, 0.222f, 0.550f, 1.159f, 0.210f, -5f, 5000f, 250f, 0f, 0x0} ) ); |
||||
SportGymnasium = new Environment ( new float[]{ 26, 7.5f, 0.810f, -1000, -700, -100, 3.14f, 1.06f, 1.35f, -800, 0.029f, 0f, 0f, 0f, -500, 0.045f, 0f, 0f, 0f, 0.146f, 0.140f, 0.250f, 0f, -5f, 7176.9f, 211.2f, 0f, 0x20} ) ); |
||||
SportFullstadium = new Environment ( new float[]{ 26, 7.2f, 1f, -1000, -2300, -200, 5.25f, 0.17f, 0.80f, -2000, 0.188f, 0f, 0f, 0f, -1100, 0.038f, 0f, 0f, 0f, 0.250f, 0f, 0.250f, 0f, -5f, 5000f, 250f, 0f, 0x20} ) );</pre> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Pipes</a></h2> |
||||
<div> |
||||
<pre>Sewerpipe = new Environment ( new float[]{ 21, 1.7f, 0.800f, -1000, -1000, 0, 2.81f, 0.14f, 1f, 429, 0.014f, 0f, 0f, 0f, 1023, 0.021f, 0f, 0f, 0f, 0.250f, 0f, 0.250f, 0f, -5f, 5000f, 250f, 0f, 0x3f} ) ); |
||||
PipeSmall = new Environment ( new float[]{ 26, 50.3f, 1f, -1000, -900, -1300, 5.04f, 0.10f, 0.10f, -600, 0.032f, 0f, 0f, 0f, 800, 0.015f, 0f, 0f, 0f, 0.250f, 0f, 0.250f, 0f, -5f, 2854.4f, 20f, 0f, 0x3f} ) ); |
||||
PipeLongthin = new Environment ( new float[]{ 26, 1.6f, 0.910f, -1000, -700, -1100, 9.21f, 0.18f, 0.10f, -300, 0.010f, 0f, 0f, 0f, -300, 0.022f, 0f, 0f, 0f, 0.250f, 0f, 0.250f, 0f, -5f, 2854.4f, 20f, 0f, 0x0} ) ); |
||||
PipeLarge = new Environment ( new float[]{ 26, 50.3f, 1f, -1000, -900, -1300, 8.45f, 0.10f, 0.10f, -800, 0.046f, 0f, 0f, 0f, 400, 0.032f, 0f, 0f, 0f, 0.250f, 0f, 0.250f, 0f, -5f, 2854.4f, 20f, 0f, 0x3f} ) ); |
||||
PipeResonant = new Environment ( new float[]{ 26, 1.3f, 0.910f, -1000, -700, -1100, 6.81f, 0.18f, 0.10f, -300, 0.010f, 0f, 0f, 0f, 00, 0.022f, 0f, 0f, 0f, 0.250f, 0f, 0.250f, 0f, -5f, 2854.4f, 20f, 0f, 0x0} ) );</pre> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Moods</a></h2> |
||||
<div> |
||||
<pre>Heaven = new Environment ( new float[]{ 26, 19.6f, 0.940f, -1000, -200, -700, 5.04f, 1.12f, 0.56f, -1230, 0.020f, 0f, 0f, 0f, 200, 0.029f, 0f, 0f, 0f, 0.250f, 0.080f, 2.742f, 0.050f, -2f, 5000f, 250f, 0f, 0x3f} ) ); |
||||
Hell = new Environment ( new float[]{ 26, 100f, 0.570f, -1000, -900, -700, 3.57f, 0.49f, 2f, -10000, 0.020f, 0f, 0f, 0f, 300, 0.030f, 0f, 0f, 0f, 0.110f, 0.040f, 2.109f, 0.520f, -5f, 5000f, 139.5f, 0f, 0x40} ) ); |
||||
Memory = new Environment ( new float[]{ 26, 8f, 0.850f, -1000, -400, -900, 4.06f, 0.82f, 0.56f, -2800, 0f, 0f, 0f, 0f, 100, 0f, 0f, 0f, 0f, 0.250f, 0f, 0.474f, 0.450f, -10f, 5000f, 250f, 0f, 0x0} ) ); |
||||
Drugged = new Environment ( new float[]{ 23, 1.9f, 0.500f, -1000, 0, 0, 8.39f, 1.39f, 1f, -115, 0.002f, 0f, 0f, 0f, 985, 0.030f, 0f, 0f, 0f, 0.250f, 0f, 0.250f, 1f, -5f, 5000f, 250f, 0f, 0x1f} ) ); |
||||
Dizzy = new Environment ( new float[]{ 24, 1.8f, 0.600f, -1000, -400, 0, 17.23f, 0.56f, 1f, -1713, 0.020f, 0f, 0f, 0f, -613, 0.030f, 0f, 0f, 0f, 0.250f, 1f, 0.810f, 0.310f, -5f, 5000f, 250f, 0f, 0x1f} ) ); |
||||
Psychotic = new Environment ( new float[]{ 25, 1f, 0.500f, -1000, -151, 0, 7.56f, 0.91f, 1f, -626, 0.020f, 0f, 0f, 0f, 774, 0.030f, 0f, 0f, 0f, 0.250f, 0f, 4f, 1f, -5f, 5000f, 250f, 0f, 0x1f} ) );</pre> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Car Racing</a></h2> |
||||
<div> |
||||
<pre>DrivingCommentator = new Environment ( new float[]{ 26, 3f, 0f, 1000, -500, -600, 2.42f, 0.88f, 0.68f, -1400, 0.093f, 0f, 0f, 0f, -1200, 0.017f, 0f, 0f, 0f, 0.250f, 1f, 0.250f, 0f, -10f, 5000f, 250f, 0f, 0x20} ) ); |
||||
DrivingPitgarage = new Environment ( new float[]{ 26, 1.9f, 0.590f, -1000, -300, -500, 1.72f, 0.93f, 0.87f, -500, 0f, 0f, 0f, 0f, 200, 0.016f, 0f, 0f, 0f, 0.250f, 0.110f, 0.250f, 0f, -5f, 5000f, 250f, 0f, 0x0} ) ); |
||||
DrivingIncarRacer = new Environment ( new float[]{ 26, 1.1f, 0.800f, -1000, 0, -200, 0.17f, 2f, 0.41f, 500, 0.007f, 0f, 0f, 0f, -300, 0.015f, 0f, 0f, 0f, 0.250f, 0f, 0.250f, 0f, -5f, 10268.2f, 251f, 0f, 0x20} ) ); |
||||
DrivingIncarSports = new Environment ( new float[]{ 26, 1.1f, 0.800f, -1000, -400, 0, 0.17f, 0.75f, 0.41f, 0, 0.010f, 0f, 0f, 0f, -500, 0f, 0f, 0f, 0f, 0.250f, 0f, 0.250f, 0f, -5f, 10268.2f, 251f, 0f, 0x20} ) ); |
||||
DrivingIncarLuxury = new Environment ( new float[]{ 26, 1.6f, 1f, -1000, -2000, -600, 0.13f, 0.41f, 0.46f, -200, 0.010f, 0f, 0f, 0f, 400, 0.010f, 0f, 0f, 0f, 0.250f, 0f, 0.250f, 0f, -5f, 10268.2f, 251f, 0f, 0x20} ) ); |
||||
DrivingFullgrandstand = new Environment ( new float[]{ 26, 8.3f, 1f, -1000, -1100, -400, 3.01f, 1.37f, 1.28f, -900, 0.090f, 0f, 0f, 0f, -1500, 0.049f, 0f, 0f, 0f, 0.250f, 0f, 0.250f, 0f, -5f, 10420.2f, 250f, 0f, 0x1f} ) ); |
||||
DrivingEmptygrandstand = new Environment ( new float[]{ 26, 8.3f, 1f, -1000, 0, -200, 4.62f, 1.75f, 1.40f, -1363, 0.090f, 0f, 0f, 0f, -1200, 0.049f, 0f, 0f, 0f, 0.250f, 0f, 0.250f, 0f, -5f, 10420.2f, 250f, 0f, 0x1f} ) ); |
||||
DrivingTunnel = new Environment ( new float[]{ 26, 3.1f, 0.810f, -1000, -800, -100, 3.42f, 0.94f, 1.31f, -300, 0.051f, 0f, 0f, 0f, -300, 0.047f, 0f, 0f, 0f, 0.214f, 0.050f, 0.250f, 0f, -5f, 5000f, 155.3f, 0f, 0x20} ) );</pre> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>City</a></h2> |
||||
<div> |
||||
<pre>CityIndoors = new Environment ( new float[]{ 16, 7.5f, 0.500f, -1000, -800, 0, 1.49f, 0.67f, 1f, -2273, 0.007f, 0f, 0f, 0f, -1691, 0.011f, 0f, 0f, 0f, 0.250f, 0f, 0.250f, 0f, -5f, 5000f, 250f, 0f, 0x3f} ) ); |
||||
CityStreets = new Environment ( new float[]{ 26, 3f, 0.780f, -1000, -300, -100, 1.79f, 1.12f, 0.91f, -1100, 0.046f, 0f, 0f, 0f, -1400, 0.028f, 0f, 0f, 0f, 0.250f, 0.200f, 0.250f, 0f, -5f, 5000f, 250f, 0f, 0x20} ) ); |
||||
CitySubway = new Environment ( new float[]{ 26, 3f, 0.740f, -1000, -300, -100, 3.01f, 1.23f, 0.91f, -300, 0.046f, 0f, 0f, 0f, 200, 0.028f, 0f, 0f, 0f, 0.125f, 0.210f, 0.250f, 0f, -5f, 5000f, 250f, 0f, 0x20} ) ); |
||||
CityMuseum = new Environment ( new float[]{ 26, 80.3f, 0.820f, -1000, -1500, -1500, 3.28f, 1.40f, 0.57f, -1200, 0.039f, 0f, 0f, -0f, -100, 0.034f, 0f, 0f, 0f, 0.130f, 0.170f, 0.250f, 0f, -5f, 2854.4f, 107.5f, 0f, 0x0} ) ); |
||||
CityLibrary = new Environment ( new float[]{ 26, 80.3f, 0.820f, -1000, -1100, -2100, 2.76f, 0.89f, 0.41f, -900, 0.029f, 0f, 0f, -0f, -100, 0.020f, 0f, 0f, 0f, 0.130f, 0.170f, 0.250f, 0f, -5f, 2854.4f, 107.5f, 0f, 0x0} ) ); |
||||
CityUnderpass = new Environment ( new float[]{ 26, 3f, 0.820f, -1000, -700, -100, 3.57f, 1.12f, 0.91f, -800, 0.059f, 0f, 0f, 0f, -100, 0.037f, 0f, 0f, 0f, 0.250f, 0.140f, 0.250f, 0f, -7f, 5000f, 250f, 0f, 0x20} ) ); |
||||
CityAbandoned = new Environment ( new float[]{ 26, 3f, 0.690f, -1000, -200, -100, 3.28f, 1.17f, 0.91f, -700, 0.044f, 0f, 0f, 0f, -1100, 0.024f, 0f, 0f, 0f, 0.250f, 0.200f, 0.250f, 0f, -3f, 5000f, 250f, 0f, 0x20} ) );</pre> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Small Indoor Rooms</a></h2> |
||||
<div> |
||||
<pre>Room = new Environment ( new float[]{ 2, 1.9f, 1f, -1000, -454, 0, 0.40f, 0.83f, 1f, -1646, 0.002f, 0f, 0f, 0f, 53, 0.003f, 0f, 0f, 0f, 0.250f, 0f, 0.250f, 0f, -5f, 5000f, 250f, 0f, 0x3f} ) ); |
||||
Bathroom = new Environment ( new float[]{ 3, 1.4f, 1f, -1000, -1200, 0, 1.49f, 0.54f, 1f, -370, 0.007f, 0f, 0f, 0f, 1030, 0.011f, 0f, 0f, 0f, 0.250f, 0f, 0.250f, 0f, -5f, 5000f, 250f, 0f, 0x3f} ) ); |
||||
Livingroom = new Environment ( new float[]{ 4, 2.5f, 1f, -1000, -6000, 0, 0.50f, 0.10f, 1f, -1376, 0.003f, 0f, 0f, 0f, -1104, 0.004f, 0f, 0f, 0f, 0.250f, 0f, 0.250f, 0f, -5f, 5000f, 250f, 0f, 0x3f} ) ); |
||||
Paddedcell = new Environment ( new float[]{ 1, 1.4f, 1f, -1000, -6000, 0, 0.17f, 0.10f, 1f, -1204, 0.001f, 0f, 0f, 0f, 207, 0.002f, 0f, 0f, 0f, 0.250f, 0f, 0.250f, 0f, -5f, 5000f, 250f, 0f, 0x3f} ) ); |
||||
Stoneroom = new Environment ( new float[]{ 5, 11.6f, 1f, -1000, -300, 0, 2.31f, 0.64f, 1f, -711, 0.012f, 0f, 0f, 0f, 83, 0.017f, 0f, 0f, 0f, 0.250f, 0f, 0.250f, 0f, -5f, 5000f, 250f, 0f, 0x3f} ) );</pre> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Medium-Sized Indoor Rooms</a></h2> |
||||
<div> |
||||
<pre>Workshop = new Environment ( new float[]{ 26, 1.9f, 1f, -1000, -1700, -800, 0.76f, 1f, 1f, 0, 0.012f, 0f, 0f, 0f, 100, 0.012f, 0f, 0f, 0f, 0.250f, 0f, 0.250f, 0f, -5f, 5000f, 250f, 0f, 0x0} ) ); |
||||
Schoolroom = new Environment ( new float[]{ 26, 1.86f, 0.690f, -1000, -400, -600, 0.98f, 0.45f, 0.18f, 300, 0.017f, 0f, 0f, 0f, 300, 0.015f, 0f, 0f, 0f, 0.095f, 0.140f, 0.250f, 0f, -5f, 7176.9f, 211.2f, 0f, 0x20} ) ); |
||||
Practiseroom = new Environment ( new float[]{ 26, 1.86f, 0.870f, -1000, -800, -600, 1.12f, 0.56f, 0.18f, 200, 0.010f, 0f, 0f, 0f, 300, 0.011f, 0f, 0f, 0f, 0.095f, 0.140f, 0.250f, 0f, -5f, 7176.9f, 211.2f, 0f, 0x20} ) ); |
||||
Outhouse = new Environment ( new float[]{ 26, 80.3f, 0.820f, -1000, -1900, -1600, 1.38f, 0.38f, 0.35f, -100, 0.024f, 0f, 0f, -0f, -400, 0.044f, 0f, 0f, 0f, 0.121f, 0.170f, 0.250f, 0f, -5f, 2854.4f, 107.5f, 0f, 0x0} ) ); |
||||
Caravan = new Environment ( new float[]{ 26, 8.3f, 1f, -1000, -2100, -1800, 0.43f, 1.50f, 1f, 0, 0.012f, 0f, 0f, 0f, 600, 0.012f, 0f, 0f, 0f, 0.250f, 0f, 0.250f, 0f, -5f, 5000f, 250f, 0f, 0x1f} ) ); |
||||
Dustyroom = new Environment ( new float[]{ 26, 1.8f, 0.560f, -1000, -200, -300, 1.79f, 0.38f, 0.21f, -600, 0.002f, 0f, 0f, 0f, 200, 0.006f, 0f, 0f, 0f, 0.202f, 0.050f, 0.250f, 0f, -10f, 13046f, 163.3f, 0f, 0x20} ) ); |
||||
Chapel = new Environment ( new float[]{ 26, 19.6f, 0.840f, -1000, -500, 0, 4.62f, 0.64f, 1.23f, -700, 0.032f, 0f, 0f, 0f, -200, 0.049f, 0f, 0f, 0f, 0.250f, 0f, 0.250f, 0.110f, -5f, 5000f, 250f, 0f, 0x3f} ) );</pre> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Large Indoor Rooms</a></h2> |
||||
<div> |
||||
<pre>Auditorium = new Environment ( new float[]{ 6, 21.6f, 1f, -1000, -476, 0, 4.32f, 0.59f, 1f, -789, 0.020f, 0f, 0f, 0f, -289, 0.030f, 0f, 0f, 0f, 0.250f, 0f, 0.250f, 0f, -5f, 5000f, 250f, 0f, 0x3f} ) ); |
||||
Concerthall = new Environment ( new float[]{ 7, 19.6f, 1f, -1000, -500, 0, 3.92f, 0.70f, 1f, -1230, 0.020f, 0f, 0f, 0f, -02, 0.029f, 0f, 0f, 0f, 0.250f, 0f, 0.250f, 0f, -5f, 5000f, 250f, 0f, 0x3f} ) ); |
||||
Cave = new Environment ( new float[]{ 8, 14.6f, 1f, -1000, 0, 0, 2.91f, 1.30f, 1f, -602, 0.015f, 0f, 0f, 0f, -302, 0.022f, 0f, 0f, 0f, 0.250f, 0f, 0.250f, 0f, -5f, 5000f, 250f, 0f, 0x1f} ) ); |
||||
Arena = new Environment ( new float[]{ 9, 36.2f, 1f, -1000, -698, 0, 7.24f, 0.33f, 1f, -1166, 0.020f, 0f, 0f, 0f, 16, 0.030f, 0f, 0f, 0f, 0.250f, 0f, 0.250f, 0f, -5f, 5000f, 250f, 0f, 0x3f} ) ); |
||||
Hangar = new Environment ( new float[]{ 10, 50.3f, 1f, -1000, -1000, 0, 10.05f, 0.23f, 1f, -602, 0.020f, 0f, 0f, 0f, 198, 0.030f, 0f, 0f, 0f, 0.250f, 0f, 0.250f, 0f, -5f, 5000f, 250f, 0f, 0x3f} ) ); |
||||
DomeTomb = new Environment ( new float[]{ 26, 51.8f, 0.790f, -1000, -900, -1300, 4.18f, 0.21f, 0.10f, -825, 0.030f, 0f, 0f, 0f, 450, 0.022f, 0f, 0f, 0f, 0.177f, 0.190f, 0.250f, 0f, -5f, 2854.4f, 20f, 0f, 0x0} ) ); |
||||
DomeSaintPauls = new Environment ( new float[]{ 26, 50.3f, 0.870f, -1000, -900, -1300, 10.48f, 0.19f, 0.10f, -1500, 0.090f, 0f, 0f, 0f, 200, 0.042f, 0f, 0f, 0f, 0.250f, 0.120f, 0.250f, 0f, -5f, 2854.4f, 20f, 0f, 0x3f} ) );</pre> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Hallways, Alleys</a></h2> |
||||
<div> |
||||
<pre>Carpettedhallway = new Environment ( new float[]{ 11, 1.9f, 1f, -1000, -4000, 0, 0.30f, 0.10f, 1f, -1831, 0.002f, 0f, 0f, 0f, -1630, 0.030f, 0f, 0f, 0f, 0.250f, 0f, 0.250f, 0f, -5f, 5000f, 250f, 0f, 0x3f} ) ); |
||||
Hallway = new Environment ( new float[]{ 12, 1.8f, 1f, -1000, -300, 0, 1.49f, 0.59f, 1f, -1219, 0.007f, 0f, 0f, 0f, 441, 0.011f, 0f, 0f, 0f, 0.250f, 0f, 0.250f, 0f, -5f, 5000f, 250f, 0f, 0x3f} ) ); |
||||
Stonecorridor = new Environment ( new float[]{ 13, 13.5f, 1f, -1000, -237, 0, 2.70f, 0.79f, 1f, -1214, 0.013f, 0f, 0f, 0f, 395, 0.020f, 0f, 0f, 0f, 0.250f, 0f, 0.250f, 0f, -5f, 5000f, 250f, 0f, 0x3f} ) ); |
||||
Alley = new Environment ( new float[]{ 14, 7.5f, 0.300f, -1000, -270, 0, 1.49f, 0.86f, 1f, -1204, 0.007f, 0f, 0f, 0f, -4, 0.011f, 0f, 0f, 0f, 0.125f, 0.950f, 0.250f, 0f, -5f, 5000f, 250f, 0f, 0x3f} ) );</pre> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Outdoors</a></h2> |
||||
<div> |
||||
<pre>Backyard = new Environment ( new float[]{ 26, 80.3f, 0.450f, -1000, -1200, -600, 1.12f, 0.34f, 0.46f, -700, 0.069f, 0f, 0f, -0f, -300, 0.023f, 0f, 0f, 0f, 0.218f, 0.340f, 0.250f, 0f, -5f, 4399.1f, 242.9f, 0f, 0x0} ) ); |
||||
Plain = new Environment ( new float[]{ 19, 42.5f, 0.210f, -1000, -2000, 0, 1.49f, 0.50f, 1f, -2466, 0.179f, 0f, 0f, 0f, -1926, 0.100f, 0f, 0f, 0f, 0.250f, 1f, 0.250f, 0f, -5f, 5000f, 250f, 0f, 0x3f} ) ); |
||||
Rollingplains = new Environment ( new float[]{ 26, 80.3f, 0f, -1000, -3900, -400, 2.13f, 0.21f, 0.46f, -1500, 0.300f, 0f, 0f, -0f, -700, 0.019f, 0f, 0f, 0f, 0.250f, 1f, 0.250f, 0f, -5f, 4399.1f, 242.9f, 0f, 0x0} ) ); |
||||
Deepcanyon = new Environment ( new float[]{ 26, 80.3f, 0.740f, -1000, -1500, -400, 3.89f, 0.21f, 0.46f, -1000, 0.223f, 0f, 0f, -0f, -900, 0.019f, 0f, 0f, 0f, 0.250f, 1f, 0.250f, 0f, -5f, 4399.1f, 242.9f, 0f, 0x0} ) ); |
||||
Creek = new Environment ( new float[]{ 26, 80.3f, 0.350f, -1000, -1500, -600, 2.13f, 0.21f, 0.46f, -800, 0.115f, 0f, 0f, -0f, -1400, 0.031f, 0f, 0f, 0f, 0.218f, 0.340f, 0.250f, 0f, -5f, 4399.1f, 242.9f, 0f, 0x0} ) ); |
||||
Valley = new Environment ( new float[]{ 26, 80.3f, 0.280f, -1000, -3100, -1600, 2.88f, 0.26f, 0.35f, -1700, 0.263f, 0f, 0f, -0f, -800, 0.100f, 0f, 0f, 0f, 0.250f, 0.340f, 0.250f, 0f, -5f, 2854.4f, 107.5f, 0f, 0x0} ) ); |
||||
Forest = new Environment ( new float[]{ 15, 38f, 0.300f, -1000, -3300, 0, 1.49f, 0.54f, 1f, -2560, 0.162f, 0f, 0f, 0f, -229, 0.088f, 0f, 0f, 0f, 0.125f, 1f, 0.250f, 0f, -5f, 5000f, 250f, 0f, 0x3f} ) ); |
||||
Mountains = new Environment ( new float[]{ 17, 100f, 0.270f, -1000, -2500, 0, 1.49f, 0.21f, 1f, -2780, 0.300f, 0f, 0f, 0f, -1434, 0.100f, 0f, 0f, 0f, 0.250f, 1f, 0.250f, 0f, -5f, 5000f, 250f, 0f, 0x1f} ) ); |
||||
Quarry = new Environment ( new float[]{ 18, 17.5f, 1f, -1000, -1000, 0, 1.49f, 0.83f, 1f, -10000, 0.061f, 0f, 0f, 0f, 500, 0.025f, 0f, 0f, 0f, 0.125f, 0.700f, 0.250f, 0f, -5f, 5000f, 250f, 0f, 0x3f} ) ); |
||||
Parkinglot = new Environment ( new float[]{ 20, 8.3f, 1f, -1000, 0, 0, 1.65f, 1.50f, 1f, -1363, 0.008f, 0f, 0f, 0f, -1153, 0.012f, 0f, 0f, 0f, 0.250f, 0f, 0.250f, 0f, -5f, 5000f, 250f, 0f, 0x1f} ) );</pre> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Water</a></h2> |
||||
<div> |
||||
<pre>Underwater = new Environment ( new float[]{ 22, 1.8f, 1f, -1000, -4000, 0, 1.49f, 0.10f, 1f, -449, 0.007f, 0f, 0f, 0f, 1700, 0.011f, 0f, 0f, 0f, 0.250f, 0f, 1.180f, 0.348f, -5f, 5000f, 250f, 0f, 0x3f} ) ); |
||||
Smallwaterroom = new Environment ( new float[]{ 26, 36.2f, 0.700f, -1000, -698, 0, 1.51f, 1.25f, 1.14f, -100, 0.020f, 0f, 0f, 0f, 300, 0.030f, 0f, 0f, 0f, 0.179f, 0.150f, 0.895f, 0.190f, -7f, 5000f, 250f, 0f, 0x0} ) );</pre> |
||||
|
||||
</div> |
||||
<p><em><a href="http://direct.jmonkeyengine.org/wiki/doku.php/jme3:advanced:audio_environment_presets?do=export_xhtmlbody">view online version</a></em></p> |
||||
|
After Width: | Height: | Size: 283 B |
@ -0,0 +1,43 @@ |
||||
|
||||
<h1><a>Multithreading Bullet Physics in jme3</a></h1> |
||||
<div> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Introduction</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
Since bullet is not (yet) multithreaded or GPU accelerated the jME3 implementation allows to run each physics space on a separate thread that is executed in parallel to rendering. |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>How is it handled in jme3 and bullet?</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
A SimpleApplication with a BulletAppState allows setting the threading type via |
||||
</p> |
||||
<pre>setThreadingType(ThreadingType type);</pre> |
||||
|
||||
<p> |
||||
where ThreadingType can be either SEQUENTIAL or PARALLEL. |
||||
</p> |
||||
|
||||
<p> |
||||
In the simpleInitApp() method: |
||||
|
||||
</p> |
||||
<pre>bulletAppState = new BulletAppState(); |
||||
bulletAppState.setThreadingType(BulletAppState.ThreadingType.PARALLEL); |
||||
stateManager.attach(bulletAppState);</pre> |
||||
|
||||
<p> |
||||
The physics update happens in parallel to rendering, after the users changes have been made in the update() call. This way the loop logic is still maintained: the user can set and change values in physics and scenegraph objects before render() and physicsUpdate() are called in parallel. More physics spaces can simply be added by using multiple bulletAppStates. |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
<p><em><a href="http://direct.jmonkeyengine.org/wiki/doku.php/jme3:advanced:bullet_multithreading?do=export_xhtmlbody">view online version</a></em></p> |
||||
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 16 KiB |
@ -1,132 +1,173 @@ |
||||
<h1><a |
||||
name="the_jme3_camera">The jME3 Camera</a></h1><div |
||||
class="level1"></div><h2><a |
||||
name="default_camera">Default Camera</a></h2><div |
||||
class="level2"><p> The default com.jme3.renderer.Camera object is <code>cam</code> in com.jme3.app.Application.</p><p> The camera object is created with the following defaults:</p><ul><li |
||||
class="level1"><div |
||||
class="li"> Width and height are set to the current Application's settings.getWidth() and settings.getHeight() values.</div></li><li |
||||
class="level1"><div |
||||
class="li"> Frustum Perspective:</div><ul><li |
||||
class="level2"><div |
||||
class="li"> Frame of view angle of 45° along the Y axis</div></li><li |
||||
class="level2"><div |
||||
class="li"> Aspect ratio of width divided by height</div></li><li |
||||
class="level2"><div |
||||
class="li"> Near view plane of 1 wu</div></li><li |
||||
class="level2"><div |
||||
class="li"> Far view plane of 1000 wu</div></li></ul></li><li |
||||
class="level1"><div |
||||
class="li"> Start location at (0f, 0f, 10f).</div></li><li |
||||
class="level1"><div |
||||
class="li"> Start direction is looking at the origin.</div></li></ul><div |
||||
class="table sectionedit1"><table |
||||
class="inline"><tr |
||||
class="row0"><th |
||||
class="col0">Method</th><th |
||||
class="col1">Usage</th></tr><tr |
||||
class="row1"><td |
||||
class="col0">cam.getLocation(), setLocation()</td><td |
||||
class="col1">The camera position</td></tr><tr |
||||
class="row2"><td |
||||
class="col0">cam.getRotation(), setRotation()</td><td |
||||
class="col1">The camera rotation</td></tr><tr |
||||
class="row3"><td |
||||
class="col0">cam.getLeft(), setLeft()</td><td |
||||
class="col1">The left axis of the camera</td></tr><tr |
||||
class="row4"><td |
||||
class="col0">cam.getUp(), setUp()</td><td |
||||
class="col1">The up axis of the camera, usually Vector3f(0,1,0)</td></tr><tr |
||||
class="row5"><td |
||||
class="col0">cam.getDirection(), setDirection()</td><td |
||||
class="col1">The vector the camera is facing</td></tr><tr |
||||
class="row6"><td |
||||
class="col0">cam.getAxes(), setAxes(left,up,dir)</td><td |
||||
class="col1">One accessor for the three properties left/up/direction.</td></tr><tr |
||||
class="row7"><td |
||||
class="col0">cam.getFrame(), setFrame(loc,left,up,dir)</td><td |
||||
class="col1">One accessor for the four properties location/left/up/direction.</td></tr><tr |
||||
class="row8"><td |
||||
class="col0">cam.resize(width, height, fixAspect)</td><td |
||||
class="col1">Resize an existing camera object while keeping all other settings. Set fixAspect to true to adjust the aspect ratio (?)</td></tr><tr |
||||
class="row9"><td |
||||
class="col0">cam.setFrustum( near, far, left, right, top, bottom )</td><td |
||||
class="col1">The frustrum is defined by the near/far plane, left/rught plane, top/bottom plane (all distances as float values)</td></tr><tr |
||||
class="row10"><td |
||||
class="col0">cam.setFrustumPerspective( fovY, aspect ratio, near, far)</td><td |
||||
class="col1">The frustrum is defined by view angle along the Y axis (in degrees), aspect ratio, and the near/far plane.</td></tr><tr |
||||
class="row11"><td |
||||
class="col0">cam.lookAt(target,up)</td><td |
||||
class="col1">Turn the camera to look at Coordinate target, and rotate it around the up axis.</td></tr><tr |
||||
class="row12"><td |
||||
class="col0">cam.setParallelProjection(false)</td><td |
||||
class="col1">Normal perspective</td></tr><tr |
||||
class="row13"><td |
||||
class="col0">cam.setParallelProjection(true)</td><td |
||||
class="col1">Parallel projection perspective</td></tr><tr |
||||
class="row14"><td |
||||
class="col0">cam.getScreenCoordinates()</td><td |
||||
class="col1">?</td></tr></table></div><p> <strong>Tip:</strong> After you change view port, frustrum, or frame, call <code>cam.update();</code></p></div><h2><a |
||||
name="flyby_camera">FlyBy Camera</a></h2><div |
||||
class="level2"><p> The flyby camera is an extension of the default camera in com.jme3.app.SimpleApplication. It is preconfigured to respond to the WASD keys for walking forwards and backwards, and for strafing to the sides. Move the mouse to rotate the camera, scroll the mouse wheel for zooming in or out. The QZ keys raise or lower the camera.</p><div |
||||
class="table sectionedit2"><table |
||||
class="inline"><tr |
||||
class="row0"><th |
||||
class="col0">Method</th><th |
||||
class="col1">Usage</th></tr><tr |
||||
class="row1"><td |
||||
class="col0">flyCam.setEnabled(true);</td><td |
||||
class="col1">Activate the flyby cam</td></tr><tr |
||||
class="row2"><td |
||||
class="col0">flyCam.setMoveSpeed(10);</td><td |
||||
class="col1">Control the move speed</td></tr><tr |
||||
class="row3"><td |
||||
class="col0">flyCam.setRotationSpeed(10);</td><td |
||||
class="col1">Control the rotation speed</td></tr><tr |
||||
class="row4"><td |
||||
class="col0">flyCam.setDragToRotate(true)</td><td |
||||
class="col1">Must keep mouse button pressed to rotate camera. Used e.g. for Applets. if false, all mouse movement will be captured and interpreted as rotations.</td></tr></table></div></div><h2><a |
||||
name="chase_camera">Chase Camera</a></h2><div |
||||
class="level2"><p> jME3 also supports a Chase Cam that can follow a moving target Spatial (<code>com.jme3.input.ChaseCamera</code>). Click and hold the mouse button to rotate around the target.</p><pre>flyCam.setEnabled(false); |
||||
ChaseCamera chaseCam = new ChaseCamera(cam, target, inputManager);</pre><div |
||||
class="table sectionedit3"><table |
||||
class="inline"><tr |
||||
class="row0"><th |
||||
class="col0">Method</th><th |
||||
class="col1">Usage</th></tr><tr |
||||
class="row1"><td |
||||
class="col0">chaseCam.setSmoothMotion(true);</td><td |
||||
class="col1">Interpolates a smoother acceleration/deceleration when the camera moves.</td></tr><tr |
||||
class="row2"><td |
||||
class="col0">chaseCam.setChasingSensitivity(5f)</td><td |
||||
class="col1">The lower the chasing sensitivity, the slower the camera will follow the target when it moves.</td></tr><tr |
||||
class="row3"><td |
||||
class="col0">chaseCam.setTrailingSensitivity(0.5f)</td><td |
||||
class="col1">The lower the traling sensitivity, the slower the camera will begin to go after the target when it moves. Default is 0.5;</td></tr><tr |
||||
class="row4"><td |
||||
class="col0">chaseCam.setRotationSensitivity(5f)</td><td |
||||
class="col1">The lower the sensitivity, the slower the camera will rotate around the target when the mosue is dragged. Default is 5.</td></tr><tr |
||||
class="row5"><td |
||||
class="col0">chaseCam.setTrailingRotationInertia(0.1f)</td><td |
||||
class="col1">This prevents the camera to stop too abruptly when the target stops rotating before the camera has reached the target's trailing position. Default is 0.1f.</td></tr><tr |
||||
class="row6"><td |
||||
class="col0">chaseCam.setDefaultDistance(40);</td><td |
||||
class="col1">The default distance to the target at the start of the application.</td></tr><tr |
||||
class="row7"><td |
||||
class="col0">chaseCam.setMaxDistance(40);</td><td |
||||
class="col1">The maximum zoom distance. Default is 40f.</td></tr><tr |
||||
class="row8"><td |
||||
class="col0">chaseCam.setMinDistance(1);</td><td |
||||
class="col1">The minimum zoom distance. Default is 1f.</td></tr><tr |
||||
class="row9"><td |
||||
class="col0">chaseCam.setMinVerticalRotation(-FastMath.PI/2);</td><td |
||||
class="col1">The minimal vertical rotation angle of the camera around the target. Default is 0.</td></tr><tr |
||||
class="row10"><td |
||||
class="col0">chaseCam.setDefaultVerticalRotation(-FastMath.PI/2);</td><td |
||||
class="col1">The default vertical rotation angle of the camera around the target at the start of the application.</td></tr><tr |
||||
class="row11"><td |
||||
class="col0">chaseCam.setDefaultHorizontalRotation(-FastMath.PI/2);</td><td |
||||
class="col1">The default horizontal rotation angle of the camera around the target at the start of the application.</td></tr></table></div><div |
||||
class="tags"><span> <a |
||||
href="/wiki/doku.php/tag:camera?do=showtag&tag=tag%3Acamera">camera</a>, <a |
||||
href="/wiki/doku.php/tag:documentation?do=showtag&tag=tag%3Adocumentation">documentation</a> </span></div></div> |
||||
<p><em><a href="http://jmonkeyengine.org/wiki/doku.php/jme3:advanced:camera?do=export_xhtmlbody">view online version</a></em></p> |
||||
|
||||
<h1><a>The jME3 Camera</a></h1> |
||||
<div> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Default Camera</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
The default com.jme3.renderer.Camera object is <code>cam</code> in com.jme3.app.Application. |
||||
</p> |
||||
|
||||
<p> |
||||
The camera object is created with the following defaults: |
||||
</p> |
||||
<ul> |
||||
<li><div> Width and height are set to the current Application's settings.getWidth() and settings.getHeight() values. </div> |
||||
</li> |
||||
<li><div> Frustum Perspective:</div> |
||||
<ul> |
||||
<li><div> Frame of view angle of 45° along the Y axis</div> |
||||
</li> |
||||
<li><div> Aspect ratio of width divided by height</div> |
||||
</li> |
||||
<li><div> Near view plane of 1 wu</div> |
||||
</li> |
||||
<li><div> Far view plane of 1000 wu</div> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
<li><div> Start location at (0f, 0f, 10f).</div> |
||||
</li> |
||||
<li><div> Start direction is looking at the origin.</div> |
||||
</li> |
||||
</ul> |
||||
<div><table> |
||||
<tr> |
||||
<th>Method</th><th>Usage</th> |
||||
</tr> |
||||
<tr> |
||||
<td>cam.getLocation(), setLocation()</td><td>The camera position</td> |
||||
</tr> |
||||
<tr> |
||||
<td>cam.getRotation(), setRotation()</td><td>The camera rotation</td> |
||||
</tr> |
||||
<tr> |
||||
<td>cam.getLeft(), setLeft()</td><td>The left axis of the camera</td> |
||||
</tr> |
||||
<tr> |
||||
<td>cam.getUp(), setUp()</td><td>The up axis of the camera, usually Vector3f(0,1,0)</td> |
||||
</tr> |
||||
<tr> |
||||
<td>cam.getDirection(), setDirection()</td><td>The vector the camera is facing</td> |
||||
</tr> |
||||
<tr> |
||||
<td>cam.getAxes(), setAxes(left,up,dir)</td><td>One accessor for the three properties left/up/direction.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>cam.getFrame(), setFrame(loc,left,up,dir)</td><td>One accessor for the four properties location/left/up/direction.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>cam.resize(width, height, fixAspect)</td><td>Resize an existing camera object while keeping all other settings. Set fixAspect to true to adjust the aspect ratio (?)</td> |
||||
</tr> |
||||
<tr> |
||||
<td>cam.setFrustum( near, far, left, right, top, bottom )</td><td>The frustrum is defined by the near/far plane, left/rught plane, top/bottom plane (all distances as float values)</td> |
||||
</tr> |
||||
<tr> |
||||
<td>cam.setFrustumPerspective( fovY, aspect ratio, near, far)</td><td>The frustrum is defined by view angle along the Y axis (in degrees), aspect ratio, and the near/far plane.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>cam.lookAt(target,up)</td><td>Turn the camera to look at Coordinate target, and rotate it around the up axis.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>cam.setParallelProjection(false)</td><td>Normal perspective</td> |
||||
</tr> |
||||
<tr> |
||||
<td>cam.setParallelProjection(true)</td><td>Parallel projection perspective</td> |
||||
</tr> |
||||
<tr> |
||||
<td>cam.getScreenCoordinates()</td><td>?</td> |
||||
</tr> |
||||
</table></div> |
||||
<!-- EDIT1 TABLE [583-1860] --> |
||||
<p> |
||||
<strong>Tip:</strong> After you change view port, frustrum, or frame, call <code>cam.update();</code> |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>FlyBy Camera</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
The flyby camera is an extension of the default camera in com.jme3.app.SimpleApplication. It is preconfigured to respond to the WASD keys for walking forwards and backwards, and for strafing to the sides. Move the mouse to rotate the camera, scroll the mouse wheel for zooming in or out. The QZ keys raise or lower the camera. |
||||
|
||||
</p> |
||||
<div><table> |
||||
<tr> |
||||
<th>Method</th><th>Usage</th> |
||||
</tr> |
||||
<tr> |
||||
<td>flyCam.setEnabled(true);</td><td>Activate the flyby cam</td> |
||||
</tr> |
||||
<tr> |
||||
<td>flyCam.setMoveSpeed(10);</td><td>Control the move speed</td> |
||||
</tr> |
||||
<tr> |
||||
<td>flyCam.setRotationSpeed(10);</td><td>Control the rotation speed</td> |
||||
</tr> |
||||
<tr> |
||||
<td>flyCam.setDragToRotate(true)</td><td>Must keep mouse button pressed to rotate camera. Used e.g. for Applets. if false, all mouse movement will be captured and interpreted as rotations.</td> |
||||
</tr> |
||||
</table></div> |
||||
<!-- EDIT2 TABLE [2298-2649] --> |
||||
</div> |
||||
|
||||
<h2><a>Chase Camera</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
jME3 also supports a Chase Cam that can follow a moving target Spatial (<code>com.jme3.input.ChaseCamera</code>). Click and hold the mouse button to rotate around the target. |
||||
</p> |
||||
<pre>flyCam.setEnabled(false); |
||||
ChaseCamera chaseCam = new ChaseCamera(cam, target, inputManager);</pre> |
||||
<div><table> |
||||
<tr> |
||||
<th>Method</th><th>Usage</th> |
||||
</tr> |
||||
<tr> |
||||
<td>chaseCam.setSmoothMotion(true);</td><td>Interpolates a smoother acceleration/deceleration when the camera moves.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>chaseCam.setChasingSensitivity(5f)</td><td>The lower the chasing sensitivity, the slower the camera will follow the target when it moves.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>chaseCam.setTrailingSensitivity(0.5f)</td><td>The lower the traling sensitivity, the slower the camera will begin to go after the target when it moves. Default is 0.5;</td> |
||||
</tr> |
||||
<tr> |
||||
<td>chaseCam.setRotationSensitivity(5f)</td><td>The lower the sensitivity, the slower the camera will rotate around the target when the mosue is dragged. Default is 5.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>chaseCam.setTrailingRotationInertia(0.1f)</td><td>This prevents the camera to stop too abruptly when the target stops rotating before the camera has reached the target's trailing position. Default is 0.1f.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>chaseCam.setDefaultDistance(40);</td><td>The default distance to the target at the start of the application.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>chaseCam.setMaxDistance(40);</td><td>The maximum zoom distance. Default is 40f.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>chaseCam.setMinDistance(1);</td><td>The minimum zoom distance. Default is 1f.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>chaseCam.setMinVerticalRotation(-FastMath.PI/2);</td><td>The minimal vertical rotation angle of the camera around the target. Default is 0.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>chaseCam.setDefaultVerticalRotation(-FastMath.PI/2);</td><td>The default vertical rotation angle of the camera around the target at the start of the application.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>chaseCam.setDefaultHorizontalRotation(-FastMath.PI/2);</td><td>The default horizontal rotation angle of the camera around the target at the start of the application.</td> |
||||
</tr> |
||||
</table></div> |
||||
<!-- EDIT3 TABLE [2958-4430] --><div><span> |
||||
<a href="/wiki/doku.php/tag:camera?do=showtag&tag=tag%3Acamera">camera</a>, |
||||
<a href="/wiki/doku.php/tag:documentation?do=showtag&tag=tag%3Adocumentation">documentation</a> |
||||
</span></div> |
||||
|
||||
</div> |
||||
<p><em><a href="http://direct.jmonkeyengine.org/wiki/doku.php/jme3:advanced:camera?do=export_xhtmlbody">view online version</a></em></p> |
||||
@ -1,228 +1,438 @@ |
||||
<h1><a |
||||
name="jme3_cinematics">jME3 Cinematics</a></h1><div |
||||
class="level1"><p> JME3 cinematics (com.jme.cinematic) allow you to remote control nodes and cameras in a 3D game. You use cinematics to script and record scenes. Use it for example to create <a |
||||
href="http://en.wikipedia.org/wiki/Cutscene">cutscenes</a> of your game.</p><p> Cinematics are implemented as AppStates. Attach the scene that you want to be visible in the cinematic to one Node. You create a Cinematic object, and add individual CinematicEvents to it.</p></div><h2><a |
||||
name="overview">Overview</a></h2><div |
||||
class="level2"><pre>Cinematic cinematic = new Cinematic(sceneNode, duration); |
||||
cinematic.addCinematicEvent(triggerTime, cinematicEvent);</pre><ol><li |
||||
class="level1"><div |
||||
class="li"> Create one Cinematic per scene.</div><ul><li |
||||
class="level2"><div |
||||
class="li"> sceneNode is the node containing the scene</div></li><li |
||||
class="level2"><div |
||||
class="li"> duration is the duration of the cinematic scene in seconds</div></li></ul></li><li |
||||
class="level1"><div |
||||
class="li"> Create CinematicEvents to script your "movie". Each Cinematic is a set of CinematicEvents, that are triggered at a given time.</div><ul><li |
||||
class="level2"><div |
||||
class="li"> cinematicEvent is the cinematic event. More details below.</div></li><li |
||||
class="level2"><div |
||||
class="li"> triggerTime is the time when this particular cinematic event starts. Specify the start time in seconds since the beginning of the scene.</div></li></ul></li><li |
||||
class="level1"><div |
||||
class="li"> Play and pause the Cinematic using <code>cinematic.pause()</code> and <code>cinematic.play();</code></div></li></ol></div><h2><a |
||||
name="cinematicevents">CinematicEvents</a></h2><div |
||||
class="level2"><p> There are several kinds of cinematic events:</p><div |
||||
class="table sectionedit1"><table |
||||
class="inline"><tr |
||||
class="row0"><th |
||||
class="col0">CinematicEvent</th><th |
||||
class="col1">Description</th></tr><tr |
||||
class="row1"><td |
||||
class="col0">MotionTrack</td><td |
||||
class="col1">Use this to move a Spatial non-linearly over time. A motionPath is a list of several waypoints added to a MotionPath. The path is interpolated using Catmull-Rom Splines between waypoints.</td></tr><tr |
||||
class="row2"><td |
||||
class="col0">PositionTrack</td><td |
||||
class="col1">Use this to move a Spatial linearly over time. It translates the Spatial to a destination in the given amount of time by linearly interpolating the positions.</td></tr><tr |
||||
class="row3"><td |
||||
class="col0">RotationTrack</td><td |
||||
class="col1">Use this to change the rotation of a Spatial over time. It rotates the Spatial in the given amount of time by linearly interpolating the rotation.</td></tr><tr |
||||
class="row4"><td |
||||
class="col0">ScaleTrack</td><td |
||||
class="col1">Use this to change the size of a Spatial over time. It scales the Spatial in the given amount of time by linearly interpolating the scale.</td></tr><tr |
||||
class="row5"><td |
||||
class="col0">SoundTrack</td><td |
||||
class="col1">Use this to play a sound at a given time for the given duration.</td></tr><tr |
||||
class="row6"><td |
||||
class="col0">GuiTrack</td><td |
||||
class="col1">Displays a <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui.html">Nifty GUI</a> at a given time for the given duration. Use it to display subtitles or HUD elements. Bind the Nifty <acronym |
||||
title="Graphical User Interface">GUI</acronym> <acronym |
||||
title="Extensible Markup Language">XML</acronym> to the cinematic using <code>cinematic.bindUi("path/to/nifty/file.xml");</code></td></tr><tr |
||||
class="row7"><td |
||||
class="col0">AnimationTrack</td><td |
||||
class="col1">Use this to start playing a model animation at a given time (a character walking animation for example)</td></tr></table></div><p> We will add more types of track implementions over time.</p><p> Each CinematicEvent supports the following methods to control the event.</p><div |
||||
class="table sectionedit2"><table |
||||
class="inline"><tr |
||||
class="row0"><th |
||||
class="col0">CinematicEvent method</th><th |
||||
class="col1">Usage</th></tr><tr |
||||
class="row1"><td |
||||
class="col0">play()</td><td |
||||
class="col1">Starts playing the cinematic.</td></tr><tr |
||||
class="row2"><td |
||||
class="col0">stop()</td><td |
||||
class="col1">Stops playing the cinematic.</td></tr><tr |
||||
class="row3"><td |
||||
class="col0">pause()</td><td |
||||
class="col1">Pauses the cinematic.</td></tr></table></div><p> Those methods, must be called on the Cinematic and are propagated to the events. Don't use them directly on a sub cinematic event</p></div><h3><a |
||||
name="motiontrack_motionpath">MotionTrack & MotionPath</a></h3><div |
||||
class="level3"><p> A motion track is made up of MotionPaths.</p><pre>MotionPath path = new MotionPath();</pre><div |
||||
class="table sectionedit3"><table |
||||
class="inline"><tr |
||||
class="row0"><th |
||||
class="col0"> MotionPath Method</th><th |
||||
class="col1"> Usage</th></tr><tr |
||||
class="row1"><td |
||||
class="col0">setCycle(true)</td><td |
||||
class="col1">Sets whether the motion along this path should be closed (true) or not (false).</td></tr><tr |
||||
class="row2"><td |
||||
class="col0">addWayPoint(vector)</td><td |
||||
class="col1">Adds individual waypoints to this path. The order is relevant.</td></tr><tr |
||||
class="row3"><td |
||||
class="col0">removeWayPoint(vector) <br/> removeWayPoint(index)</td><td |
||||
class="col1">Removes individual waypoints from this path. You can specify a vector or the integer index.</td></tr><tr |
||||
class="row4"><td |
||||
class="col0">setCurveTension(0.83f)</td><td |
||||
class="col1">Sets the tension of the curve (only for Catmull Rom Spline). A value of 0.0f will give a straight linear line, 1.0 a round curve.</td></tr><tr |
||||
class="row5"><td |
||||
class="col0">enableDebugShape(assetManager,rootNode)</td><td |
||||
class="col1">Shows a line to visualize the path. Used for debugging.</td></tr><tr |
||||
class="row6"><td |
||||
class="col0">disableDebugShape()</td><td |
||||
class="col1">Hides the line that visualizes the path. Used for debugging.</td></tr><tr |
||||
class="row7"><td |
||||
class="col0">getNbWayPoints()</td><td |
||||
class="col1">Returns the number of waypoints in this path.</td></tr></table></div><pre>MotionTrack thingMotionControl = new MotionTrack(thingNode, path);</pre><div |
||||
class="table sectionedit4"><table |
||||
class="inline"><tr |
||||
class="row0"><th |
||||
class="col0">MotionTrack method</th><th |
||||
class="col1">Usage</th></tr><tr |
||||
class="row1"><td |
||||
class="col0">setLoopMode(LoopMode.Loop)</td><td |
||||
class="col1">Sets whether the animation along this path should loop (true) or play only once (false).</td></tr><tr |
||||
class="row2"><td |
||||
class="col0">setDirectionType(MotionTrack.Direction.None)</td><td |
||||
class="col1">Sets the direction behavior type of the controled node. Direction.None deactivates this feature. See the following options:</td></tr><tr |
||||
class="row3"><td |
||||
class="col0">setDirectionType(MotionTrack.Direction.LookAt)</td><td |
||||
class="col1">Rotate to keep facing a point. Specify the point with setLookAt().</td></tr><tr |
||||
class="row4"><td |
||||
class="col0">setDirectionType(MotionTrack.Direction.Path)</td><td |
||||
class="col1">Face the direction of the path.</td></tr><tr |
||||
class="row5"><td |
||||
class="col0">setDirectionType(MotionTrack.Direction.PathAndRotation)</td><td |
||||
class="col1">Face the direction of the path, plus an added rotation. Use together with the setRotation() method.</td></tr><tr |
||||
class="row6"><td |
||||
class="col0">setDirectionType(MotionTrack.Direction.Rotation)</td><td |
||||
class="col1">Rotate while moving. Use together with the setRotation() method.</td></tr><tr |
||||
class="row7"><td |
||||
class="col0">setLookAt(teapot.getWorldTranslation(), Vector3f.UNIT_Y)</td><td |
||||
class="col1">Optional: Make the moving face towards a certain location. Use together with setDirectionType().</td></tr><tr |
||||
class="row8"><td |
||||
class="col0">setRotation(quaternion)</td><td |
||||
class="col1">Optional: Sets the rotation. Use together with MotionTrack.Direction.Rotation or MotionTrack.Direction.PathAndRotation.</td></tr></table></div></div><h3><a |
||||
name="motionpathlistener">MotionPathListener</a></h3><div |
||||
class="level3"><p> You can register a MotionPathListener to the MotionPath to track whether waypoints have been reached, and then trigger a custom action. In this example we just print the status. The onWayPointReach() method of the interface gives you access to the MotionTrack object <code>control</code>, and an integer value representing the current wayPointIndex.</p><pre>path.addListener( new MotionPathListener() { |
||||
public void onWayPointReach(MotionTrack control, int wayPointIndex) { |
||||
if (path.getNbWayPoints() == wayPointIndex + 1) { |
||||
println(control.getSpatial().getName() + "Finished!!! "); |
||||
} else { |
||||
println(control.getSpatial().getName() + " Reached way point " + wayPointIndex); |
||||
|
||||
<h1><a>JME3 Cinematics</a></h1> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
JME3 cinematics (com.jme.cinematic) allow you to remote control nodes and cameras in a 3D game: You can script and and play cinematic scenes. Combined with screen recording software, you use cinematics to create <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://en.wikipedia.org/wiki/Cutscene"><param name="text" value="<html><u>cutscenes</u></html>"><param name="textColor" value="blue"></object> and movies/trailers of your game. Internally, Cinematics are implemented as <a href="/com/jme3/gde/core/docs/jme3/advanced/application_states.html">AppStates</a>. |
||||
</p> |
||||
|
||||
<p> |
||||
Short overview of the cinematic process: |
||||
</p> |
||||
<ol> |
||||
<li><div> Plan the script of your movie. <br/> |
||||
Write down a timeline (e.g. on paper) of which character should be at which spot at which time.</div> |
||||
</li> |
||||
<li><div> Attach the scene objects that you want to remote-control to one Node. <br/> |
||||
This Node can be the rootNode, or a Node that is attached to the rootNode. </div> |
||||
</li> |
||||
<li><div> Create a Cinematic object for this movie scene. The Cinematic will contain and manage the movie script.</div> |
||||
</li> |
||||
<li><div> For each line in your script (for each frame in your timeline), add a CinematicEvent to the Cinematic. </div> |
||||
</li> |
||||
</ol> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Sample Code</a></h2> |
||||
<div> |
||||
<ul> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/animation/TestCinematic.java"><param name="text" value="<html><u>TestCinematic.java</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>How to Use a Cinematic</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
A Cinematic is like a movie script for a node. |
||||
</p> |
||||
<pre>Cinematic cinematic = new Cinematic(sceneNode, duration); |
||||
cinematic.addCinematicEvent(starttime1, track1); |
||||
cinematic.addCinematicEvent(starttime2, track2); |
||||
cinematic.addCinematicEvent(starttime2, track3); |
||||
... |
||||
stateManager.attach(cinematic);</pre> |
||||
<ol> |
||||
<li><div> Create one Cinematic per scripted scene.</div> |
||||
<ul> |
||||
<li><div> <code>sceneNode</code> is the node containing the scene (can be the rootNode).</div> |
||||
</li> |
||||
<li><div> <code>duration</code> is the duration of the whole scene in seconds.</div> |
||||
</li> |
||||
<li><div> Each Cinematic is a set of CinematicEvents, that are triggered at a given moment on the timeline.</div> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
<li><div> Create one CinematicEvent for each line of your movie script. </div> |
||||
<ul> |
||||
<li><div> <code>track</code> is one motion of a moving object. You can add several tracks. More details below.</div> |
||||
</li> |
||||
<li><div> <code>starttime</code> is the time when this particular cinematic event starts on the timeline. Specify the start time in seconds since the beginning of the cinematic.</div> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
<li><div> Attach the Cinematic to the SimpleApplication's stateManager. </div> |
||||
</li> |
||||
<li><div> Play, stop and pause the Cinematic from your code.</div> |
||||
</li> |
||||
</ol> |
||||
<div><table> |
||||
<tr> |
||||
<th>Method</th><th>Usage</th> |
||||
</tr> |
||||
<tr> |
||||
<td>cinematic.play()</td><td>Starts playing the cinematic from the start, or from where it was paused.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>cinematic.stop()</td><td>Stops playing the cinematic and rewinds it.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>cinematic.pause()</td><td>Pauses the cinematic.</td> |
||||
</tr> |
||||
</table></div> |
||||
<!-- EDIT1 TABLE [2215-2427] --> |
||||
</div> |
||||
|
||||
<h2><a>Tracks (CinematicEvents)</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
Just like a movie script consists of lines with instructions to the actors, each Cinematic consists of a series of tracks. |
||||
</p> |
||||
|
||||
<p> |
||||
Here is the list of available CinematicEvents that you use as tracks. Each track remote-controls scene objects in a different way: |
||||
|
||||
</p> |
||||
<div><table> |
||||
<tr> |
||||
<th>Tracks (CinematicEvents)</th><th>Description</th> |
||||
</tr> |
||||
<tr> |
||||
<td>MotionTrack</td><td>Use a MotionTrack to move a Spatial non-linearly over time. A MotionTrack is based on a list of waypoints in a MotionPath. The curve goes through each waypoint, and you can adjust the tension of the curve to modify the roundedness of the path. This is the motion interpolation you are going to use in most cases. </td> |
||||
</tr> |
||||
<tr> |
||||
<td>PositionTrack</td><td>Use a PositionTrack to move a Spatial linearly over time. This linear interpolation results in straight motion segments between the way points. Use this to make the remote-controlled objects zig-zag from one way point to the other in a straight line.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>RotationTrack</td><td>Use a RotationTrack to change the rotation of a Spatial over time. It spins the Spatial to the given angle in the given amount of time by linearly interpolating the rotation.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>ScaleTrack</td><td>Use a ScaleTrack to change the size of a Spatial over time. It resizes the Spatial in the given amount of time by linearly interpolating the scale.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>SoundTrack</td><td>Use a SoundTrack to play a <a href="/com/jme3/gde/core/docs/jme3/advanced/audio.html">sound</a> at a given time for the given duration.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>GuiTrack</td><td>Displays a <a href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui.html">Nifty GUI</a> at a given time for the given duration. Use it to display subtitles or HUD elements. Bind the Nifty <acronym title="Graphical User Interface">GUI</acronym> <acronym title="Extensible Markup Language">XML</acronym> to the cinematic using <code>cinematic.bindUi("path/to/nifty/file.xml");</code></td> |
||||
</tr> |
||||
<tr> |
||||
<td>AnimationTrack</td><td>Use this to start playing a model <a href="/com/jme3/gde/core/docs/jme3/advanced/animation.html">animation</a> at a given time (a character walking animation for example)</td> |
||||
</tr> |
||||
</table></div> |
||||
<!-- EDIT2 TABLE [2723-4144] --> |
||||
<p> |
||||
|
||||
The jMonkey team can add more types of tracks, just ask in the forum. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>MotionTrack</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
A MotionTrack moves a Spatial along a complex path. |
||||
|
||||
</p> |
||||
<pre>MotionTrack track = new MotionTrack(thingNode, path);</pre> |
||||
|
||||
<p> |
||||
Details of the constructor: |
||||
</p> |
||||
<ul> |
||||
<li><div> <code>thingNode</code> is the Spatial to be moved.</div> |
||||
</li> |
||||
<li><div> <code>path</code> is a complex <a href="/com/jme3/gde/core/docs/jme3/advanced/motionpath.html">MotionPath</a>.</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
<p> |
||||
|
||||
To create a MotionTrack, do the following: |
||||
</p> |
||||
<ol> |
||||
<li><div> <a href="/com/jme3/gde/core/docs/jme3/advanced/motionpath.html">Create a MotionPath</a></div> |
||||
</li> |
||||
<li><div> Create a MotionTrack based on the MotionPath.</div> |
||||
</li> |
||||
<li><div> Configure your MotionTrack (see below).</div> |
||||
</li> |
||||
<li><div> Add the MotionTrack to a Cinematic.</div> |
||||
</li> |
||||
</ol> |
||||
<div><table> |
||||
<tr> |
||||
<th>MotionTrack configuration method</th><th>Usage</th> |
||||
</tr> |
||||
<tr> |
||||
<td>track.setLoopMode(LoopMode.Loop)</td><td>Sets whether the animation along this path should loop (LoopMode.Loop) or play only once (LoopMode.DontLoop).</td> |
||||
</tr> |
||||
<tr> |
||||
<td>track.setDirectionType(MotionTrack.Direction.None)</td><td>Sets the direction behavior type of the controled node. Direction.None deactivates this feature. You can choose from the following options: LookAt, Path, PathAndRotation, Rotation.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>track.setDirectionType(MotionTrack.Direction.LookAt)</td><td>The spatial turns (rotates) to keep facing a certain point while moving. Specify the point with the <code>setLookAt()</code> method.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>track.setDirectionType(MotionTrack.Direction.Path)</td><td>The spatial always faces in the direction of the path while moving.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>track.setDirectionType(MotionTrack.Direction.PathAndRotation)</td><td>The spatial faces the direction of the path, plus an added rotation. Use together with the <code>setRotation()</code> method.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>track.setDirectionType(MotionTrack.Direction.Rotation)</td><td>The spatial spins (rotates) while moving. You describe the spin by a custom quaternion. Use together with the <code>setRotation()</code> method.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>track.setLookAt(teapot.getWorldTranslation(), Vector3f.UNIT_Y)</td><td>The spatial always faces towards this location. Use together with <code>MotionTrack.Direction.LookAt</code>.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>track.setRotation(quaternion)</td><td>Sets the rotation. Use together with <code>MotionTrack.Direction.Rotation</code> or <code>MotionTrack.Direction.PathAndRotation</code>.</td> |
||||
</tr> |
||||
</table></div> |
||||
<!-- EDIT3 TABLE [4701-6109] --> |
||||
<p> |
||||
|
||||
<strong>Tip:</strong> Most likely you remote-control more than one object in your scene. Give the tracks and paths useful names such as <code>dragon_track</code>, <code>dragon_path</code>, <code>hero_track</code>, <code>hero_path</code>, etc. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>PositionTrack</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
A PositionTrack moves a Spatial in a straight line from its current position to the end position. |
||||
|
||||
</p> |
||||
<pre>PositionTrack track = new PositionTrack( |
||||
thingNode, endPosition, duration, loopMode);</pre> |
||||
|
||||
<p> |
||||
Details of the constructor: |
||||
</p> |
||||
<ul> |
||||
<li><div> <code>thingNode</code> is the Spatial to be moved.</div> |
||||
</li> |
||||
<li><div> <code>endPosition</code> is the target location as Vector3f. </div> |
||||
</li> |
||||
<li><div> <code>duration</code> is the time that it should take from start to end point.</div> |
||||
</li> |
||||
<li><div> <code>loopMode</code> can be LoopMode.Loop, LoopMode.DontLoop, LoopMode.Cycle.</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
<p> |
||||
|
||||
The start location is always the current location of the Spatial. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>RotationTrack</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
A RotationTrack remote-controls the rotation of a spatial. |
||||
|
||||
</p> |
||||
<pre>RotationTrack thingRotationControl = new RotationTrack( |
||||
thingNode, endRotation, duration, loopMode);</pre> |
||||
|
||||
<p> |
||||
Details of the constructor: |
||||
</p> |
||||
<ul> |
||||
<li><div> <code>thingNode</code> is the Spatial to be rotated.</div> |
||||
</li> |
||||
<li><div> <code>endRotation</code> is the target rotation in Quaternion format. </div> |
||||
</li> |
||||
<li><div> <code>duration</code> is the time that it should take from start to target rotation.</div> |
||||
</li> |
||||
<li><div> <code>loopMode</code> can be LoopMode.Loop, LoopMode.DontLoop, LoopMode.Cycle.</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>ScaleTrack</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
A ScaleTrack remote-controls whether a spatial grows or shrinks. |
||||
</p> |
||||
<pre>ScaleTrack thingScaleControl = new ScaleTrack( |
||||
thingNode, endScale, duration, loopMode);</pre> |
||||
|
||||
<p> |
||||
Details of the constructor: |
||||
</p> |
||||
<ul> |
||||
<li><div> <code>thingNode</code> is the Spatial to be resized.</div> |
||||
</li> |
||||
<li><div> <code>endScale</code> is the target Scale in Vector3f format. </div> |
||||
</li> |
||||
<li><div> <code>duration</code> is the time that it should take from start to target scale.</div> |
||||
</li> |
||||
<li><div> <code>loopMode</code> can be LoopMode.Loop, LoopMode.DontLoop, LoopMode.Cycle.</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>SoundTrack</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
A SoundTrack plays a sound as part of the cinematic. |
||||
|
||||
</p> |
||||
<pre>SoundTrack( audioPath, isStream, duration, loopMode )</pre> |
||||
|
||||
<p> |
||||
|
||||
Details of the constructor: |
||||
</p> |
||||
<ul> |
||||
<li><div> <code>audioPath</code> is the path to an audio file as String, e.g. "Sounds/mySound.wav".</div> |
||||
</li> |
||||
<li><div> <code>isStream</code> toggles between streaming and buffering. Set to true to stream long audio file, set to false to play short buffered sounds.</div> |
||||
</li> |
||||
<li><div> <code>duration</code> is the time that it should take to play.</div> |
||||
</li> |
||||
<li><div> <code>loopMode</code> can be LoopMode.Loop, LoopMode.DontLoop, LoopMode.Cycle.</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>GuiTrack</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
A GuiTrack shows or hide a NiftyGUI as part of a cinematic. |
||||
|
||||
</p> |
||||
<pre>GuiTrack( screen, duration, loopMode )</pre> |
||||
|
||||
<p> |
||||
|
||||
You must use this together with bindUI() to specify the Nifty <acronym title="Graphical User Interface">GUI</acronym> <acronym title="Extensible Markup Language">XML</acronym> file that you want to load: |
||||
|
||||
</p> |
||||
<pre>cinematic.bindUi("Interface/subtitle.xml");</pre> |
||||
|
||||
<p> |
||||
Details of the constructor: |
||||
</p> |
||||
<ul> |
||||
<li><div> <code>screen</code> is the name of the Nifty <acronym title="Graphical User Interface">GUI</acronym> screen to load, as String. </div> |
||||
</li> |
||||
<li><div> <code>duration</code> is the time that it should take to play.</div> |
||||
</li> |
||||
<li><div> <code>loopMode</code> can be LoopMode.Loop, LoopMode.DontLoop, LoopMode.Cycle.</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>AnimationTrack</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
An AnimationTrack triggers an animation as part of a cinematic. |
||||
|
||||
</p> |
||||
<pre>AnimationTrack( thingNode, animationName, duration, loopMode )</pre> |
||||
|
||||
<p> |
||||
|
||||
Details of the constructor: |
||||
</p> |
||||
<ul> |
||||
<li><div> <code>thingNode</code> is the Spatial whose animation you want to play.</div> |
||||
</li> |
||||
<li><div> <code>animationName</code> the name of the animation stored in the animated model that you want to trigger, as a String.</div> |
||||
</li> |
||||
<li><div> <code>duration</code> is the time that it should take to play.</div> |
||||
</li> |
||||
<li><div> <code>loopMode</code> can be LoopMode.Loop, LoopMode.DontLoop, LoopMode.Cycle.</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Customizations</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
You can extend individual CinematicEvents. The <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/animation/SubtitleTrack.java"><param name="text" value="<html><u>SubtitleTrack.java example</u></html>"><param name="textColor" value="blue"></object> shows how to extend a GuiTrack to script subtitles. See how the subtitles are used in the <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/animation/TestCinematic.java"><param name="text" value="<html><u>TestCinematic.java example</u></html>"><param name="textColor" value="blue"></object>. |
||||
</p> |
||||
|
||||
<p> |
||||
You can also create new CinematicEvent by extending <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/core/com/jme3/cinematic/events/AbstractCinematicEvent.java"><param name="text" value="<html><u>AbstractCinematicEvent</u></html>"><param name="textColor" value="blue"></object>. An AbstractCinematicEvent implements the CinematicEvent interface and provides duration, time, speed, etc… management. Look at the <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/animation/TestCinematic.java"><param name="text" value="<html><u>TestCinematic.java example</u></html>"><param name="textColor" value="blue"></object> is to use this for a custom fadeIn/fadeOut effect in combination with a com.jme3.post.filters.FadeFilter. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Interacting with Cinematics</a></h2> |
||||
<div> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>CinematicEventListener</a></h3> |
||||
<div> |
||||
<pre>CinematicEventListener cel = new CinematicEventListener() { |
||||
public void onPlay(CinematicEvent cinematic) { |
||||
chaseCam.setEnabled(false); |
||||
System.out.println("play"); |
||||
} |
||||
} |
||||
});</pre></div><h3><a |
||||
name="positiontrack">PositionTrack</a></h3><div |
||||
class="level3"><pre>PositionTrack thingPositionControl = new PositionTrack( |
||||
thingNode, endPosition, duration, loopMode);</pre><p> Details of the constructor:</p><ul><li |
||||
class="level1"><div |
||||
class="li"> thingNode is the Spatial to be moved.</div></li><li |
||||
class="level1"><div |
||||
class="li"> endPosition is the target location as Vector3f.</div></li><li |
||||
class="level1"><div |
||||
class="li"> duration is the time that it should take from start to end point.</div></li><li |
||||
class="level1"><div |
||||
class="li"> loopMode can be LoopMode.Loop, LoopMode.DontLoop, LoopMode.Cycle.</div></li></ul><p> The start location is always the current location of the Spatial.</p></div><h3><a |
||||
name="rotationtrack">RotationTrack</a></h3><div |
||||
class="level3"><pre>RotationTrack thingRotationControl = new RotationTrack( |
||||
thingNode, endRotation, duration, loopMode);</pre><p> Details of the constructor:</p><ul><li |
||||
class="level1"><div |
||||
class="li"> thingNode is the Spatial to be rotated.</div></li><li |
||||
class="level1"><div |
||||
class="li"> endRotation is the target rotation in Quaternion format.</div></li><li |
||||
class="level1"><div |
||||
class="li"> duration is the time that it should take from start to target rotation.</div></li><li |
||||
class="level1"><div |
||||
class="li"> loopMode can be LoopMode.Loop, LoopMode.DontLoop, LoopMode.Cycle.</div></li></ul></div><h3><a |
||||
name="scaletrack">ScaleTrack</a></h3><div |
||||
class="level3"><pre>ScaleTrack thingScaleControl = new ScaleTrack( |
||||
thingNode, endScale, duration, loopMode);</pre><p> Details of the constructor:</p><ul><li |
||||
class="level1"><div |
||||
class="li"> thingNode is the Spatial to be resized.</div></li><li |
||||
class="level1"><div |
||||
class="li"> endScale is the target Scale in Vector3f format.</div></li><li |
||||
class="level1"><div |
||||
class="li"> duration is the time that it should take from start to target scale.</div></li><li |
||||
class="level1"><div |
||||
class="li"> loopMode can be LoopMode.Loop, LoopMode.DontLoop, LoopMode.Cycle.</div></li></ul></div><h3><a |
||||
name="soundtrack">SoundTrack</a></h3><div |
||||
class="level3"><pre>SoundTrack( audioPath, isStream, duration, loopMode )</pre><p> Details of the constructor:</p><ul><li |
||||
class="level1"><div |
||||
class="li"> audioPath is the path to an audio file as String, e.g. "Sounds/mySound.wav".</div></li><li |
||||
class="level1"><div |
||||
class="li"> isStream Set this to true to play a longer audio file as stream, or to false to play a short sound without streaming.</div></li><li |
||||
class="level1"><div |
||||
class="li"> duration is the time that it should take to play.</div></li><li |
||||
class="level1"><div |
||||
class="li"> loopMode can be LoopMode.Loop, LoopMode.DontLoop, LoopMode.Cycle.</div></li></ul></div><h3><a |
||||
name="guitrack">GuiTrack</a></h3><div |
||||
class="level3"><pre>GuiTrack( screen, duration, loopMode )</pre><p> You must use this together with bindUI() to specify the Nifty <acronym |
||||
title="Graphical User Interface">GUI</acronym> <acronym |
||||
title="Extensible Markup Language">XML</acronym> file that you want to load:</p><pre>cinematic.bindUi("Interface/subtitle.xml");</pre><p> Details of the constructor:</p><ul><li |
||||
class="level1"><div |
||||
class="li"> screen is the name of the Nifty <acronym |
||||
title="Graphical User Interface">GUI</acronym> screen to load, as String.</div></li><li |
||||
class="level1"><div |
||||
class="li"> duration is the time that it should take to play.</div></li><li |
||||
class="level1"><div |
||||
class="li"> loopMode can be LoopMode.Loop, LoopMode.DontLoop, LoopMode.Cycle.</div></li></ul></div><h3><a |
||||
name="animationtrack">AnimationTrack</a></h3><div |
||||
class="level3"><pre>AnimationTrack( thingNode, animationName, duration, loopMode )</pre><p> Details of the constructor:</p><ul><li |
||||
class="level1"><div |
||||
class="li"> thingNode is the Spatial whose animation you want to play.</div></li><li |
||||
class="level1"><div |
||||
class="li"> AnimationName the animation of the animated model that you want to trigger, as a String.</div></li><li |
||||
class="level1"><div |
||||
class="li"> duration is the time that it should take to play.</div></li><li |
||||
class="level1"><div |
||||
class="li"> loopMode can be LoopMode.Loop, LoopMode.DontLoop, LoopMode.Cycle.</div></li></ul></div><h3><a |
||||
name="customizations">Customizations</a></h3><div |
||||
class="level3"><p> You can extend individual CinematicEvents. The <a |
||||
href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/animation/SubtitleTrack.java">SubtitleTrack.java example</a> shows how to extend a GuiTrack to script subtitles. See how the subtitles are used in the <a |
||||
href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/animation/TestCinematic.java">TestCinematic.java example</a>.</p><p> You can also create new CinematicEvent by extending <a |
||||
href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/core/com/jme3/cinematic/events/AbstractCinematicEvent.java">AbstractCinematicEvent</a>. An AbstractCinematicEvent implements the CinematicEvent interface and provides duration, time, speed, etc… management. Look at the <a |
||||
href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/animation/TestCinematic.java">TestCinematic.java example</a> is to use this for a custom fadeIn/fadeOut effect in combination with a com.jme3.post.filters.FadeFilter.</p></div><h2><a |
||||
name="camera_handling">Camera Handling</a></h2><div |
||||
class="level2"><p> The camera management is handled as follows:</p><ol><li |
||||
class="level1"><div |
||||
class="li"> Create a camera Node and bind the camera object to the cinematic. Note that we also give the camera node a name in this step.<pre>CameraNode camNode = cinematic.bindCamera("topView", cam);</pre></div></li><li |
||||
class="level1"><div |
||||
class="li"> Position the camera node in its start location.</div></li><li |
||||
class="level1"><div |
||||
class="li"> Use activateCamera() to give the control of the camera to this node. You now see the scene from this camera's point of view. For example to see through the camera node named "top view", 6 seconds after the start of the cinematic, you'd write<pre>cinematic.activateCamera(6, "topView");</pre></div></li><li |
||||
class="level1"><div |
||||
class="li"> If desired, attach the camNode to a MotionTrack to let it travel along waypoints. This is demonstrated in the <a |
||||
href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/animation/TestCinematic.java">TestCameraMotionPath.java example</a>.</div></li></ol><p> Code samples:</p><pre>flyCam.setEnabled(false); |
||||
|
||||
CameraNode camNodeTop = cinematic.bindCamera("topView", cam); |
||||
camNodeTop.setControlDir(ControlDirection.SpatialToCamera); |
||||
camNodeTop.getControl(0).setEnabled(false); |
||||
public void onPause(CinematicEvent cinematic) { |
||||
chaseCam.setEnabled(true); |
||||
System.out.println("pause"); |
||||
} |
||||
|
||||
CameraNode camNodeSide = cinematic.bindCamera("sideView", cam); |
||||
camNodeSide.setControlDir(ControlDirection.CameraToSpatial); |
||||
camNodeSide.getControl(0).setEnabled(false);</pre></div><h2><a |
||||
name="physics_interaction">Physics Interaction</a></h2><div |
||||
class="level2"><p> Upcoming.</p></div><h2><a |
||||
name="more_information">More Information</a></h2><div |
||||
class="level2"><p> See also: <a |
||||
href="http://jmonkeyengine.org/groups/development-discussion-jme3/forum/topic/cinematics-system-for-jme3/">Cinematics by Nehon</a></p></div> |
||||
<p><em><a href="http://jmonkeyengine.org/wiki/doku.php/jme3:advanced:cinematics?do=export_xhtmlbody">view online version</a></em></p> |
||||
public void onStop(CinematicEvent cinematic) { |
||||
chaseCam.setEnabled(true); |
||||
System.out.println("stop"); |
||||
} |
||||
} |
||||
cinematic.addListener(cel);</pre> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Physics Interaction</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
Upcoming. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>More Information</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
See also: <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://jmonkeyengine.org/groups/development-discussion-jme3/forum/topic/cinematics-system-for-jme3/"><param name="text" value="<html><u>Cinematics by Nehon</u></html>"><param name="textColor" value="blue"></object> |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
<p><em><a href="http://direct.jmonkeyengine.org/wiki/doku.php/jme3:advanced:cinematics?do=export_xhtmlbody">view online version</a></em></p> |
||||
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 29 KiB |
@ -1,92 +1,198 @@ |
||||
<h1><a |
||||
name="jme3_effects_--_overview">jME3 Effects -- Overview</a></h1><div |
||||
class="level1"><p> <br/></p><p> jME3 supports various post-rendering and particle effects. This list contains screenshots and sample code that demonstrates how to add the effect to a scene.</p><p> <br/></p></div><h2><a |
||||
name="d_filter_effects">2D Filter Effects</a></h2><div |
||||
class="level2"></div><h3><a |
||||
name="screen_space_ambient_occlusion">Screen Space Ambient Occlusion</a></h3><div |
||||
class="level3"><p> <a |
||||
href="/wiki/lib/exe/fetch.php?hash=500208&media=http%3A%2F%2Fjmonkeyengine.org%2Fwp-content%2Fuploads%2F2010%2F08%2Fssao-article.png"><img |
||||
src="/wiki/lib/exe/fetch.php?hash=500208&w=150&h=100&media=http%3A%2F%2Fjmonkeyengine.org%2Fwp-content%2Fuploads%2F2010%2F08%2Fssao-article.png" class="mediaright" align="right" alt="" width="150" height="100" /></a></p><p> <a |
||||
href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/post/TestSSAO.java">jme3/src/test/jme3test/post/TestSSAO.java</a></p><p> <a |
||||
href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/post/TestSSAO2.java">jme3/src/test/jme3test/post/TestSSAO2.java</a></p><p> <a |
||||
href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/post/TestTransparentSSAO.java">jme3/src/test/jme3test/post/TestTransparentSSAO.java</a></p><p> <a |
||||
href="http://jmonkeyengine.org/2010/08/16/screen-space-ambient-occlusion-for-jmonkeyengine-3-0/#more-321">Screen Space Ambient Occlusion for jMonkeyEngine</a> (article)</p><p> <a |
||||
href="/wiki/lib/exe/detail.php/jme3:advanced:light-scattering-filter.png?id=jme3%3Aadvanced%3Aeffects_overview"><img |
||||
src="nbdocs:/com/jme3/gde/core/docs/jme3/advanced/light-scattering-filter.png?w=150&h=100" class="mediaright" align="right" alt="" width="150" height="100" /></a></p></div><h3><a |
||||
name="light_scattering">Light Scattering</a></h3><div |
||||
class="level3"><p> <a |
||||
href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/post/TestLightScattering.java">jme3/src/test/jme3test/post/TestLightScattering.java</a></p></div><h3><a |
||||
name="bloom">Bloom</a></h3><div |
||||
class="level3"><p> <a |
||||
href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/post/TestBloom.java">jme3/src/test/jme3test/post/TestBloom.java</a></p><p> <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/bloom_and_glow.html">Bloom and Glow</a></p><p> <a |
||||
href="/wiki/lib/exe/detail.php/jme3:advanced:toon-dino.png?id=jme3%3Aadvanced%3Aeffects_overview"><img |
||||
src="nbdocs:/com/jme3/gde/core/docs/jme3/advanced/toon-dino.png?w=150&h=100" class="mediaright" align="right" alt="" width="150" height="100" /></a></p></div><h3><a |
||||
name="toon_effect">Toon Effect</a></h3><div |
||||
class="level3"><p> <a |
||||
href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/post/TestCartoonEdge.java">jme3/src/test/jme3test/post/TestCartoonEdge.java</a></p><p> <a |
||||
href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/post/TestTransparentCartoonEdge.java">jme3/src/test/jme3test/post/TestTransparentCartoonEdge.java</a></p></div><h3><a |
||||
name="depth_of_field_blur">Depth of Field Blur</a></h3><div |
||||
class="level3"><p> <a |
||||
href="/wiki/lib/exe/detail.php/jme3:advanced:dof-blur.png?id=jme3%3Aadvanced%3Aeffects_overview"><img |
||||
src="nbdocs:/com/jme3/gde/core/docs/jme3/advanced/dof-blur.png?w=150&h=100" class="mediaright" align="right" alt="" width="150" height="100" /></a></p><p> <a |
||||
href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/post/TestDepthOfField.java">jme3/src/test/jme3test/post/TestDepthOfField.java</a></p></div><h3><a |
||||
name="fog">Fog</a></h3><div |
||||
class="level3"><p> <a |
||||
href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/post/TestFog.java">jme3/src/test/jme3test/post/TestFog.java</a> (temporary workaround, will be deprecated)</p><p> <a |
||||
href="/wiki/lib/exe/detail.php/jme3:advanced:light-sources.png?id=jme3%3Aadvanced%3Aeffects_overview"><img |
||||
src="nbdocs:/com/jme3/gde/core/docs/jme3/advanced/light-sources.png?w=150&h=100" class="mediaright" align="right" alt="" width="150" height="100" /></a></p></div><h2><a |
||||
name="lighting_and_shadows">Lighting and Shadows</a></h2><div |
||||
class="level2"><p> <a |
||||
href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/light/TestSimpleLighting.java">jme3/src/test/jme3test/light/TestSimpleLighting.java</a></p><p> <a |
||||
href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/light/TestLightRadius.java">jme3/src/test/jme3test/light/TestLightRadius.java</a></p><p> <a |
||||
href="/wiki/lib/exe/detail.php/jme3:advanced:shadow.png?id=jme3%3Aadvanced%3Aeffects_overview"><img |
||||
src="nbdocs:/com/jme3/gde/core/docs/jme3/advanced/shadow.png?w=150&h=100" class="mediaright" align="right" alt="" width="150" height="100" /></a></p><p> <a |
||||
href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/light/TestManyLights.java">jme3/src/test/jme3test/light/TestManyLights.java</a></p><p> <a |
||||
href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/light/TestShadow.java">jme3/src/test/jme3test/light/TestShadow.java</a></p><p> <a |
||||
href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/light/TestPssmShadow.java">jme3/src/test/jme3test/light/TestPssmShadow.java</a> = Parallel-Split Shadow Mapping (PSSM)</p></div><h2><a |
||||
name="water">Water</a></h2><div |
||||
class="level2"><p> <a |
||||
href="/wiki/lib/exe/detail.php/jme3:advanced:water.png?id=jme3%3Aadvanced%3Aeffects_overview"><img |
||||
src="nbdocs:/com/jme3/gde/core/docs/jme3/advanced/water.png?w=150&h=100" class="mediaright" align="right" alt="" width="150" height="100" /></a></p><p> <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/water.html">"SeaMonkey" water</a></p><ul><li |
||||
class="level1"><div |
||||
class="li"> <a |
||||
href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/water/TestSceneWater.java">jme3/src/test/jme3test/water/TestSceneWater.java</a></div></li></ul><ul><li |
||||
class="level1"><div |
||||
class="li"> <a |
||||
href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/water/TestSimpleWater.java">jme3/src/test/jme3test/water/TestSimpleWater.java</a></div></li></ul><p> <a |
||||
href="http://jmonkeyengine.org/2011/01/15/new-advanced-water-effect-for-jmonkeyengine-3/#comment-609">Rendering Water as Post-Process Effect</a></p><p> <a |
||||
href="/wiki/lib/exe/detail.php/jme3:advanced:water-post.png?id=jme3%3Aadvanced%3Aeffects_overview"><img |
||||
src="nbdocs:/com/jme3/gde/core/docs/jme3/advanced/water-post.png?w=150&h=100" class="mediaright" align="right" alt="" width="150" height="100" /></a></p><ul><li |
||||
class="level1"><div |
||||
class="li"> <a |
||||
href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/water/TestPostWater.java">jme3/src/test/jme3test/water/TestPostWater.java</a></div></li></ul><ul><li |
||||
class="level1"><div |
||||
class="li"> <a |
||||
href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/water/TestPostWaterLake.java">jme3/src/test/jme3test/water/TestPostWaterLake.java</a></div></li></ul><p> <br/></p><p> <br/></p></div><h2><a |
||||
name="special_effects">Special Effects</a></h2><div |
||||
class="level2"><p> <a |
||||
href="/wiki/lib/exe/detail.php/jme3:advanced:explosion-5.png?id=jme3%3Aadvanced%3Aeffects_overview"><img |
||||
src="nbdocs:/com/jme3/gde/core/docs/jme3/advanced/explosion-5.png?w=150&h=100" class="mediaright" align="right" alt="" width="150" height="100" /></a> <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/particle_emitters.html">Particle Emitters</a></p></div><h3><a |
||||
name="particlesexplosions_fire">Particles: Explosions, Fire</a></h3><div |
||||
class="level3"><p> <a |
||||
href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/effect/TestExplosionEffect.java">jme3/src/test/jme3test/effect/TestExplosionEffect.java</a> – debris, flame, flash, shockwave, smoke, sparks</p><p> <a |
||||
href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/effect/TestParticleEmitter.java">jme3/src/test/jme3test/effect/TestParticleEmitter.java</a></p><p> <a |
||||
href="/wiki/lib/exe/detail.php/jme3:advanced:particle.png?id=jme3%3Aadvanced%3Aeffects_overview"><img |
||||
src="nbdocs:/com/jme3/gde/core/docs/jme3/advanced/particle.png?w=150&h=100" class="mediaright" align="right" alt="" width="150" height="100" /></a></p></div><h3><a |
||||
name="particlessmoke">Particles: Smoke</a></h3><div |
||||
class="level3"><p> <a |
||||
href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/effect/TestMovingParticle.java">jme3/src/test/jme3test/effect/TestMovingParticle.java</a></p><p> Particles can have any texture, e.g. fog, leaves, meteors, snowflakes, mosquitos</p><hr |
||||
/><p> See also:</p><ul><li |
||||
class="level1"><div |
||||
class="li"> <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/particle_emitters.html">Particle Emitters</a></div></li><li |
||||
class="level1"><div |
||||
class="li"> <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/bloom_and_glow.html">Bloom and Glow</a></div></li><li |
||||
class="level1"><div |
||||
class="li"> <a |
||||
href="http://www.smashingmagazine.com/2008/08/07/50-photoshop-tutorials-for-sky-and-space-effects/">http://www.smashingmagazine.com/2008/08/07/50-photoshop-tutorials-for-sky-and-space-effects/</a></div></li></ul></div> |
||||
<p><em><a href="http://jmonkeyengine.org/wiki/doku.php/jme3:advanced:effects_overview?do=export_xhtmlbody">view online version</a></em></p> |
||||
|
||||
<h1><a>jME3 Effects -- Overview</a></h1> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
jME3 supports various post-rendering and particle effects. This list contains screenshots and sample code that demonstrates how to add the effect to a scene. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>2D Filter Effects</a></h2> |
||||
<div> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Screen Space Ambient Occlusion</a></h3> |
||||
<div> |
||||
<ul> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/post/TestSSAO.java"><param name="text" value="<html><u>jme3/src/test/jme3test/post/TestSSAO.java</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/post/TestSSAO2.java"><param name="text" value="<html><u>jme3/src/test/jme3test/post/TestSSAO2.java</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/post/TestTransparentSSAO.java"><param name="text" value="<html><u>jme3/src/test/jme3test/post/TestTransparentSSAO.java</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://jmonkeyengine.org/2010/08/16/screen-space-ambient-occlusion-for-jmonkeyengine-3-0/#more-321"><param name="text" value="<html><u>Screen Space Ambient Occlusion for jMonkeyEngine</u></html>"><param name="textColor" value="blue"></object> (article)</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
<p> |
||||
<img src="nbdocs:/com/jme3/gde/core/docs/jme3/advanced/light-scattering-filter.png"> |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Light Scattering</a></h3> |
||||
<div> |
||||
<ul> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/post/TestLightScattering.java"><param name="text" value="<html><u>jme3/src/test/jme3test/post/TestLightScattering.java</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Bloom</a></h3> |
||||
<div> |
||||
<ul> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/post/TestBloom.java"><param name="text" value="<html><u>jme3/src/test/jme3test/post/TestBloom.java</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
<li><div> <a href="/com/jme3/gde/core/docs/jme3/advanced/bloom_and_glow.html">Bloom and Glow</a></div> |
||||
</li> |
||||
</ul> |
||||
|
||||
<p> |
||||
<img src="nbdocs:/com/jme3/gde/core/docs/jme3/advanced/toon-dino.png"> |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Toon Effect</a></h3> |
||||
<div> |
||||
<ul> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/post/TestCartoonEdge.java"><param name="text" value="<html><u>jme3/src/test/jme3test/post/TestCartoonEdge.java</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/post/TestTransparentCartoonEdge.java"><param name="text" value="<html><u>jme3/src/test/jme3test/post/TestTransparentCartoonEdge.java</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Fade in / Fade out</a></h3> |
||||
<div> |
||||
<ul> |
||||
<li><div> <a href="/com/jme3/gde/core/docs/jme3/advanced/fade.html">Fade</a></div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Depth of Field Blur</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
<img src="nbdocs:/com/jme3/gde/core/docs/jme3/advanced/dof-blur.png"> |
||||
</p> |
||||
<ul> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/post/TestDepthOfField.java"><param name="text" value="<html><u>jme3/src/test/jme3test/post/TestDepthOfField.java</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Fog</a></h3> |
||||
<div> |
||||
<ul> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/post/TestFog.java"><param name="text" value="<html><u>jme3/src/test/jme3test/post/TestFog.java</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Lighting and Shadows</a></h2> |
||||
<div> |
||||
<ul> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/light/TestSimpleLighting.java"><param name="text" value="<html><u>jme3/src/test/jme3test/light/TestSimpleLighting.java</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/light/TestLightRadius.java"><param name="text" value="<html><u>jme3/src/test/jme3test/light/TestLightRadius.java</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
</ul> |
||||
|
||||
<p> |
||||
<img src="nbdocs:/com/jme3/gde/core/docs/jme3/advanced/shadow.png"><img src="nbdocs:/com/jme3/gde/core/docs/jme3/advanced/light-sources.png"> |
||||
</p> |
||||
<ul> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/light/TestManyLights.java"><param name="text" value="<html><u>jme3/src/test/jme3test/light/TestManyLights.java</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/light/TestShadow.java"><param name="text" value="<html><u>jme3/src/test/jme3test/light/TestShadow.java</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/light/TestPssmShadow.java"><param name="text" value="<html><u>jme3/src/test/jme3test/light/TestPssmShadow.java</u></html>"><param name="textColor" value="blue"></object> = Parallel-Split Shadow Mapping (PSSM)</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Water</a></h2> |
||||
<div> |
||||
<ul> |
||||
<li><div> <a href="/com/jme3/gde/core/docs/jme3/advanced/water.html">"SeaMonkey" water</a></div> |
||||
</li> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/water/TestSceneWater.java"><param name="text" value="<html><u>jme3/src/test/jme3test/water/TestSceneWater.java</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/water/TestSimpleWater.java"><param name="text" value="<html><u>jme3/src/test/jme3test/water/TestSimpleWater.java</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://jmonkeyengine.org/2011/01/15/new-advanced-water-effect-for-jmonkeyengine-3/#comment-609"><param name="text" value="<html><u>Rendering Water as Post-Process Effect</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
</ul> |
||||
|
||||
<p> |
||||
<img src="nbdocs:/com/jme3/gde/core/docs/jme3/advanced/water-post.png"><img src="nbdocs:/com/jme3/gde/core/docs/jme3/advanced/water.png"> |
||||
</p> |
||||
<ul> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/water/TestPostWater.java"><param name="text" value="<html><u>jme3/src/test/jme3test/water/TestPostWater.java</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/water/TestPostWaterLake.java"><param name="text" value="<html><u>jme3/src/test/jme3test/water/TestPostWaterLake.java</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Special Effects</a></h2> |
||||
<div> |
||||
<ul> |
||||
<li><div> <a href="/com/jme3/gde/core/docs/jme3/advanced/particle_emitters.html">Particle Emitters</a></div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Particles: Explosions, Fire</a></h3> |
||||
<div> |
||||
<ul> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/effect/TestExplosionEffect.java"><param name="text" value="<html><u>jme3/src/test/jme3test/effect/TestExplosionEffect.java</u></html>"><param name="textColor" value="blue"></object> – debris, flame, flash, shockwave, smoke, sparks</div> |
||||
</li> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/effect/TestParticleEmitter.java"><param name="text" value="<html><u>jme3/src/test/jme3test/effect/TestParticleEmitter.java</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
</ul> |
||||
|
||||
<p> |
||||
<img src="nbdocs:/com/jme3/gde/core/docs/jme3/advanced/explosion-5.png"><img src="nbdocs:/com/jme3/gde/core/docs/jme3/advanced/particle.png"> |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Particles: Smoke</a></h3> |
||||
<div> |
||||
<ul> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/effect/TestMovingParticle.java"><param name="text" value="<html><u>jme3/src/test/jme3test/effect/TestMovingParticle.java</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
<li><div> Particles can have any texture, e.g. fog, leaves, meteors, snowflakes, mosquitos</div> |
||||
</li> |
||||
</ul> |
||||
<hr /> |
||||
|
||||
<p> |
||||
See also: |
||||
</p> |
||||
<ul> |
||||
<li><div> <a href="/com/jme3/gde/core/docs/jme3/advanced/particle_emitters.html">Particle Emitters</a></div> |
||||
</li> |
||||
<li><div> <a href="/com/jme3/gde/core/docs/jme3/advanced/bloom_and_glow.html">Bloom and Glow</a></div> |
||||
</li> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://www.smashingmagazine.com/2008/08/07/50-photoshop-tutorials-for-sky-and-space-effects/"><param name="text" value="<html><u>Photoshop Tutorial for Sky and space effects (article)</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
<p><em><a href="http://direct.jmonkeyengine.org/wiki/doku.php/jme3:advanced:effects_overview?do=export_xhtmlbody">view online version</a></em></p> |
||||
@ -0,0 +1,114 @@ |
||||
|
||||
<h1><a>Endless Terrain</a></h1> |
||||
<div> |
||||
|
||||
<p> |
||||
TerrainGrid is an extension built on top of the TerraMonkey tools like TerrainQuad and HeightMap, that provides "infinite" Terrain paging routines. <br/> |
||||
|
||||
Thanks to Gábor (@anthyon) and Brent (@sploreg) for this contribution! |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Sample Code</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
The classes with source code can be found in the org.jme3.terrain.geomipmapping and org.jme3.terrain.heightmap packages. Also there are 3 tests prepared in the jme3test.terrain package: |
||||
</p> |
||||
<ul> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/terrain/TerrainGridTest.java"><param name="text" value="<html><u>TerrainGridTest.java</u></html>"><param name="textColor" value="blue"></object>: uses an ImageBasedHeightMapGrid instance to load the tiles</div> |
||||
</li> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/terrain/TerrainFractalGridTest.java"><param name="text" value="<html><u>TerrainFractalGridTest.java</u></html>"><param name="textColor" value="blue"></object>: makes use of the FractalHeightMapGrid class, and generates a terrain from noise</div> |
||||
</li> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/terrain/TerrainGridAlphaMapTest.java"><param name="text" value="<html><u>TerrainGridAlphaMapTest.java</u></html>"><param name="textColor" value="blue"></object>: shows how to use TerrainGridListener to change the material of the tiles</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Specification</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
TerrainGrid is made up of the TerrainGrid class, and the HeightMapGrid and TerrainGridListener interfaces. |
||||
</p> |
||||
<ul> |
||||
<li><div> TerrainGrid is the central class of the system. It takes care for handling camera movement in LODUpdate, loading and unloading terrain tiles on demand, and notifying any registered listeners of changes.</div> |
||||
</li> |
||||
<li><div> TerrainGridListener defines two events to listen to:</div> |
||||
<ul> |
||||
<li><div> gridMoved(Vector3f): gets the new center as parameter after terrain update, so any objects can be added or removed as needed.</div> |
||||
</li> |
||||
<li><div> Material tileLoaded(Material material, Vector3f cell): notifies the system about a tile being loaded. Parameters are a cloned value of the material added to the TerrainGrid, and the cell of the new tile. The system can change the material according to this information (eg. load required alphamaps, etc).</div> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
</ul> |
||||
|
||||
<p> |
||||
<br/> |
||||
|
||||
Multiple listeners can be added to the TerrainGrid, they will be called in the order of addition, so it’s possible to have multiple changes to the material before completing the load of the tile. |
||||
<br/> |
||||
|
||||
HeightMapGrid adds the possibility of loading terrain tiles on demand instead of having a simple height array. There’s no predefined way of how to store these tiles, it only takes care of loading one HeightMap object at given location at a time. |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Motivation</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
After playing around with the terrain in jME3, soon comes the requirement of having larger explorable lands. Increasing the size of one TerrainQuad leads to more memory usage, while it will still be easy to reach the worlds boundaries. That’s why TerrainGrid was designed. It extends the TerraindQuad class and uses 4 HeightMaps (dark blue) as the four sub-quad. This means that a terrain of size 513 will use tiles of 257. Also an LRUCache is built into the terrain package, so surrounding tiles (green) can be pre-cached on a different thread, lowering the loading time. The quads are updated as the camera approaches the boundary of the light blue section. |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Rationale</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
The design of the TerrainGrid system was chosen carefully, so that minimal effort needs to be taken to switch from previous TerrainQuad uses. It has the same constructors with the small exception that instead of an array of heightmap it takes a HeightMapGrid instance. All other parameters are forwarded down to the underlying TerrainQuad system. |
||||
There exist also two basic HeightMapGrid implementations: |
||||
</p> |
||||
<ul> |
||||
<li><div> ImageBasedHeightMapGrid: uses a sequentially numbered, 16 bit grayscale heightmaps. The physical filename of these files can be generated through the Namer interface. When a tile cannot be found by the assetManager, an empty (all-zero) heightmap is created, and a warning is added to the log.</div> |
||||
</li> |
||||
<li><div> FractalHeightMapGrid: uses a noise library to create a landscape on the fly. The shape of the terrain can be controlled by the various parameters and postfilters of the fractals. With the help of this grid implementation there’s no limitation – above of floating point precision limits – how far the camera can get. The tiles generated this way can be cached to the filesystem, for later modification. The FractalHeightMapGrid will always load from cache if a tile exists there!</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Usage</a></h2> |
||||
<div> |
||||
<ol> |
||||
<li><div> instantiate a TerrainGrid object</div> |
||||
</li> |
||||
<li><div> set material, listeners, translation, scale, etc.</div> |
||||
</li> |
||||
<li><div> add a LODControl instance to the object</div> |
||||
</li> |
||||
<li><div> call initialize with the camera location</div> |
||||
</li> |
||||
<li><div> (optional) add it to the physicsSpace as you would a TerrainQuad</div> |
||||
</li> |
||||
</ol> |
||||
|
||||
<p> |
||||
Further information about terrain and TerrainQuad can be found in the wiki at: |
||||
</p> |
||||
<ul> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://jmonkeyengine.org/wiki/doku.php/jme3:beginner:hello_terrain"><param name="text" value="<html><u>http://jmonkeyengine.org/wiki/doku.php/jme3:beginner:hello_terrain</u></html>"><param name="textColor" value="blue"></object> and</div> |
||||
</li> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://jmonkeyengine.org/wiki/doku.php/jme3:advanced:terrain"><param name="text" value="<html><u>http://jmonkeyengine.org/wiki/doku.php/jme3:advanced:terrain</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
<p><em><a href="http://direct.jmonkeyengine.org/wiki/doku.php/jme3:advanced:endless_terraingrid?do=export_xhtmlbody">view online version</a></em></p> |
||||
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 14 KiB |
@ -0,0 +1,95 @@ |
||||
|
||||
<h1><a>jME3 Headless Server</a></h1> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
When adding multiplayer to your game, you may find that your server needs to know about game state (e.g. where are players, objects? Was that a direct hit? etc.) You can code all this up yourself, but there's an easier way. |
||||
</p> |
||||
|
||||
<p> |
||||
It's very easy to change your current (client) game to function as a server as well. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>What Does Headless Mean?</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
A headless server… |
||||
</p> |
||||
<ul> |
||||
<li><div> does not display any output – no window opens, no audio plays, no graphics are rendered.</div> |
||||
</li> |
||||
<li><div> ignores all input – no input handling.</div> |
||||
</li> |
||||
<li><div> keeps game state – you can attach to, transform, and save the rootNode, although the scene is not displayed.</div> |
||||
</li> |
||||
<li><div> calls the <code>simpleUpdate()</code> loop – you can run tests and trigger events as usual.</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Client Code</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
First, let's take a look at the default way of creating a new game (in its simplest form): |
||||
</p> |
||||
<pre>public static void main(String[] args) { |
||||
Application app = new Main(); |
||||
app.start(); |
||||
}</pre> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Headless Server Code</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
Now, with a simple change you can start your game in Headless mode. This means that all input and audio/visual output will be ignored. That's a good thing for a server. |
||||
</p> |
||||
<pre>import com.jme3.system.JmeContext; |
||||
import com.jme3.system.JmeContext.Type; |
||||
|
||||
public static void main(String[] args) { |
||||
Application app = new Main(); |
||||
app.start(JmeContext.Type.Headless); |
||||
}</pre> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Next steps</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
Okay, so you can now start your game in a headless 'server mode', where to go from here? |
||||
|
||||
</p> |
||||
<ul> |
||||
<li><div> Parse <code>String[] args</code> from the <code>main</code>-method to enable server mode on demand (e.g. start your server like <code>java -jar mygame.jar –server</code>.</div> |
||||
</li> |
||||
<li><div> Integrate <a href="/com/jme3/gde/core/docs/jme3/advanced/networking.html">SpiderMonkey</a>, to provide game updates to the server over a network.</div> |
||||
</li> |
||||
<li><div> Only execute code that's needed. (E.g. place all rendering code inside an <code>if (servermode)</code>-block) (or <code>if (!servermode)</code> for the client).</div> |
||||
</li> |
||||
<li><div> Add decent <a href="/com/jme3/gde/core/docs/jme3/advanced/logging.html">logging</a> so your server actually makes sense.</div> |
||||
</li> |
||||
</ul> |
||||
<div><span> |
||||
<a href="/wiki/doku.php/tag:intermediate?do=showtag&tag=tag%3Aintermediate">intermediate</a>, |
||||
<a href="/wiki/doku.php/tag:server?do=showtag&tag=tag%3Aserver">server</a>, |
||||
<a href="/wiki/doku.php/tag:spidermonkey?do=showtag&tag=tag%3Aspidermonkey">spidermonkey</a>, |
||||
<a href="/wiki/doku.php/tag:headless?do=showtag&tag=tag%3Aheadless">headless</a>, |
||||
<a href="/wiki/doku.php/tag:network?do=showtag&tag=tag%3Anetwork">network</a>, |
||||
<a href="/wiki/doku.php/tag:documentation?do=showtag&tag=tag%3Adocumentation">documentation</a> |
||||
</span></div> |
||||
|
||||
</div> |
||||
<p><em><a href="http://direct.jmonkeyengine.org/wiki/doku.php/jme3:advanced:headless_server?do=export_xhtmlbody">view online version</a></em></p> |
||||
@ -1,87 +1,202 @@ |
||||
<h1><a |
||||
name="head-up_display_hud">Head-Up Display (HUD)</a></h1><div |
||||
class="level1"><p> A HUD (Head-Up Display) is part of a game's visual user interface. It's an overlay that displays additional information as (typically) 2-dimensional text or icons on the screen, on top of the 3D scene.</p><p> HUDs are used to supply players with essential information about the game state.</p><ul><li |
||||
class="level1"><div |
||||
class="li"> Status: Score, minimap, points, stealth mode, …</div></li><li |
||||
class="level1"><div |
||||
class="li"> Resources: Ammunition, lives/health, time, …</div></li><li |
||||
class="level1"><div |
||||
class="li"> Vehicle instruments: Cockpit, speedometer, …</div></li><li |
||||
class="level1"><div |
||||
class="li"> Navigational aides: Crosshairs, cursor, hand, …</div></li></ul><p> <a |
||||
href="/wiki/lib/exe/fetch.php?hash=c9f2a3&media=http%3A%2F%2Fwww.jmonkeyengine.com%2Fwp-content%2Fuploads%2F2010%2F10%2Fgrapplinghook.jpg"><img |
||||
src="/wiki/lib/exe/fetch.php?hash=c9f2a3&w=256&h=192&media=http%3A%2F%2Fwww.jmonkeyengine.com%2Fwp-content%2Fuploads%2F2010%2F10%2Fgrapplinghook.jpg" class="mediaright" align="right" title="www.jmonkeyengine.com_wp-content_uploads_2010_10_grapplinghook.jpg" alt="www.jmonkeyengine.com_wp-content_uploads_2010_10_grapplinghook.jpg" width="256" height="192" /></a></p><p> 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><p> You have two options how to create HUDs.</p><ul><li |
||||
class="level1"><div |
||||
class="li"> To create full-featured user interfaces, you use Nifty <acronym |
||||
title="Graphical User Interface">GUI</acronym>. (Recommended)</div></li><li |
||||
class="level1"><div |
||||
class="li"> If you just quickly want to display a line of text or an icon, you use the guiNode.</div></li></ul></div><h2><a |
||||
name="hud_with_nifty_gui">HUD with Nifty GUI</a></h2><div |
||||
class="level2"><p> The recommended approach to create HUDs is using Nifty <acronym |
||||
title="Graphical User Interface">GUI</acronym>.</p><ol><li |
||||
class="level1"><div |
||||
class="li"> Lay out the <acronym |
||||
title="Graphical User Interface">GUI</acronym> in one or several Nifty <acronym |
||||
title="Extensible Markup Language">XML</acronym> files.</div></li><li |
||||
class="level1"><div |
||||
class="li"> Write the controller classes in Java.</div></li><li |
||||
class="level1"><div |
||||
class="li"> Load the <acronym |
||||
title="Extensible Markup Language">XML</acronym> file with the controller object in your game's simpleInit() method.</div></li></ol><p> The advantage of Nifty <acronym |
||||
title="Graphical User Interface">GUI</acronym> is that it is well integrated into jME and the jMonkeyPlatform, and that it offers all the features that you expect from a professional modern user interface. The only small disadvantage is that you (currently still) have to lay out the interface in <acronym |
||||
title="Extensible Markup Language">XML</acronym>. You can see this as an advantage too, as it enables you to edit the user interface without editing the code afterwards.</p><p> For HUDs, you Basically follow the same instructions as for creating a normal <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui.html">Nifty GUI</a>, you just don't pause the game while the HUD is up.</p></div><h2><a |
||||
name="the_gui_node">The GUI Node</a></h2><div |
||||
class="level2"><p> Using the <acronym |
||||
title="Graphical User Interface">GUI</acronym> Node is the default approach in jme3 to create very simple, static HUDs. If you just quickly want to display a line of text, or a simple icon on the screen, use this no-frills method. If you want a more advanced HUD with effects and interaction, use <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui.html">Nifty GUI</a>.</p><p> Next to the rootNode for the 3-dimensional scene graph, jME3 also offers a 2-dimension (orthogonal) node, the <code>guiNode</code>. This is how you use it for HUDs:</p><ul><li |
||||
class="level1"><div |
||||
class="li"> Create a <acronym |
||||
title="Graphical User Interface">GUI</acronym> element (text or image).</div></li><li |
||||
class="level1"><div |
||||
class="li"> Attach the <acronym |
||||
title="Graphical User Interface">GUI</acronym> element to the guiNode.</div></li><li |
||||
class="level1"><div |
||||
class="li"> Place the <acronym |
||||
title="Graphical User Interface">GUI</acronym> element in the orthogonal render queue using <code>setQueueBucket(Bucket.Gui)</code>.</div></li></ul><p> The element appears as 2-D, static element on the screen.</p><p> By default, the guiNode has some scene graph statistics attached in SimpleApplication. To clear the guiNode and attach your own <acronym |
||||
title="Graphical User Interface">GUI</acronym> elements, you detach all children.</p><pre>guiNode.detachAllChildren();</pre></div><h3><a |
||||
name="displaying_pictures_in_the_hud">Displaying Pictures in the HUD</a></h3><div |
||||
class="level3"><p> A simple image can be displayed using <code>com.jme3.ui.Picture</code>.</p><pre>Picture pic = new Picture("HUD Picture"); |
||||
|
||||
<h1><a>Head-Up Display (HUD)</a></h1> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
<img src="/wiki/lib/exe/fetch.php"> |
||||
</p> |
||||
|
||||
<p> |
||||
A HUD (Head-Up Display) is part of a game's visual user interface. It'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> |
||||
|
||||
<p> |
||||
HUDs are used to supply players with essential information about the game state. |
||||
</p> |
||||
<ul> |
||||
<li><div> Status: Score, minimap, points, stealth mode, …</div> |
||||
</li> |
||||
<li><div> Resources: Ammunition, lives/health, time, …</div> |
||||
</li> |
||||
<li><div> Vehicle instruments: Cockpit, speedometer, …</div> |
||||
</li> |
||||
<li><div> Navigational aides: Crosshairs, mouse pointer or hand, …</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
<p> |
||||
|
||||
You have two options how to create HUDs. |
||||
|
||||
</p> |
||||
<div><table> |
||||
<tr> |
||||
<th>Option</th><th>Pros</th><th>Cons</th> |
||||
</tr> |
||||
<tr> |
||||
<th>Attach elements to default guiNode:</th><td>Easy to learn. jMonkeyEngine built-in <acronym title="Application Programming Interface">API</acronym> for attaching images and bitmap text.</td><td>Only basic features. <br/> |
||||
You will have to write custom controls / buttons / effects if you need them.</td> |
||||
</tr> |
||||
<tr> |
||||
<th>Use advanced <a href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui.html">Nifty GUI</a> integration:</th><td>Full-featured interactive user interface. <br/> |
||||
Includes buttons, effects, controls. <br/> |
||||
Supports <acronym title="Extensible Markup Language">XML</acronym> and Java layouts.</td><td>Steeper learning curve.</td> |
||||
</tr> |
||||
</table></div> |
||||
<!-- EDIT1 TABLE [834-1253] --> |
||||
</div> |
||||
|
||||
<h2><a>Simple HUD: GUI Node</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
Using the <acronym title="Graphical User Interface">GUI</acronym> 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 this no-frills method. |
||||
</p> |
||||
|
||||
<p> |
||||
Next to the rootNode for the 3-dimensional scene graph, jME3 also offers a 2-dimension (orthogonal) node, the <code>guiNode</code>. |
||||
</p> |
||||
|
||||
<p> |
||||
This is how you use the guiNode for HUDs: |
||||
</p> |
||||
<ul> |
||||
<li><div> Create a <acronym title="Graphical User Interface">GUI</acronym> element: BitmapText or Picture.</div> |
||||
</li> |
||||
<li><div> Attach the element to the guiNode. </div> |
||||
</li> |
||||
<li><div> Place the element in the orthogonal render queue using <code>setQueueBucket(Bucket.Gui)</code>. </div> |
||||
</li> |
||||
</ul> |
||||
|
||||
<p> |
||||
The BitmapTexts and Pictures appear as 2 dimensional element on the screen. |
||||
</p> |
||||
|
||||
<p> |
||||
<strong>Note:</strong> The size unit for the guiNode is pixels, not world units. |
||||
</p> |
||||
|
||||
<p> |
||||
By default, the guiNode has some scene graph statistics attached in SimpleApplication. To clear the guiNode and attach your own <acronym title="Graphical User Interface">GUI</acronym> elements, you detach all children. |
||||
</p> |
||||
<pre>guiNode.detachAllChildren();</pre> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Displaying Pictures in the HUD</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
A simple image can be displayed using <code>com.jme3.ui.Picture</code>. |
||||
</p> |
||||
<pre>Picture pic = new Picture("HUD Picture"); |
||||
pic.setImage(assetManager, "Textures/ColoredTex/Monkey.png", true); |
||||
pic.setWidth(settings.getWidth()/2); |
||||
pic.setHeight(settings.getHeight()/2); |
||||
pic.setPosition(settings.getWidth()/4, settings.getHeight()/4); |
||||
guiNode.attachChild(pic);</pre><p> When you set the last boolean in setImage() to true, the alpha channel of your image will be rendered transparent/translucent.</p></div><h3><a |
||||
name="displaying_text_in_the_hud">Displaying Text in the HUD</a></h3><div |
||||
class="level3"><p> You use <code>com.jme3.font.BitmapText</code> to display text on the screen.</p><pre>BitmapText hudText = new BitmapText(guiFont, false); |
||||
guiNode.attachChild(pic);</pre> |
||||
|
||||
<p> |
||||
When you set the last boolean in setImage() to true, the alpha channel of your image is rendered transparent/translucent. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Displaying Text in the HUD</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
You use <code>com.jme3.font.BitmapText</code> to display text on the screen. |
||||
</p> |
||||
<pre>BitmapText hudText = new BitmapText(guiFont, false); |
||||
hudText.setSize(guiFont.getCharSet().getRenderedSize()); // font size |
||||
hudText.setColor(ColorRGBA.Blue); // font color |
||||
hudText.setText("You can write any string here"); // the text |
||||
hudText.setLocalTranslation(300, hudText.getLineHeight(), 0); // position |
||||
guiNode.attachChild(hudText);</pre><p> The BitmapFont object <code>guiFont</code> is a default font provided by SimpleApplication. Copy you own fonts as .fnt+.png files into the <code>assets/Interface/Fonts</code> directory and load them like this:</p><pre>BitmapFont myFont = assetManager.loadFont("Interface/Fonts/Console.fnt"); |
||||
hudText = new BitmapText(myFont, false);</pre></div><h3><a |
||||
name="displaying_geometries_in_the_hud">Displaying Geometries in the HUD</a></h3><div |
||||
class="level3"><p> It is technically possible to attach Quads and 3D Geometries to the HUD. They show up as flat, static <acronym |
||||
title="Graphical User Interface">GUI</acronym> elements. Note that if you use a lit Material, you must add a light to the guiNode. Also remember that size units are pixels in the HUD (a 2-wu cube is displayed 2 pixels wide).</p></div><h3><a |
||||
name="positioning_hud_elements">Positioning HUD Elements</a></h3><div |
||||
class="level3"><ul><li |
||||
class="level1"><div |
||||
class="li"> When positioning text and images in 2D, the bottom left corner of the screen is <code>(0f,0f)</code>, and the top right corner is at <code>(settings.getWidth(),settings.getHeight())</code>.</div></li><li |
||||
class="level1"><div |
||||
class="li"> If you have several 2D elements in the <acronym |
||||
title="Graphical User Interface">GUI</acronym> bucket that overlap, define their depth order by specifing a Z value. You can use <code>pic.move(x, y, -2)</code> or <code>hudText.setLocalTranslation(x,y,-2)</code>.</div></li><li |
||||
class="level1"><div |
||||
class="li"> Size and length values in the orthogonal render queue are treated like pixels. A 20*20-wu big quad is rendered 20 pixels wide.</div></li></ul></div><h3><a |
||||
name="keeping_the_hud_up-to-date">Keeping the HUD Up-To-Date</a></h3><div |
||||
class="level3"><p> Use the update loop to keep the content up-to-date.</p><pre>public void simpleUpdate(float tpf) { |
||||
guiNode.attachChild(hudText);</pre> |
||||
|
||||
<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> |
||||
<pre>BitmapFont myFont = assetManager.loadFont("Interface/Fonts/Console.fnt"); |
||||
hudText = new BitmapText(myFont, false);</pre> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Displaying Geometries in the HUD</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
It is technically possible to attach Quads and 3D Geometries to the HUD. They show up as flat, static <acronym title="Graphical User Interface">GUI</acronym> elements. Note that if you use a lit Material, you must add a light to the guiNode. Also remember that size units are pixels in the HUD (a 2-wu cube is displayed tiny 2 pixels wide!). |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Positioning HUD Elements</a></h3> |
||||
<div> |
||||
<ul> |
||||
<li><div> When positioning text and images in 2D, the bottom left corner of the screen is <code>(0f,0f)</code>, and the top right corner is at <code>(settings.getWidth(),settings.getHeight())</code>.</div> |
||||
</li> |
||||
<li><div> If you have several 2D elements in the <acronym title="Graphical User Interface">GUI</acronym> bucket that overlap, define their depth order by specifing a Z value. You can use <code>pic.move(x, y, -2)</code> or <code>hudText.setLocalTranslation(x,y,-2)</code>.</div> |
||||
</li> |
||||
<li><div> Size and length values in the orthogonal render queue are treated like pixels. A 20*20-wu big quad is rendered 20 pixels wide.</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Keeping the HUD Up-To-Date</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
Use the update loop to keep the content up-to-date. |
||||
</p> |
||||
<pre>public void simpleUpdate(float tpf) { |
||||
... |
||||
hudText.setText("Score: " + score); |
||||
... |
||||
picture.setImage(assetManager, "Interface/statechange.png", true); |
||||
... |
||||
}</pre><div |
||||
class="tags"><span> <a |
||||
href="/wiki/doku.php/tag:gui?do=showtag&tag=tag%3Agui">gui</a>, <a |
||||
href="/wiki/doku.php/tag:display?do=showtag&tag=tag%3Adisplay">display</a>, <a |
||||
href="/wiki/doku.php/tag:documentation?do=showtag&tag=tag%3Adocumentation">documentation</a> </span></div></div> |
||||
<p><em><a href="http://jmonkeyengine.org/wiki/doku.php/jme3:advanced:hud?do=export_xhtmlbody">view online version</a></em></p> |
||||
}</pre> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Advanced HUD: Nifty GUI</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
The recommended approach to create HUDs is using <a href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui.html">Nifty GUI</a>. |
||||
</p> |
||||
<ol> |
||||
<li><div> Lay out the <acronym title="Graphical User Interface">GUI</acronym> in one or several Nifty <acronym title="Extensible Markup Language">XML</acronym> or Java files. </div> |
||||
</li> |
||||
<li><div> Write the controller classes in Java.</div> |
||||
</li> |
||||
<li><div> Load the <acronym title="Extensible Markup Language">XML</acronym> file with the controller object in your game's simpleInit() method.</div> |
||||
</li> |
||||
</ol> |
||||
|
||||
<p> |
||||
|
||||
The advantage of Nifty <acronym title="Graphical User Interface">GUI</acronym> is that it is well integrated into jME and the jMonkeyPlatform, and that it offers all the features that you expect from a professional modern user interface. |
||||
</p> |
||||
|
||||
<p> |
||||
For HUDs, you basically follow the same instructions as for creating a normal <a href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui.html">Nifty GUI</a>, you just don't pause the game while the HUD is up. |
||||
</p> |
||||
<div><span> |
||||
<a href="/wiki/doku.php/tag:gui?do=showtag&tag=tag%3Agui">gui</a>, |
||||
<a href="/wiki/doku.php/tag:display?do=showtag&tag=tag%3Adisplay">display</a>, |
||||
<a href="/wiki/doku.php/tag:documentation?do=showtag&tag=tag%3Adocumentation">documentation</a> |
||||
</span></div> |
||||
|
||||
</div> |
||||
<p><em><a href="http://direct.jmonkeyengine.org/wiki/doku.php/jme3:advanced:hud?do=export_xhtmlbody">view online version</a></em></p> |
||||
|
After Width: | Height: | Size: 260 B |
@ -1,135 +1,353 @@ |
||||
<h1><a |
||||
name="input_handling">Input Handling</a></h1><div |
||||
class="level1"><p> Users interact with your jME3 application with different input devices – the mouse, the keyboard, or a joystick. To respond to inputs we use the <code>inputManager</code> object in <code>SimpleApplication</code>.</p><p> This is how you add interaction to your game:</p><ol><li |
||||
class="level1"><div |
||||
class="li"> For each action, choose the trigger(s) (a key or mouse click etc)</div></li><li |
||||
class="level1"><div |
||||
class="li"> For each action, add a trigger mapping to the inputManager</div></li><li |
||||
class="level1"><div |
||||
class="li"> Create at least one listener in SimpleApplication</div></li><li |
||||
class="level1"><div |
||||
class="li"> For each action, register its mappings to a listener</div></li><li |
||||
class="level1"><div |
||||
class="li"> Implement each action in the listener</div></li></ol></div><h2><a |
||||
name="choose_trigger">1. Choose Trigger</a></h2><div |
||||
class="level2"><p> Choose one or several key/mouse events for the interaction. We use <code>KeyTrigger</code>, <code>MouseAxisTrigger</code>, <code>MouseButtonTrigger</code>, <code>JoyAxisTrigger</code> and <code>JoyButtonTrigger</code> constants from the <code>com.jme3.input.controls</code> package.</p><p> The booleans are used to negate the axes: For inputs that have two axes (MouseAxis, JoyAxis), you have to listen to the negative (true) and positive (false) axis separately.</p><div |
||||
class="table sectionedit1"><table |
||||
class="inline"><tr |
||||
class="row0"><th |
||||
class="col0"> Trigger</th><th |
||||
class="col1"> Code</th></tr><tr |
||||
class="row1"><td |
||||
class="col0"> Mouse button: Left Click</td><td |
||||
class="col1"> MouseButtonTrigger(MouseInput.BUTTON_LEFT)</td></tr><tr |
||||
class="row2"><td |
||||
class="col0"> Mouse button: Right Click</td><td |
||||
class="col1"> MouseButtonTrigger(MouseInput.BUTTON_RIGHT)</td></tr><tr |
||||
class="row3"><td |
||||
class="col0"> Mouse button: Middle Click</td><td |
||||
class="col1"> MouseButtonTrigger(MouseInput.BUTTON_MIDDLE)</td></tr><tr |
||||
class="row4"><td |
||||
class="col0"> Mouse movement:</td><td |
||||
class="col1"> MouseAxisTrigger(MouseInput.AXIS_X, true), <br/> MouseAxisTrigger(MouseInput.AXIS_Y, true), <br/> MouseAxisTrigger(MouseInput.AXIS_X, false), <br/> MouseAxisTrigger(MouseInput.AXIS_Y, false)</td></tr><tr |
||||
class="row5"><td |
||||
class="col0"> Mouse wheel:</td><td |
||||
class="col1"> MouseAxisTrigger(MouseInput.AXIS_WHEEL,false) <br/> MouseAxisTrigger(MouseInput.AXIS_WHEEL,true)</td></tr><tr |
||||
class="row6"><td |
||||
class="col0"> Keyboard: Characters and Numbers etc</td><td |
||||
class="col1"> KeyTrigger(KeyInput.KEY_X) etc</td></tr><tr |
||||
class="row7"><td |
||||
class="col0 leftalign"> Keyboard: Spacebar</td><td |
||||
class="col1"> KeyTrigger(KeyInput.KEY_SPACE)</td></tr><tr |
||||
class="row8"><td |
||||
class="col0"> Keyboard: Shift</td><td |
||||
class="col1"> KeyTrigger(KeyInput.KEY_RSHIFT), <br/> KeyTrigger(KeyInput.KEY_LSHIFT)</td></tr><tr |
||||
class="row9"><td |
||||
class="col0"> Keyboard: F1 etc</td><td |
||||
class="col1"> KeyTrigger(KeyInput.KEY_F1) etc</td></tr><tr |
||||
class="row10"><td |
||||
class="col0"> Keyboard: Return, Enter</td><td |
||||
class="col1 leftalign"> KeyTrigger(KeyInput.KEY_RETURN), <br/> KeyTrigger(KeyInput.KEY_NUMPADENTER)</td></tr><tr |
||||
class="row11"><td |
||||
class="col0"> Keyboard: PageUp, PageDown</td><td |
||||
class="col1"> KeyTrigger(KeyInput.KEY_PGUP), <br/> KeyTrigger(KeyInput.KEY_PGDN)</td></tr><tr |
||||
class="row12"><td |
||||
class="col0"> Keyboard: Delete, Backspace</td><td |
||||
class="col1"> KeyTrigger(KeyInput.KEY_BACK), <br/> KeyTrigger(KeyInput.KEY_DELETE)</td></tr><tr |
||||
class="row13"><td |
||||
class="col0"> Keyboard: Escape</td><td |
||||
class="col1"> KeyTrigger(KeyInput.KEY_ESCAPE)</td></tr><tr |
||||
class="row14"><td |
||||
class="col0"> Keyboard: Arrows</td><td |
||||
class="col1"> KeyTrigger(KeyInput.KEY_DOWN), <br/> KeyTrigger(KeyInput.KEY_UP) <br/> KeyTrigger(KeyInput.KEY_LEFT), KeyTrigger(KeyInput.KEY_RIGHT)</td></tr><tr |
||||
class="row15"><td |
||||
class="col0"> NumPad: Number 1 etc</td><td |
||||
class="col1"> KeyTrigger(KeyInput.KEY_NUMPAD1) etc</td></tr><tr |
||||
class="row16"><td |
||||
class="col0"> Joystick: Button</td><td |
||||
class="col1"> JoyButtonTrigger(0, JoyInput.AXIS_POV_X), <br/> JoyButtonTrigger(0, JoyInput.AXIS_POV_Y) ?</td></tr><tr |
||||
class="row17"><td |
||||
class="col0"> Joystick: Movement</td><td |
||||
class="col1"> JoyAxisTrigger(0, JoyInput.AXIS_POV_X, true), <br/> JoyAxisTrigger(0, JoyInput.AXIS_POV_X, false), <br/> JoyAxisTrigger(0, JoyInput.AXIS_POV_Z, true), <br/> JoyAxisTrigger(0, JoyInput.AXIS_POV_Z, false)</td></tr></table></div></div><h2><a |
||||
name="add_a_trigger_mapping">2. Add a Trigger Mapping</a></h2><div |
||||
class="level2"><p> When initializing the application, add a Mapping for each Trigger.</p><p> Give the mapping a meaningful name. The name should reflect the action, not the key, since the keys can change. Here some examples:</p><pre>inputManager.addMapping("Pause Game", new KeyTrigger(KeyInput.KEY_P)); |
||||
inputManager.addMapping("Rotate", new KeyTrigger(KeyInput.KEY_SPACE));</pre><p> There are cases where you may want more then one trigger for one action. For instance some users prefer the WASD keys to navigate, others prefer the arrow keys. You can define both by adding them after a comma.</p><pre>inputManager.addMapping("Left", new KeyTrigger(KeyInput.KEY_A), |
||||
new KeyTrigger(KeyInput.KEY_LEFT)); |
||||
|
||||
<h1><a>Input Handling</a></h1> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
Users interact with your jME3 application with different input devices – the mouse, the keyboard, or a joystick. To respond to inputs we use the <code>inputManager</code> object in <code>SimpleApplication</code>. |
||||
</p> |
||||
|
||||
<p> |
||||
This is how you add interaction to your game: |
||||
|
||||
</p> |
||||
<ol> |
||||
<li><div> For each action, choose the trigger(s) (a key or mouse click etc)</div> |
||||
</li> |
||||
<li><div> For each action, add a trigger mapping to the inputManager</div> |
||||
</li> |
||||
<li><div> Create at least one listener in SimpleApplication</div> |
||||
</li> |
||||
<li><div> For each action, register its mappings to a listener</div> |
||||
</li> |
||||
<li><div> Implement each action in the listener</div> |
||||
</li> |
||||
</ol> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>1. Choose Trigger</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
Choose one or several key/mouse events for the interaction. We use <code>KeyTrigger</code>, <code>MouseAxisTrigger</code>, <code>MouseButtonTrigger</code>, <code>JoyAxisTrigger</code> and <code>JoyButtonTrigger</code> constants from the <code>com.jme3.input.controls</code> package. |
||||
</p> |
||||
|
||||
<p> |
||||
<strong>Note:</strong> The MouseAxis and JoyAxis triggers go along the X axis (right/left) or Y axis (up/down). These Triggers come with extra booleans for the negative half of the axis (left, down). Remember to write code that listens to the negative (true) and positive (false) axis! |
||||
|
||||
</p> |
||||
<div><table> |
||||
<tr> |
||||
<th> Trigger </th><th> Code </th> |
||||
</tr> |
||||
<tr> |
||||
<td> Mouse button: Left Click </td><td> MouseButtonTrigger(MouseInput.BUTTON_LEFT) </td> |
||||
</tr> |
||||
<tr> |
||||
<td> Mouse button: Right Click </td><td> MouseButtonTrigger(MouseInput.BUTTON_RIGHT) </td> |
||||
</tr> |
||||
<tr> |
||||
<td> Mouse button: Middle Click </td><td> MouseButtonTrigger(MouseInput.BUTTON_MIDDLE) </td> |
||||
</tr> |
||||
<tr> |
||||
<td> Mouse movement: Right </td><td> MouseAxisTrigger(MouseInput.AXIS_X, true) </td> |
||||
</tr> |
||||
<tr> |
||||
<td> Mouse movement: Left </td><td> MouseAxisTrigger(MouseInput.AXIS_X, false)</td> |
||||
</tr> |
||||
<tr> |
||||
<td> Mouse movement: Up </td><td> MouseAxisTrigger(MouseInput.AXIS_Y, true) </td> |
||||
</tr> |
||||
<tr> |
||||
<td> Mouse movement: Down </td><td> MouseAxisTrigger(MouseInput.AXIS_Y, false) </td> |
||||
</tr> |
||||
<tr> |
||||
<td> Mouse wheel: Up </td><td> MouseAxisTrigger(MouseInput.AXIS_WHEEL,false) </td> |
||||
</tr> |
||||
<tr> |
||||
<td> Mouse wheel: Down </td><td> MouseAxisTrigger(MouseInput.AXIS_WHEEL,true) </td> |
||||
</tr> |
||||
<tr> |
||||
<td> NumPad: 1, 2, 3, … </td><td> KeyTrigger(KeyInput.KEY_NUMPAD1) … </td> |
||||
</tr> |
||||
<tr> |
||||
<td> Keyboard: 1, 2 , 3, … </td><td> KeyTrigger(KeyInput.KEY_1) … </td> |
||||
</tr> |
||||
<tr> |
||||
<td> Keyboard: A, B, C, … </td><td> KeyTrigger(KeyInput.KEY_A) … </td> |
||||
</tr> |
||||
<tr> |
||||
<td> Keyboard: Spacebar </td><td> KeyTrigger(KeyInput.KEY_SPACE) </td> |
||||
</tr> |
||||
<tr> |
||||
<td> Keyboard: Shift </td><td> KeyTrigger(KeyInput.KEY_RSHIFT), <br/> |
||||
KeyTrigger(KeyInput.KEY_LSHIFT) </td> |
||||
</tr> |
||||
<tr> |
||||
<td> Keyboard: F1, F2, … </td><td> KeyTrigger(KeyInput.KEY_F1) … </td> |
||||
</tr> |
||||
<tr> |
||||
<td> Keyboard: Return, Enter </td><td> KeyTrigger(KeyInput.KEY_RETURN), <br/> |
||||
KeyTrigger(KeyInput.KEY_NUMPADENTER) </td> |
||||
</tr> |
||||
<tr> |
||||
<td> Keyboard: PageUp, PageDown </td><td> KeyTrigger(KeyInput.KEY_PGUP), <br/> |
||||
KeyTrigger(KeyInput.KEY_PGDN) </td> |
||||
</tr> |
||||
<tr> |
||||
<td> Keyboard: Delete, Backspace </td><td> KeyTrigger(KeyInput.KEY_BACK), <br/> |
||||
KeyTrigger(KeyInput.KEY_DELETE) </td> |
||||
</tr> |
||||
<tr> |
||||
<td> Keyboard: Escape </td><td> KeyTrigger(KeyInput.KEY_ESCAPE) </td> |
||||
</tr> |
||||
<tr> |
||||
<td> Keyboard: Arrows </td><td> KeyTrigger(KeyInput.KEY_DOWN), <br/> |
||||
KeyTrigger(KeyInput.KEY_UP) <br/> |
||||
KeyTrigger(KeyInput.KEY_LEFT), KeyTrigger(KeyInput.KEY_RIGHT) </td> |
||||
</tr> |
||||
<tr> |
||||
<td> Joystick Button: </td><td> JoyButtonTrigger(0, JoyInput.AXIS_POV_X), <br/> |
||||
JoyButtonTrigger(0, JoyInput.AXIS_POV_Y) ? </td> |
||||
</tr> |
||||
<tr> |
||||
<td> Joystick Movement: Right </td><td> JoyAxisTrigger(0, JoyInput.AXIS_POV_X, true) </td> |
||||
</tr> |
||||
<tr> |
||||
<td> Joystick Movement: Left </td><td> JoyAxisTrigger(0, JoyInput.AXIS_POV_X, false) </td> |
||||
</tr> |
||||
<tr> |
||||
<td> Joystick Movement: Forward </td><td> JoyAxisTrigger(0, JoyInput.AXIS_POV_Z, true) </td> |
||||
</tr> |
||||
<tr> |
||||
<td> Joystick Movement: Backward</td><td> JoyAxisTrigger(0, JoyInput.AXIS_POV_Z, false) </td> |
||||
</tr> |
||||
</table></div> |
||||
<!-- EDIT1 TABLE [1098-3076] --> |
||||
<p> |
||||
|
||||
In your IDE, use code completion to quickly look up Trigger literals. In the jMonkeyPlatform for example, press ctrl-space or ctrl-/ after <code>KeyInput.|</code> to choose from the list of all keys. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>2. Add a Trigger Mapping</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
When initializing the application, add a Mapping for each Trigger. |
||||
</p> |
||||
|
||||
<p> |
||||
Give the mapping a meaningful name. The name should reflect the action, not the button/key (because buttons/keys can change). Here some examples: |
||||
</p> |
||||
<pre>inputManager.addMapping("Pause Game", new KeyTrigger(KeyInput.KEY_P)); |
||||
inputManager.addMapping("Rotate", new KeyTrigger(KeyInput.KEY_SPACE)); |
||||
...</pre> |
||||
|
||||
<p> |
||||
There are cases where you may want to provide more then one trigger for one action. For example, some users prefer the WASD keys to navigate, while others prefer the arrow keys. Add several triggers for one mapping, by separating the Trigger objects with commas: |
||||
</p> |
||||
<pre>inputManager.addMapping("Left", new KeyTrigger(KeyInput.KEY_A), |
||||
new KeyTrigger(KeyInput.KEY_LEFT)); // A and left arrow |
||||
inputManager.addMapping("Right", new KeyTrigger(KeyInput.KEY_D), |
||||
new KeyTrigger(KeyInput.KEY_RIGHT));</pre></div><h2><a |
||||
name="create_listeners">3. Create Listeners</a></h2><div |
||||
class="level2"><p> The jME3 input manager supports two types of event listeners for inputs:</p><p> <strong>com.jme3.input.controls.AnalogListener</strong></p><ul><li |
||||
class="level1"><div |
||||
class="li"> Use for continuous and gradual actions.</div><ul><li |
||||
class="level2"><div |
||||
class="li"> Examples: Walk, run, rotate, accelerate vehicle, strafe, (semi-)automatic weapon shot</div></li></ul></li><li |
||||
class="level1"><div |
||||
class="li"> JME gives you access to:</div><ul><li |
||||
class="level2"><div |
||||
class="li"> the name of the triggered action.</div></li><li |
||||
class="level2"><div |
||||
class="li"> a gradual value between 0-9 how long the key has been pressed.</div></li></ul></li></ul><p> <strong>com.jme3.input.controls.ActionListener</strong></p><ul><li |
||||
class="level1"><div |
||||
class="li"> Use for absolute "pressed or released?", "on or off?" actions.</div><ul><li |
||||
class="level2"><div |
||||
class="li"> Examples: Pause/unpause, a rifle or revolver shot, jump, click to select.</div></li></ul></li><li |
||||
class="level1"><div |
||||
class="li"> JME gives you access to:</div><ul><li |
||||
class="level2"><div |
||||
class="li"> the name of the triggered action.</div></li><li |
||||
class="level2"><div |
||||
class="li"> a boolean whether the key is still pressed or has just been released.</div></li></ul></li></ul><p> You can use one or both in the same application. Add one or both of these code snippets to your main SimpleApplication-based class to activate the listener.</p><pre>private ActionListener() { |
||||
new KeyTrigger(KeyInput.KEY_RIGHT)); // D and right arrow |
||||
...</pre> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>3. Create Listeners</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
The jME3 input manager supports two types of event listeners for inputs: AnalogListener and ActionListener. You can use one or both listeners in the same application. Add one or both of the following code snippets to your main SimpleApplication-based class to activate the listeners. |
||||
</p> |
||||
|
||||
<p> |
||||
<strong>Note:</strong> The two input listeners do not know, and do not care, which actual key was pressed. They only know which <em>named input mapping</em> was triggered. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>ActionListener</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
<code>com.jme3.input.controls.ActionListener</code> |
||||
</p> |
||||
<ul> |
||||
<li><div> Use for absolute "button pressed or released?", "on or off?" actions. </div> |
||||
<ul> |
||||
<li><div> Examples: Pause/unpause, a rifle or revolver shot, jump, click to select.</div> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
<li><div> JME gives you access to:</div> |
||||
<ul> |
||||
<li><div> The mapping name of the triggered action.</div> |
||||
</li> |
||||
<li><div> A boolean whether the trigger is still pressed or has just been released.</div> |
||||
</li> |
||||
<li><div> A float of the current time-per-frame as timing factor</div> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
<li><div> </div> |
||||
</li> |
||||
</ul> |
||||
<pre>private ActionListener() { |
||||
public void onAction(String name, boolean keyPressed, float tpf) { |
||||
/** TODO */ |
||||
/** TODO: test for mapping names and implement actions */ |
||||
} |
||||
};</pre><pre>private AnalogListener analogListener = new AnalogListener() { |
||||
};</pre> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>AnalogListener</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
<code>com.jme3.input.controls.AnalogListener</code> |
||||
</p> |
||||
<ul> |
||||
<li><div> Use for continuous and gradual actions.</div> |
||||
<ul> |
||||
<li><div> Examples: Walk, run, rotate, accelerate vehicle, strafe, (semi-)automatic weapon shot</div> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
<li><div> JME gives you access to:</div> |
||||
<ul> |
||||
<li><div> The mapping name of the triggered action.</div> |
||||
</li> |
||||
<li><div> A gradual float value between how long the trigger has been pressed.</div> |
||||
</li> |
||||
<li><div> A float of the current time-per-frame as timing factor</div> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
</ul> |
||||
<pre>private AnalogListener analogListener = new AnalogListener() { |
||||
public void onAnalog(String name, float keyPressed, float tpf) { |
||||
/** TODO */ |
||||
/** TODO: test for mapping names and implement actions */ |
||||
} |
||||
};</pre></div><h2><a |
||||
name="register_mappings_to_listeners">4. Register Mappings to Listeners</a></h2><div |
||||
class="level2"><p> To activate the mappings, you must register them to the Listener. Write your registration code after the part where you have added the mappings to the inputManager before.</p><p> In this example, we register the "Pause Game" mapping to the <code>actionListener</code> object, because pausing a game is in "either/or" decision.</p><pre>inputManager.addListener(actionListener, new String[]{"Left", "Right"});</pre><p> As you see, you can add several listeners in one String array. You can call the addListener() method more than once, each time with a subset of your list, if that helps you keep you code tidy.</p><p> <strong>Tip:</strong> Check the string's capitalization and spelling if you think you have registered an action, but it does not work.</p></div><h2><a |
||||
name="implement_actions">5. Implement Actions</a></h2><div |
||||
class="level2"><p> You specify the action to be triggered where it says TODO in the Listener code snippets. |
||||
Typically you write a series of if/else conditions, testing for all the mapping names, and specifying each action. Here is one example:</p><pre>private AnalogListener analogListener = new AnalogListener() { |
||||
};</pre> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>4. Register Mappings to Listeners</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
To activate the mappings, you must register them to a Listener. Write your registration code after the code block where you have added the mappings to the inputManager. |
||||
</p> |
||||
|
||||
<p> |
||||
In the following example, you register the "Pause Game" mapping to the <code>actionListener</code> object, because pausing a game is in "either/or" decision. |
||||
</p> |
||||
<pre>inputManager.addListener(actionListener, new String[]{"Pause Game"});</pre> |
||||
|
||||
<p> |
||||
In the following example, you register navigational mappings to the <code>analogListener</code> object, because walking is a continuous action. Players typically keep the key pressed to express continuity, for example when they want to "walk on" or "accelerate". |
||||
</p> |
||||
<pre>inputManager.addListener(analogListener, new String[]{"Left", "Right"});</pre> |
||||
|
||||
<p> |
||||
As you see, you can add several listeners in one String array. You can call the addListener() method more than once, each time with a subset of your list, if that helps you keep you code tidy. Again, the Listeners do not care about actual which keys are configured, you only register named trigger mappings. |
||||
</p> |
||||
|
||||
<p> |
||||
<p><div>Did you register an action, but it does not work? Check the string's capitalization and spelling, it's case sensitive! |
||||
</div></p> |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>5. Implement Actions in Listeners</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
You specify the action to be triggered where it says TODO in the Listener code snippets. Typically, you write a series of if/else conditions, testing for all the mapping names, and then calling the respective action. |
||||
</p> |
||||
|
||||
<p> |
||||
Make use of the distinction between <code>if</code> and <code>else if</code> in this conditional. |
||||
</p> |
||||
<ul> |
||||
<li><div> If several actions can be triggered simultaneously, test for all of these with a series of bare <code>if</code>s. For example, a character can be running forward <em>and</em> to the left.</div> |
||||
</li> |
||||
<li><div> If certain actions exclude one another, test for them with <code>else if</code>, the the rest of the exclusive tests can be skipped and you save some miliseconds. For example, you either shoot or pick something up.</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>ActionListener</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
In the most common case, you want an action to be triggered once, in the moment when the button or key trigger is released. For example, when the player presses a key to open a door, or clicks to pick up an item. For these cases, use an ActionListener and test for <code>&& !keyPressed</code>, like shown in the following example. |
||||
</p> |
||||
<pre>private ActionListener() { |
||||
public void onAction(String name, boolean keyPressed, float tpf) { |
||||
|
||||
if (name.equals("Pause Game") && !keyPressed) { // test? |
||||
isRunning = !isRunning; // action! |
||||
} |
||||
|
||||
if ... |
||||
|
||||
} |
||||
};</pre> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>AnalogListener</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
The following example shows how you define actions with an AnalogListener. Thiese actions are triggered continuously, as long (intensity <code>value</code>) as the named key or mouse button is down. Use this listeners for semi-automatic weapons and navigational actions. |
||||
</p> |
||||
<pre>private AnalogListener analogListener = new AnalogListener() { |
||||
public void onAnalog(String name, float value, float tpf) { |
||||
|
||||
if (name.equals("Rotate")) { // test? |
||||
player.rotate(0, value*speed, 0); // action! |
||||
} // else if ... |
||||
|
||||
} |
||||
};</pre><p> It's very common that you want an action to be only triggered once, in the moment when the key is released. Examples are when the player presses an action key to open a door or pick up an item, or to flip a game state, such as pause/unpause. For these cases, use an ActionListener and test for <code>&& !keyPressed</code>, like shown in the following example.</p><pre>private ActionListener() { |
||||
public void onAction(String name, boolean keyPressed, float tpf) { |
||||
|
||||
if (name.equals("Pause Game") && !keyPressed) { // test? |
||||
isRunning = !isRunning; // action! |
||||
} // else if ... |
||||
if ... |
||||
|
||||
} |
||||
};</pre></div><h2><a |
||||
name="remapping_keys">Remapping Keys</a></h2><div |
||||
class="level2"><p> This approach of separating triggers from actions has the advantage that you can remap triggers easily. Maybe your players have different keyboard layouts, are used to "reversed" mouse navigation, or prefer different navigational keys than the ones you defined. In any case, you only need to replace the trigger parts in the <code>inputManager.addMapping()</code> lines with variables, and load different sets of trigger objects when the game starts. The rest of the code stays as it is.</p><div |
||||
class="tags"><span> <a |
||||
href="/wiki/doku.php/tag:keyinput?do=showtag&tag=tag%3Akeyinput">keyinput</a>, <a |
||||
href="/wiki/doku.php/tag:input?do=showtag&tag=tag%3Ainput">input</a>, <a |
||||
href="/wiki/doku.php/tag:documentation?do=showtag&tag=tag%3Adocumentation">documentation</a> </span></div></div> |
||||
<p><em><a href="http://jmonkeyengine.org/wiki/doku.php/jme3:advanced:input_handling?do=export_xhtmlbody">view online version</a></em></p> |
||||
};</pre> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Let Users Remap Keys</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
It is likely that your players have different keyboard layouts, are used to "reversed" mouse navigation, or prefer different navigational keys than the ones that you defined. You should create an options screen that lets users customize their mouse/key triggers for your mappings. Replace the trigger literals in the <code>inputManager.addMapping()</code> lines with variables, and load sets of triggers when the game starts. |
||||
</p> |
||||
|
||||
<p> |
||||
The abstraction of separating triggers and mappings has the advantage that you can remap triggers easily. Your code only needs to remove and add some trigger mappings. The core of the code (the listeners and actions) remains unchanged. |
||||
</p> |
||||
<div><span> |
||||
<a href="/wiki/doku.php/tag:keyinput?do=showtag&tag=tag%3Akeyinput">keyinput</a>, |
||||
<a href="/wiki/doku.php/tag:input?do=showtag&tag=tag%3Ainput">input</a>, |
||||
<a href="/wiki/doku.php/tag:documentation?do=showtag&tag=tag%3Adocumentation">documentation</a> |
||||
</span></div> |
||||
|
||||
</div> |
||||
<p><em><a href="http://direct.jmonkeyengine.org/wiki/doku.php/jme3:advanced:input_handling?do=export_xhtmlbody">view online version</a></em></p> |
||||
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 9.7 KiB After Width: | Height: | Size: 15 KiB |
@ -0,0 +1,572 @@ |
||||
|
||||
<h3><a>Nifty Loading Screen (Progress Bar)</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
There is a good tutorial about creating a nifty progress bar here: |
||||
<object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://sourceforge.net/apps/mediawiki/nifty-gui/index.php?title=Create_your_own_Control_%28A_Nifty_Progressbar%29"><param name="text" value="<html><u>http://sourceforge.net/apps/mediawiki/nifty-gui/index.php?title=Create_your_own_Control_%28A_Nifty_Progressbar%29</u></html>"><param name="textColor" value="blue"></object> |
||||
</p> |
||||
|
||||
<p> |
||||
This example will the existing hello terrain as an example. |
||||
It will require these 2 images inside Assets/Interface/ (save them as border.png and inner.png respectively) |
||||
</p> |
||||
|
||||
<p> |
||||
<img src="nbdocs:/com/jme3/gde/core/docs/jme3/advanced/inner1.png"> |
||||
<img src="nbdocs:/com/jme3/gde/core/docs/jme3/advanced/border1.png"> |
||||
</p> |
||||
|
||||
<p> |
||||
This is the progress bar at 90%: |
||||
</p> |
||||
|
||||
<p> |
||||
<img src="nbdocs:/com/jme3/gde/core/docs/jme3/advanced/loadingscreen.png"> |
||||
</p> |
||||
|
||||
<p> |
||||
nifty_loading.xml |
||||
|
||||
</p> |
||||
<pre><span><?xml version="1.0" encoding="UTF-8"?></span> |
||||
<span><span><nifty></span></span> |
||||
<span><useStyles filename="nifty-default-styles.xml" /></span> |
||||
<span><useControls filename="nifty-default-controls.xml" /></span> |
||||
|
||||
<span><controlDefinition name = "loadingbar" controller = "jme3test.TestLoadingScreen"></span> |
||||
<span><image filename="Interface/border.png" childLayout="absolute" </span> |
||||
<span> imageMode="resize:15,2,15,15,15,2,15,2,15,2,15,15"></span> |
||||
<span><image id="progressbar" x="0" y="0" filename="Interface/inner.png" width="32px" height="100%"</span> |
||||
<span> imageMode="resize:15,2,15,15,15,2,15,2,15,2,15,15" /></span> |
||||
<span><span></image></span></span> |
||||
<span><span></controlDefinition></span></span> |
||||
|
||||
<span><screen id="start" controller = "jme3test.TestLoadingScreen"></span> |
||||
<span><layer id="layer" childLayout="center"></span> |
||||
<span><panel id = "panel2" height="30%" width="50%" align="center" valign="center" childLayout="vertical"</span> |
||||
<span> visibleToMouse="true"></span> |
||||
<span><control id="startGame" name="button" backgroundColor="#0000" label="Load Game" align="center"></span> |
||||
<span><interact onClick="showLoadingMenu()" /></span> |
||||
<span><span></control></span></span> |
||||
<span><span></panel></span></span> |
||||
<span><span></layer></span></span> |
||||
<span><span></screen></span></span> |
||||
|
||||
<span><screen id="loadlevel" controller = "jme3test.TestLoadingScreen"></span> |
||||
<span><layer id="loadinglayer" childLayout="center" backgroundColor="#000000"></span> |
||||
<span><panel id = "loadingpanel" childLayout="vertical" align="center" valign="center" height="32px" width="400px"></span> |
||||
<span><control name="loadingbar" align="center" valign="center" width="400px" height="32px" /></span> |
||||
<span><control id="loadingtext" name="label" align="center" </span> |
||||
<span> text=" "/></span> |
||||
<span><span></panel></span></span> |
||||
<span><span></layer></span></span> |
||||
<span><span></screen></span></span> |
||||
|
||||
<span><screen id="end" controller = "jme3test.TestLoadingScreen"></span> |
||||
<span><span></screen></span></span> |
||||
|
||||
<span><span></nifty></span></span></pre> |
||||
|
||||
</div> |
||||
|
||||
<h4><a>Understanding Nifty XML</a></h4> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
The progress bar and text is done statically using nifty <acronym title="Extensible Markup Language">XML</acronym>. |
||||
A custom control is created, which represents the progress bar. |
||||
|
||||
</p> |
||||
<pre> <span><controlDefinition name = "loadingbar" controller = "jme3test.TestLoadingScreen"></span> |
||||
<span><image filename="Interface/border.png" childLayout="absolute" </span> |
||||
<span> imageMode="resize:15,2,15,15,15,2,15,2,15,2,15,15"></span> |
||||
<span><image id="progressbar" x="0" y="0" filename="Interface/inner.png" width="32px" height="100%"</span> |
||||
<span> imageMode="resize:15,2,15,15,15,2,15,2,15,2,15,15"/></span> |
||||
<span><span></image></span></span> |
||||
<span><span></controlDefinition></span></span></pre> |
||||
|
||||
<p> |
||||
This screen simply displays a button in the middle of the screen, which could be seen as a simple main menu UI. |
||||
|
||||
</p> |
||||
<pre> <span><screen id="start" controller = "jme3test.TestLoadingScreen"></span> |
||||
<span><layer id="layer" childLayout="center"></span> |
||||
<span><panel id = "panel2" height="30%" width="50%" align="center" valign="center" childLayout="vertical"</span> |
||||
<span> visibleToMouse="true"></span> |
||||
<span><control id="startGame" name="button" backgroundColor="#0000" label="Load Game" align="center"></span> |
||||
<span><interact onClick="showLoadingMenu()" /></span> |
||||
<span><span></control></span></span> |
||||
<span><span></panel></span></span> |
||||
<span><span></layer></span></span> |
||||
<span><span></screen></span></span></pre> |
||||
|
||||
<p> |
||||
This screen displays our custom progress bar control with a text control |
||||
|
||||
</p> |
||||
<pre> <span><screen id="loadlevel" controller = "jme3test.TestLoadingScreen"></span> |
||||
<span><layer id="loadinglayer" childLayout="center" backgroundColor="#000000"></span> |
||||
<span><panel id = "loadingpanel" childLayout="vertical" align="center" valign="center" height="32px" width="400px"></span> |
||||
<span><control name="loadingbar" align="center" valign="center" width="400px" height="32px" /></span> |
||||
<span><control id="loadingtext" name="label" align="center"</span> |
||||
<span> text=" "/></span> |
||||
<span><span></panel></span></span> |
||||
<span><span></layer></span></span> |
||||
<span><span></screen></span></span></pre> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Creating the bindings to use the Nifty XML</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
There are 3 main ways to update a progress bar. To understand why these methods are necessary, an understanding of the graphics pipeline is needed. |
||||
</p> |
||||
|
||||
<p> |
||||
Something like this in a single thread will not work: |
||||
|
||||
</p> |
||||
<pre>load_scene(); |
||||
update_bar(30%); |
||||
load_characters(); |
||||
update_bar(60%); |
||||
load_sounds(); |
||||
update_bar(100%);</pre> |
||||
|
||||
<p> |
||||
|
||||
If you do all of this in a single frame, then it is sent to the graphics card only after the whole code block has executed. By this time the bar has reached 100% and the game has already begun – for the user, the progressbar on the screen would not have visibly changed. |
||||
</p> |
||||
|
||||
<p> |
||||
The 3 main good solutions are: |
||||
</p> |
||||
<ol> |
||||
<li><div> Updating explicitly over many frames</div> |
||||
</li> |
||||
<li><div> Multi-threading</div> |
||||
</li> |
||||
<li><div> Using a custom AppState</div> |
||||
</li> |
||||
</ol> |
||||
|
||||
</div> |
||||
|
||||
<h4><a>Updating progress bar over a number of frames</a></h4> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
The idea is to break down the loading of the game into discrete parts |
||||
|
||||
</p> |
||||
<pre>package jme3test; |
||||
|
||||
import com.jme3.niftygui.NiftyJmeDisplay; |
||||
import de.lessvoid.nifty.Nifty; |
||||
import de.lessvoid.nifty.elements.Element; |
||||
import de.lessvoid.nifty.input.NiftyInputEvent; |
||||
import de.lessvoid.nifty.screen.Screen; |
||||
import de.lessvoid.nifty.screen.ScreenController; |
||||
import de.lessvoid.nifty.tools.SizeValue; |
||||
import com.jme3.app.SimpleApplication; |
||||
import com.jme3.material.Material; |
||||
import com.jme3.renderer.Camera; |
||||
import com.jme3.terrain.geomipmap.TerrainLodControl; |
||||
import com.jme3.terrain.heightmap.AbstractHeightMap; |
||||
import com.jme3.terrain.geomipmap.TerrainQuad; |
||||
import com.jme3.terrain.heightmap.ImageBasedHeightMap; |
||||
import com.jme3.texture.Texture; |
||||
import com.jme3.texture.Texture.WrapMode; |
||||
import de.lessvoid.nifty.controls.Controller; |
||||
import de.lessvoid.nifty.elements.render.TextRenderer; |
||||
import de.lessvoid.xml.xpp3.Attributes; |
||||
import java.util.ArrayList; |
||||
import java.util.List; |
||||
import java.util.Properties; |
||||
import jme3tools.converters.ImageToAwt; |
||||
|
||||
public class TestLoadingScreen extends SimpleApplication implements ScreenController, Controller { |
||||
|
||||
private NiftyJmeDisplay niftyDisplay; |
||||
private Nifty nifty; |
||||
private Element progressBarElement; |
||||
private TerrainQuad terrain; |
||||
private Material mat_terrain; |
||||
private float frameCount = 0; |
||||
private boolean load = false; |
||||
private TextRenderer textRenderer; |
||||
|
||||
public static void main(String[] args) { |
||||
TestLoadingScreen app = new TestLoadingScreen(); |
||||
app.start(); |
||||
} |
||||
|
||||
@Override |
||||
public void simpleInitApp() { |
||||
flyCam.setEnabled(false); |
||||
niftyDisplay = new NiftyJmeDisplay(assetManager, |
||||
inputManager, |
||||
audioRenderer, |
||||
guiViewPort); |
||||
nifty = niftyDisplay.getNifty(); |
||||
|
||||
nifty.fromXml("Interface/nifty_loading.xml", "start", this); |
||||
|
||||
guiViewPort.addProcessor(niftyDisplay); |
||||
} |
||||
|
||||
@Override |
||||
public void simpleUpdate(float tpf) { |
||||
|
||||
if (load == true) { //loading is done over many frames |
||||
if (frameCount == 1) { |
||||
Element element = nifty.getScreen("loadlevel").findElementByName("loadingtext"); |
||||
textRenderer = element.getRenderer(TextRenderer.class); |
||||
|
||||
mat_terrain = new Material(assetManager, "Common/MatDefs/Terrain/Terrain.j3md"); |
||||
mat_terrain.setTexture("Alpha", assetManager.loadTexture("Textures/Terrain/splat/alphamap.png")); |
||||
setProgress(0.2f, "Loading grass"); |
||||
|
||||
} else if (frameCount == 2) { |
||||
Texture grass = assetManager.loadTexture("Textures/Terrain/splat/grass.jpg"); |
||||
grass.setWrap(WrapMode.Repeat); |
||||
mat_terrain.setTexture("Tex1", grass); |
||||
mat_terrain.setFloat("Tex1Scale", 64f); |
||||
setProgress(0.4f, "Loading dirt"); |
||||
|
||||
} else if (frameCount == 3) { |
||||
Texture dirt = assetManager.loadTexture("Textures/Terrain/splat/dirt.jpg"); |
||||
|
||||
dirt.setWrap(WrapMode.Repeat); |
||||
mat_terrain.setTexture("Tex2", dirt); |
||||
mat_terrain.setFloat("Tex2Scale", 32f); |
||||
setProgress(0.5f, "Loading rocks"); |
||||
|
||||
} else if (frameCount == 4) { |
||||
Texture rock = assetManager.loadTexture("Textures/Terrain/splat/road.jpg"); |
||||
|
||||
rock.setWrap(WrapMode.Repeat); |
||||
|
||||
mat_terrain.setTexture("Tex3", rock); |
||||
mat_terrain.setFloat("Tex3Scale", 128f); |
||||
setProgress(0.6f, "Creating terrain"); |
||||
|
||||
} else if (frameCount == 5) { |
||||
AbstractHeightMap heightmap = null; |
||||
Texture heightMapImage = assetManager.loadTexture("Textures/Terrain/splat/mountains512.png"); |
||||
heightmap = new ImageBasedHeightMap( |
||||
ImageToAwt.convert(heightMapImage.getImage(), false, true, 0)); |
||||
|
||||
heightmap.load(); |
||||
terrain = new TerrainQuad("my terrain", 65, 513, heightmap.getHeightMap()); |
||||
setProgress(0.8f, "Positioning terrain"); |
||||
|
||||
} else if (frameCount == 6) { |
||||
terrain.setMaterial(mat_terrain); |
||||
|
||||
terrain.setLocalTranslation(0, -100, 0); |
||||
terrain.setLocalScale(2f, 1f, 2f); |
||||
rootNode.attachChild(terrain); |
||||
setProgress(0.9f, "Loading cameras"); |
||||
|
||||
} else if (frameCount == 7) { |
||||
List<Camera> cameras = new ArrayList<Camera>(); |
||||
cameras.add(getCamera()); |
||||
TerrainLodControl control = new TerrainLodControl(terrain, cameras); |
||||
terrain.addControl(control); |
||||
setProgress(1f, "Loading complete"); |
||||
|
||||
} else if (frameCount == 8) { |
||||
nifty.gotoScreen("end"); |
||||
nifty.exit(); |
||||
guiViewPort.removeProcessor(niftyDisplay); |
||||
flyCam.setEnabled(true); |
||||
flyCam.setMoveSpeed(50); |
||||
} |
||||
|
||||
frameCount++; |
||||
} |
||||
} |
||||
|
||||
public void setProgress(final float progress, String loadingText) { |
||||
final int MIN_WIDTH = 32; |
||||
int pixelWidth = (int) (MIN_WIDTH + (progressBarElement.getParent().getWidth() - MIN_WIDTH) * progress); |
||||
progressBarElement.setConstraintWidth(new SizeValue(pixelWidth + "px")); |
||||
progressBarElement.getParent().layoutElements(); |
||||
|
||||
textRenderer.setText(loadingText); |
||||
} |
||||
|
||||
public void showLoadingMenu() { |
||||
nifty.gotoScreen("loadlevel"); |
||||
load = true; |
||||
} |
||||
|
||||
@Override |
||||
public void onStartScreen() { |
||||
} |
||||
|
||||
@Override |
||||
public void onEndScreen() { |
||||
} |
||||
|
||||
@Override |
||||
public void bind(Nifty nifty, Screen screen) { |
||||
progressBarElement = nifty.getScreen("loadlevel").findElementByName("progressbar"); |
||||
} |
||||
|
||||
// methods for Controller |
||||
@Override |
||||
public boolean inputEvent(final NiftyInputEvent inputEvent) { |
||||
return false; |
||||
} |
||||
|
||||
@Override |
||||
public void bind(Nifty nifty, Screen screen, Attributes atrbts) { |
||||
progressBarElement = elmnt.findElementByName("progressbar"); |
||||
} |
||||
|
||||
@Override |
||||
public void init(Attributes atrbts) { |
||||
} |
||||
|
||||
public void onFocus(boolean getFocus) { |
||||
} |
||||
}</pre> |
||||
|
||||
<p> |
||||
Note: |
||||
</p> |
||||
<ul> |
||||
<li><div> Try and add all controls near the end, as their update loops may begin executing</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h4><a>Using multithreading</a></h4> |
||||
<div> |
||||
|
||||
<p> |
||||
For more info on multithreading: <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://jmonkeyengine.org/wiki/doku.php/jme3:advanced:multithreading"><param name="text" value="<html><u>http://jmonkeyengine.org/wiki/doku.php/jme3:advanced:multithreading</u></html>"><param name="textColor" value="blue"></object> |
||||
</p> |
||||
|
||||
<p> |
||||
Make sure to change the <acronym title="Extensible Markup Language">XML</acronym> file to point the controller to TestLoadingScreen<strong>1</strong> |
||||
|
||||
</p> |
||||
<pre>package jme3test; |
||||
|
||||
import com.jme3.niftygui.NiftyJmeDisplay; |
||||
import de.lessvoid.nifty.Nifty; |
||||
import de.lessvoid.nifty.elements.Element; |
||||
import de.lessvoid.nifty.input.NiftyInputEvent; |
||||
import de.lessvoid.nifty.screen.Screen; |
||||
import de.lessvoid.nifty.screen.ScreenController; |
||||
import de.lessvoid.nifty.tools.SizeValue; |
||||
import com.jme3.app.SimpleApplication; |
||||
import com.jme3.material.Material; |
||||
import com.jme3.renderer.Camera; |
||||
import com.jme3.terrain.geomipmap.TerrainLodControl; |
||||
import com.jme3.terrain.heightmap.AbstractHeightMap; |
||||
import com.jme3.terrain.geomipmap.TerrainQuad; |
||||
import com.jme3.terrain.heightmap.ImageBasedHeightMap; |
||||
import com.jme3.texture.Texture; |
||||
import com.jme3.texture.Texture.WrapMode; |
||||
import de.lessvoid.nifty.controls.Controller; |
||||
import de.lessvoid.nifty.elements.render.TextRenderer; |
||||
import de.lessvoid.xml.xpp3.Attributes; |
||||
import java.util.ArrayList; |
||||
import java.util.List; |
||||
import java.util.Properties; |
||||
import java.util.concurrent.Callable; |
||||
import java.util.concurrent.Future; |
||||
import java.util.concurrent.ScheduledThreadPoolExecutor; |
||||
import jme3tools.converters.ImageToAwt; |
||||
|
||||
public class TestLoadingScreen1 extends SimpleApplication implements ScreenController, Controller { |
||||
|
||||
private NiftyJmeDisplay niftyDisplay; |
||||
private Nifty nifty; |
||||
private Element progressBarElement; |
||||
private TerrainQuad terrain; |
||||
private Material mat_terrain; |
||||
private boolean load = false; |
||||
private ScheduledThreadPoolExecutor exec = new ScheduledThreadPoolExecutor(2); |
||||
private Future loadFuture = null; |
||||
private TextRenderer textRenderer; |
||||
|
||||
public static void main(String[] args) { |
||||
TestLoadingScreen1 app = new TestLoadingScreen1(); |
||||
app.start(); |
||||
} |
||||
|
||||
@Override |
||||
public void simpleInitApp() { |
||||
flyCam.setEnabled(false); |
||||
niftyDisplay = new NiftyJmeDisplay(assetManager, |
||||
inputManager, |
||||
audioRenderer, |
||||
guiViewPort); |
||||
nifty = niftyDisplay.getNifty(); |
||||
|
||||
nifty.fromXml("Interface/nifty_loading.xml", "start", this); |
||||
|
||||
guiViewPort.addProcessor(niftyDisplay); |
||||
} |
||||
|
||||
@Override |
||||
public void simpleUpdate(float tpf) { |
||||
if (load) { |
||||
if (loadFuture == null) { |
||||
//if we have not started loading yet, submit the Callable to the executor |
||||
loadFuture = exec.submit(loadingCallable); |
||||
} |
||||
//check if the execution on the other thread is done |
||||
if (loadFuture.isDone()) { |
||||
//these calls have to be done on the update loop thread, |
||||
//especially attaching the terrain to the rootNode |
||||
//after it is attached, it's managed by the update loop thread |
||||
// and may not be modified from any other thread anymore! |
||||
nifty.gotoScreen("end"); |
||||
nifty.exit(); |
||||
guiViewPort.removeProcessor(niftyDisplay); |
||||
flyCam.setEnabled(true); |
||||
flyCam.setMoveSpeed(50); |
||||
rootNode.attachChild(terrain); |
||||
load = false; |
||||
} |
||||
} |
||||
} |
||||
//this is the callable that contains the code that is run on the other thread. |
||||
//since the assetmananger is threadsafe, it can be used to load data from any thread |
||||
//we do *not* attach the objects to the rootNode here! |
||||
Callable<Void> loadingCallable = new Callable<Void>() { |
||||
|
||||
public Void call() { |
||||
|
||||
Element element = nifty.getScreen("loadlevel").findElementByName("loadingtext"); |
||||
textRenderer = element.getRenderer(TextRenderer.class); |
||||
|
||||
mat_terrain = new Material(assetManager, "Common/MatDefs/Terrain/Terrain.j3md"); |
||||
mat_terrain.setTexture("Alpha", assetManager.loadTexture("Textures/Terrain/splat/alphamap.png")); |
||||
//setProgress is thread safe (see below) |
||||
setProgress(0.2f, "Loading grass"); |
||||
|
||||
Texture grass = assetManager.loadTexture("Textures/Terrain/splat/grass.jpg"); |
||||
grass.setWrap(WrapMode.Repeat); |
||||
mat_terrain.setTexture("Tex1", grass); |
||||
mat_terrain.setFloat("Tex1Scale", 64f); |
||||
setProgress(0.4f, "Loading dirt"); |
||||
|
||||
Texture dirt = assetManager.loadTexture("Textures/Terrain/splat/dirt.jpg"); |
||||
|
||||
dirt.setWrap(WrapMode.Repeat); |
||||
mat_terrain.setTexture("Tex2", dirt); |
||||
mat_terrain.setFloat("Tex2Scale", 32f); |
||||
setProgress(0.5f, "Loading rocks"); |
||||
|
||||
Texture rock = assetManager.loadTexture("Textures/Terrain/splat/road.jpg"); |
||||
|
||||
rock.setWrap(WrapMode.Repeat); |
||||
|
||||
mat_terrain.setTexture("Tex3", rock); |
||||
mat_terrain.setFloat("Tex3Scale", 128f); |
||||
setProgress(0.6f, "Creating terrain"); |
||||
|
||||
AbstractHeightMap heightmap = null; |
||||
Texture heightMapImage = assetManager.loadTexture("Textures/Terrain/splat/mountains512.png"); |
||||
heightmap = new ImageBasedHeightMap( |
||||
ImageToAwt.convert(heightMapImage.getImage(), false, true, 0)); |
||||
|
||||
heightmap.load(); |
||||
terrain = new TerrainQuad("my terrain", 65, 513, heightmap.getHeightMap()); |
||||
setProgress(0.8f, "Positioning terrain"); |
||||
|
||||
terrain.setMaterial(mat_terrain); |
||||
|
||||
terrain.setLocalTranslation(0, -100, 0); |
||||
terrain.setLocalScale(2f, 1f, 2f); |
||||
setProgress(0.9f, "Loading cameras"); |
||||
|
||||
List<Camera> cameras = new ArrayList<Camera>(); |
||||
cameras.add(getCamera()); |
||||
TerrainLodControl control = new TerrainLodControl(terrain, cameras); |
||||
terrain.addControl(control); |
||||
setProgress(1f, "Loading complete"); |
||||
|
||||
return null; |
||||
} |
||||
}; |
||||
|
||||
public void setProgress(final float progress, final String loadingText) { |
||||
//since this method is called from another thread, we enqueue the changes to the progressbar to the update loop thread |
||||
enqueue(new Callable() { |
||||
|
||||
public Exception { |
||||
final int MIN_WIDTH = 32; |
||||
int pixelWidth = (int) (MIN_WIDTH + (progressBarElement.getParent().getWidth() - MIN_WIDTH) * progress); |
||||
progressBarElement.setConstraintWidth(new SizeValue(pixelWidth + "px")); |
||||
progressBarElement.getParent().layoutElements(); |
||||
|
||||
textRenderer.setText(loadingText); |
||||
return null; |
||||
} |
||||
}); |
||||
|
||||
} |
||||
|
||||
public void showLoadingMenu() { |
||||
nifty.gotoScreen("loadlevel"); |
||||
load = true; |
||||
} |
||||
|
||||
@Override |
||||
public void onStartScreen() { |
||||
} |
||||
|
||||
@Override |
||||
public void onEndScreen() { |
||||
} |
||||
|
||||
@Override |
||||
public void bind(Nifty nifty, Screen screen) { |
||||
progressBarElement = nifty.getScreen("loadlevel").findElementByName("progressbar"); |
||||
} |
||||
|
||||
// methods for Controller |
||||
@Override |
||||
public boolean inputEvent(final NiftyInputEvent inputEvent) { |
||||
return false; |
||||
} |
||||
|
||||
@Override |
||||
public void bind(Nifty nifty, Screen screen, Attributes atrbts) { |
||||
progressBarElement = elmnt.findElementByName("progressbar"); |
||||
} |
||||
|
||||
@Override |
||||
public void init(Attributes atrbts) { |
||||
} |
||||
|
||||
public void onFocus(boolean getFocus) { |
||||
} |
||||
}</pre> |
||||
|
||||
</div> |
||||
|
||||
<h4><a>Using Appstates</a></h4> |
||||
<div> |
||||
|
||||
<p> |
||||
TO DO |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
<p><em><a href="http://direct.jmonkeyengine.org/wiki/doku.php/jme3:advanced:loading_screen?do=export_xhtmlbody">view online version</a></em></p> |
||||
|
After Width: | Height: | Size: 2.1 KiB |
@ -1,65 +1,180 @@ |
||||
<h1><a |
||||
name="localizing_jme_3_games">Localizing jME 3 Games</a></h1><div |
||||
class="level1"></div><h2><a |
||||
name="scope">Scope</a></h2><div |
||||
class="level2"><p> Localizing an application can mean several things:</p><ul><li |
||||
class="level1"><div |
||||
class="li"> At minimum you translate all messages and dialogs in the user interface to your target languages.</div></li><li |
||||
class="level1"><div |
||||
class="li"> You should also translate the "read me", help, and other documentation.</div></li><li |
||||
class="level1"><div |
||||
class="li"> Also translating web content related to the application makes sure international users find out about your localized game.</div></li><li |
||||
class="level1"><div |
||||
class="li"> If you go the whole way of internationalization, you also "translate" metaphors in icons or symbols used. <br/> E.g. For localizations to right-to-left languages, you must also adjust the whole flow of the UI (order of menus and buttons).</div></li></ul><p> There are tools that assist you with localizing Java Swing GUIs. jME3 applications do not typically have a Swing <acronym |
||||
title="Graphical User Interface">GUI</acronym>, so those tools are not of much help. Just stick to the normal Java rules about using Bundle Properties:</p></div><h2><a |
||||
name="preparing_the_localization">Preparing the Localization</a></h2><div |
||||
class="level2"><p> <strong>Tip:</strong> The jMonkeyPlatform supports opening and editing Bundle.properties files. Also note the Tools > Localization menu.</p><p> To prepare the application for localization, you have to first identify all hard-coded messages.</p><ol><li |
||||
class="level1"><div |
||||
class="li"> Find every line in your jME3 game where you hard-coded message strings, e.g. <br/><pre>System.out.print("Hello World!"); |
||||
UiText.setText("Score: "+score);</pre></div></li><li |
||||
class="level1"><div |
||||
class="li"> Create one file named <code>Bundle.properties</code> in each directory where there are Java file that contain messages.</div></li><li |
||||
class="level1"><div |
||||
class="li"> For every hard-coded message, you add one line to the <code>Bundle.properties</code> file: First specify a unique key that identifies this string; then an equal sign; and the literal string itself. <br/><pre>greeting=Hello World! |
||||
score.display=Score: </pre></div></li><li |
||||
class="level1"><div |
||||
class="li"> In the source code, replace every occurence of a hard-coded message with the appropriate Resource Bundle call to its unique key:<pre>ResourceBundle.getBundle("Bundle").getString("greeting")); |
||||
UiText.setText(ResourceBundle.getBundle("Bundle").getString("score.display")+score);</pre></div></li></ol><p> The language used in the Bundle.properties files will be the default language for your game.</p></div><h2><a |
||||
name="translating_the_messages">Translating the Messages</a></h2><div |
||||
class="level2"><p> Each additional language comes in a set of files that is marked with a (usually) two-letter suffix. Common locales are de for German, en for English, fr for French, ja for Japanese, pt for Portuguese, etc.</p><p> To translate the messages to another language, for example, German:</p><ol><li |
||||
class="level1"><div |
||||
class="li"> Make a copy of the <code>Bundle.properties</code> files.</div></li><li |
||||
class="level1"><div |
||||
class="li"> Name the copy <code>Bundle_de.properties</code> for German. Note the added suffix _de.</div></li><li |
||||
class="level1"><div |
||||
class="li"> Translate all strings (text on the right side of the equal sign) in the <code>Bundle_de.properties</code> to German.<pre>greeting=Hallo Welt! |
||||
score.display=Spielstand: </pre><p> <strong>Important:</strong> Do not modify any of the keys (text to the left of the equal sign)!</p></div></li><li |
||||
class="level1"><div |
||||
class="li"> To test the German localization, start the application from the command line with <code>-Duser.language=de</code>. Note the parameter <code>de</code>.</div></li></ol><p> <strong>Tip:</strong> In the jMonkeyPlatform, you set this VM Option in the Project properties under Run. Here you can also save individual run configuraions for each language you want to test.</p><p> To get the full list of language suffixes use</p><pre>Locale.getISOLanguages()));</pre></div><h2><a |
||||
name="which_strings_not_to_translate">Which Strings Not to Translate</a></h2><div |
||||
class="level2"><p> <strong>Important:</strong> In the Bundle.properties file, do not include any strings that are asset paths, node or geometry names, input mappings, or material layers.</p><ul><li |
||||
class="level1"><div |
||||
class="li"> Keep material layers:<pre>mat.setTexture("ColorMap", tex);</pre></div></li><li |
||||
class="level1"><div |
||||
class="li"> Keep paths:<pre>teapot = assetManager.loadModel("Models/Teapot/Teapot.obj");</pre></div></li><li |
||||
class="level1"><div |
||||
class="li"> Keep geometry and node names:<pre>Geometry thing=new Geometry("A thing", mesh); |
||||
Node vehicle = new Node("Vehicle");</pre></div></li><li |
||||
class="level1"><div |
||||
class="li"> Keep mappings:<pre>inputManager.addMapping("Shoot", trigger); |
||||
inputManager.addListener(actionListener, "Shoot");</pre></div></li></ul><p> Only localize messages and UI text!</p></div><h2><a |
||||
name="common_localization_problems">Common Localization Problems</a></h2><div |
||||
class="level2"><p> Typical problems include:</p><ul><li |
||||
class="level1"><div |
||||
class="li"> Localized strings will be of vastly different lengths and will totally break your UI layout. ⇒ Test every localization</div></li><li |
||||
class="level1"><div |
||||
class="li"> Strings with variable text or numbers don't work the same in different languages. ⇒ Either work in grammatical cases/numbers/gender for each language, or find a work-around.</div></li><li |
||||
class="level1"><div |
||||
class="li"> The localizer only sees the strings, without any context. E.g. does "Search History" mean "display the history of searches", or "search through the history"? ⇒ Use clear key labels and work closely with the localizers if they require extra info.</div></li><li |
||||
class="level1"><div |
||||
class="li"> Broken international characters ⇒ Make sure the files are saved with the right character encoding for the language.</div></li></ul></div><h2><a |
||||
name="more_documentation">More Documentation</a></h2><div |
||||
class="level2"><p> <a |
||||
href="http://java.sun.com/developer/technicalArticles/Intl/ResourceBundles/">http://java.sun.com/developer/technicalArticles/Intl/ResourceBundles/</a></p><p> <a |
||||
href="http://sourceforge.net/apps/mediawiki/nifty-gui/index.php?title=Localisation">http://sourceforge.net/apps/mediawiki/nifty-gui/index.php?title=Localisation</a></p></div> |
||||
<p><em><a href="http://jmonkeyengine.org/wiki/doku.php/jme3:advanced:localization?do=export_xhtmlbody">view online version</a></em></p> |
||||
|
||||
<h1><a>Localizing jME 3 Games</a></h1> |
||||
<div> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Scope</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
Localizing an application can mean several things: |
||||
|
||||
</p> |
||||
<ul> |
||||
<li><div> At minimum you translate all messages and dialogs in the user interface to your target languages.</div> |
||||
</li> |
||||
<li><div> You should also translate the "read me", help, and other documentation.</div> |
||||
</li> |
||||
<li><div> Also translating web content related to the application makes sure international users find out about your localized game.</div> |
||||
</li> |
||||
<li><div> If you go the whole way of internationalization, you also "translate" metaphors in icons or symbols used. <br/> |
||||
E.g. For localizations to right-to-left languages, you must also adjust the whole flow of the UI (order of menus and buttons).</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
<p> |
||||
|
||||
There are tools that assist you with localizing Java Swing GUIs. jME3 applications do not typically have a Swing <acronym title="Graphical User Interface">GUI</acronym>, so those tools are not of much help. Just stick to the normal Java rules about using Bundle Properties: |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Preparing the Localization</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
<strong>Tip:</strong> The jMonkeyPlatform supports opening and editing Bundle.properties files. Also note the Tools > Localization menu. |
||||
</p> |
||||
|
||||
<p> |
||||
To prepare the application for localization, you have to first identify all hard-coded messages. |
||||
|
||||
</p> |
||||
<ol> |
||||
<li><div> Find every line in your jME3 game where you hard-coded message strings, e.g. <br/> |
||||
<pre>System.out.print("Hello World!"); |
||||
UiText.setText("Score: "+score);</pre> |
||||
</div> |
||||
</li> |
||||
<li><div> Create one file named <code>Bundle.properties</code> in each directory where there are Java file that contain messages.</div> |
||||
</li> |
||||
<li><div> For every hard-coded message, you add one line to the <code>Bundle.properties</code> file: First specify a unique key that identifies this string; then an equal sign; and the literal string itself. <br/> |
||||
<pre>greeting=Hello World! |
||||
score.display=Score: </pre> |
||||
</div> |
||||
</li> |
||||
<li><div> In the source code, replace every occurence of a hard-coded message with the appropriate Resource Bundle call to its unique key: <pre>ResourceBundle.getBundle("Bundle").getString("greeting")); |
||||
UiText.setText(ResourceBundle.getBundle("Bundle").getString("score.display")+score);</pre> |
||||
</div> |
||||
</li> |
||||
</ol> |
||||
|
||||
<p> |
||||
|
||||
The language used in the Bundle.properties files will be the default language for your game. |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Translating the Messages</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
Each additional language comes in a set of files that is marked with a (usually) two-letter suffix. Common locales are de for German, en for English, fr for French, ja for Japanese, pt for Portuguese, etc. |
||||
</p> |
||||
|
||||
<p> |
||||
To translate the messages to another language, for example, German: |
||||
|
||||
</p> |
||||
<ol> |
||||
<li><div> Make a copy of the <code>Bundle.properties</code> files.</div> |
||||
</li> |
||||
<li><div> Name the copy <code>Bundle_de.properties</code> for German. Note the added suffix _de.</div> |
||||
</li> |
||||
<li><div> Translate all strings (text on the right side of the equal sign) in the <code>Bundle_de.properties</code> to German. <pre>greeting=Hallo Welt! |
||||
score.display=Spielstand: </pre> |
||||
|
||||
<p> |
||||
<strong>Important:</strong> Do not modify any of the keys (text to the left of the equal sign)! |
||||
</p> |
||||
</div> |
||||
</li> |
||||
<li><div> To test the German localization, start the application from the command line with <code>-Duser.language=de</code>. Note the parameter <code>de</code>.</div> |
||||
</li> |
||||
</ol> |
||||
|
||||
<p> |
||||
|
||||
<strong>Tip:</strong> In the jMonkeyPlatform, you set this VM Option in the Project properties under Run. Here you can also save individual run configuraions for each language you want to test. |
||||
</p> |
||||
|
||||
<p> |
||||
To get the full list of language suffixes use |
||||
|
||||
</p> |
||||
<pre>Locale.getISOLanguages()));</pre> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Which Strings Not to Translate</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
<strong>Important:</strong> In the Bundle.properties file, do not include any strings that are asset paths, node or geometry names, input mappings, or material layers. |
||||
</p> |
||||
<ul> |
||||
<li><div> Keep material layers: <pre>mat.setTexture("ColorMap", tex);</pre> |
||||
</div> |
||||
</li> |
||||
<li><div> Keep paths: <pre>teapot = assetManager.loadModel("Models/Teapot/Teapot.obj");</pre> |
||||
</div> |
||||
</li> |
||||
<li><div> Keep geometry and node names: <pre>Geometry thing=new Geometry("A thing", mesh); |
||||
Node vehicle = new Node("Vehicle");</pre> |
||||
</div> |
||||
</li> |
||||
<li><div> Keep mappings: <pre>inputManager.addMapping("Shoot", trigger); |
||||
inputManager.addListener(actionListener, "Shoot");</pre> |
||||
</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
<p> |
||||
|
||||
Only localize messages and UI text! |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Common Localization Problems</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
Typical problems include: |
||||
</p> |
||||
<ul> |
||||
<li><div> Localized strings will be of vastly different lengths and will totally break your UI layout. ⇒ Test every localization</div> |
||||
</li> |
||||
<li><div> Strings with variable text or numbers don't work the same in different languages. ⇒ Either work in grammatical cases/numbers/gender for each language, or find a work-around.</div> |
||||
</li> |
||||
<li><div> The localizer only sees the strings, without any context. E.g. does "Search History" mean "display the history of searches", or "search through the history"? ⇒ Use clear key labels and work closely with the localizers if they require extra info.</div> |
||||
</li> |
||||
<li><div> Broken international characters ⇒ Make sure the files are saved with the right character encoding for the language.</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>More Documentation</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
<object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://java.sun.com/developer/technicalArticles/Intl/ResourceBundles/"><param name="text" value="<html><u>http://java.sun.com/developer/technicalArticles/Intl/ResourceBundles/</u></html>"><param name="textColor" value="blue"></object> |
||||
</p> |
||||
|
||||
<p> |
||||
<object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://sourceforge.net/apps/mediawiki/nifty-gui/index.php?title=Localisation"><param name="text" value="<html><u>http://sourceforge.net/apps/mediawiki/nifty-gui/index.php?title=Localisation</u></html>"><param name="textColor" value="blue"></object> |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
<p><em><a href="http://direct.jmonkeyengine.org/wiki/doku.php/jme3:advanced:localization?do=export_xhtmlbody">view online version</a></em></p> |
||||
@ -1,33 +1,98 @@ |
||||
<h1><a |
||||
name="logging_and_monitoring">Logging and Monitoring</a></h1><div |
||||
class="level1"></div><h2><a |
||||
name="development_phase_log_output">Development Phase Log Output</a></h2><div |
||||
class="level2"><p> Many developers just use System.out.println() to print diagnostic strings to the terminal. The problem with that is that before the release, you'd have to go through all your code and make certain you removed all these println() calls. You do not want your users to see them and worry about ominous strings babbling about old development diagnostics.</p><p> Instead of println(), you use the standard Java logger from <code>java.util.logging</code>. It has many advantages for professional game development:</p><ul><li |
||||
class="level1"><div |
||||
class="li"> You "tag" each message with a log level: Severe error, informative warning, etc.</div></li><li |
||||
class="level1"><div |
||||
class="li"> You can switch off printing of all messages up to certain log level with just one line of code.</div><ul><li |
||||
class="level2"><div |
||||
class="li"> During development, you would set the log level to fine, because you want all warnings printed.</div></li><li |
||||
class="level2"><div |
||||
class="li"> For the release, you set the log level to only report severe errors, and no informative diagnostics.</div></li></ul></li><li |
||||
class="level1"><div |
||||
class="li"> The logger string is localizable, since it contains variables. You may want to localize all errors.</div></li></ul><p> So to print comments like a pro, you use the following logger syntax. The variables a, b, c, can be any printable Java object, e.g. <code>Vector3f a = cam.getLocation()</code>. They are numbered {0},{1},{2},etc for use in the string, in the order you put them in the Object array.</p><pre>private static final Logger logger = Logger.getLogger(HelloWorld.class.getName());</pre><p> Replace HelloWorld by the name of the class where you are using this line.</p><pre>logger.log(Level.WARNING, "ok seriously wtf somebody check why {0} is {1} again?!", |
||||
new Object[]{a , b});</pre><p> or</p><pre>logger.log(Level.SEVERE, "Game error: {0} must not be {1} after {2}! Please check your flux generator.", |
||||
new Object[]{a , b , c});</pre><p> As you see in the example, you should phrase potentially "customer facing" errors in a neutral way and offer a reason and a solution. If you use WARNINGs as replacement for casual printlns, make sure you deactivate them for the release.</p><p> More details about <a |
||||
href="http://download.oracle.com/javase/6/docs/api/java/util/logging/Level.html">Java log levels</a> here.</p></div><h3><a |
||||
name="switching_the_logger_on_and_off">Switching the Logger on and off</a></h3><div |
||||
class="level3"><p> In the release version you will deactivate the logging output to the terminal.</p><p> To deactivate the default logger, you set the log level to only report severe messages:</p><pre>Logger.getLogger(””).setLevel(Level.SEVERE);</pre><p> To reactivate it:</p><pre>Logger.getLogger(””).setLevel(Level.FINE);</pre></div><h2><a |
||||
name="jmonkeyplatform_log_files">jMonkeyPlatform Log Files</a></h2><div |
||||
class="level2"><p> You find the jMonkeyPlatform log file in /dev/var/log/messages.log in the jMonkeyPlatform preferences folder. You can learn the location of the preferences folder in the “About” screen of the jMonkeyPlatform under the label <strong>Userdir</strong>.</p><ul><li |
||||
class="level1"><div |
||||
class="li"> Windows: C:\Documents and Settings\YOUR_NAME\.jmonkeyplatform\"</div></li><li |
||||
class="level1"><div |
||||
class="li"> Linux: /home/YOUR_NAME/.jmonkeyplatform/"</div></li><li |
||||
class="level1"><div |
||||
class="li"> Mac <acronym |
||||
title="Operating System">OS</acronym>: <code>/Users/YOUR_NAME/Library/Application Support/jmonkeyplatform/</code></div></li></ul></div><h2><a |
||||
name="read_graphic_card_capabilites">Read Graphic Card Capabilites</a></h2><div |
||||
class="level2"><p> You can read the graphic card's capabilities using the <code>com.jme3.renderer.Caps</code> class:</p><pre>Collection<Caps> caps = renderer.getCaps(); |
||||
Logger.getLogger(HelloWorld.class.getName()).log(Level.INFO, “Caps: {0}” + caps.toString()); </pre><p> Replace HelloWorld by the name of the class where you are using this line.</p><p> The result looks like the following example:</p><pre>Caps: [FrameBuffer, FrameBufferMRT, FrameBufferMultisample, OpenGL20, ARBprogram, GLSL100, GLSL110, GLSL120, VertexTextureFetch, FloatTexture, TextureCompressionLATC]</pre><p> This would tell you that this user's graphic card only supports OpenGL 2.0 and cannot handle newer OpenGL features.</p></div> |
||||
<p><em><a href="http://jmonkeyengine.org/wiki/doku.php/jme3:advanced:logging?do=export_xhtmlbody">view online version</a></em></p> |
||||
|
||||
<h1><a>Logging and Monitoring</a></h1> |
||||
<div> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Logging Like a Newb</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
Many developers just use System.out.println() to print diagnostic strings to the terminal. The problem with that is that before the release, you'd have to go through all your code and make certain you removed all these println() calls. You do not want your users to see them and worry about ominous strings babbling about old development diagnostics. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Logging Like a Pro</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
Instead of println(), you use the standard Java logger from <code>java.util.logging</code>. It has many advantages for professional game development: |
||||
</p> |
||||
<ul> |
||||
<li><div> You "tag" each message with a log level: Severe error, informative warning, etc.</div> |
||||
</li> |
||||
<li><div> You can switch off printing of all messages up to certain log level with just one line of code.</div> |
||||
<ul> |
||||
<li><div> During development, you would set the log level to fine, because you want all warnings printed.</div> |
||||
</li> |
||||
<li><div> For the release, you set the log level to only report severe errors, and no informative diagnostics.</div> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
<li><div> The logger string is localizable, since it contains variables. You may want to localize all errors.</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
<p> |
||||
|
||||
So to print comments like a pro, you use the following logger syntax. The variables a, b, c, can be any printable Java object, e.g. <code>Vector3f a = cam.getLocation()</code>. They are numbered {0},{1},{2},etc for use in the string, in the order you put them in the Object array. |
||||
</p> |
||||
<pre>private static final Logger logger = Logger.getLogger(HelloWorld.class.getName());</pre> |
||||
|
||||
<p> |
||||
|
||||
Replace HelloWorld by the name of the class where you are using this line. |
||||
|
||||
</p> |
||||
<pre>logger.log(Level.WARNING, "ok seriously wtf somebody check why {0} is {1} again?!", |
||||
new Object[]{a , b});</pre> |
||||
|
||||
<p> |
||||
|
||||
or |
||||
|
||||
</p> |
||||
<pre>logger.log(Level.SEVERE, "Game error: {0} must not be {1} after {2}! Please check your flux generator.", |
||||
new Object[]{a , b , c});</pre> |
||||
|
||||
<p> |
||||
As you see in the example, you should phrase potentially "customer facing" errors in a neutral way and offer a reason and a solution. If you use WARNINGs as replacement for casual printlns, make sure you deactivate them for the release. |
||||
</p> |
||||
|
||||
<p> |
||||
More details about <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://download.oracle.com/javase/6/docs/api/java/util/logging/Level.html"><param name="text" value="<html><u>Java log levels</u></html>"><param name="textColor" value="blue"></object> here. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Switching the Logger on and off</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
In the release version you will deactivate the logging output to the terminal. |
||||
</p> |
||||
|
||||
<p> |
||||
To deactivate the default logger for a release, you set the log level to only report severe messages: |
||||
|
||||
</p> |
||||
<pre>Logger.getLogger(””).setLevel(Level.SEVERE);</pre> |
||||
|
||||
<p> |
||||
During development, you can tune down the default logger, and set the log level to only report warnings: |
||||
|
||||
</p> |
||||
<pre>Logger.getLogger(””).setLevel(Level.WARNING);</pre> |
||||
|
||||
<p> |
||||
To reactivate full logging, e.g. for debugging and testing: |
||||
|
||||
</p> |
||||
<pre>Logger.getLogger(””).setLevel(Level.FINE);</pre> |
||||
|
||||
</div> |
||||
<p><em><a href="http://direct.jmonkeyengine.org/wiki/doku.php/jme3:advanced:logging?do=export_xhtmlbody">view online version</a></em></p> |
||||
@ -0,0 +1,176 @@ |
||||
|
||||
<h1><a>Making the Camera Follow a 3rd-Person Character</a></h1> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
When players steer a game character with 1st-person view, they directly steer the camera (<code>flyCam.setEnabled(true);</code>), and they never see the walking character itself. In a game with 3rd-person view, however, the players see the character walk, and you (the game developer) want to make the camera follow the character around when it walks. |
||||
</p> |
||||
|
||||
<p> |
||||
There are two ways how the camera can do that: |
||||
</p> |
||||
<ul> |
||||
<li><div> Registering a chase camera to the player and the input manager.</div> |
||||
</li> |
||||
<li><div> Attaching the camera to the character using a camera node.</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
<p> |
||||
|
||||
<strong>Important:</strong> Using third-person view requires you to deactivate the default flyCam (first-person view). This means that you have to configure your own navigation (<a href="/com/jme3/gde/core/docs/jme3/advanced/input_handling.html">key inputs and analogListener</a>) that make your player character walk. For moving a physical player character, use <code>player.setWalkDirection()</code>, for a non-pysical character you can use <code>player.move()</code>. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Code Samples</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
Press the WASD or arrow keys to move. Drag with the left mouse button to rotate. |
||||
</p> |
||||
<ul> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/input/TestChaseCamera.java"><param name="text" value="<html><u>TestChaseCamera.java</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/input/TestCameraNode.java"><param name="text" value="<html><u>TestCameraNode.java</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Camera Node</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
To make the camera follow a target node, add this camera node code to your init method (e.g. <code>simpleInitApp()</code>). The <code>target</code> spatial is typically the player node. |
||||
</p> |
||||
<pre>// Disable the default flyby cam |
||||
flyCam.setEnabled(false); |
||||
//create the camera Node |
||||
camNode = new CameraNode("Camera Node", cam); |
||||
//This mode means that camera copies the movements of the target: |
||||
camNode.setControlDir(ControlDirection.SpatialToCamera); |
||||
//Move camNode, e.g. behind and above the target: |
||||
camNode.setLocalTranslation(new Vector3f(0, 5, -5)); |
||||
//Rotate the camNode to look at the target: |
||||
camNode.lookAt(target.getLocalTranslation(), Vector3f.UNIT_Y); |
||||
//Attach the camNode to the target: |
||||
target.attachChild(camNode);</pre> |
||||
|
||||
<p> |
||||
<strong>Important:</strong> Where the example says <code>camNode.setLocalTranslation(new Vector3f(0, 5, -5));</code>, you have to supply your own start position for the camera. This depends on the size of your target (the player character) and its position in your particular scene. Optimally, you set this to a spot a bit behind and above the target. |
||||
|
||||
</p> |
||||
<div><table> |
||||
<tr> |
||||
<th>Methods</th><th>Description</th> |
||||
</tr> |
||||
<tr> |
||||
<td>setControlDir(ControlDirection.SpatialToCamera)</td><td>User input steers the target spatial, and the camera follows the spatial.<br/> |
||||
The spatial's transformation is copied over the camera's transformation. <br/> |
||||
Example: Use with <a href="/com/jme3/gde/core/docs/jme3/advanced/physics.html">CharacterControl</a>led spatial.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>setControlDir(ControlDirection.CameraToSpatial)</td><td>User input steers the camera, and the target spatial follows the camera. <br/> |
||||
The camera's transformation is copied over the spatial's transformation.</td> |
||||
</tr> |
||||
</table></div> |
||||
<!-- EDIT1 TABLE [2445-2926] --> |
||||
<p> |
||||
|
||||
<strong>Code sample:</strong> |
||||
</p> |
||||
<ul> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/input/TestCameraNode.java"><param name="text" value="<html><u>TestCameraNode.java</u></html>"><param name="textColor" value="blue"></object> – Press the WASD or arrow keys to move. Drag with the left mouse button to rotate.</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Chase Camera</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
To activate the chase camera, add the following code to your init method (e.g. <code>simpleInitApp()</code>). The <code>target</code> spatial is typically the player node. You will be able to rotate the target by dragging (keeping the left mouse button pressed and moving the mouse). |
||||
</p> |
||||
<pre>// Disable the default flyby cam |
||||
flyCam.setEnabled(false); |
||||
// Enable a chase cam for this target (typically the player). |
||||
ChaseCamera chaseCam = new ChaseCamera(cam, target, inputManager); |
||||
chaseCam.setSmoothMotion(true);</pre> |
||||
<div><table> |
||||
<tr> |
||||
<th>Method</th><th>Description</th> |
||||
</tr> |
||||
<tr> |
||||
<td>setInvertVerticalAxis(true)</td><td>Invert the camera's vertical rotation Axis </td> |
||||
</tr> |
||||
<tr> |
||||
<td>setInvertHorizontalAxis(true)</td><td>Invert the camera's horizontal rotation Axis</td> |
||||
</tr> |
||||
<tr> |
||||
<td>setTrailingEnabled(true)</td><td>Camera follows the target and flies around and behind when the target moves towards the camera. Trailing only works with smooth motion enabled. (Default)</td> |
||||
</tr> |
||||
<tr> |
||||
<td>setTrailingEnabled(false)</td><td>Camera follows the target, but does not rotate around the target when the target changes direction.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>setSmoothMotion(true)</td><td>Activate SmoothMotion when trailing. This means the camera seems to accelerate and fly after the character, when it has caught up, it slows down again.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>setSmoothMotion(false)</td><td>Disable smooth camera motion. Disabling SmoothMotion also disables trailing.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>setLookAtOffset(Vector3f.UNIT_Y.mult(3))</td><td>Camera looks at a point 3 world units above the target.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>setToggleRotationTrigger(new MouseButtonTrigger(MouseInput.BUTTON_MIDDLE))</td><td>Enable rotation by keeping the middle mouse button pressed (like in Blender). This disables the rotation on right and left mouse button click.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>setToggleRotationTrigger(new MouseButtonTrigger(<br/> |
||||
MouseInput.BUTTON_MIDDLE),<br/> |
||||
new KeyTrigger(KeyInput.KEY_SPACE))</td><td>Activate mutiple triggers for the rotation of the camera, e.g. spacebar and middle mouse button, etc.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>setRotationSensitivity(5f)</td><td>How fast the camera rotates. Use values around <1.0f (all bigger values are ignored).</td> |
||||
</tr> |
||||
</table></div> |
||||
<!-- EDIT2 TABLE [3702-5114] --> |
||||
<p> |
||||
|
||||
<strong>Code sample:</strong> |
||||
</p> |
||||
<ul> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/input/TestChaseCamera.java"><param name="text" value="<html><u>TestChaseCamera.java</u></html>"><param name="textColor" value="blue"></object> – Press the WASD or arrow keys to move. Drag with the left mouse button to rotate.</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Which to Choose?</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
What is the difference of the two code samples above? |
||||
|
||||
</p> |
||||
<div><table> |
||||
<tr> |
||||
<th>CameraNode</th><th>ChaseCam</th> |
||||
</tr> |
||||
<tr> |
||||
<td>Camera follows immediately, flies at same speed as target.</td><td>Camera moves smoothly and accelerates and decelerates, flies more slowly than the target and catches up.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>Camera stays attached to the target at a constant distance.</td><td>Camera orbits the target and approaches slowly.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>Drag-to-Rotate rotates the target and the camera. You always see the target from behind.</td><td>Drag-to-Rotate rotates only the camera. You can see the target from various sides.</td> |
||||
</tr> |
||||
</table></div> |
||||
<!-- EDIT3 TABLE [5443-5914] --> |
||||
</div> |
||||
<p><em><a href="http://direct.jmonkeyengine.org/wiki/doku.php/jme3:advanced:making_the_camera_follow_a_character?do=export_xhtmlbody">view online version</a></em></p> |
||||
@ -1,56 +1,113 @@ |
||||
<h1><a |
||||
name="how_to_use_material_definitions_j3md">How to Use Material Definitions (.j3md)</a></h1><div |
||||
class="level1"><p> Typically, you create a set of custom materials, and use them throughout the game. For example, you can initialize and configure your materials objects in the <code>initSimpleApp()</code> method, and then load 3D models (Geometries) and use setMaterial() on them.</p><p> <strong>Tip:</strong> If you use one custom material very often, additionally read about storing material configurations in user-friendly <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/j3m_material_files.html">j3m Material Files</a>.</p></div><h2><a |
||||
name="preparing_a_material">Preparing a Material</a></h2><div |
||||
class="level2"><ol><li |
||||
class="level1"><div |
||||
class="li"> Choose a Material Definition from the <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/materials_overview.html">Materials Overview</a> list that has the features that you need.</div><ul><li |
||||
class="level2"><div |
||||
class="li"> Tip: If you don't know, you can always start with <code>Unshaded.j3md</code>.</div></li></ul></li><li |
||||
class="level1"><div |
||||
class="li"> Look at the applicable parameters of the Material Definition and determine which ones you need to achieve the desired effect. Most parameters are optional.</div><ol><li |
||||
class="level2"><div |
||||
class="li"> Create and save the necessary Texture files to the assets directory.</div><ul><li |
||||
class="level3"><div |
||||
class="li"> E.g. ColorMap; DiffuseMap, NormalMap, AlphaMap, etc…</div></li></ul></li><li |
||||
class="level2"><div |
||||
class="li"> Determine the required values to achieve the effect that you want.</div><ul><li |
||||
class="level3"><div |
||||
class="li"> E.g. Colors, floats, booleans, etc…</div></li></ul></li></ol></li></ol></div><h2><a |
||||
name="using_a_material">Using a Material</a></h2><div |
||||
class="level2"><ol><li |
||||
class="level1"><div |
||||
class="li"> In you Java code, create a Material object based on the .j3md file: e.g.<pre>Material mat = new Material(assetManager, "Common/MatDefs/Misc/Unshaded.j3md");</pre></div></li><li |
||||
class="level1"><div |
||||
class="li"> Configure your Material by setting the appropriate values listed in the <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/materials_overview.html">Materials Overview</a> table. Here are examples of the methods that set the different data types:</div><ul><li |
||||
class="level2"><div |
||||
class="li"> <code>mat.setColor( "Color", ColorRGBA.White );</code></div></li><li |
||||
class="level2"><div |
||||
class="li"> <code>mat.setTexture( "ColorMap", assetManager.loadTexture("Interface/Logo/Monkey.png" ));</code></div></li><li |
||||
class="level2"><div |
||||
class="li"> <code>mat.setFloat( "Shininess", 5f);</code></div></li><li |
||||
class="level2"><div |
||||
class="li"> <code>mat.setBoolean( "SphereMap", true);</code></div></li><li |
||||
class="level2"><div |
||||
class="li"> <code>mat.setVector3( "NormalScale", new Vector3f(1f,1f,1f));</code></div></li></ul></li><li |
||||
class="level1"><div |
||||
class="li"> Use your prepared material on a Geometry:<pre>myGeometry.setMaterial(mat);</pre></div></li><li |
||||
class="level1"><div |
||||
class="li"> (Optional) Adjust the texture scale:<pre>geometry.scaleTextureCoordinates(new Vector2f(1f, .5f));</pre></div></li></ol></div><h2><a |
||||
name="examples">Examples</a></h2><div |
||||
class="level2"><p> A simpled textured material.</p><pre>Material mat = new Material(assetManager, |
||||
|
||||
<h1><a>How to Use Material Definitions (.j3md)</a></h1> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
Typically, you create a set of custom materials, and use them throughout the game. For example, you can initialize and configure your materials objects in the <code>initSimpleApp()</code> method, and then load 3D models (Geometries) and use setMaterial() on them. |
||||
</p> |
||||
|
||||
<p> |
||||
<strong>Tip:</strong> If you use one custom material very often, additionally read about storing material configurations in user-friendly <a href="/com/jme3/gde/core/docs/jme3/advanced/j3m_material_files.html">j3m Material Files</a>. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Preparing a Material</a></h2> |
||||
<div> |
||||
<ol> |
||||
<li><div> Choose a Material Definition from the <a href="/com/jme3/gde/core/docs/jme3/advanced/materials_overview.html">Materials Overview</a> list that has the features that you need. </div> |
||||
<ul> |
||||
<li><div> Tip: If you don't know, you can always start with <code>Unshaded.j3md</code>.</div> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
<li><div> Look at the applicable parameters of the Material Definition and determine which ones you need to achieve the desired effect. Most parameters are optional.</div> |
||||
<ol> |
||||
<li><div> Create and save the necessary Texture files to the assets directory.</div> |
||||
<ul> |
||||
<li><div> E.g. ColorMap; DiffuseMap, NormalMap, AlphaMap, etc…</div> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
<li><div> Determine the required values to achieve the effect that you want.</div> |
||||
<ul> |
||||
<li><div> E.g. Colors, floats, booleans, etc… </div> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
</ol> |
||||
</li> |
||||
</ol> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Using a Material</a></h2> |
||||
<div> |
||||
<ol> |
||||
<li><div> In you Java code, create a Material object based on the .j3md file: e.g. <pre>Material mat = new Material(assetManager, "Common/MatDefs/Misc/Unshaded.j3md");</pre> |
||||
</div> |
||||
</li> |
||||
<li><div> Configure your Material by setting the appropriate values listed in the <a href="/com/jme3/gde/core/docs/jme3/advanced/materials_overview.html">Materials Overview</a> table. Here are examples of the methods that set the different data types:</div> |
||||
<ul> |
||||
<li><div> <code>mat.setColor( "Color", ColorRGBA.White );</code></div> |
||||
</li> |
||||
<li><div> <code>mat.setTexture( "ColorMap", assetManager.loadTexture("Interface/Logo/Monkey.png" ));</code></div> |
||||
</li> |
||||
<li><div> <code>mat.setFloat( "Shininess", 5f);</code></div> |
||||
</li> |
||||
<li><div> <code>mat.setBoolean( "SphereMap", true);</code></div> |
||||
</li> |
||||
<li><div> <code>mat.setVector3( "NormalScale", new Vector3f(1f,1f,1f));</code></div> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
<li><div> Use your prepared material on a Geometry: <pre>myGeometry.setMaterial(mat);</pre> |
||||
</div> |
||||
</li> |
||||
<li><div> (Optional) Adjust the texture scale: <pre>geometry.scaleTextureCoordinates(new Vector2f(1f, .5f));</pre> |
||||
</div> |
||||
</li> |
||||
</ol> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Examples</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
A simpled textured material. |
||||
|
||||
</p> |
||||
<pre>Material mat = new Material(assetManager, |
||||
"Common/MatDefs/Misc/Unshaded.j3md"); |
||||
mat.setTexture("ColorMap", assetManager.loadTexture( |
||||
"Interface/Logo/Monkey.jpg"));</pre><p> A textured material with a color bleeding through transparent areas.</p><pre>Material mat = new Material(assetManager, |
||||
"Interface/Logo/Monkey.jpg"));</pre> |
||||
|
||||
<p> |
||||
A textured material with a color bleeding through transparent areas. |
||||
|
||||
</p> |
||||
<pre>Material mat = new Material(assetManager, |
||||
"Common/MatDefs/Misc/Unshaded.j3md"); |
||||
mat.setTexture("ColorMap", assetManager.loadTexture( |
||||
"Textures/ColoredTex/Monkey.png")); |
||||
mat.setColor("Color", ColorRGBA.Blue);</pre><p> You can test these examples within the following code snippet. It creates a box and applies the material:</p><pre> Box(Vector3f.ZERO, 1, 1, 1); |
||||
mat.setColor("Color", ColorRGBA.Blue);</pre> |
||||
|
||||
<p> |
||||
You can test these examples within the following code snippet. It creates a box and applies the material: |
||||
</p> |
||||
<pre> Box(Vector3f.ZERO, 1, 1, 1); |
||||
Geometry geom = new Geometry("Box", b); |
||||
// ... insert Material definition... |
||||
geom.setMaterial(mat); |
||||
rootNode.attachChild(geom);</pre><p> <strong>Tip:</strong> You can find these and other common code snippets in the jMonkeyPlatform Code Palette. Drag and drop them into your source code.</p></div> |
||||
<p><em><a href="http://jmonkeyengine.org/wiki/doku.php/jme3:advanced:material_definitions?do=export_xhtmlbody">view online version</a></em></p> |
||||
rootNode.attachChild(geom);</pre> |
||||
|
||||
<p> |
||||
<strong>Tip:</strong> You can find these and other common code snippets in the jMonkeyPlatform Code Palette. Drag and drop them into your source code. |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
<p><em><a href="http://direct.jmonkeyengine.org/wiki/doku.php/jme3:advanced:material_definitions?do=export_xhtmlbody">view online version</a></em></p> |
||||
@ -1,146 +1,279 @@ |
||||
<h1><a |
||||
name="materials_overview">Materials Overview</a></h1><div |
||||
class="level1"><p> This table shows you which material definitions jME supplies by default, and how to make the most of your designer's 3D models by using material parameters. |
||||
If you are looking for information about how to use these materials in code, look at <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/material_definitions.html">Material Definitions</a> and <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/j3m_material_files.html">j3M Material Files</a>. <br/> <strong>Tip:</strong> The two most commonly used materials are Lighting.j3md and Unshaded.j3md (standard materials with and without Phong illumination, respectively).</p></div><h2><a |
||||
name="table_of_material_definitions">Table of Material Definitions</a></h2><div |
||||
class="level2"><p> Some parameters are "optional" because they are somewhat advanced. If you don't know what an option means, chances are that you are not using this feature in your textures – and you don't need to specify it. (E.g. YCoCg and LATC are image compression formats; Minnaert and WardIso are shader types.) |
||||
Also note that many other parameters are optional, even if they are not explicitly marked optional. For example, it's okay to specify solely the <code>DiffuseMap</code> and <code>NormalMap</code> when using <code>Lighting.j3md</code>. You are only using a subset of what is possible, but if that's what you want, you can do that. The developer should be in contact with the designer regarding what jME features individual Materials/Textures require.</p></div><h3><a |
||||
name="coloring_and_standard_textures">Coloring and Standard Textures</a></h3><div |
||||
class="level3"><div |
||||
class="table sectionedit1"><table |
||||
class="inline"><tr |
||||
class="row0"><th |
||||
class="col0 leftalign"> Material Definition</th><th |
||||
class="col1"> Usage</th><th |
||||
class="col2 leftalign"> Parameter : Type</th></tr><tr |
||||
class="row1"><td |
||||
class="col0"> Common/MatDefs/Misc/Unshaded.j3md</td><td |
||||
class="col1"> Standard unlit Material. Use this for simple coloring, simple texturing, simple glow, simple transparency. <br/> See also: <a |
||||
href="/com/jme3/gde/core/docs/jme3/beginner/hello_material.html">Hello Material</a></td><td |
||||
class="col2"> ColorMap : Texture <br/> LightMap : Texture <br/> Color : Color <br/> VertexColor : Boolean <br/> SeparateTexCoord : Boolean <br/> GlowMap : Texture <br/> GlowColor: Color</td></tr><tr |
||||
class="row2"><td |
||||
class="col0 leftalign"> Common/MatDefs/Misc/Sky.j3md</td><td |
||||
class="col1"> A solid skyblue, or use with a custom SkyDome texture. <br/> See also: <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/sky.html">Sky</a></td><td |
||||
class="col2"> Texture : TextureCubeMap <br/> SphereMap : Boolean <br/> NormalScale : Vector3</td></tr><tr |
||||
class="row3"><td |
||||
class="col0"> Common/MatDefs/Terrain/Terrain.j3md</td><td |
||||
class="col1"> Splat textures for e.g. terrains. <br/> See also: <a |
||||
href="/com/jme3/gde/core/docs/jme3/beginner/hello_terrain.html">Hello Terrain</a></td><td |
||||
class="col2"> Texture1 : Texture (red) <br/> Texture1Scale : Float <br/> Texture2 : Texture (green) <br/> Texture2Scale : Float <br/> Texture3 : Texture (blue) <br/> Texture3Scale : Float <br/> Alpha : Texture</td></tr><tr |
||||
class="row4"><td |
||||
class="col0 leftalign"> Common/MatDefs/Misc/Particle.j3md</td><td |
||||
class="col1"> Used with texture masks for particle effects, or for point sprites. <br/> The Quadratic value scales the particle for perspective view (<a |
||||
href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/core/com/jme3/effect/ParticleEmitter.java">formula</a>). <br/> Does support an optional colored glow effect. <br/> See also: <a |
||||
href="/com/jme3/gde/core/docs/jme3/beginner/hello_effects.html">Hello Effects</a></td><td |
||||
class="col2"> Texture : Texture <br/> GlowMap : Texture <br/> GlowColor : Color <br/> Quadratic : Float <br/> PointSprite : Boolean</td></tr></table></div><p> <br/></p></div><h3><a |
||||
name="light_and_shadow">Light and Shadow</a></h3><div |
||||
class="level3"><div |
||||
class="table sectionedit2"><table |
||||
class="inline"><tr |
||||
class="row0"><th |
||||
class="col0 leftalign"> Material Definition</th><th |
||||
class="col1"> Usage</th><th |
||||
class="col2 leftalign"> Parameters</th></tr><tr |
||||
class="row1"><td |
||||
class="col0 leftalign"> Common/MatDefs/Light/Lighting.j3md</td><td |
||||
class="col1"> Standard lit material with Phong Illumination. Use this material together with DiffuseMap, SpecularMap, BumpMap (NormalMaps, ParalaxMap) textures. Supports shininess, transparency, and plain material colors (Diffuse, Ambient, Specular colors). <br/> See also: <a |
||||
href="/com/jme3/gde/core/docs/jme3/beginner/hello_material.html">Hello Material</a> <br/> <strong>Note:</strong> Lit materials require a <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/light_and_shadow.html">light source</a>! Glowing materials require a <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/bloom_and_glow.html">FilterPostProcessor</a>!</td><td |
||||
class="col2"> DiffuseMap : Texture <br/> UseAlpha<sup><a |
||||
href="#fn__1">1)</a></sup> : Boolean <br/> NormalMap : Texture <br/> LATC<sup><a |
||||
href="#fn__2">2)</a></sup> : Boolean <br/> SpecularMap : Texture <br/> Shininess : Float <br/> ParallaxMap : Texture <br/> AlphaMap : Texture <br/> AlphaDiscardThreshold: Float <br/> ColorRamp : Texture <br/> <strong>Glow (optional)</strong> <br/> GlowMap : Texture <br/> GlowColor : Color <br/> <strong>Performance and quality (optional)</strong> <br/> VertexLighting : Boolean <br/> UseVertexColor : Boolean <br/> LowQuality : Boolean <br/> HighQuality : Boolean <br/> <strong>Material Colors (optional)</strong> <br/> UseMaterialColors : Boolean <br/> Diffuse : Color <br/> Ambient : Color <br/> Specular : Color <br/> <strong>Tangent shading (optional):</strong> <br/> VTangent : Boolean <br/> Minnaert<sup><a |
||||
href="#fn__3">3)</a></sup> : Boolean <br/> WardIso<sup><a |
||||
href="#fn__4">4)</a></sup> : Boolean</td></tr><tr |
||||
class="row2"><td |
||||
class="col0">Common/MatDefs/Terrain/TerrainLighting.j3md</td><td |
||||
class="col1">Same kind of splat texture as Terrain.j3md, but with shading. <br/> Requires a light source.</td><td |
||||
class="col2">Color Diffuse : Color <br/> Ambient : Color <br/> Shininess : Float <br/> Specular : Color <br/> SpecularMap : Texture <br/> WardIso : Boolean <br/> useTriPlanarMapping : Boolean <br/> <strong>Texture Splat Maps</strong> <br/> DiffuseMap : Texture <br/> DiffuseMap_0_scale : Float <br/> NormalMap : Texture <br/> DiffuseMap_1 : Texture <br/> DiffuseMap_1_scale : Float <br/> NormalMap_1 : Texture <br/> DiffuseMap_2 : Texture <br/> DiffuseMap_2_scale : Float <br/> NormalMap_2 : Texture <br/> DiffuseMap_3 : Texture <br/> DiffuseMap_3_scale : Float <br/> NormalMap_3 : Texture <br/> <strong>Alpha Maps</strong> <br/> AlphaMap : Texture <br/> AlphaMap_1 : Texture <br/> AlphaMap_2 : Texture <br/> <strong>Glowing</strong> <br/> GlowMap : Texture <br/> GlowColor : Color</td></tr><tr |
||||
class="row3"><td |
||||
class="col0 leftalign"> Common/MatDefs/Light/Reflection.j3md</td><td |
||||
class="col1"> Reflective glass material with environment map (CubeMap/SphereMap). <br/> Requires light source. <br/> See also: <a |
||||
href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/texture/TestCubeMap.java">TestCubeMap.java</a></td><td |
||||
class="col2"> Texture : Texture <br/> SphereMap: Boolean</td></tr></table></div></div><h3><a |
||||
name="testing_and_debugging">Testing and Debugging</a></h3><div |
||||
class="level3"><div |
||||
class="table sectionedit3"><table |
||||
class="inline"><tr |
||||
class="row0"><th |
||||
class="col0 leftalign"> Material Definition</th><th |
||||
class="col1"> Usage</th><th |
||||
class="col2 leftalign"> Parameters</th></tr><tr |
||||
class="row1"><td |
||||
class="col0 leftalign"> Common/MatDefs/Misc/ShowNormals.j3md</td><td |
||||
class="col1"> A color gradient calculated from the model's surface normals. You can use this built-in material to test models that have no material, or as fall-back default material.</td><td |
||||
class="col2"> –</td></tr></table></div><p> <br/> <strong>Note:</strong> Common/MatDefs/Misc/SimpleTextured.j3md, ColoredTextured.j3md, VertexColor.j3md, Wireframe.j3md have been deprecated. Use equivalent features of Unshaded.j3md instead.</p></div><h2><a |
||||
name="transparency">Transparency</a></h2><div |
||||
class="level2"><p> Most Material Definitions support an alpha channel for transparency. In an RGBA color, the last float is the alpha channel: 0.0f is transparent, 1.0f is opaque. <br/> For example: <code>mat.setColor("Color", new ColorRGBA(1,0,0,0.5f));</code> is a half-opaque red. <br/> Additionally, you must specify a blendmode:</p><div |
||||
class="table sectionedit4"><table |
||||
class="inline"><tr |
||||
class="row0"><th |
||||
class="col0">Option</th><th |
||||
class="col1">Usage</th></tr><tr |
||||
class="row1"><td |
||||
class="col0">mat.getAdditionalRenderState().setBlendMode(BlendMode.Off);</td><td |
||||
class="col1">Opaque</td></tr><tr |
||||
class="row2"><td |
||||
class="col0">mat.getAdditionalRenderState().setBlendMode(BlendMode.Alpha);</td><td |
||||
class="col1">Use this for normal transparency. Interpolates the background pixel with the current by using the current pixel's alpha. E.g. alpha-blended vegetation.</td></tr><tr |
||||
class="row3"><td |
||||
class="col0">mat.getAdditionalRenderState().setBlendMode(BlendMode.Additive);</td><td |
||||
class="col1">Additive alpha blending adds colors in a commutative way, i.e. the result does not depend on the order of transparent layers. Adds the background pixel color with the current pixel color. E.g. particle effects that have black color as background.</td></tr><tr |
||||
class="row4"><td |
||||
class="col0">mat.getAdditionalRenderState().setBlendMode(BlendMode.AlphaAdditive);</td><td |
||||
class="col1">Same as "Additive", except first it multiplies the current pixel color by the pixel alpha. E.g. used for particle effects that have alpha as background.</td></tr><tr |
||||
class="row5"><td |
||||
class="col0">mat.getAdditionalRenderState().setBlendMode(BlendMode.Color);</td><td |
||||
class="col1">Blends by color. Generally useless.</td></tr><tr |
||||
class="row6"><td |
||||
class="col0">mat.getAdditionalRenderState().setBlendMode(BlendMode.Modulate);</td><td |
||||
class="col1">Multiplies the background pixel by the current pixel.</td></tr><tr |
||||
class="row7"><td |
||||
class="col0">mat.getAdditionalRenderState().setBlendMode(BlendMode.ModulateX2);</td><td |
||||
class="col1">Same as "Modulate", except the result is doubled.</td></tr><tr |
||||
class="row8"><td |
||||
class="col0">mat.getAdditionalRenderState().setBlendMode(BlendMode.PremultAlpha);</td><td |
||||
class="col1">Pre-multiplied alpha blending. E.g. if the color of the object has already been multiplied by its alpha, this is used instead of "Alpha" blend mode.</td></tr><tr |
||||
class="row9"><td |
||||
class="col0">mat.getAdditionalRenderState().setDepthWrite(false);</td><td |
||||
class="col1">Use this if you have several transparent objects obscuring one another. Disables writing of the pixel's depth value to the depth buffer.</td></tr><tr |
||||
class="row10"><td |
||||
class="col0">mat.getAdditionalRenderState().setAlphaFallOff(0.5f); <br/> mat.getAdditionalRenderState().setAlphaTest(true)</td><td |
||||
class="col1">Enables alpha test, generally used for vegetation. Works the same way as "AlphaDiscardThreshold".</td></tr></table></div><p> <br/> Also note the AlphaDiscardThreshold value for materials based on Lighting.j3md. The renderer does not render pixels whose transparancy is below the threshold.</p></div><h2><a |
||||
name="material_options">Material Options</a></h2><div |
||||
class="level2"><div |
||||
class="table sectionedit5"><table |
||||
class="inline"><tr |
||||
class="row0"><td |
||||
class="col0">mat.getAdditionalRenderState().setWireframe(true);</td><td |
||||
class="col1">Switch to showing the (textured) Material in wireframe mode</td></tr><tr |
||||
class="row1"><td |
||||
class="col0">mat.getAdditionalRenderState().setFaceCullMode(FaceCullMode.Off); <br/> mat.getAdditionalRenderState().setFaceCullMode(FaceCullMode.Front); <br/> mat.getAdditionalRenderState().setFaceCullMode(FaceCullMode.Back); <br/> mat.getAdditionalRenderState().setFaceCullMode(FaceCullMode.FrontAndBack)</td><td |
||||
class="col1">Activate back- or frontface culling, both (=invisible), or off. Backface culling is activated by default as an optimization.</td></tr><tr |
||||
class="row2"><td |
||||
class="col0">mat.getAdditionalRenderState().setColorWrite(false);</td><td |
||||
class="col1">Disable writing the color of pixels. Use this together with setDepthWrite(true) to write pixels only to the depth buffer for example.</td></tr><tr |
||||
class="row3"><td |
||||
class="col0">mat.getAdditionalRenderState().setPointSprite(true);</td><td |
||||
class="col1">Enables point-sprite mode, so meshes with "Mode.Points" will be rendered as textured sprites. Note that gl_PointCoord must be set in the shader. Point sprites are used for hardware accelerated particle effects.</td></tr><tr |
||||
class="row4"><td |
||||
class="col0">mat.getAdditionalRenderState().setPolyOffset();</td><td |
||||
class="col1">Enable polygon offset. Use this when you have meshes that have triangles really close to each over (e.g. <a |
||||
href="http://en.wikipedia.org/wiki/Coplanarity">Coplanar</a>), it will shift the depth values to prevent <a |
||||
href="http://en.wikipedia.org/wiki/Z-fighting">Z-fighting</a>.</td></tr></table></div></div><div |
||||
class="footnotes"><div |
||||
class="fn"><sup><a |
||||
href="#fnt__1">1)</a></sup> UseAlpha specifies whether DiffuseMap uses the alpha channel</div><div |
||||
class="fn"><sup><a |
||||
href="#fnt__2">2)</a></sup> LATC Specifies whether NormalMap is BC5/ATI2n/LATC/3Dc-compressed</div><div |
||||
class="fn"><sup><a |
||||
href="#fnt__3">3)</a></sup> Minnaert is a shader type.</div><div |
||||
class="fn"><sup><a |
||||
href="#fnt__4">4)</a></sup> WardIso is a shader type.</div></div> |
||||
<p><em><a href="http://jmonkeyengine.org/wiki/doku.php/jme3:advanced:materials_overview?do=export_xhtmlbody">view online version</a></em></p> |
||||
|
||||
<h1><a>Materials Overview</a></h1> |
||||
<div> |
||||
|
||||
<p> |
||||
This table shows you which material definitions jME supplies by default, and how to make the most of your designer's 3D models by using material parameters. |
||||
If you are looking for information about how to use these materials in code, look at <a href="/com/jme3/gde/core/docs/jme3/advanced/material_definitions.html">Material Definitions</a> and <a href="/com/jme3/gde/core/docs/jme3/advanced/j3m_material_files.html">j3M Material Files</a>. |
||||
</p> |
||||
|
||||
<p> |
||||
<strong>Tip:</strong> Looks complicated? Remember two things: The most commonly used material is Lighting.j3md (which supports Phong illumination). The <a href="/com/jme3/gde/core/docs/sdk.html">jMonkeyPlatform</a> can create Material files, and it offers a visual editor where you can select and set properties, and preview the outcome. The Palatte contains code snippets that demo how to load materials. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Table of Material Definitions</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
Some parameters are "optional" because they are somewhat advanced. If you don't know what an option means, chances are that you are not using this feature in your textures – and you don't need to specify it. (E.g. YCoCg and LATC are image compression formats; Minnaert and WardIso are shader types.) |
||||
</p> |
||||
|
||||
<p> |
||||
Also note that many other parameters are optional, even if they are not explicitly marked optional. For example, it's okay to specify solely the <code>DiffuseMap</code> and <code>NormalMap</code> when using <code>Lighting.j3md</code>. You are only using a subset of what is possible, but if that's what you want, you can do that. The developer should be in contact with the designer regarding what jME features individual Materials/Textures require. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Coloring and Standard Textures</a></h3> |
||||
<div> |
||||
<div><table> |
||||
<tr> |
||||
<th> Material Definition </th><th> Usage </th><th> Parameter : Type </th> |
||||
</tr> |
||||
<tr> |
||||
<td> Common/MatDefs/Misc/Unshaded.j3md </td><td> Standard unlit Material. Use this for simple coloring, simple texturing, simple glow, simple transparency. <br/> |
||||
See also: <a href="/com/jme3/gde/core/docs/jme3/beginner/hello_material.html">Hello Material</a> </td><td> ColorMap : Texture <br/> |
||||
LightMap : Texture <br/> |
||||
Color : Color <br/> |
||||
VertexColor : Boolean <br/> |
||||
SeparateTexCoord : Boolean <br/> |
||||
GlowMap : Texture <br/> |
||||
GlowColor: Color </td> |
||||
</tr> |
||||
<tr> |
||||
<td> Common/MatDefs/Misc/Sky.j3md </td><td> A solid skyblue, or use with a custom SkyDome texture. <br/> |
||||
See also: <a href="/com/jme3/gde/core/docs/jme3/advanced/sky.html">Sky</a> </td><td> Texture : TextureCubeMap <br/> |
||||
SphereMap : Boolean <br/> |
||||
NormalScale : Vector3 </td> |
||||
</tr> |
||||
<tr> |
||||
<td> Common/MatDefs/Terrain/Terrain.j3md </td><td> Splat textures for e.g. terrains. <br/> |
||||
See also: <a href="/com/jme3/gde/core/docs/jme3/beginner/hello_terrain.html">Hello Terrain</a> </td><td> Texture1 : Texture (red) <br/> |
||||
Texture1Scale : Float <br/> |
||||
Texture2 : Texture (green) <br/> |
||||
Texture2Scale : Float <br/> |
||||
Texture3 : Texture (blue) <br/> |
||||
Texture3Scale : Float <br/> |
||||
Alpha : Texture </td> |
||||
</tr> |
||||
<tr> |
||||
<td> Common/MatDefs/Misc/Particle.j3md </td><td> Used with texture masks for particle effects, or for point sprites. <br/> |
||||
The Quadratic value scales the particle for perspective view (<object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/core/com/jme3/effect/ParticleEmitter.java"><param name="text" value="<html><u>formula</u></html>"><param name="textColor" value="blue"></object>). <br/> |
||||
Does support an optional colored glow effect. <br/> |
||||
See also: <a href="/com/jme3/gde/core/docs/jme3/beginner/hello_effects.html">Hello Effects</a> </td><td> Texture : Texture <br/> |
||||
GlowMap : Texture <br/> |
||||
GlowColor : Color <br/> |
||||
Quadratic : Float <br/> |
||||
PointSprite : Boolean </td> |
||||
</tr> |
||||
</table></div> |
||||
<!-- EDIT1 TABLE [1496-2939] --> |
||||
<p> |
||||
<br/> |
||||
|
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Light and Shadow</a></h3> |
||||
<div> |
||||
<div><table> |
||||
<tr> |
||||
<th> Material Definition </th><th> Usage </th><th> Parameters </th> |
||||
</tr> |
||||
<tr> |
||||
<td> Common/MatDefs/Light/Lighting.j3md </td><td> Standard lit material with Phong Illumination. Use this material together with DiffuseMap, SpecularMap, BumpMap (NormalMaps, ParalaxMap) textures. Supports shininess, transparency, and plain material colors (Diffuse, Ambient, Specular colors). <br/> |
||||
See also: <a href="/com/jme3/gde/core/docs/jme3/beginner/hello_material.html">Hello Material</a> <br/> |
||||
<strong>Note:</strong> Lit materials require a <a href="/com/jme3/gde/core/docs/jme3/advanced/light_and_shadow.html">light source</a>! Glowing materials require a <a href="/com/jme3/gde/core/docs/jme3/advanced/bloom_and_glow.html">FilterPostProcessor</a>! </td><td> DiffuseMap : Texture <br/> |
||||
UseAlpha<sup><a href="#fn__1">1)</a></sup> : Boolean <br/> |
||||
NormalMap : Texture <br/> |
||||
LATC<sup><a href="#fn__2">2)</a></sup> : Boolean <br/> |
||||
SpecularMap : Texture <br/> |
||||
Shininess : Float [1-128] <br/> |
||||
ParallaxMap : Texture <br/> |
||||
AlphaMap : Texture <br/> |
||||
AlphaDiscardThreshold: Float <br/> |
||||
ColorRamp : Texture <br/> |
||||
<strong>Glow (optional)</strong> <br/> |
||||
GlowMap : Texture <br/> |
||||
GlowColor : Color <br/> |
||||
<strong>Performance and quality (optional)</strong> <br/> |
||||
VertexLighting : Boolean <br/> |
||||
UseVertexColor : Boolean <br/> |
||||
LowQuality : Boolean <br/> |
||||
HighQuality : Boolean <br/> |
||||
<strong>Material Colors (optional)</strong> <br/> |
||||
UseMaterialColors : Boolean <br/> |
||||
Diffuse : Color <br/> |
||||
Ambient : Color <br/> |
||||
Specular : Color <br/> |
||||
<strong>Tangent shading (optional):</strong> <br/> |
||||
VTangent : Boolean <br/> |
||||
Minnaert<sup><a href="#fn__3">3)</a></sup> : Boolean <br/> |
||||
WardIso<sup><a href="#fn__4">4)</a></sup> : Boolean </td> |
||||
</tr> |
||||
<tr> |
||||
<td>Common/MatDefs/Terrain/TerrainLighting.j3md</td><td>Same kind of splat texture as Terrain.j3md, but with shading. <br/> |
||||
Requires a light source.</td><td>Color Diffuse : Color <br/> |
||||
Ambient : Color <br/> |
||||
Shininess : Float <br/> |
||||
Specular : Color <br/> |
||||
SpecularMap : Texture <br/> |
||||
WardIso : Boolean <br/> |
||||
useTriPlanarMapping : Boolean <br/> |
||||
<strong>Texture Splat Maps</strong> <br/> |
||||
DiffuseMap : Texture <br/> |
||||
DiffuseMap_0_scale : Float <br/> |
||||
NormalMap : Texture <br/> |
||||
DiffuseMap_1 : Texture <br/> |
||||
DiffuseMap_1_scale : Float <br/> |
||||
NormalMap_1 : Texture <br/> |
||||
DiffuseMap_2 : Texture <br/> |
||||
DiffuseMap_2_scale : Float <br/> |
||||
NormalMap_2 : Texture <br/> |
||||
DiffuseMap_3 : Texture <br/> |
||||
DiffuseMap_3_scale : Float <br/> |
||||
NormalMap_3 : Texture <br/> |
||||
<strong>Alpha Maps</strong> <br/> |
||||
AlphaMap : Texture <br/> |
||||
AlphaMap_1 : Texture <br/> |
||||
AlphaMap_2 : Texture <br/> |
||||
<strong>Glowing</strong> <br/> |
||||
GlowMap : Texture <br/> |
||||
GlowColor : Color </td> |
||||
</tr> |
||||
<tr> |
||||
<td> Common/MatDefs/Light/Reflection.j3md </td><td> Reflective glass material with environment map (CubeMap/SphereMap). <br/> |
||||
Requires light source. <br/> |
||||
See also: <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/texture/TestCubeMap.java"><param name="text" value="<html><u>TestCubeMap.java</u></html>"><param name="textColor" value="blue"></object> </td><td> Texture : Texture <br/> |
||||
SphereMap: Boolean </td> |
||||
</tr> |
||||
</table></div> |
||||
<!-- EDIT2 TABLE [2970-5525] --> |
||||
<p> |
||||
|
||||
<strong>Shininess Tip:</strong> To deactivate Shininess, do not set <code>Shininess</code> to 0, but instead set the <code>Specular</code> color to <code>ColorRGBA.Black</code>. |
||||
</p> |
||||
|
||||
<p> |
||||
<strong>Bumpiness Tip:</strong> Before you can use NormalMaps, you must generate normals for the mesh (not the Geometry). |
||||
</p> |
||||
<pre>TangentBinormalGenerator.generate(mesh);</pre> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Testing and Debugging</a></h3> |
||||
<div> |
||||
<div><table> |
||||
<tr> |
||||
<th> Material Definition </th><th> Usage </th><th> Parameters </th> |
||||
</tr> |
||||
<tr> |
||||
<td> Common/MatDefs/Misc/ShowNormals.j3md </td><td> A color gradient calculated from the model's surface normals. You can use this built-in material to test models that have no material, or as fall-back default material. </td><td> – </td> |
||||
</tr> |
||||
</table></div> |
||||
<!-- EDIT3 TABLE [5867-6152] --> |
||||
<p> |
||||
<br/> |
||||
|
||||
<strong>Note:</strong> Common/MatDefs/Misc/SimpleTextured.j3md, ColoredTextured.j3md, VertexColor.j3md, Wireframe.j3md have been deprecated. Use equivalent features of Unshaded.j3md instead. |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Transparency</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
Most Material Definitions support an alpha channel for transparency. In an RGBA color, the last float is the alpha channel: 0.0f is transparent, 1.0f is opaque. <br/> |
||||
|
||||
For example: <code>mat.setColor("Color", new ColorRGBA(1,0,0,0.5f));</code> is a half-opaque red. <br/> |
||||
|
||||
Additionally, you must specify a blendmode: |
||||
</p> |
||||
<div><table> |
||||
<tr> |
||||
<th>Option</th><th>Usage</th> |
||||
</tr> |
||||
<tr> |
||||
<td>mat.getAdditionalRenderState().setBlendMode(BlendMode.Off);</td><td>Opaque</td> |
||||
</tr> |
||||
<tr> |
||||
<td>mat.getAdditionalRenderState().setBlendMode(BlendMode.Alpha);</td><td>Use this for normal transparency. Interpolates the background pixel with the current by using the current pixel's alpha. E.g. alpha-blended vegetation. </td> |
||||
</tr> |
||||
<tr> |
||||
<td>mat.getAdditionalRenderState().setBlendMode(BlendMode.Additive);</td><td>Additive alpha blending adds colors in a commutative way, i.e. the result does not depend on the order of transparent layers. Adds the background pixel color with the current pixel color. E.g. particle effects that have black color as background. </td> |
||||
</tr> |
||||
<tr> |
||||
<td>mat.getAdditionalRenderState().setBlendMode(BlendMode.AlphaAdditive);</td><td>Same as "Additive", except first it multiplies the current pixel color by the pixel alpha. E.g. used for particle effects that have alpha as background. </td> |
||||
</tr> |
||||
<tr> |
||||
<td>mat.getAdditionalRenderState().setBlendMode(BlendMode.Color);</td><td>Blends by color. Generally useless.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>mat.getAdditionalRenderState().setBlendMode(BlendMode.Modulate);</td><td>Multiplies the background pixel by the current pixel.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>mat.getAdditionalRenderState().setBlendMode(BlendMode.ModulateX2);</td><td>Same as "Modulate", except the result is doubled.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>mat.getAdditionalRenderState().setBlendMode(BlendMode.PremultAlpha);</td><td>Pre-multiplied alpha blending. E.g. if the color of the object has already been multiplied by its alpha, this is used instead of "Alpha" blend mode. </td> |
||||
</tr> |
||||
<tr> |
||||
<td>mat.getAdditionalRenderState().setDepthWrite(false);</td><td>Use this if you have several transparent objects obscuring one another. Disables writing of the pixel's depth value to the depth buffer. </td> |
||||
</tr> |
||||
<tr> |
||||
<td>mat.getAdditionalRenderState().setAlphaFallOff(0.5f); <br/> |
||||
mat.getAdditionalRenderState().setAlphaTest(true)</td><td>Enables alpha test, generally used for vegetation. Works the same way as "AlphaDiscardThreshold".</td> |
||||
</tr> |
||||
</table></div> |
||||
<!-- EDIT4 TABLE [6659-8462] --> |
||||
<p> |
||||
<br/> |
||||
|
||||
Also note the AlphaDiscardThreshold value for materials based on Lighting.j3md. The renderer does not render pixels whose transparancy is below the threshold. |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Material Options</a></h2> |
||||
<div> |
||||
<div><table> |
||||
<tr> |
||||
<td>mat.getAdditionalRenderState().setWireframe(true);</td><td>Switch to showing the (textured) Material in wireframe mode</td> |
||||
</tr> |
||||
<tr> |
||||
<td>mat.getAdditionalRenderState().setFaceCullMode(FaceCullMode.Off); <br/> |
||||
mat.getAdditionalRenderState().setFaceCullMode(FaceCullMode.Front); <br/> |
||||
mat.getAdditionalRenderState().setFaceCullMode(FaceCullMode.Back); <br/> |
||||
mat.getAdditionalRenderState().setFaceCullMode(FaceCullMode.FrontAndBack)</td><td>Activate back- or frontface culling, both (=invisible), or off. Backface culling is activated by default as an optimization.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>mat.getAdditionalRenderState().setColorWrite(false);</td><td>Disable writing the color of pixels. Use this together with setDepthWrite(true) to write pixels only to the depth buffer for example. </td> |
||||
</tr> |
||||
<tr> |
||||
<td>mat.getAdditionalRenderState().setPointSprite(true);</td><td>Enables point-sprite mode, so meshes with "Mode.Points" will be rendered as textured sprites. Note that gl_PointCoord must be set in the shader. Point sprites are used for hardware accelerated particle effects. </td> |
||||
</tr> |
||||
<tr> |
||||
<td>mat.getAdditionalRenderState().setPolyOffset();</td><td>Enable polygon offset. Use this when you have meshes that have triangles really close to each over (e.g. <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://en.wikipedia.org/wiki/Coplanarity"><param name="text" value="<html><u>Coplanar</u></html>"><param name="textColor" value="blue"></object>), it will shift the depth values to prevent <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://en.wikipedia.org/wiki/Z-fighting"><param name="text" value="<html><u>Z-fighting</u></html>"><param name="textColor" value="blue"></object>.</td> |
||||
</tr> |
||||
</table></div> |
||||
<!-- EDIT5 TABLE [8654-9943] --> |
||||
</div> |
||||
<div> |
||||
<div><sup><a href="#fnt__1">1)</a></sup> |
||||
UseAlpha specifies whether DiffuseMap uses the alpha channel</div> |
||||
<div><sup><a href="#fnt__2">2)</a></sup> |
||||
LATC Specifies whether NormalMap is BC5/ATI2n/LATC/3Dc-compressed</div> |
||||
<div><sup><a href="#fnt__3">3)</a></sup> |
||||
Minnaert is a shader type.</div> |
||||
<div><sup><a href="#fnt__4">4)</a></sup> |
||||
WardIso is a shader type.</div> |
||||
</div> |
||||
<p><em><a href="http://direct.jmonkeyengine.org/wiki/doku.php/jme3:advanced:materials_overview?do=export_xhtmlbody">view online version</a></em></p> |
||||
@ -1,129 +1,163 @@ |
||||
<h1><a |
||||
name="polygon_meshes">Polygon Meshes</a></h1><div |
||||
class="level1"><p> <a |
||||
href="/wiki/lib/exe/detail.php/jme3:dolphin-mesh.png?id=jme3%3Aadvanced%3Amesh"><img |
||||
src="nbdocs:/com/jme3/gde/core/docs/jme3/dolphin-mesh.png" class="mediaright" align="right" alt="" /></a></p><p> All visible game elements in a scene, whether it is a Model or a Shape, are made up of polygon meshes. JME3 has a com.jme3.scene.Mesh class that represents all meshes.</p><ul><li |
||||
class="level1"><div |
||||
class="li"> Meshes are made up of triangles. <br/> <code>getTriangleCount(…)</code> and <code>getTriangle(…)</code></div></li><li |
||||
class="level1"><div |
||||
class="li"> Each mesh has a unique ID <br/> <code>getId()</code></div></li><li |
||||
class="level1"><div |
||||
class="li"> Meshes have transformations: Location (local translation), rotation, scale.</div></li><li |
||||
class="level1"><div |
||||
class="li"> Meshes have a bounding volume. jME3 can detect intersections (that is, non-physical collisions) between meshes, or between meshes and 2D elements such as rays. <br/> <code>collideWith()</code>.</div></li><li |
||||
class="level1"><div |
||||
class="li"> Meshes are locked with <code>setStatic()</code> and unlocked with <code>setDynamic()</code>.</div><ul><li |
||||
class="level2"><div |
||||
class="li"> Static Meshes cannot be modified, but are more optimized and faster (they can be precalculated).</div></li><li |
||||
class="level2"><div |
||||
class="li"> Dynamic Meshes can be modified live, but are not optimized and slower.</div></li></ul></li><li |
||||
class="level1"><div |
||||
class="li"> (Optional) Meshes can have a LOD (level of detail optimization) that renders more or less details depending on distance from the camera.</div></li></ul><p> You can use default <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/shape.html">Shape</a>s as meshes; load <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/3d_models.html">3D models</a> (i.e. meshes created in external applications); or create free-form <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/custom_meshes.html">custom meshes</a> programmatically.</p></div><h2><a |
||||
name="vertex_buffer">Vertex Buffer</a></h2><div |
||||
class="level2"><p> The VertexBuffer contains a particular type of geometry data used by Meshes. Every VertexBuffer set on a Mesh is sent as an attribute to the vertex shader to be processed.</p><div |
||||
class="table sectionedit1"><table |
||||
class="inline"><tr |
||||
class="row0"><th |
||||
class="col0">Vertex Buffer Type</th><th |
||||
class="col1">Description</th></tr><tr |
||||
class="row1"><td |
||||
class="col0">Type.Position</td><td |
||||
class="col1">Position of the vertex (3 floats)</td></tr><tr |
||||
class="row2"><td |
||||
class="col0">Type.Index</td><td |
||||
class="col1"> Specifies the index buffer, must contain integer data.</td></tr><tr |
||||
class="row3"><td |
||||
class="col0">Type.TexCoord</td><td |
||||
class="col1"> Texture coordinate</td></tr><tr |
||||
class="row4"><td |
||||
class="col0">Type.TexCoord2</td><td |
||||
class="col1"> Texture coordinate #2</td></tr><tr |
||||
class="row5"><td |
||||
class="col0">Type.Normal</td><td |
||||
class="col1"> Normal vector, normalized.</td></tr><tr |
||||
class="row6"><td |
||||
class="col0">Type.Tangent</td><td |
||||
class="col1"> Tangent vector, normalized.</td></tr><tr |
||||
class="row7"><td |
||||
class="col0">Type.Binormal</td><td |
||||
class="col1"> Binormal vector, normalized.</td></tr><tr |
||||
class="row8"><td |
||||
class="col0">Type.Color</td><td |
||||
class="col1"> Color and Alpha (4 floats)</td></tr><tr |
||||
class="row9"><td |
||||
class="col0">Type.Size</td><td |
||||
class="col1">The size of the point when using point buffers.</td></tr><tr |
||||
class="row10"><td |
||||
class="col0">Type.InterleavedData</td><td |
||||
class="col1"> Specifies the source data for various vertex buffers when interleaving is used.</td></tr><tr |
||||
class="row11"><td |
||||
class="col0">Type.BindPosePosition</td><td |
||||
class="col1"> Inital vertex position, used with animation.</td></tr><tr |
||||
class="row12"><td |
||||
class="col0">Type.BindPoseNormal</td><td |
||||
class="col1"> Inital vertex normals, used with animation</td></tr><tr |
||||
class="row13"><td |
||||
class="col0">Type.BoneWeight</td><td |
||||
class="col1"> Bone weights, used with animation</td></tr><tr |
||||
class="row14"><td |
||||
class="col0">Type.BoneIndex</td><td |
||||
class="col1"> Bone indices, used with animation</td></tr></table></div><div |
||||
class="table sectionedit2"><table |
||||
class="inline"><tr |
||||
class="row0"><th |
||||
class="col0">Mesh method</th><th |
||||
class="col1">Description</th></tr><tr |
||||
class="row1"><td |
||||
class="col0" colspan="2">setLineWidth(1)</td></tr><tr |
||||
class="row2"><td |
||||
class="col0" colspan="2">setPointSize(4.0f)</td></tr><tr |
||||
class="row3"><td |
||||
class="col0" colspan="2">setBound(boundingVolume)</td></tr><tr |
||||
class="row4"><td |
||||
class="col0">setStatic()</td><td |
||||
class="col1">Locks the mesh so you cannot modify it anymore, thus optimizing its data (faster).</td></tr><tr |
||||
class="row5"><td |
||||
class="col0">setDynamic()</td><td |
||||
class="col1">Unlocks the mesh so you can modified it, but this will un-optimize the data (slower).</td></tr><tr |
||||
class="row6"><td |
||||
class="col0">setMode(Mesh.Mode.Points)</td><td |
||||
class="col1"> Used to set mesh modes, see below</td></tr><tr |
||||
class="row7"><td |
||||
class="col0" colspan="2">getId()</td></tr><tr |
||||
class="row8"><td |
||||
class="col0" colspan="2">getTriangle(int,tri)</td></tr><tr |
||||
class="row9"><td |
||||
class="col0" colspan="2">scaleTextureCoordinates(Vector2f)</td></tr></table></div><div |
||||
class="table sectionedit3"><table |
||||
class="inline"><tr |
||||
class="row0"><th |
||||
class="col0">Mesh Mode</th><th |
||||
class="col1">Description</th></tr><tr |
||||
class="row1"><td |
||||
class="col0">Mesh.Mode.Points</td><td |
||||
class="col1">Show only corner points</td></tr><tr |
||||
class="row2"><td |
||||
class="col0">Mesh.Mode.Lines</td><td |
||||
class="col1">Show lines</td></tr><tr |
||||
class="row3"><td |
||||
class="col0">Mesh.Mode.LineLoop</td><td |
||||
class="col1">?</td></tr><tr |
||||
class="row4"><td |
||||
class="col0">Mesh.Mode.LineStrip</td><td |
||||
class="col1">?</td></tr><tr |
||||
class="row5"><td |
||||
class="col0">Mesh.Mode.Triangles</td><td |
||||
class="col1">?</td></tr><tr |
||||
class="row6"><td |
||||
class="col0">Mesh.Mode.TriangleStrip</td><td |
||||
class="col1">?</td></tr><tr |
||||
class="row7"><td |
||||
class="col0">Mesh.Mode.TriangleFan</td><td |
||||
class="col1">?</td></tr><tr |
||||
class="row8"><td |
||||
class="col0">Mesh.Mode.Hybrid</td><td |
||||
class="col1">?</td></tr></table></div></div> |
||||
<p><em><a href="http://jmonkeyengine.org/wiki/doku.php/jme3:advanced:mesh?do=export_xhtmlbody">view online version</a></em></p> |
||||
|
||||
<h1><a>Polygon Meshes</a></h1> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
<img src="nbdocs:/com/jme3/gde/core/docs/jme3/dolphin-mesh.png"> |
||||
</p> |
||||
|
||||
<p> |
||||
All visible game elements in a scene, whether it is a Model or a Shape, are made up of polygon meshes. JME3 has a com.jme3.scene.Mesh class that represents all meshes. |
||||
|
||||
</p> |
||||
<ul> |
||||
<li><div> Meshes are made up of triangles. <br/> |
||||
<code>getTriangleCount(…)</code> and <code>getTriangle(…)</code></div> |
||||
</li> |
||||
<li><div> Each mesh has a unique ID <br/> |
||||
<code>getId()</code></div> |
||||
</li> |
||||
<li><div> Meshes have transformations: Location (local translation), rotation, scale.</div> |
||||
</li> |
||||
<li><div> Meshes have a bounding volume. jME3 can detect intersections (that is, non-physical collisions) between meshes, or between meshes and 2D elements such as rays. <br/> |
||||
<code>collideWith()</code>.</div> |
||||
</li> |
||||
<li><div> Meshes are locked with <code>setStatic()</code> and unlocked with <code>setDynamic()</code>. </div> |
||||
<ul> |
||||
<li><div> Static Meshes cannot be modified, but are more optimized and faster (they can be precalculated). </div> |
||||
</li> |
||||
<li><div> Dynamic Meshes can be modified live, but are not optimized and slower. </div> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
<li><div> (Optional) Meshes can have a LOD (level of detail optimization) that renders more or less details depending on distance from the camera.</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
<p> |
||||
|
||||
You can use default <a href="/com/jme3/gde/core/docs/jme3/advanced/shape.html">Shape</a>s as meshes; load <a href="/com/jme3/gde/core/docs/jme3/advanced/3d_models.html">3D models</a> (i.e. meshes created in external applications); or create free-form <a href="/com/jme3/gde/core/docs/jme3/advanced/custom_meshes.html">custom meshes</a> programmatically. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Vertex Buffer</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
The VertexBuffer contains a particular type of geometry data used by Meshes. Every VertexBuffer set on a Mesh is sent as an attribute to the vertex shader to be processed. |
||||
|
||||
</p> |
||||
<div><table> |
||||
<tr> |
||||
<th>Vertex Buffer Type</th><th>Description</th> |
||||
</tr> |
||||
<tr> |
||||
<td>Type.Position </td><td>Position of the vertex (3 floats)</td> |
||||
</tr> |
||||
<tr> |
||||
<td>Type.Index </td><td> Specifies the index buffer, must contain integer data.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>Type.TexCoord </td><td> Texture coordinate</td> |
||||
</tr> |
||||
<tr> |
||||
<td>Type.TexCoord2 </td><td> Texture coordinate #2</td> |
||||
</tr> |
||||
<tr> |
||||
<td>Type.Normal </td><td> Normal vector, normalized.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>Type.Tangent </td><td> Tangent vector, normalized.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>Type.Binormal </td><td> Binormal vector, normalized.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>Type.Color </td><td> Color and Alpha (4 floats)</td> |
||||
</tr> |
||||
<tr> |
||||
<td>Type.Size </td><td>The size of the point when using point buffers.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>Type.InterleavedData </td><td> Specifies the source data for various vertex buffers when interleaving is used.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>Type.BindPosePosition </td><td> Inital vertex position, used with animation.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>Type.BindPoseNormal </td><td> Inital vertex normals, used with animation</td> |
||||
</tr> |
||||
<tr> |
||||
<td>Type.BoneWeight </td><td> Bone weights, used with animation</td> |
||||
</tr> |
||||
<tr> |
||||
<td>Type.BoneIndex </td><td> Bone indices, used with animation</td> |
||||
</tr> |
||||
</table></div> |
||||
<!-- EDIT1 TABLE [1417-2236] --><div><table> |
||||
<tr> |
||||
<th>Mesh method</th><th>Description</th> |
||||
</tr> |
||||
<tr> |
||||
<td>setLineWidth(1)</td> |
||||
</tr> |
||||
<tr> |
||||
<td>setPointSize(4.0f)</td> |
||||
</tr> |
||||
<tr> |
||||
<td>setBound(boundingVolume)</td> |
||||
</tr> |
||||
<tr> |
||||
<td>setStatic()</td><td>Locks the mesh so you cannot modify it anymore, thus optimizing its data (faster).</td> |
||||
</tr> |
||||
<tr> |
||||
<td>setDynamic()</td><td>Unlocks the mesh so you can modified it, but this will un-optimize the data (slower).</td> |
||||
</tr> |
||||
<tr> |
||||
<td>setMode(Mesh.Mode.Points)</td><td> Used to set mesh modes, see below</td> |
||||
</tr> |
||||
<tr> |
||||
<td>getId()</td> |
||||
</tr> |
||||
<tr> |
||||
<td>getTriangle(int,tri)</td> |
||||
</tr> |
||||
<tr> |
||||
<td>scaleTextureCoordinates(Vector2f)</td> |
||||
</tr> |
||||
</table></div> |
||||
<!-- EDIT2 TABLE [2238-2665] --><div><table> |
||||
<tr> |
||||
<th>Mesh Mode</th><th>Description</th> |
||||
</tr> |
||||
<tr> |
||||
<td>Mesh.Mode.Points</td><td>Show only corner points</td> |
||||
</tr> |
||||
<tr> |
||||
<td>Mesh.Mode.Lines</td><td>Show lines</td> |
||||
</tr> |
||||
<tr> |
||||
<td>Mesh.Mode.LineLoop</td><td>?</td> |
||||
</tr> |
||||
<tr> |
||||
<td>Mesh.Mode.LineStrip</td><td>?</td> |
||||
</tr> |
||||
<tr> |
||||
<td>Mesh.Mode.Triangles</td><td>?</td> |
||||
</tr> |
||||
<tr> |
||||
<td>Mesh.Mode.TriangleStrip</td><td>?</td> |
||||
</tr> |
||||
<tr> |
||||
<td>Mesh.Mode.TriangleFan</td><td>?</td> |
||||
</tr> |
||||
<tr> |
||||
<td>Mesh.Mode.Hybrid</td><td>?</td> |
||||
</tr> |
||||
</table></div> |
||||
<!-- EDIT3 TABLE [2667-2908] --> |
||||
</div> |
||||
<p><em><a href="http://direct.jmonkeyengine.org/wiki/doku.php/jme3:advanced:mesh?do=export_xhtmlbody">view online version</a></em></p> |
||||
@ -0,0 +1,324 @@ |
||||
|
||||
<h1><a>Monkey Zone: Multi-player Sample Project</a></h1> |
||||
<div> |
||||
|
||||
<p> |
||||
MonkeyZone is an multi-player demo game provided by the jME core developer team. |
||||
</p> |
||||
<ul> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://monkeyzone.googlecode.com/svn/trunk/"><param name="text" value="<html><u>Download source code</u></html>"><param name="textColor" value="blue"></object> (Subversion Repository)</div> |
||||
</li> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://www.youtube.com/watch?v=98yITEoJvqE"><param name="text" value="<html><u>Watch pre-alpha video footage</u></html>"><param name="textColor" value="blue"></object> (YouTube Video)</div> |
||||
</li> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://jmonkeyengine.org/2011/02/13/monkeyzone-a-jme3-game-from-the-core/"><param name="text" value="<html><u>Read "MonkeyZone – a jME3 game from the core"</u></html>"><param name="textColor" value="blue"></object> (news article)</div> |
||||
</li> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://jmonkeyengine.org/groups/user-code-projects/forum/topic/open-game-finder/"><param name="text" value="<html><u>Related forum thread: Open Game Finder</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
</ul> |
||||
|
||||
<p> |
||||
This open-source demo: |
||||
</p> |
||||
<ol> |
||||
<li><div> showcases one possible way to implement a game with jME3, and</div> |
||||
</li> |
||||
<li><div> helps the jME team verify the jME3 <acronym title="Application Programming Interface">API</acronym> in terms of usability.</div> |
||||
</li> |
||||
</ol> |
||||
|
||||
<p> |
||||
The game idea is based on “BattleZone” arcade game from the 1980s, a first-person shooter the with real-time strategy elements. |
||||
The game was written using the jMonkeyPlatform IDE, and it's based off the BasicGame project template. It took us one week to create a playable pre-alpha, including networking. |
||||
The project design follows best practices that make it possible to edit maps, vehicles, etc, in jMonkeyPlatform without having to change the code – This allows 3D graphic designers to contribute models more easily. (If you feel like contributing assets or working on parts of the game code, drop us a note!) |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Implementation</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
MonkeyZone is a multi-player game with a physics simulation. Both, clients and server, run the physics simulation. The clients send input data from the player group to the server, where they control the entities, and also broadcast to the clients. Additionally, the server sends regular syncronization data for all objects in the game to prevent drifting. |
||||
When a human user or an AI performs an action (presses a button), the actual logic is done on the server. The results are broadcast as data messages to the entities. When the entity is controlled by an AI, the actual AI code (that determines where the entity should move, and when it should perform an action) is executed on the client. |
||||
<br/> |
||||
<br/> |
||||
|
||||
<em>The way MonkeyZone is implemented is just one of the many possible ways to do a game like this in jME. Some things might be done more efficiently, some might be done in another way completely. MonkeyZone tries to do things the way that are most appropriate to implement the game at hand and it shows nicely how jME3 and the standard Java <acronym title="Application Programming Interface">API</acronym> can make game development easier and faster. Also note that the way MonkeyZone is designed is not scalable to a MMO style game, it will only work in a FPS style environment where the whole game world can be loaded at once.</em> |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Terminology</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
The game uses certain terms that might be familiar to you but maybe used in another way, so heres a quick rundown on the terms being used. |
||||
</p> |
||||
<ul> |
||||
<li><div> Player – Logical human or AI player that can enter entities and generally act, only exists as PlayerData “database” with an id.</div> |
||||
</li> |
||||
<li><div> Entity – Spatial with UserData, a world object like character, vehicle, box or factory. The base form is defined only by a String pointing to the j3o which already has all userdata like hitpoints, speed etc.</div> |
||||
</li> |
||||
<li><div> User – Human player using a client</div> |
||||
</li> |
||||
<li><div> Player Group – Group of players that play together (e.g. one human player and one AI companion per client). For now that's the same as client_id of human player for all AIControl’ed players originating from that client.</div> |
||||
</li> |
||||
<li><div> Client – Computer connected to server</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Manager Classes</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
The WorldManager does the main work of organizing players, entities and the world and synchronizing them between the server and client. Both client and server use this class. Some other managers like ClientEffectsManager only exist on the client or server and manage e.g. effects display. |
||||
The gameplay is largely controlled by the ServerGameManager which does gameplay logic on the server, combined with the actions issued by the AI and user on the client (see below) it implements the gameplay. It extensively uses the functions exposed by the WorldManager to perform actions and gather data. This is also the class where the actions of the players are actually executed on the server to determine the outcome (ray testing for shooting etc.). |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Use of Controls</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
<a href="/com/jme3/gde/core/docs/jme3/advanced/custom_controls.html">Controls</a> are used extensively in MonkeyZone for many aspects of the game. When a player enters an entity, the Spatials Controls are configured based on the player that enters. For example when the human user enters an entity, Controls that update the user interface (DefaultHUDControl) or user input (UserInputControl) are added to the current entity Spatial. |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h4><a>...As entity capabilities</a></h4> |
||||
<div> |
||||
|
||||
<p> |
||||
Controls attached to Spatials are generally used like an “array of capabilities” that the entity posesses. So when an entity has a VehicleControl its expected to be a vehicle, when its got a CharacterControl its expected to be a character. |
||||
Other Controls work completely on their own, like CharacterAnimControl which just uses the CharacterControl of the entity to check if the character is running, jumping etc. and then animates the entity if it has an AnimControl. |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h4><a>... to abstract</a></h4> |
||||
<div> |
||||
|
||||
<p> |
||||
Furthermore theres special interfaces for Controls that allow abstraction of different Controls into one base interface. For example ManualControl and AutonomousControl are interfaces for controls that manage the movement of a spatial in a generalized way. This way AI code and e.g. the UserInputControl only have to check for a valid AutonomousControl or ManualControl on the spatial to control and move it. The details of the movement are handled by classes like ManualVehicleControl and AutonomousCharacterControl. |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h4><a>... for AI functions</a></h4> |
||||
<div> |
||||
|
||||
<p> |
||||
A special Control called CommandControl handles the Commands that can be executed by user controlled players, see below. |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Artificial Intelligence</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
MonkeyZone includes simple AI functions based on a command queue. |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h4><a>Commands</a></h4> |
||||
<div> |
||||
|
||||
<p> |
||||
To implement autonomous AI players MonkeyZone uses a system of Commands that are managed by a CommandControl that is attached to each AI player entity controlled by the user. This CommandControl manages a list of Commands that are executed based on priority. For example theres a MoveCommand, a FollowCommand and an AttackCommand, Commands can however implement more complete behavior than that, e.g. the complete logic for a scavenging entity. |
||||
</p> |
||||
<ul> |
||||
<li><div> Press the WASD keys and use the mouse to move</div> |
||||
</li> |
||||
<li><div> press space to jump</div> |
||||
</li> |
||||
<li><div> Aim and click to shoot</div> |
||||
</li> |
||||
<li><div> Type 1 to select the first Ogre</div> |
||||
<ul> |
||||
<li><div> Aim at the floor and press F1 to tell it where to go.</div> |
||||
</li> |
||||
<li><div> Aim at a target and press F2 to tell it who to follow.</div> |
||||
</li> |
||||
<li><div> Aim at a target and press F3 to tell it who to attack.</div> |
||||
</li> |
||||
<li><div> Aim at the car and press F4 to make it drive the car.</div> |
||||
</li> |
||||
<li><div> Walk close to the car and press enter to drive the car.</div> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h4><a>Triggers</a></h4> |
||||
<div> |
||||
|
||||
<p> |
||||
The SphereTrigger is a TriggerControl that is also attached to each AI players current entity. It consists of a GhostControl that checks the overlapping entities around the entity its attached to. It can be assigned a command that is checked with every entity entering the SphereTrigger and executed if applicable (e.g. normal “attack enemy” mode). |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h4><a>NavMesh</a></h4> |
||||
<div> |
||||
|
||||
<p> |
||||
For each map a navigation mesh is generated that allows the entities to navigate the terrain. Autonomous entities automatically get a NavigationControl based on the current map. The AutonomousControl implementations automatically recognize the NavigationControl attached to the Spatial and use it for navigation. The NavMeshNavigationControl implementation contains a reference to the levels NavMesh and implements a navigation algorithm similar to the A* algorithm. |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Networking</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
Networking is realized in the PhysicsSyncManager which we hope to extend to a state where it can serve as a general sync system for physics based network games. |
||||
The sync manager basically puts a timestamp on every message sent from the server and then buffers all arriving messages on the client within a certain time window. This allows to compensate for messages arriving too soon or too late within the constraints of the buffer, a future version might step the clients physics space different to compensate for network delays without “snapping”. |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Use of jMonkeyPlatform tools</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
All assets used in the game, like entity models and loaded maps can be preconfigured and edited using jMonkeyPlatform. For example, to add a new vehicle type, a vehicle is created in the jMP vehicle editor and UserData like Speed, HitPoints etc. is applied directly in the editor. When the model is loaded in the game it is automatically configured based on these settings, the same accounts for maps that are loaded, special Nodes that mark e.g. player start locations are recognized automatically etc. |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>UserData</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
Entities that are loaded from disk have certain UserData like HitPoints, Speed etc. that is used to configure the entity at runtime. jMP allows adding and editing this UserData so entity properties are editable visually. |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Physics</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
VehicleControls, CharacterControls and RigidBodyControls with mesh collision shape for terrain and objects are generated in jMP and saved in the entity j3o file. When an entity is loaded, the type of entity is identified based on the available controls and UserData and it is configured accordingly. |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>API Info</a></h2> |
||||
<div> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Designer Infos</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
Editable UserData of entity Spatials: |
||||
</p> |
||||
<ul> |
||||
<li><div> (float) HitPoints</div> |
||||
</li> |
||||
<li><div> (float) MaxHitPoints</div> |
||||
</li> |
||||
<li><div> (float) Speed</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
<p> |
||||
Entity Spatial marking Node names: |
||||
</p> |
||||
<ul> |
||||
<li><div> AimNode</div> |
||||
</li> |
||||
<li><div> CameraAttachment</div> |
||||
</li> |
||||
<li><div> ShootAttachment</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
<p> |
||||
Level Spatial marking Node names: |
||||
</p> |
||||
<ul> |
||||
<li><div> StartPoint</div> |
||||
</li> |
||||
<li><div> PowerSource</div> |
||||
</li> |
||||
<li><div> MetalField</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h4><a>Developer Infos</a></h4> |
||||
<div> |
||||
|
||||
<p> |
||||
Programmatic UserData of entities: |
||||
</p> |
||||
<ul> |
||||
<li><div> (long) entity_id</div> |
||||
</li> |
||||
<li><div> (int) group_id</div> |
||||
</li> |
||||
<li><div> (long) player_id</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
<p> |
||||
Programmatic PlayerData: |
||||
</p> |
||||
<ul> |
||||
<li><div> (long) id</div> |
||||
</li> |
||||
<li><div> (int) group_id</div> |
||||
</li> |
||||
<li><div> (long) entity_id</div> |
||||
</li> |
||||
<li><div> (long) character_entity_id</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>The Future</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
Have a look at the code and feel free to ask about it, if you want any new features, you are free to implement them. ;) |
||||
MonkeyZone is hosted at GoogleCode, where you can check out the jMonkeyPlatform-ready project via svn: |
||||
</p> |
||||
<ol> |
||||
<li><div> jMonkeyPlatform→Team→Subversion→Checkout,</div> |
||||
</li> |
||||
<li><div> Enter the SVN <acronym title="Uniform Resource Locator">URL</acronym> <code><object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://monkeyzone.googlecode.com/svn/trunk/"><param name="text" value="<html><u>http://monkeyzone.googlecode.com/svn/trunk/</u></html>"><param name="textColor" value="blue"></object></code></div> |
||||
</li> |
||||
<li><div> Download, open, and build the project</div> |
||||
</li> |
||||
<li><div> Run the server first (com.jme3.monkeyzone.ServerMain), and then a client (com.jme3.monkeyzone.ClientMain).</div> |
||||
</li> |
||||
</ol> |
||||
|
||||
</div> |
||||
<p><em><a href="http://direct.jmonkeyengine.org/wiki/doku.php/jme3:advanced:monkey_zone?do=export_xhtmlbody">view online version</a></em></p> |
||||
@ -0,0 +1,120 @@ |
||||
|
||||
<h1><a>MotionPath</a></h1> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
A MotionPath describes the motion of a spatial between waypoints. The path can be linear or rounded. You use MotionPaths to remote-control a spatial, or the camera. |
||||
</p> |
||||
|
||||
<p> |
||||
<strong>Tip:</strong> If you want to remote-control a whole cutscene with several spatials moving at various times, then we recommened you use MotionPaths together with <a href="/com/jme3/gde/core/docs/jme3/advanced/cinematics.html">Cinematics</a>. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Sample Code</a></h2> |
||||
<div> |
||||
<ul> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/animation/TestMotionPath.java"><param name="text" value="<html><u>TestMotionPath.java</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/animation/TestCameraMotionPath.java"><param name="text" value="<html><u>TestCameraMotionPath.java</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>What Are Way Points?</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
When shooting a movie scene, the director tells actors where to walk, for example, by drawing a series of small crosses on the floor. Cameramen often mount the camera on rails (so called dolly track) so they can follow along complex scenes more easily. |
||||
</p> |
||||
|
||||
<p> |
||||
In JME3, you use MotionPaths to specify a series of positions for a character or the camera. The MotionPath automatically updates the transformation of the spatial in each frame to make it move from one point to the next. |
||||
</p> |
||||
<ul> |
||||
<li><div> <strong>A way point</strong> is one positions on a path. </div> |
||||
</li> |
||||
<li><div> <strong>A MotionPath</strong> contains a list of all way points of one path. </div> |
||||
</li> |
||||
</ul> |
||||
|
||||
<p> |
||||
The final shape of the path is computed using a linear interpolation or a <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://www.mvps.org/directx/articles/catmull/"><param name="text" value="<html><u>Catmull-Rom</u></html>"><param name="textColor" value="blue"></object> spline interpolation on the way points. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Create a MotionPath</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
Create a Motionpath object and add way points to it. |
||||
|
||||
</p> |
||||
<pre>MotionPath path = new MotionPath(); |
||||
path.addWayPoint(new Vector3f(10, 3, 0)); |
||||
path.addWayPoint(new Vector3f(8, -2, 1)); |
||||
...</pre> |
||||
|
||||
<p> |
||||
You can configure the path as follows. |
||||
|
||||
</p> |
||||
<div><table> |
||||
<tr> |
||||
<th> MotionPath Method </th><th> Usage </th> |
||||
</tr> |
||||
<tr> |
||||
<td>path.setCycle(true)</td><td>Sets whether the motion along this path should be closed (true) or open-ended (false). </td> |
||||
</tr> |
||||
<tr> |
||||
<td>path.addWayPoint(vector)</td><td>Adds individual waypoints to this path. The order is relevant.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>path.removeWayPoint(vector) <br/> |
||||
removeWayPoint(index)</td><td>Removes a way point from this path. You can specify the point that you want to remove as vector or as integer index.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>path.setCurveTension(0.83f)</td><td>Sets the tension of the curve (Catmull-Rom Spline). A value of 0.0f results in a straight linear line, 1.0 a very round curve.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>path.getNbWayPoints()</td><td>Returns the number of waypoints in this path.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>path.enableDebugShape(assetManager,rootNode)</td><td>Shows a line that visualizes the path. Use this during development and for debugging so you see what you are doing.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>path.disableDebugShape()</td><td>Hides the line that visualizes the path. Use this for the release build.</td> |
||||
</tr> |
||||
</table></div> |
||||
<!-- EDIT1 TABLE [1769-2660] --> |
||||
</div> |
||||
|
||||
<h2><a>MotionPathListener</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
You can hook interactions into a playing MotionPath. Register a MotionPathListener to the MotionPath to track whether way points have been reached, and then trigger a custom action. The onWayPointReach() method of the interface gives you access to the MotionTrack object <code>control</code>, and an integer value representing the current wayPointIndex. |
||||
</p> |
||||
|
||||
<p> |
||||
In this example, you just print the status at every way point. In a game you could trigger actions here: Transformations, animations, sounds, game actions (attack, open door, etc). |
||||
</p> |
||||
<pre>path.addListener( new MotionPathListener() { |
||||
public void onWayPointReach(MotionTrack control, int wayPointIndex) { |
||||
if (path.getNbWayPoints() == wayPointIndex + 1) { |
||||
println(control.getSpatial().getName() + " has finished moving. "); |
||||
} else { |
||||
println(control.getSpatial().getName() + " has reached way point " + wayPointIndex); |
||||
} |
||||
} |
||||
});</pre> |
||||
|
||||
</div> |
||||
<p><em><a href="http://direct.jmonkeyengine.org/wiki/doku.php/jme3:advanced:motionpath?do=export_xhtmlbody">view online version</a></em></p> |
||||
|
After Width: | Height: | Size: 27 KiB |
@ -0,0 +1,149 @@ |
||||
|
||||
<h1><a>Mouse Picking</a></h1> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
Mouse picking means that the user clicks an object in the scene to select it, or to interact with it otherwise. Games use picking to implement aiming and shooting, casting spells, picking up objects, selecting targets, dragging and moving objects, etc. Mouse picking can be done using fixed crosshairs, or using the mouse pointer. |
||||
</p> |
||||
|
||||
<p> |
||||
<img src="nbdocs:/com/jme3/gde/core/docs/jme3/advanced/mouse-picking.png"> |
||||
</p> |
||||
|
||||
<p> |
||||
See <a href="/com/jme3/gde/core/docs/jme3/advanced/input_handling.html">Input Handling</a> for details on how to define the necessary input triggers, input mappings, and input listeners. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Pick a Target Using Fixed Crosshairs</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
The following <code>pick target</code> input mapping implements an action that determines what a user clicked. It assumes that the mouse pointer is invisible and there are crosshairs painted in the center of the screen. It assumes that the user aims the crosshairs at an object in the scene and clicks. You use Ray Casting to identify the geometry that was picked by the user. Use use this method together with a first-person flyCam. |
||||
|
||||
</p> |
||||
<ol> |
||||
<li><div> Activate the first-person camera: <code>flyCam.setEnabled(true);</code></div> |
||||
</li> |
||||
<li><div> Keep mouse pointer invisible using <code>inputManager.setCursorVisible(false)</code>.</div> |
||||
</li> |
||||
<li><div> Map the <code>pick target</code> action to a MouseButtonTrigger. </div> |
||||
</li> |
||||
<li><div> Implement the action in the Listener.</div> |
||||
</li> |
||||
</ol> |
||||
|
||||
<p> |
||||
The following example rotates Spatials named "Red Box" or "Blue Box" when they are clicked. Modify this code to do whatever your game needs to do with the identified target (shoot it, take it, move it, etc). |
||||
</p> |
||||
<pre> private AnalogListener analogListener = new AnalogListener() { |
||||
public void onAnalog(String name, float intensity, float tpf) { |
||||
if (name.equals("pick target")) { |
||||
// Reset results list. |
||||
CollisionResults results = new CollisionResults(); |
||||
// Aim the ray from camera location in camera direction |
||||
// (assuming crosshairs in center of screen). |
||||
Ray ray = new Ray(cam.getLocation(), cam.getDirection()); |
||||
// Collect intersections between ray and all nodes in results list. |
||||
rootNode.collideWith(ray, results); |
||||
// Print the results so we see what is going on |
||||
for (int i = 0; i < results.size(); i++) { |
||||
// For each “hit”, we know distance, impact point, geometry. |
||||
float dist = results.getCollision(i).getDistance(); |
||||
Vector3f pt = results.getCollision(i).getContactPoint(); |
||||
String target = results.getCollision(i).getGeometry().getName(); |
||||
System.out.println("Selection #" + i + ": " + target + " at " + pt + ", " + dist + " WU away."); |
||||
} |
||||
// 5. Use the results -- we rotate the selected geometry. |
||||
if (results.size() > 0) { |
||||
// The closest result is the target that the player picked: |
||||
Geometry target = results.getClosestCollision().getGeometry(); |
||||
// Here comes the action: |
||||
if(target.getName().equals("Red Box")) |
||||
target.rotate(0, - intensity, 0); |
||||
else if(target.getName().equals("Blue Box")) |
||||
target.rotate(0, intensity, 0); |
||||
} |
||||
} // else if ... |
||||
} |
||||
};</pre> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Pick a Target Using the Mouse Pointer</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
The following <code>pick target</code> input mapping implements an action that determines what a user clicked. It assumes that the mouse pointer is visible, and the user aims the cursor at an object in the scene. You use ray casting to determine the geometry that was picked by the user. |
||||
</p> |
||||
|
||||
<p> |
||||
<strong>Note:</strong> Picking with a visible pouse pointer implies that your application can no longer use the default flyCam where the MouseAxisTrigger rotates the camera. You have to deactivate the flyCam mappings and provide custom mappings. Either different inputs rotate the camera, or the camera is fixed. |
||||
|
||||
</p> |
||||
<ol> |
||||
<li><div> Map the <code>pick target</code> action to a MouseButtonTrigger. </div> |
||||
</li> |
||||
<li><div> Make the mouse pointer visible using <code>inputManager.setCursorVisible(true)</code>.</div> |
||||
</li> |
||||
<li><div> Remap the inputs for camera rotation, or deactivate camera rotation. </div> |
||||
</li> |
||||
<li><div> Implement the action in the Listener.</div> |
||||
</li> |
||||
</ol> |
||||
|
||||
<p> |
||||
|
||||
The following example rotates Spatials named "Red Box" or "Blue Box" when they are clicked. Modify this code to do whatever your game needs to do with the identified target (shoot it, take it, move it, etc). |
||||
</p> |
||||
<pre>private AnalogListener analogListener = new AnalogListener() { |
||||
public void onAnalog(String name, float intensity, float tpf) { |
||||
if (name.equals("pick target")) { |
||||
// Reset results list. |
||||
CollisionResults results = new CollisionResults(); |
||||
// Convert screen click to 3d position |
||||
Vector2f click2d = inputManager.getCursorPosition(); |
||||
Vector3f click3d = cam.getWorldCoordinates(new Vector2f(click2d.x, click2d.y), 0f).clone(); |
||||
Vector3f dir = cam.getWorldCoordinates(new Vector2f(click2d.x, click2d.y), 1f).subtractLocal(click3d); |
||||
// Aim the ray from the clicked spot forwards. |
||||
Ray ray = new Ray(click3d, dir); |
||||
// Collect intersections between ray and all nodes in results list. |
||||
rootNode.collideWith(ray, results); |
||||
// (Print the results so we see what is going on:) |
||||
for (int i = 0; i < results.size(); i++) { |
||||
// (For each “hit”, we know distance, impact point, geometry.) |
||||
float dist = results.getCollision(i).getDistance(); |
||||
Vector3f pt = results.getCollision(i).getContactPoint(); |
||||
String target = results.getCollision(i).getGeometry().getName(); |
||||
System.out.println("Selection #" + i + ": " + target + " at " + pt + ", " + dist + " WU away."); |
||||
} |
||||
// Use the results -- we rotate the selected geometry. |
||||
if (results.size() > 0) { |
||||
// The closest result is the target that the player picked: |
||||
Geometry target = results.getClosestCollision().getGeometry(); |
||||
// Here comes the action: |
||||
if (target.getName().equals("Red Box")) { |
||||
target.rotate(0, -intensity, 0); |
||||
} else if (target.getName().equals("Blue Box")) { |
||||
target.rotate(0, intensity, 0); |
||||
} |
||||
} |
||||
} // else if ... |
||||
} |
||||
};</pre> |
||||
<div><span> |
||||
<a href="/wiki/doku.php/tag:documentation?do=showtag&tag=tag%3Adocumentation">documentation</a>, |
||||
<a href="/wiki/doku.php/tag:node?do=showtag&tag=tag%3Anode">node</a>, |
||||
<a href="/wiki/doku.php/tag:ray?do=showtag&tag=tag%3Aray">ray</a>, |
||||
<a href="/wiki/doku.php/tag:click?do=showtag&tag=tag%3Aclick">click</a>, |
||||
<a href="/wiki/doku.php/tag:collision?do=showtag&tag=tag%3Acollision">collision</a>, |
||||
<a href="/wiki/doku.php/tag:keyinput?do=showtag&tag=tag%3Akeyinput">keyinput</a>, |
||||
<a href="/wiki/doku.php/tag:input?do=showtag&tag=tag%3Ainput">input</a> |
||||
</span></div> |
||||
|
||||
</div> |
||||
<p><em><a href="http://direct.jmonkeyengine.org/wiki/doku.php/jme3:advanced:mouse_picking?do=export_xhtmlbody">view online version</a></em></p> |
||||
@ -1,150 +1,443 @@ |
||||
<h1><a |
||||
name="multiplayer_networking">Multiplayer Networking</a></h1><div |
||||
class="level1"><p> This provides an overview of the new SpiderMonkey <acronym |
||||
title="Application Programming Interface">API</acronym> and a path for migrating from the old, now deprecated, <acronym |
||||
title="Application Programming Interface">API</acronym> to the newer version. Much has changed.</p><p> The <a |
||||
href="/com/jme3/gde/core/docs/spidermonkey.html">original SpiderMonkey</a> implementation was a good concept and a clever implementation but suffered under the weight of rapid patches and some creeping design deficit. In the end, there were enough small problems, long-term maintenance issues, and limitations that a newer design was warranted.</p><p> Some things will be very similar but others have changed very much. Hopefully for the better.</p></div><h2><a |
||||
name="overview">Overview</a></h2><div |
||||
class="level2"><p> Most of the new SpiderMonkey <acronym |
||||
title="Application Programming Interface">API</acronym> now exists as a set of interfaces and helper classes in the 'com.jme3.network' package. For most users, this package and the 'message' package will be all they need to worry about. The 'base' and 'kernel' packages only come into play when implementing custom network transports or alternate client/server protocols (<em>which are now possible</em>).</p><p> Clients and Servers can be created from the factory methods on the Network helper class. Once a Server instance is created and started, it can accept remote connections from Clients. The Client objects represent the client-side of a client→server connection. Within the Server, these are HostedConnections. This is a distinct change from the old <acronym |
||||
title="Application Programming Interface">API</acronym>.</p><div |
||||
class="table sectionedit1"><table |
||||
class="inline"><tr |
||||
class="row0"><th |
||||
class="col0 leftalign"> Client</th><th |
||||
class="col1 leftalign"></th><th |
||||
class="col2 leftalign"> Server</th></tr><tr |
||||
class="row1"><td |
||||
class="col0"> com.jme3.network.Client</td><td |
||||
class="col1"> ←→</td><td |
||||
class="col2"> com.jme3.network.HostedConnection</td></tr></table></div><p> HostedConnections can hold application defined client-specific session attributes that the server-side listeners and services can use to track player information, etc..</p><p> MessageListeners can be registered with either the Client or the Server to be notified when new messages arrive. As before, these listeners can be registered to be notified about only specific |
||||
types of messages.</p><p> ClientStateListeners can be registered with a Client to detect changes in connection state.</p><p> ConnectionListeners can be registered with a Server to be notified about HostedConnection arrivals and removals.</p></div><h2><a |
||||
name="what_s_gone">What's Gone?</a></h2><div |
||||
class="level2"><p> All of 'connection', 'events', 'queue', 'service', 'streaming', and 'sync' are now deprecated. The 'service', 'streaming', and 'sync' packages were too difficult to easily port to the new <acronym |
||||
title="Application Programming Interface">API</acronym> and would have required additional code review for thread-related issues. Since the service manager model has _not_ been ported and will likely live on in a different way, it was better to let these go until better solutions evolve. For example, streaming is probably better done more tightly integrated with the core <acronym |
||||
title="Application Programming Interface">API</acronym> and as actual java.io streams.</p></div><h2><a |
||||
name="migration">Migration</a></h2><div |
||||
class="level2"></div><h3><a |
||||
name="package_class_imports">Package/Class Imports</a></h3><div |
||||
class="level3"><p> As a first pass, use the following table for conversion and then see specific class notes.</p><div |
||||
class="table sectionedit2"><table |
||||
class="inline"><tr |
||||
class="row0"><th |
||||
class="col0"> Old Class</th><th |
||||
class="col1"> New Class</th></tr><tr |
||||
class="row1"><td |
||||
class="col0">com.jme3.network.connection.Client</td><td |
||||
class="col1"> com.jme3.network.Client or com.jme3.network.HostedConnection</td></tr><tr |
||||
class="row2"><td |
||||
class="col0">com.jme3.network.connection.Server</td><td |
||||
class="col1"> com.jme3.network.Server</td></tr><tr |
||||
class="row3"><td |
||||
class="col0">com.jme3.network.event.MessageListener</td><td |
||||
class="col1"> com.jme3.network.MessageListener</td></tr><tr |
||||
class="row4"><td |
||||
class="col0">com.jme3.network.event.ConnectionListener</td><td |
||||
class="col1"> com.jme3.network.ClientStateListener or com.jme3.network.ConnectionListener</td></tr><tr |
||||
class="row5"><td |
||||
class="col0">com.jme3.network.event.MessageAdapter</td><td |
||||
class="col1"> no equivalent class, implement MessageListener directly</td></tr><tr |
||||
class="row6"><td |
||||
class="col0">com.jme3.network.event.ConnectionAdapter</td><td |
||||
class="col1"> no equivalent class, implement ClientStateListener or ConnectionListener directly</td></tr><tr |
||||
class="row7"><td |
||||
class="col0">com.jme3.network.message.Message</td><td |
||||
class="col1"> if used as a reference and not a superclass, com.jme3.network.Message. The base class stays the same for message subclasses.</td></tr></table></div><p> Doing all of those changes will certainly break your build… so now let's fix it.</p></div><h3><a |
||||
name="client_and_messagelistener">Client and MessageListener</a></h3><div |
||||
class="level3"><p> This class is the hardest migration to perform. Do not get discouraged.</p><p> The old version used com.jme3.network.connection.Client for both client side and server side. So, depending on context, these references will either change to com.jme3.network.Client or com.jme3.network.HostedConnection. In the case where calling code is not client or server specific, then there is also the common com.jme3.network.MessageConnection interface.</p><p> In general, the actual client changes are of one of the following to types:</p><pre> Client client = new Client( host, port ); |
||||
|
||||
...becomes... |
||||
|
||||
Client client = Network.connectToServer( host, port ); </pre><p> In the delayed connection case:</p><pre> Client client = new Client(); |
||||
... |
||||
client.connect( host, port ); |
||||
|
||||
...becomes... |
||||
|
||||
NetworkClient client = Network.createClient(); |
||||
... |
||||
client.connectToServer( host, port );</pre><p> NetworkClient is a Client. The rest of your code can just refer to Client.</p><p> Those are the easy changes. The trickier ones are related to the MessageListeners.</p></div><h4><a |
||||
name="messagelistener">MessageListener</a></h4><div |
||||
class="level4"><p> By now you've figured out that all of your MessageListeners are broken because the new method signature is different. The source of a message is no longer stored with the message and is instead provided to the MessageListener.</p><p> Depending on whether your MessageListener is being added to the Client or the Server, it will need to refer to either com.jme3.network.Client or com.jme3.network.HostedConnection in its messageReceived(), respectively. The MessageListener interface is generically typed to help make sure the right listener goes where it's supposed to and so the listener implementations don't have to cast all the time.</p><pre>// An example client-specific listener |
||||
public class MyClientListener implements MessageListener<Client> { |
||||
|
||||
public void messageReceived( Client source, Message m ) { |
||||
...do stuff... |
||||
} |
||||
} |
||||
|
||||
// And example server-specific listener |
||||
public class MyServerListener implements MessageListener<HostedConnection> { |
||||
|
||||
public void messageReceived( HostedConnection source, Message m ) { |
||||
...do stuff... |
||||
} |
||||
} |
||||
|
||||
// A client or server listener |
||||
public class MyGenericListener implements MessageListener<MessageConnection> { |
||||
|
||||
public void messageReceived( MessageConnection source, Message m ) { |
||||
... do limited stuff.... |
||||
} |
||||
}</pre><p> Your listeners will fall into one of those three categories.</p><p><p><div |
||||
class="noteclassic">Several of the old MessageListener's methods have gone away. The object-based methods didn't fit with the new <acronym |
||||
title="Application Programming Interface">API</acronym> and messageSent() seemed of little utility. It could be resurrected if there is demand.</div></p></p></div><h4><a |
||||
name="client_method_changes">Client method changes</a></h4><div |
||||
class="level4"><p> Some of the methods on the old Client class have changed or been removed. Here is a basic summary:</p><div |
||||
class="table sectionedit3"><table |
||||
class="inline"><tr |
||||
class="row0"><th |
||||
class="col0"> Old Method</th><th |
||||
class="col1"> New Method</th></tr><tr |
||||
class="row1"><td |
||||
class="col0"> Client.disconnect()</td><td |
||||
class="col1"> Client.close() or HostedConnection.close(reason)</td></tr><tr |
||||
class="row2"><td |
||||
class="col0"> Client.kick(reason)</td><td |
||||
class="col1"> HostedConnection.close(reason)</td></tr><tr |
||||
class="row3"><td |
||||
class="col0"> Client.getClientID()</td><td |
||||
class="col1"> Client.getId() or HostedConnection.getId()</td></tr><tr |
||||
class="row4"><td |
||||
class="col0"> Client.get/setPlayerID()</td><td |
||||
class="col1"> no equivalent</td></tr><tr |
||||
class="row5"><td |
||||
class="col0"> Client.get/setLabel()</td><td |
||||
class="col1"> no equivalent</td></tr></table></div></div><h4><a |
||||
name="no_ioexceptions">No IOExceptions</a></h4><div |
||||
class="level4"><p> After you've done all of that, the compiler will be complaining about the fact that send(), broadcast(), etc. no longer throw IOException. So remove all of those try/catch blocks.<p><div |
||||
class="noteclassic">The truth is that even in the old <acronym |
||||
title="Application Programming Interface">API</acronym>, expecting a real IOException from these methods was unreasonable because often times the message was queued and actually sent later by a separate thread. The new <acronym |
||||
title="Application Programming Interface">API</acronym> assumes that all underlying transports will operate this way and so forgoes the artificial annoyance or sense of security provided by these 'throws' clauses. It also simplifies the calling code a great deal.</div></p></p><p> Only <acronym |
||||
title="Application Programming Interface">API</acronym> methods that actually perform direct IO (such as the Network.connectToServer() and NetworkClient.connectToServer() methods) will ever be declared to throw IOException.</p></div><h3><a |
||||
name="messagegetclient_and_messagegetconnection">Message.getClient() and Message.getConnection()</a></h3><div |
||||
class="level3"><p> This is important enough to deserve its own sub-heading because your code <strong>will</strong> break if you use these as they now return null. Any reason for calling them is now provided directly to the MessageListener in the form of the source Client or source HostedConnection.</p></div><h3><a |
||||
name="client_id_and_player_id">Client ID and Player ID</a></h3><div |
||||
class="level3"><p> The ID of the Client and HostedConnection are now the same at both ends of a connection and the ID is given out authoritatively by the hosting Server. This removes some of the inconsistency on when to use the old player ID and when to use the old client ID as the new client ID serves both purposes. This leaves the game to be able to define its own player ID based on whatever user criteria it wants.</p><p><p><div |
||||
class="noteclassic">Many of the reasons for accessing the client ID on the server can now be taken care of using the session attributes on HostedConnection. It seems like a common use-case for these IDs was to look-up player/client-specific information in a java.util.Map. This information can now be set directly on the HostedConnection.</div></p></p></div><h3><a |
||||
name="comjme3networkeventconnectionlistener">com.jme3.network.event.ConnectionListener</a></h3><div |
||||
class="level3"><p> Along with the shift from not using the same object at both ends of the client connection was a shift in the interfaces that are notified about those ends.</p><p> On the client, there is now com.jme3.network.ClientStateListener which is notified when the client fully connects to the server (including any internal handshaking) and when the client is disconnected.</p><p> On the server, com.jme3.network.ConnectionListener will be notified whenever new HostedConnections are added or removed. This listener isn't notified until the connection is fully setup (including any internal handshaking).</p><div |
||||
class="table sectionedit4"><table |
||||
class="inline"><tr |
||||
class="row0"><th |
||||
class="col0"> Old Method</th><th |
||||
class="col1"> New Method</th></tr><tr |
||||
class="row1"><td |
||||
class="col0"> clientConnected(Client)</td><td |
||||
class="col1"> connectionAdded(Server,HostedConnection)</td></tr><tr |
||||
class="row2"><td |
||||
class="col0"> clientDisconnected(Client)</td><td |
||||
class="col1"> connectionRemoved(Server,HostedConnection)</td></tr></table></div></div><h2><a |
||||
name="why_am_i_doing_this_again">Why am I doing this again?</a></h2><div |
||||
class="level2"><p> As you've seen above, there are quite a few changes necessary to migrate to the new <acronym |
||||
title="Application Programming Interface">API</acronym>. You might be asking yourself if it's worth the trouble.</p><p> The bottom line is that the old architecture had threading and stability issues that just couldn't be fixed in any reasonable way. Some were minor, others kind of severe… and they combined to make trouble. If you've ever wondered why sometimes your clients connect and then the network connection hangs or stops sending data. Or if you've ever wondered why UDP/unreliable messages get corrupted or somehow won't deserialize properly then you've run into some of these issues.</p><p> Moreover, the lack of thread safety meant that user code sometimes had to do some strange and/or complicated work-arounds. The goal should be that the <acronym |
||||
title="Application Programming Interface">API</acronym> should just work like it looks like it will with a minimum of hassle.</p><p> The new architecture is built from the ground up for threading stability and for a clean separation between the public <acronym |
||||
title="Application Programming Interface">API</acronym>, the message passing layer, and the underlying network transport implementations. You should be able to throw all kinds of stuff at it that would make the old system fall over and it should just hum along.</p><p> There will certainly be some growing pains as we work the kinks out of the new system but it is already much more stable in even the most basic of stress tests.</p><div |
||||
class="tags"><span> <a |
||||
href="/wiki/doku.php/tag:documentation?do=showtag&tag=tag%3Adocumentation">documentation</a>, <a |
||||
href="/wiki/doku.php/tag:network?do=showtag&tag=tag%3Anetwork">network</a> </span></div></div> |
||||
<p><em><a href="http://jmonkeyengine.org/wiki/doku.php/jme3:advanced:networking?do=export_xhtmlbody">view online version</a></em></p> |
||||
|
||||
<h1><a>SpiderMonkey: Multi-Player Networking</a></h1> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
This document introduces you to the SpiderMonkey networking <acronym title="Application Programming Interface">API</acronym>. A multi-player game is made up of clients and a server. |
||||
</p> |
||||
<ul> |
||||
<li><div> One central server (a headless SimpleApplication) coordinates the game in the background.</div> |
||||
</li> |
||||
<li><div> Each player runs a game client (a standard SimpleApplications) and connects to the central server.</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
<p> |
||||
|
||||
Each Client informs the Server about its player's moves and actions. The Server centrally collects the game state and broadcasts the state info back to all connected clients. This way all clients share the same game world and can display it to their players from their perspective. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>SpiderMonkey API Overview</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
The SpiderMonkey <acronym title="Application Programming Interface">API</acronym> is a set of interfaces and helper classes in the 'com.jme3.network' package. For most users, this package and the 'message' package is all they need to worry about. (The 'base' and 'kernel' packages only come into play when implementing custom network transports or alternate client/server protocols, which is now possible). |
||||
</p> |
||||
|
||||
<p> |
||||
The SpiderMonkey <acronym title="Application Programming Interface">API</acronym> assists you in creating a Server, Clients, and Messages. Once a Server instance is created and started, the Server accepts remote connections from Clients, and you can send and receive Messages. Client objects represent the client-side of the client-server connection. Within the Server, these Client objects are referred to as HostedConnections. HostedConnections can hold application-defined client-specific session attributes that the server-side listeners and services can use to track player information, etc. |
||||
|
||||
</p> |
||||
<div><table> |
||||
<tr> |
||||
<th> Seen from the Client </th><th> </th><th> Seen from the Server </th> |
||||
</tr> |
||||
<tr> |
||||
<td> com.jme3.network.Client </td><td> == </td><td> com.jme3.network.HostedConnection </td> |
||||
</tr> |
||||
</table></div> |
||||
<!-- EDIT1 TABLE [1580-1698] --> |
||||
<p> |
||||
|
||||
You can register several types of listeners to be notified of changes. |
||||
</p> |
||||
<ul> |
||||
<li><div> MessageListeners on both the Client and the Server are notified when new messages arrive. You can use MessageListeners to be notified about only specific types of messages.</div> |
||||
</li> |
||||
<li><div> ClientStateListeners inform the Client of changes in its connection state, e.g. when the client gets kicked from the server.</div> |
||||
</li> |
||||
<li><div> ConnectionListeners inform the Server about HostedConnection arrivals and removals, e.g. if a client joins or quits.</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Client and Server</a></h2> |
||||
<div> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Creating a Server</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
A com.jme3.network.Server is a headless com.jme3.app.SimpleApplication. Headless means that the update loop runs, but the application does not open a window and does not listen to direct user input. |
||||
</p> |
||||
<pre>ServerMain app = new ServerMain(); |
||||
app.start(JmeContext.Type.Headless);</pre> |
||||
|
||||
<p> |
||||
Create a Server in the simpleInitApp() method and specify a communication port, for example 6143. |
||||
</p> |
||||
<pre>Server myServer = Network.createServer(6143); |
||||
myServer.start();</pre> |
||||
|
||||
<p> |
||||
The server is ready to accept clients. Let's create one. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Creating a Client</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
A com.jme3.network.Client is a standard com.jme3.app.SimpleApplication. |
||||
</p> |
||||
<pre>ClientMain app = new ClientMain(); |
||||
app.start(JmeContext.Type.Display); // standard type</pre> |
||||
|
||||
<p> |
||||
Create a Client in the simpleInitApp() method and specify the servers IP address, and the same communication port as for the server, here 6143. |
||||
</p> |
||||
<pre>Client myClient = Network.connectToServer("localhost", 6143); |
||||
myClient.start();</pre> |
||||
|
||||
<p> |
||||
The server address can be in the format "localhost", "127.0.0.1" (for local testing) or “123.456.78.9” (the IP address of a real server). |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Getting Info About a Client</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
The server refers to a connected client as com.jme3.network.HostedConnection. The server can get info about clients as follows: |
||||
|
||||
</p> |
||||
<div><table> |
||||
<tr> |
||||
<th>Accessor</th><th>Purpose</th> |
||||
</tr> |
||||
<tr> |
||||
<td>myServer.getConnection(0)</td><td>Server gets the first etc connected HostedConnection object.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>myServer.getConnections()</td><td>Server gets a collection of all connected HostedConnection objects.</td> |
||||
</tr> |
||||
<tr> |
||||
<td>myServer.getConnections().size()</td><td>Server gets the number of all connected HostedConnection objects.</td> |
||||
</tr> |
||||
</table></div> |
||||
<!-- EDIT2 TABLE [3563-3867] --> |
||||
<p> |
||||
|
||||
Your game can define its own player ID based on whatever user criteria you want. If the server needs to look up player/client-specific information, it can store this information directly on the HostedConnection object: |
||||
|
||||
</p> |
||||
<div><table> |
||||
<tr> |
||||
<th>Accessor</th><th>Purpose</th> |
||||
</tr> |
||||
<tr> |
||||
<td> conn.setAttribute("MyState", new MyState()); </td><td> Server can change an attribute of the HostedConnection. </td> |
||||
</tr> |
||||
<tr> |
||||
<td> MyState state = conn.getAttribute("MyState")</td><td> Server can read an attribute of the HostedConnection. </td> |
||||
</tr> |
||||
</table></div> |
||||
<!-- EDIT3 TABLE [4089-4318] --> |
||||
</div> |
||||
|
||||
<h2><a>Messaging</a></h2> |
||||
<div> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Creating Message Types</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
Each message represents data you want to transmit, for instance transformation updates or game actions. For each message type, create a message class that extends com.jme3.network.AbstractMessage. Use the @Serializable annotation from com.jme3.network.serializing.Serializable and create an empty default constructor. Custom constructors, fields, and methods are up to you and depend on the message data that you want to transmit. |
||||
</p> |
||||
<pre>@Serializable |
||||
public class HelloMessage extends AbstractMessage { |
||||
private String hello; // message data |
||||
public HelloMessage() {} // empty constructor |
||||
public HelloMessage(String s) { hello = s; } // custom constructor |
||||
}</pre> |
||||
|
||||
<p> |
||||
Register each message type to the com.jme3.network.serializing.Serializer, in both server and client. |
||||
</p> |
||||
<pre>Serializer.registerClass(HelloMessage.class);</pre> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Reacting to Messages</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
After a message was received, a listener responds to it. The listener can access fields of the message, and send messages back. Implement responses in the two Listeners’ messageReceived() methods for each message type. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h4><a>ClientListener.java</a></h4> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
Create one ClientListener.java and make it extend <code>com.jme3.network.MessageListener</code>. |
||||
|
||||
</p> |
||||
<pre>public class ClientListener implements MessageListener<Client> { |
||||
public void messageReceived(Client source, Message message) { |
||||
if (message instanceof HelloMessage) { |
||||
// do something with the message |
||||
HelloMessage helloMessage = (HelloMessage) message; |
||||
System.out.println("Client #"+source.getId()+" received: '"+helloMessage.getSomething()+"'"); |
||||
} // else... |
||||
}</pre> |
||||
|
||||
<p> |
||||
For each message type, register a client listener to the client. |
||||
</p> |
||||
<pre>myClient.addMessageListener(new ClientListener(), HelloMessage.class);</pre> |
||||
|
||||
</div> |
||||
|
||||
<h4><a>ServerListener.java</a></h4> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
Create one ServerListener.java and make it extend <code>com.jme3.network.MessageListener</code>. |
||||
</p> |
||||
<pre>public class ServerListener implements MessageListener<HostedConnection> { |
||||
public void messageReceived(HostedConnection source, Message message) { |
||||
if (message instanceof HelloMessage) { |
||||
// do something with the message |
||||
HelloMessage helloMessage = (HelloMessage) message; |
||||
System.out.println("Server received '" +helloMessage.getSomething() +"' from client #"+source.getId() ); |
||||
} // else.... |
||||
}</pre> |
||||
|
||||
<p> |
||||
For each message type, register a server listener to the server: |
||||
</p> |
||||
<pre>myServer.addMessageListener(new ServerListener(), HelloMessage.class);</pre> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Creating and Sending Messages</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
A client can send a message to the server: |
||||
</p> |
||||
<pre>Message message = new HelloMessage("Hello World!"); |
||||
myClient.send(message);</pre> |
||||
|
||||
<p> |
||||
The server can broadcast a message to all HostedConnection (clients): |
||||
</p> |
||||
<pre>Message message = new HelloMessage("Welcome!"); |
||||
myServer.broadcast(message);</pre> |
||||
|
||||
<p> |
||||
Using com.jme3.network.Filters, the server can send a message to specific HostedConnection (conn1, conn2, conn3), or to all but a few HostedConnections (not to conn4). |
||||
</p> |
||||
<pre>myServer.broadcast( Filters.in( conn1, conn2, conn3 ), message ); |
||||
myServer.broadcast( Filters.notEqualTo( conn4 ), message );</pre> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Identification and Rejection</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
The ID of the Client and HostedConnection are the same at both ends of a connection. The ID is given out authoritatively by the Server. |
||||
</p> |
||||
<pre>... myClient.getId() ...</pre> |
||||
|
||||
<p> |
||||
A server has a game version and game name. Each client expects to communicate with a server with a certain game name and version. Test first whether the game name matches, and then whether game version matches, before sending any messages! If they do not match, you should refuse to connect, because the client and server will not be able to communicate. |
||||
|
||||
</p> |
||||
<div><table> |
||||
<tr> |
||||
<th>Accessor</th><th>Purpose</th> |
||||
</tr> |
||||
<tr> |
||||
<td> myServer.setName() </td><td> Specify the game name (free-form String) </td> |
||||
</tr> |
||||
<tr> |
||||
<td> myServer.setVersion() </td><td> Specify the game version (int) </td> |
||||
</tr> |
||||
<tr> |
||||
<td> myClient.getGameName() </td><td> Client gets the name of the server it is connected to. </td> |
||||
</tr> |
||||
<tr> |
||||
<td> myClient.getVersion() </td><td> Client gets the version of the server it is connected to. </td> |
||||
</tr> |
||||
</table></div> |
||||
<!-- EDIT4 TABLE [8113-8426] --> |
||||
<p> |
||||
|
||||
<strong>Tip:</strong> Your game defines its own attributs, such as player ID, based on whatever criteria you want. If you want to look up player/client-specific information, you can set this information directly on the Client/HostedConnection (see Getting Info About a Client). |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Closing Clients and Server Cleanly</a></h2> |
||||
<div> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Closing a Client</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
You must override the client's destroy() method to close the connection cleanly when the player quits the client: |
||||
</p> |
||||
<pre> @Override |
||||
public void destroy() { |
||||
myClient.close(); |
||||
super.destroy(); |
||||
}</pre> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Closing a Server</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
You must override the server's destroy() method to close the connection when the server quits: |
||||
</p> |
||||
<pre> @Override |
||||
public void destroy() { |
||||
myServer.close(); |
||||
super.destroy(); |
||||
}</pre> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Kicking a Client</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
The server can kick a HostedConnection to make it disconnect. You should provide a String with further info (an explanation to the user what happened) for the server to send along. This info message can be used (displayed to the user) by a ClientStateListener. (See below) |
||||
</p> |
||||
<pre>conn.close("We kick cheaters.");</pre> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Listening to Connection Notification</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
The server and clients are notified about connection changes. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>ClientStateListener</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
The com.jme3.network.ClientStateListener notifies the Client when the Client has fully connected to the server (including any internal handshaking), and when the Client is kicked (disconnected) from the server. |
||||
|
||||
</p> |
||||
<div><table> |
||||
<tr> |
||||
<th> ClientStateListener interface </th><th> Purpose </th> |
||||
</tr> |
||||
<tr> |
||||
<td> clientConnected(Client c) </td><td> Implement here what happens as soon as this clients has fully connected to the server. </td> |
||||
</tr> |
||||
<tr> |
||||
<td> clientDisconnected(Client c, DisconnectInfo info) </td><td> Implement here what happens after the server kicks this client. For example, display the DisconnectInfo to the user. </td> |
||||
</tr> |
||||
</table></div> |
||||
<!-- EDIT5 TABLE [9930-10265] --> |
||||
<p> |
||||
|
||||
Implement the ClientStateListener interface in the Client, and then register it: |
||||
</p> |
||||
<pre>myClient.addClientStateListener(this);</pre> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>ConnectionListener</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
The com.jme3.network.ConnectionListener notifies the Server whenever new HostedConnections (clients) come and go. The listener notifies the server after the Client connection is fully established (including any internal handshaking). |
||||
|
||||
</p> |
||||
<div><table> |
||||
<tr> |
||||
<th> ConnectionListener interface </th><th> Purpose </th> |
||||
</tr> |
||||
<tr> |
||||
<td> connectionAdded(Server s, HostedConnection c) </td><td> Implemenent here what happens after a new HostedConnection has joined the Server. </td> |
||||
</tr> |
||||
<tr> |
||||
<td> connectionRemoved(Server s, HostedConnection c) </td><td> Implement here what happens after a HostedConnection has left. E.g. a player has quit the game and the server removes his character. </td> |
||||
</tr> |
||||
</table></div> |
||||
<!-- EDIT6 TABLE [10672-11035] --> |
||||
<p> |
||||
|
||||
Implement the ConnectionListener in the Server, and register it. |
||||
</p> |
||||
<pre>myServer.addConnectionListener(this);</pre> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>UDP versus TCP</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
SpiderMonkey supports both UDP (unreliable, fast) and TCP (reliable, slow) transport of messages. |
||||
</p> |
||||
<pre>message1.setReliable(true); // TCP |
||||
message2.setReliable(false); // UDP</pre> |
||||
<ul> |
||||
<li><div> Choose reliable and slow transport for messages, if you want to make certain the message is delivered (resent) when lost, and if the order of a series of messages is relevant. E.g. game actions such as "1. wield weapon, 2. attack, 3. dodge".</div> |
||||
</li> |
||||
<li><div> Choose unreliable and fast transport for messages if the next message makes any previously delayed or lost message obsolete and synchronizes the state again. E.g. a series of new locations while walking.</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Important: Use Multi-Threading</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
You cannot modify the scenegraph in the NetworkThread. You have to create a Callable, enqueue the Callable in the OpenGLThread, and the callable makes the modification in the correct moment. A Callable is a Java class representing a (possibly time-intensive), self-contained task. |
||||
</p> |
||||
<pre>app.enqueue(callable);</pre> |
||||
|
||||
<p> |
||||
|
||||
Learn more about <a href="/com/jme3/gde/core/docs/jme3/advanced/multithreading.html">multithreading</a> here. |
||||
</p> |
||||
<div><span> |
||||
<a href="/wiki/doku.php/tag:documentation?do=showtag&tag=tag%3Adocumentation">documentation</a>, |
||||
<a href="/wiki/doku.php/tag:network?do=showtag&tag=tag%3Anetwork">network</a> |
||||
</span></div> |
||||
|
||||
</div> |
||||
<p><em><a href="http://direct.jmonkeyengine.org/wiki/doku.php/jme3:advanced:networking?do=export_xhtmlbody">view online version</a></em></p> |
||||
|
After Width: | Height: | Size: 76 KiB |
|
Before Width: | Height: | Size: 77 KiB After Width: | Height: | Size: 59 KiB |
|
After Width: | Height: | Size: 8.1 KiB |
|
After Width: | Height: | Size: 123 KiB |
|
Before Width: | Height: | Size: 51 KiB After Width: | Height: | Size: 55 KiB |
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 24 KiB |
@ -1,77 +1,263 @@ |
||||
<h1><a |
||||
name="creating_user_interfaces_with_nifty_gui">Creating User Interfaces with Nifty GUI</a></h1><div |
||||
class="level1"><p> <a |
||||
href="/wiki/lib/exe/detail.php/jme3:advanced:nifty-gui.png?id=jme3%3Aadvanced%3Anifty_gui"><img |
||||
src="nbdocs:/com/jme3/gde/core/docs/jme3/advanced/nifty-gui.png?w=310&h=250" class="medialeft" align="left" alt="" width="310" height="250" /></a></p><p> Although it is possible to embed a <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/swing_canvas.html">jME3 canvas</a> in a Swing <acronym |
||||
title="Graphical User Interface">GUI</acronym> app, a 3D game typically runs full-screen, or in a window of its own. This soon raises the question of how to add a user interface: Most games respond to the escape key by displaying buttons that allow users to switch to different screens – for example to view high scores, customize settings, or load saved games.</p><p> This doc introduces you to <a |
||||
href="http://nifty-gui.lessvoid.com/">Nifty GUI</a>, a Java library for graphical user interfaces (GUIs). Nifty <acronym |
||||
title="Graphical User Interface">GUI</acronym> (<code>de.lessvoid.nifty</code> package) is well integrated with jME3 via the <code>com.jme3.niftygui</code> package. You define the <acronym |
||||
title="Graphical User Interface">GUI</acronym> layout in <acronym |
||||
title="Extensible Markup Language">XML</acronym> and call it from your Java code. All the JAR libraries that you need are already included in your jME3 download, so you do not need to install anything extra (Just make sure they are on the classpath).</p><p> <em>Typically, you lay out the Nifty <acronym |
||||
title="Graphical User Interface">GUI</acronym> using <acronym |
||||
title="Extensible Markup Language">XML</acronym>, but using Java will soon be a second option.</em></p></div><h2><a |
||||
name="overview">Overview</a></h2><div |
||||
class="level2"><p> <a |
||||
href="/wiki/lib/exe/detail.php/jme3:advanced:nifty-gui-example.png?id=jme3%3Aadvanced%3Anifty_gui"><img |
||||
src="nbdocs:/com/jme3/gde/core/docs/jme3/advanced/nifty-gui-example.png?w=360&h=203" class="mediaright" align="right" alt="" width="360" height="203" /></a></p><p> There are three steps needed to add a <acronym |
||||
title="Graphical User Interface">GUI</acronym> to your jME3 game:</p><ol><li |
||||
class="level1"><div |
||||
class="li"> <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_xml_layout.html">Lay out the GUI in XML</a></div></li><li |
||||
class="level1"><div |
||||
class="li"> Integrate the <acronym |
||||
title="Graphical User Interface">GUI</acronym> into the Game</div><ul><li |
||||
class="level2"><div |
||||
class="li"> <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_overlay.html">Overlay the User Interface Over the Screen</a>, or</div></li><li |
||||
class="level2"><div |
||||
class="li"> <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_projection.html">Project the User Interface Onto a Texture</a></div></li></ul></li><li |
||||
class="level1"><div |
||||
class="li"> <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_java_interaction.html">Interact with the GUI from Java</a></div></li></ol></div><h2><a |
||||
name="sample_code">Sample Code</a></h2><div |
||||
class="level2"><ul><li |
||||
class="level1"><div |
||||
class="li"> <a |
||||
href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/niftygui/TestNiftyGui.java">TestNiftyGui.java</a></div></li><li |
||||
class="level1"><div |
||||
class="li"> <a |
||||
href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/niftygui/TestNiftyToMesh.java">TestNiftyToMesh.java</a></div></li><li |
||||
class="level1"><div |
||||
class="li"> You can find more sample code in the nifty-examples-1.3-SNAPSHOT.jar file.</div></li></ul></div><h2><a |
||||
name="pro_tipuse_xml_schema">Pro Tip: Use XML Schema</a></h2><div |
||||
class="level2"><p> If you include the following <acronym |
||||
title="Extensible Markup Language">XML</acronym> schema in the first lines of your NiftyGUI <acronym |
||||
title="Extensible Markup Language">XML</acronym> files, your IDE will give you helpful hints and code completion.</p><pre><span><?xml version="1.0" encoding="UTF-8"?></span> |
||||
<span><nifty xmlns="http://nifty-gui.sourceforge.net/nifty.xsd" </span> |
||||
<span> xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" </span> |
||||
<span> xsi:schemaLocation="http://nifty-gui.sourceforge.net/nifty.xsd |
||||
http://nifty-gui.sourceforge.net/nifty.xsd"></span> |
||||
|
||||
<!-- Example: The IDE will now tell you that one <screen></screen> element is expected here, etc. --> |
||||
|
||||
<span><span></nifty></span></span></pre></div><h2><a |
||||
name="nifty_documentation">Nifty Documentation</a></h2><div |
||||
class="level2"><p> Learn more from the NiftyGUI page!</p><ul><li |
||||
class="level1"><div |
||||
class="li"> <a |
||||
href="http://sourceforge.net/apps/mediawiki/nifty-gui/index.php?title=Tutorials">Go Through the Nifty Tutorials</a></div></li><li |
||||
class="level1"><div |
||||
class="li"> <a |
||||
href="http://sourceforge.net/apps/mediawiki/nifty-gui/index.php?title=Reference">Bookmark the Reference Guide</a></div></li><li |
||||
class="level1"><div |
||||
class="li"> <a |
||||
href="http://sourceforge.net/apps/mediawiki/nifty-gui/index.php?title=Hello_World_Example">http://sourceforge.net/apps/mediawiki/nifty-gui/index.php?title=Hello_World_Example</a></div></li><li |
||||
class="level1"><div |
||||
class="li"> <a |
||||
href="http://sourceforge.net/apps/mediawiki/nifty-gui/index.php?title=Layout_Introduction">http://sourceforge.net/apps/mediawiki/nifty-gui/index.php?title=Layout_Introduction</a></div></li><li |
||||
class="level1"><div |
||||
class="li"> <a |
||||
href="http://jmonkeyengine.org/groups/gui/forum/topic/anyone-succeeded-in-changing-text-in-nifty-programatically/#post-109510">Changing the Text in Nifty GUIs programmatically</a></div></li></ul><div |
||||
class="tags"><span> <a |
||||
href="/wiki/doku.php/tag:documentation?do=showtag&tag=tag%3Adocumentation">documentation</a>, <a |
||||
href="/wiki/doku.php/tag:gui?do=showtag&tag=tag%3Agui">gui</a>, <a |
||||
href="/wiki/doku.php/tag:input?do=showtag&tag=tag%3Ainput">input</a> </span></div></div> |
||||
<p><em><a href="http://jmonkeyengine.org/wiki/doku.php/jme3:advanced:nifty_gui?do=export_xhtmlbody">view online version</a></em></p> |
||||
|
||||
<h1><a>Creating User Interfaces with Nifty GUI</a></h1> |
||||
<div> |
||||
|
||||
<p> |
||||
<img src="nbdocs:/com/jme3/gde/core/docs/jme3/advanced/nifty-gui-13.png"> |
||||
</p> |
||||
|
||||
<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="/com/jme3/gde/core/docs/jme3/advanced/swing_canvas.html">jME3 canvas</a> in a Swing <acronym title="Graphical User Interface">GUI</acronym>, a 3D game typically runs full-screen, or in a window of its own. |
||||
</p> |
||||
|
||||
<p> |
||||
This document introduces you to <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://nifty-gui.lessvoid.com/"><param name="text" value="<html><u>Nifty GUI</u></html>"><param name="textColor" value="blue"></object>, a Java library for building interactive graphical user interfaces (GUIs) for games or similar applications. Nifty <acronym title="Graphical User Interface">GUI</acronym> (the <code>de.lessvoid.nifty</code> package) is well integrated with jME3 through the <code>com.jme3.niftygui</code> package. You define the base <acronym title="Graphical User Interface">GUI</acronym> layout in <acronym title="Extensible Markup Language">XML</acronym>, 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> |
||||
<ul> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://vimeo.com/25637085"><param name="text" value="<html><u>Video demo of Nifty GUI 1.3</u></html>"><param name="textColor" value="blue"></object> </div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Overview</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
To add a Nifty <acronym title="Graphical User Interface">GUI</acronym> to your jME3 game: |
||||
</p> |
||||
<ol> |
||||
<li><div> <span><a href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui.html">Understand the Nifty GUI Concepts</a></span> described on this page.</div> |
||||
</li> |
||||
<li><div> Lay out your graphical user interface:</div> |
||||
<ul> |
||||
<li><div> <a href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_xml_layout.html">Lay out the GUI in XML</a> </div> |
||||
</li> |
||||
<li><div> <a href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_java_layout.html">Lay out the GUI in Java</a></div> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
<li><div> Integrate the <acronym title="Graphical User Interface">GUI</acronym> into the game:</div> |
||||
<ul> |
||||
<li><div> <a href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_overlay.html">Overlay the User Interface Over the Screen</a> – or –</div> |
||||
</li> |
||||
<li><div> <a href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_projection.html">Project the User Interface Onto a Texture</a></div> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
<li><div> <a href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_java_interaction.html">Interact with the GUI from Java</a></div> |
||||
</li> |
||||
</ol> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Nifty GUI Concepts</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
<img src="nbdocs:/com/jme3/gde/core/docs/jme3/advanced/nifty-screen-layer-panel.png"> |
||||
</p> |
||||
|
||||
<p> |
||||
Nifty GUIs are made up of the following <strong>elements</strong>: |
||||
|
||||
</p> |
||||
<ul> |
||||
<li><div> A Nifty <acronym title="Graphical User Interface">GUI</acronym> is made up of one or more <strong>screens</strong>.</div> |
||||
<ul> |
||||
<li><div> Nifty displays exactly one screen at a time.</div> |
||||
</li> |
||||
<li><div> Name the first screen <code>start</code>. Name any others whatever you like.</div> |
||||
</li> |
||||
<li><div> Every screen is <a href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_java_interaction.html">controlled by a Java Controller class</a>.</div> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
<li><div> A screen contains one or more <strong>layers</strong>.</div> |
||||
<ul> |
||||
<li><div> Layers are containers that impose an alignment on their content (vertical, horizontal, centered)</div> |
||||
</li> |
||||
<li><div> Layers overlap (z-order), and cannot be nested.</div> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
<li><div> A layer contains <strong>panels</strong>.</div> |
||||
<ul> |
||||
<li><div> Panels are containers that impose an alignment on their content (vertical, horizontal, centered)</div> |
||||
</li> |
||||
<li><div> Panels can be nested, and cannot overlap.</div> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
<li><div> A panel contains <strong>images, text, or controls (buttons, etc)</strong>.</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
<p> |
||||
|
||||
General usage tips about elements: |
||||
</p> |
||||
<ul> |
||||
<li><div> You give an element an ID String if you want to interact with it. <br/> |
||||
You can also use transparent, ID-less panels as spacers.</div> |
||||
</li> |
||||
<li><div> For layers and panels, you specify width and height in percent, or use <code>*</code> to fill the remaining space automatically.</div> |
||||
</li> |
||||
<li><div> Screen, layers, and panels… </div> |
||||
<ul> |
||||
<li><div> can have an RGBA background color: You can use colors during layout development to highlight which container is which.</div> |
||||
</li> |
||||
<li><div> can be transparent: In the finished <acronym title="Graphical User Interface">GUI</acronym>, the visible elements are images, text, and controls inside the panels.</div> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
<li><div> The jMonkeyEngine <acronym title="Software Development Kit">SDK</acronym>'s Nifty editor lets you switch between the <acronym title="Extensible Markup Language">XML</acronym> editor and a <acronym title="Graphical User Interface">GUI</acronym> preview, so you see the effects of your code changes.</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Some Pro Tips...</a></h2> |
||||
<div> |
||||
|
||||
</div> |
||||
|
||||
<h4><a>XML or Java? Both!</a></h4> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
The <acronym title="Extensible Markup Language">XML</acronym> and Java syntax are equivalent, so is it an either-or choice? Not quite. |
||||
We recommend to use <acronym title="Extensible Markup Language">XML</acronym> to lay out the static parts of the <acronym title="Graphical User Interface">GUI</acronym>. Then use Java syntax to control the dynamic parts of the <acronym title="Graphical User Interface">GUI</acronym> at runtime. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h4><a>Activate Debug Highlighting</a></h4> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
During development (and during this tutorial), the following debug code makes all panels visible. This helps you arrange them and find errors. |
||||
|
||||
</p> |
||||
<pre>nifty.setDebugOptionPanelColors(true);</pre> |
||||
|
||||
<p> |
||||
|
||||
Before the release, and for testing, set it to false again. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h4><a>Use the jMonkeyEngine SDK</a></h4> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
The <a href="/com/jme3/gde/core/docs/sdk.html">SDK</a> includes an <acronym title="Extensible Markup Language">XML</acronym> editor and previewer for Nifty <acronym title="Graphical User Interface">GUI</acronym> files. Open an <acronym title="Extensible Markup Language">XML</acronym> file, and switch between <acronym title="Extensible Markup Language">XML</acronym> and Preview mode. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h4><a>Use XML Schema</a></h4> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
Include the following <acronym title="Extensible Markup Language">XML</acronym> schema in the first line of your NiftyGUI <acronym title="Extensible Markup Language">XML</acronym> files and your IDE gives you hints and code completion. |
||||
|
||||
</p> |
||||
<pre><span><?xml version="1.0" encoding="UTF-8"?></span> |
||||
<span><nifty xmlns="http://nifty-gui.sourceforge.net/nifty-1.3.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"</span> |
||||
<span> xsi:schemaLocation="http://nifty-gui.sourceforge.net/nifty-1.3.xsd http://nifty-gui.sourceforge.net/nifty-1.3.xsd"></span> |
||||
<!-- Your IDE now tells you that one <screen></screen> element is expected here, etc. --> |
||||
<span><span></nifty></span></span></pre> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>JME-Nifty Sample Code</a></h2> |
||||
<div> |
||||
<ul> |
||||
<li><div> <acronym title="Extensible Markup Language">XML</acronym> examples</div> |
||||
<ul> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test-data/Interface/Nifty/HelloJme.xml"><param name="text" value="<html><u>HelloJme.xml</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
<li><div> Java examples</div> |
||||
<ul> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/niftygui/TestNiftyGui.java"><param name="text" value="<html><u>TestNiftyGui.java</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/niftygui/TestNiftyToMesh.java"><param name="text" value="<html><u>TestNiftyToMesh.java</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
<li><div> jME3-ready version of the Nifty <acronym title="Graphical User Interface">GUI</acronym> 1.3 demo (sample code, Java)</div> |
||||
<ul> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://files.seapegasus.org/NiftyGuiDemo.zip"><param name="text" value="<html><u>NiftyGuiDemo.zip</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
<li><div> Find more sample code in the <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://nifty-gui.svn.sourceforge.net/viewvc/nifty-gui/nifty-default-controls-examples/trunk/"><param name="text" value="<html><u>Nifty GUI source repository</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>External Documentation</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
Learn more from the NiftyGUI page! |
||||
</p> |
||||
<ul> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://nifty-gui.sourceforge.net/webstart/nifty-tutorial-1.2.jnlp"><param name="text" value="<html><u>Interactive "video" tutorial (Webstart)</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://nifty-gui.sourceforge.net/projects/1.3-SNAPSHOT/nifty/apidocs/index.html"><param name="text" value="<html><u>Nifty 1.3 JavaDoc</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://nifty-gui.sourceforge.net/projects/1.3-SNAPSHOT/nifty-default-controls/apidocs/"><param name="text" value="<html><u>Nifty 1.3 Controls JavaDoc</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://sourceforge.net/apps/mediawiki/nifty-gui/index.php?title=Nifty_Standard_Controls_%28Nifty_1.3%29"><param name="text" value="<html><u>Examples of Standard Controls in Nifty 1.3:</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://sourceforge.net/apps/mediawiki/nifty-gui/index.php?title=MarkUp"><param name="text" value="<html><u>Nifty Syntax</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://sourceforge.net/apps/mediawiki/nifty-gui/index.php?title=Tutorials"><param name="text" value="<html><u>The Nifty Tutorials</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://sourceforge.net/apps/mediawiki/nifty-gui/index.php?title=Reference"><param name="text" value="<html><u>Bookmark the Reference Guide</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://sourceforge.net/apps/mediawiki/nifty-gui/index.php?title=Hello_World_Example"><param name="text" value="<html><u>http://sourceforge.net/apps/mediawiki/nifty-gui/index.php?title=Hello_World_Example</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://sourceforge.net/apps/mediawiki/nifty-gui/index.php?title=Layout_Introduction"><param name="text" value="<html><u>http://sourceforge.net/apps/mediawiki/nifty-gui/index.php?title=Layout_Introduction</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://jmonkeyengine.org/groups/gui/forum/topic/anyone-succeeded-in-changing-text-in-nifty-programatically/#post-109510"><param name="text" value="<html><u>Forum post: Changing Text in Nifty GUIs programmatically</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Next Steps</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
Next, learn how to lay out your graphical user interface. Typically, you start with <acronym title="Extensible Markup Language">XML</acronym>. |
||||
</p> |
||||
<ul> |
||||
<li><div> <a href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_xml_layout.html">Lay out the GUI in XML</a> (recommended)</div> |
||||
</li> |
||||
<li><div> <a href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_java_layout.html">Lay out the GUI in Java</a> (optional)</div> |
||||
</li> |
||||
</ul> |
||||
<div><span> |
||||
<a href="/wiki/doku.php/tag:documentation?do=showtag&tag=tag%3Adocumentation">documentation</a>, |
||||
<a href="/wiki/doku.php/tag:gui?do=showtag&tag=tag%3Agui">gui</a>, |
||||
<a href="/wiki/doku.php/tag:input?do=showtag&tag=tag%3Ainput">input</a> |
||||
</span></div> |
||||
|
||||
</div> |
||||
<p><em><a href="http://direct.jmonkeyengine.org/wiki/doku.php/jme3:advanced:nifty_gui?do=export_xhtmlbody">view online version</a></em></p> |
||||
@ -1,136 +1,315 @@ |
||||
<h1><a |
||||
name="interacting_with_the_gui_from_java">Interacting with the GUI from Java</a></h1><div |
||||
class="level1"><ol><li |
||||
class="level1"><div |
||||
class="li"> <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_xml_layout.html">Nifty GUI XML Layout</a></div></li><li |
||||
class="level1"><div |
||||
class="li"> <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_overlay.html">Nifty GUI Overlay</a> or <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_projection.html">Nifty GUI Projection</a></div></li><li |
||||
class="level1"><div |
||||
class="li"> <strong>Nifty <acronym |
||||
title="Graphical User Interface">GUI</acronym> Java Interaction</strong></div></li></ol><p> The main purpose of the <acronym |
||||
title="Graphical User Interface">GUI</acronym> is to send events back to your Java class that indicate what the users clicked, which settings they chose, which values they entered into a field, etc. In the Java class, you want to respond with an appropriate action, or store the entered settings in a file, etc.</p></div><h2><a |
||||
name="connect_gui_to_java_controller">Connect GUI to Java Controller</a></h2><div |
||||
class="level2"><p> How does the <acronym |
||||
title="Extensible Markup Language">XML</acronym> file send a message back to your Java application? You register a ScreenController (a Java class) to every NiftyGUI screen. |
||||
Create a ScreenController by creating a Java class that implements the <code>de.lessvoid.nifty.screen.ScreenController</code> interface and its abtract methods.</p><pre>package my.game; |
||||
|
||||
<h1><a>Interacting with the GUI from Java</a></h1> |
||||
<div> |
||||
<ol> |
||||
<li><div> <a href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui.html">Nifty GUI Concepts</a></div> |
||||
</li> |
||||
<li><div> <a href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_xml_layout.html">Nifty GUI XML Layout</a> or <a href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_java_layout.html">Nifty GUI Java Layout</a></div> |
||||
</li> |
||||
<li><div> <a href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_overlay.html">Nifty GUI Overlay</a> or <a href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_projection.html">Nifty GUI Projection</a></div> |
||||
</li> |
||||
<li><div> <strong>Nifty <acronym title="Graphical User Interface">GUI</acronym> Java Interaction</strong></div> |
||||
</li> |
||||
</ol> |
||||
|
||||
<p> |
||||
|
||||
In the previous parts of the tutorial, you created a two-screen user interface. But it is still static, and when you click the buttons, nothing happens yet. The purpose of the <acronym title="Graphical User Interface">GUI</acronym> is to communicate with your Java classes: Your game needs to know what the users clicked, which settings they chose, which values they entered into a field, etc. Similarly, the user needs to know what the currently game state is (score, health, etc). |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Connect GUI to Java Controller</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
To let a Nifty screen communicate with the Java application, you register a <code>ScreenController</code> to every NiftyGUI screen. You create a ScreenController by creating a Java class that implements the <code>de.lessvoid.nifty.screen.ScreenController</code> interface and its abtract methods. |
||||
</p> |
||||
|
||||
<p> |
||||
<strong>Pro Tip:</strong> Since you are writing a jME3 application, you can additionally make the ScreenController class extend the <a href="/com/jme3/gde/core/docs/jme3/advanced/application_states.html">AbstractAppState</a> class! This gives the ScreenController access to the application object and to the update loop! |
||||
</p> |
||||
<pre>package tutorial; |
||||
|
||||
import com.jme3.app.Application; |
||||
import com.jme3.app.SimpleApplication; |
||||
import com.jme3.app.state.AbstractAppState; |
||||
import com.jme3.app.state.AppStateManager; |
||||
import de.lessvoid.nifty.Nifty; |
||||
import de.lessvoid.nifty.screen.Screen; |
||||
import de.lessvoid.nifty.screen.ScreenController; |
||||
public class MySettingsScreen implements ScreenController { |
||||
public MySettingsScreen(MyGameData data ){ /** constructor */ } |
||||
public void bind(Nifty nifty, Screen screen) { } |
||||
|
||||
public class MyStartScreen extends AbstractAppState implements ScreenController { |
||||
|
||||
private Nifty nifty; |
||||
private Screen screen; |
||||
private SimpleApplication app; |
||||
|
||||
/** custom methods */ |
||||
|
||||
public MyStartScreen(String data) { |
||||
/** You custom constructor, can accept arguments */ |
||||
} |
||||
|
||||
/** Nifty GUI ScreenControl methods */ |
||||
|
||||
public void bind(Nifty nifty, Screen screen) { |
||||
this.nifty = nifty; |
||||
this.screen = screen; |
||||
} |
||||
|
||||
public void onStartScreen() { } |
||||
|
||||
public void onEndScreen() { } |
||||
}</pre><p> The name and package of your custom ScreenController class (here <code>my.game.MySettingsScreen</code>) goes into the controller parameter of the respective screen it belongs to:</p><pre><span><span><nifty></span></span> |
||||
<span><screen id="settings" controller="my.game.MySettingsScreen"></span> |
||||
<!-- layer and panel code ... --> |
||||
<span><span></screen></span></span> |
||||
<span><span></nifty></span></span></pre><p> Now the Java class <code>my.game.MySettingsScreen</code> and this <acronym |
||||
title="Graphical User Interface">GUI</acronym> screen (<code>settings</code>) are connected.</p></div><h2><a |
||||
name="make_gui_and_java_interact">Make GUI and Java Interact</a></h2><div |
||||
class="level2"><p> In most cases, you will want to pass game data in and out of the ScreenController. Note that you can pass any arguments into your ScreenController constructor. In the example above, the object with the necessary data is is <code>MyGameData data</code>. |
||||
You can use any of the three following approaches to make Java classes interact with the <acronym |
||||
title="Graphical User Interface">GUI</acronym>, and you can also combine them, depending on what you want to do.</p></div><h3><a |
||||
name="gui_calls_a_void_java_method">GUI Calls a Void Java Method</a></h3><div |
||||
class="level3"><p> To respond to an interaction, add the <interact /> element to a panel and specify the Java method you want to call. In this example, we want to call <code>sayHello()</code> when a panel on the screen is clicked.</p><pre>... |
||||
<span><panel id="panel" height="25%" width="35%" align="center" valign="center"</span> |
||||
<span> backgroundColor="#f60f" childLayout="center" visibleToMouse="true"></span> |
||||
<span><text id="text" font="aurulent-sans-17.fnt" color="#000f"</span> |
||||
<span> text="Hello World!" align="center" valign="center" /></span> |
||||
<span><interact onClick="sayHello(hi)"/></span> |
||||
<span><span></panel></span></span> |
||||
...</pre><p> Back in this screen's Java class, we specify what the <code>sayHello()</code> method does. As you see, you can include String arguments in the call.</p><pre>public class MySettingsScreen implements ScreenController { |
||||
... |
||||
public void sayHello(String myarg) { |
||||
System.out.println("Nifty says "+myarg); |
||||
|
||||
/** jME3 AppState methods */ |
||||
|
||||
@Override |
||||
public void initialize(AppStateManager stateManager, Application app) { |
||||
super.initialize(stateManager, app); |
||||
this.app=(SimpleApplication)app; |
||||
} |
||||
}</pre></div><h3><a |
||||
name="gui_gets_return_value_from_java_method">GUI Gets Return Value from Java Method</a></h3><div |
||||
class="level3"><p> You can send a message from Java to Nifty. In this example, the Java class <code>callThis()</code> in MySettingsScreen defines the Text that is displayed in the textfield after the words <code>Hello World, …!</code> First define a Java method in the screen controller, in this example, <code>callThis()</code>.</p><pre>public class MySettingsScreen implements ScreenController { |
||||
... |
||||
public String callThis() { |
||||
return "my friend"; |
||||
|
||||
@Override |
||||
public void update(float tpf) { |
||||
/** jME update loop! */ |
||||
} |
||||
}</pre><p> Nifty uses <code>${CALL.callThis()}</code> to get the return value of a method from your ScreenController Java class.</p><pre>... |
||||
<span><panel id="panel" height="25%" width="35%" align="center" valign="center"</span> |
||||
<span> backgroundColor="#f60f" childLayout="center" visibleToMouse="true"></span> |
||||
<span><text id="text" font="aurulent-sans-17.fnt" color="#000f"</span> |
||||
<span> text="Hello World, ${CALL.callThis()}!" align="center" valign="center" /></span> |
||||
<span><interact onClick="sayHello(hi)"/></span> |
||||
<span><span></panel></span></span> |
||||
...</pre><p> You can also use this for Strings and numeric values, e.g. when you read settings from a file, you read them like this.</p></div><h3><a |
||||
name="java_modifies_nifty_elements_and_events">Java Modifies Nifty Elements and Events</a></h3><div |
||||
class="level3"><p> You can also alter the appearance and functions of your nifty elements from Java. |
||||
Here's an example of how to change the image <code>myElement</code>:</p><pre>NiftyImage img = nifty.getRenderEngine().createImage("Interface/Images/image.png", false); |
||||
Element niftyElement = nifty.getCurrentScreen().findElementByName("myElement"); |
||||
niftyElement.getRenderer(ImageRenderer.class).setImage(img);</pre><p> The same is valid for other elements, for example text fields:</p><pre>niftyElement.getRenderer(TextRenderer.class).setText("New text");</pre><p> Similarly, to change the onClick() event of an element, create an <code>ElementInteraction</code> object:</p><pre>Element niftyElement = nifty.getCurrentScreen().findElementByName("myElement"); |
||||
niftyElement.getElementInteraction().getPrimary().setOnMouseOver(new NiftyMethodInvoker(nifty, "myCustomMethod()", this));</pre><p> For this to work, there already needs to be an < interact > tag inside your xml element:</p><pre><interact onClick="doNothing()"/></pre></div><h2><a |
||||
name="concepts_examples">Concepts & Examples</a></h2><div |
||||
class="level2"><p> note: Nifty-gui 1.3 oriented.<br/></p></div><h3><a |
||||
name="how_do_i_create_a_popup_menu_that_i_populate_in_java">How do I create a popup menu that I populate in Java?</a></h3><div |
||||
class="level3"><p> Even though you create and populate the popup menu in Java you still need a "placeholder" in your <acronym |
||||
title="Extensible Markup Language">XML</acronym> file, below is an example extract:</p><pre><span><useControls filename="nifty-default-controls.xml"/></span> |
||||
... |
||||
<span><popup id="niftyPopupMenu" childLayout="absolute-inside"</span> |
||||
<span> controller="ControllerOfYourChoice" width="10%"></span> |
||||
<span><interact onClick="closePopup()"</span> |
||||
<span> onSecondaryClick="closePopup()" onTertiaryClick="closePopup()" /></span> |
||||
<span><control id="#menu" name="niftyMenu" /></span> |
||||
<span><span></popup></span></span> |
||||
...</pre><p> A brief explanation of some the attributes above:</p><ul><li |
||||
class="level1"><div |
||||
class="li"> the popup id will be used within your Java code so that nifty knows which popup placeholder to create</div></li><li |
||||
class="level1"><div |
||||
class="li"> controller will tell nifty which Java class handles MenuItemActivatedEvent</div></li><li |
||||
class="level1"><div |
||||
class="li"> on(Secondary/Tertiary)Click tells nifty to close the popup if the user clicks anywhere except on the menu items (in this example)</div></li><li |
||||
class="level1"><div |
||||
class="li"> control id will be used by the Java class to define a control type (i.e. Menu)</div></li></ul><p> Java code within your defined ScreenController implementation:<br/></p><pre>private Element popup; |
||||
|
||||
}</pre> |
||||
|
||||
<p> |
||||
The name and package of your custom ScreenController class (here <code>tutorial.MyStartScreen</code>) goes into the controller parameter of the respective <acronym title="Extensible Markup Language">XML</acronym> screen it belongs to. For example: |
||||
</p> |
||||
<pre><span><span><nifty></span></span> |
||||
<span><screen id="start" controller="tutorial.MyStartScreen"></span> |
||||
<!-- layer and panel code ... --> |
||||
<span><span></screen></span></span> |
||||
<span><span></nifty></span></span></pre> |
||||
|
||||
<p> |
||||
Or the same in a Java syntax, respectively: |
||||
</p> |
||||
<pre> nifty.addScreen("start", new ScreenBuilder("start") {{ |
||||
controller(new tutorial.MyStartScreen());</pre> |
||||
|
||||
<p> |
||||
Now the Java class <code>MyStartScreen</code> and this <acronym title="Graphical User Interface">GUI</acronym> screen (<code>start</code>) are connected. For this example you can also connect the <code>hud</code> screen to MyStartScreen. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Make GUI and Java Interact</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
In most cases, you will want to pass game data in and out of the ScreenController. Note that you can pass any custom arguments from your Java class into your ScreenController constructor (<code>public MyStartScreen(GameData data) {}</code>). |
||||
</p> |
||||
|
||||
<p> |
||||
Use any combination of the three following approaches to make Java classes interact with the <acronym title="Graphical User Interface">GUI</acronym>. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>GUI Calls a Void Java Method</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
This is how you respond to an <acronym title="Graphical User Interface">GUI</acronym> interaction such as clicks in <acronym title="Extensible Markup Language">XML</acronym> GUIs: |
||||
</p> |
||||
<ol> |
||||
<li><div> Add <code>visibleToMouse="true"</code> to the parent element!</div> |
||||
</li> |
||||
<li><div> Embed the <code><interact /></code> element into the parent element. </div> |
||||
</li> |
||||
<li><div> Specify the Java methods that you want to call when the users performs certain actions, such as clicking. <br/> |
||||
Example: <code><interact onClick="startGame(hud)" /></code></div> |
||||
</li> |
||||
</ol> |
||||
|
||||
<p> |
||||
|
||||
Or this is how you respond to an <acronym title="Graphical User Interface">GUI</acronym> interaction such as clicks in Java GUIs: |
||||
</p> |
||||
<ol> |
||||
<li><div> Add <code>visibleToMouse(true);</code> to the parent element!</div> |
||||
</li> |
||||
<li><div> Embed one of the <code>interact…()</code> elements into the parent element</div> |
||||
</li> |
||||
<li><div> Specify the Java method that you want to call after the interaction. <br/> |
||||
Example: <code>interactOnClick("startGame(hud)");</code></div> |
||||
</li> |
||||
</ol> |
||||
|
||||
<p> |
||||
|
||||
In the following example, we call the <code>startGame()</code> method when the player clicks the Start button, and <code>quitGame()</code> when the player clicks the Quit button. |
||||
</p> |
||||
<pre> <span><panel id="panel_bottom_left" height="50%" width="50%" valign="center" childLayout="center"></span> |
||||
<span><control name="button" label="Start" id="StartButton" align="center" valign="center" </span> |
||||
<span> visibleToMouse="true" ></span> |
||||
<span><interact onClick="startGame(hud)"/></span> |
||||
<span><span></control></span></span> |
||||
<span><span></panel></span></span> |
||||
|
||||
<span><panel id="panel_bottom_right" height="50%" width="50%" valign="center" childLayout="center"></span> |
||||
<span><control name="button" label="Quit" id="QuitButton" align="center" valign="center" </span> |
||||
<span> visibleToMouse="true" ></span> |
||||
<span><interact onClick="quitGame()"/></span> |
||||
<span><span></control></span></span> |
||||
<span><span></panel></span></span></pre> |
||||
|
||||
<p> |
||||
Or the same in a Java syntax, respectively: |
||||
</p> |
||||
<pre>control(new ButtonBuilder("StartButton", "Start") {{ |
||||
alignCenter(); |
||||
valignCenter(); |
||||
height("50%"); |
||||
width("50%"); |
||||
visibleToMouse(true); |
||||
interactOnClick("startGame(hud)"); |
||||
}}); |
||||
... |
||||
public void createMyPopupMenu(){ |
||||
popup = nifty.createPopup("niftyPopupMenu"); |
||||
Menu.class); |
||||
myMenu.setWidth(new SizeValue("100px")); //must be set |
||||
myMenu.addMenuItem("Click me!", "menuItemIcon.png", new menuItem("menuItemid", "blah blah")); //menuItem is a custom class |
||||
nifty.subscribe(nifty.getCurrentScreen(), myMenu.getId(), MenuItemActivatedEvent.class, new MenuItemActivatedEventSubscriber()); |
||||
} |
||||
public void showMenu(){ //the method to trigger the menu |
||||
createMyPopupMenu() //you should call this in your constructor rather than here if it is a menu that is going to be used many times |
||||
nifty.showPopup(nifty.getCurrentScreen(), popup.getId(), null); //call the popup to screen of your choice |
||||
} |
||||
private class menuItem{ |
||||
public String id; |
||||
public String name; |
||||
public menuItem(String name){ |
||||
this.id= id; |
||||
this.name = name; |
||||
|
||||
control(new ButtonBuilder("QuitButton", "Quit") {{ |
||||
alignCenter(); |
||||
valignCenter(); |
||||
height("50%"); |
||||
width("50%"); |
||||
visibleToMouse(true); |
||||
interactOnClick("quitGame()"); |
||||
}});</pre> |
||||
|
||||
<p> |
||||
Back in the MyStartScreen class, you specify what the <code>startGame()</code> and <code>quitGame()</code> methods do. As you see, you can pass String arguments (here <code>hud</code>) in the method call. You also see that you have access to the app object. |
||||
</p> |
||||
<pre>public class MyStartScreen implements ScreenController { |
||||
... |
||||
|
||||
/** custom methods */ |
||||
public void startGame(String nextScreen) { |
||||
nifty.gotoScreen(nextScreen); // switch to another screen |
||||
// start the game and do some more stuff... |
||||
} |
||||
}</pre><ul><li |
||||
class="level1"><div |
||||
class="li"> createMyPopupMenu() creates the menu with set width so that you can populate it</div></li><li |
||||
class="level1"><div |
||||
class="li"> showMenu() is called by something to trigger the menu (i.e. could be a Key or some other method)</div></li></ul><p> To handle menu item events (i.e. calling a method when you click on a menu item) you subscribe a EventTopicSubscriber<MenuItemActivatedEvent> class implementation to a nifty screen and element.<br/></p><pre>private class MenuItemActivatedEventSubscriber implements EventTopicSubscriber<MenuItemActivatedEvent> { |
||||
@Override |
||||
public void onEvent(final String id, final MenuItemActivatedEvent event) { |
||||
menuItem item = (menuItem) event.getItem(); |
||||
if ("menuItemid".equals(item.id)) { |
||||
//do something !!! |
||||
|
||||
public void quitGame() { |
||||
app.stop(); |
||||
} |
||||
|
||||
... |
||||
}</pre> |
||||
|
||||
<p> |
||||
The startGame() example simply switches the <acronym title="Graphical User Interface">GUI</acronym> to the <code>hud</code> screen when the user clicks Start. Of course, in a real game, you would perform more steps here: Load the game level, switch to in-game input and navigation handling, set a custom <code>running</code> boolean to true, attach custom in-game AppStates – and lots more. |
||||
</p> |
||||
|
||||
<p> |
||||
The quitGame() example shows that you have access to the application <code>app</code> object because you made the ScreenController extend AbstractAppState. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>GUI Gets Return Value from Java Method</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
When the Nifty <acronym title="Graphical User Interface">GUI</acronym> is initialized, you can get data from Java. In this example, the Java class <code>getPlayerName()</code> in <code>MyStartScreen</code> defines the Text that is displayed in the textfield before the words <code>'s Cool Game</code>. |
||||
</p> |
||||
|
||||
<p> |
||||
First define a Java method in the screen controller, in this example, <code>getPlayerName()</code>. |
||||
</p> |
||||
<pre>public class MySettingsScreen implements ScreenController { |
||||
... |
||||
public String getPlayerName(){ |
||||
return System.getProperty("user.name"); |
||||
} |
||||
};</pre></div><h2><a |
||||
name="useful_links">Useful Links</a></h2><div |
||||
class="level2"><p> Nifty 1.3 controls Java Docs: <a |
||||
href="http://nifty-gui.sourceforge.net/projects/1.3-SNAPSHOT/nifty-default-controls/apidocs/">http://nifty-gui.sourceforge.net/projects/1.3-SNAPSHOT/nifty-default-controls/apidocs/</a> <br/> <br/> Nifty 1.3 Java Docs: <a |
||||
href="http://nifty-gui.sourceforge.net/projects/1.3-SNAPSHOT/nifty/apidocs/index.html">http://nifty-gui.sourceforge.net/projects/1.3-SNAPSHOT/nifty/apidocs/index.html</a> <br/> <br/> Examples of standard controls in Nifty 1.3: <a |
||||
href="http://sourceforge.net/apps/mediawiki/nifty-gui/index.php?title=Nifty_Standard_Controls_%28Nifty_1.3%29">http://sourceforge.net/apps/mediawiki/nifty-gui/index.php?title=Nifty_Standard_Controls_%28Nifty_1.3%29</a> <br/> <br/> Learn more: <a |
||||
href="http://sourceforge.net/apps/mediawiki/nifty-gui/index.php?title=MarkUp">Nifty Syntax</a></p><div |
||||
class="tags"><span> <a |
||||
href="/wiki/doku.php/tag:gui?do=showtag&tag=tag%3Agui">gui</a>, <a |
||||
href="/wiki/doku.php/tag:documentation?do=showtag&tag=tag%3Adocumentation">documentation</a>, <a |
||||
href="/wiki/doku.php/tag:input?do=showtag&tag=tag%3Ainput">input</a>, <a |
||||
href="/wiki/doku.php/tag:controller?do=showtag&tag=tag%3Acontroller">controller</a>, <a |
||||
href="/wiki/doku.php/tag:controllers?do=showtag&tag=tag%3Acontrollers">controllers</a> </span></div></div> |
||||
<p><em><a href="http://jmonkeyengine.org/wiki/doku.php/jme3:advanced:nifty_gui_java_interaction?do=export_xhtmlbody">view online version</a></em></p> |
||||
}</pre> |
||||
|
||||
<p> |
||||
Nifty uses <code>${CALL.getPlayerName()}</code> to get the return value of the getPlayerName() method from your ScreenController Java class. |
||||
</p> |
||||
<pre><span><text text="${CALL.getPlayerName()}'s Cool Game" font="Interface/Fonts/Default.fnt" width="100%" height="100%" /></span></pre> |
||||
|
||||
<p> |
||||
Or the same in a Java syntax, respectively: |
||||
</p> |
||||
<pre>text(new TextBuilder() {{ |
||||
text("${CALL.getPlayerName()}'s Cool Game"); |
||||
font("Interface/Fonts/Default.fnt"); |
||||
height("100%"); |
||||
width("100%"); |
||||
}});</pre> |
||||
|
||||
<p> |
||||
You can use this for Strings and numeric values (e.g. when you read settings from a file, you display the results in the <acronym title="Graphical User Interface">GUI</acronym>) and also for methods with side effects. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Java Modifies Nifty Elements and Events</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
You can also alter the appearance and functions of your nifty elements from Java. Make certain that the element that you want to alter has its <code>id="name"</code> attribute set, so you can identy and address it. |
||||
</p> |
||||
|
||||
<p> |
||||
Here's an example of how to change an image called <code>playerhealth</code>: |
||||
</p> |
||||
<pre>// load or create new image |
||||
NiftyImage img = nifty.getRenderEngine().createImage("Interface/Images/face2.png", false); |
||||
// find old image |
||||
Element niftyElement = nifty.getCurrentScreen().findElementByName("playerhealth"); |
||||
// swap old with new image |
||||
niftyElement.getRenderer(ImageRenderer.class).setImage(img);</pre> |
||||
|
||||
<p> |
||||
The same is valid for other elements, for example a text label "score": |
||||
</p> |
||||
<pre>// find old text |
||||
Element niftyElement = nifty.getCurrentScreen().findElementByName("score"); |
||||
// swap old with new text |
||||
niftyElement.getRenderer(TextRenderer.class).setText("124");</pre> |
||||
|
||||
<p> |
||||
Similarly, to change the onClick() event of an element, create an <code>ElementInteraction</code> object: |
||||
</p> |
||||
<pre>Element niftyElement = nifty.getCurrentScreen().findElementByName("myElement"); |
||||
niftyElement.getElementInteraction().getPrimary().setOnMouseOver(new NiftyMethodInvoker(nifty, "myCustomMethod()", this));</pre> |
||||
|
||||
<p> |
||||
For this to work, there already needs to be a (possibly inactive) <code><interact /></code> tag inside your xml element: |
||||
|
||||
</p> |
||||
<pre><span><interact onClick="doNothing()"/></span></pre> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Next Steps</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
You're done with the basic Nifty <acronym title="Graphical User Interface">GUI</acronym> for jME3 tutorial. You can proceed to advanced topics and learn how add controls and effects: |
||||
</p> |
||||
<ul> |
||||
<li><div> <a href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_scenarios.html"> Nifty GUI Scenarios</a></div> |
||||
</li> |
||||
</ul> |
||||
<div><span> |
||||
<a href="/wiki/doku.php/tag:gui?do=showtag&tag=tag%3Agui">gui</a>, |
||||
<a href="/wiki/doku.php/tag:documentation?do=showtag&tag=tag%3Adocumentation">documentation</a>, |
||||
<a href="/wiki/doku.php/tag:input?do=showtag&tag=tag%3Ainput">input</a>, |
||||
<a href="/wiki/doku.php/tag:controller?do=showtag&tag=tag%3Acontroller">controller</a>, |
||||
<a href="/wiki/doku.php/tag:controllers?do=showtag&tag=tag%3Acontrollers">controllers</a> |
||||
</span></div> |
||||
|
||||
</div> |
||||
<p><em><a href="http://direct.jmonkeyengine.org/wiki/doku.php/jme3:advanced:nifty_gui_java_interaction?do=export_xhtmlbody">view online version</a></em></p> |
||||
@ -0,0 +1,633 @@ |
||||
|
||||
<h1><a>Laying Out the GUI in Java</a></h1> |
||||
<div> |
||||
<ol> |
||||
<li><div> <a href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui.html">Nifty GUI Concepts</a></div> |
||||
</li> |
||||
<li><div> <a href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_xml_layout.html">Nifty GUI XML Layout</a> or <strong>Nifty <acronym title="Graphical User Interface">GUI</acronym> Java Layout</strong></div> |
||||
</li> |
||||
<li><div> <a href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_overlay.html">Nifty GUI Overlay</a> or <a href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_projection.html">Nifty GUI Projection</a></div> |
||||
</li> |
||||
<li><div> <a href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_java_interaction.html">Interact with the GUI from Java</a></div> |
||||
</li> |
||||
</ol> |
||||
|
||||
<p> |
||||
|
||||
<strong>Work in progress</strong> You can "draw" the <acronym title="Graphical User Interface">GUI</acronym> to the screen by writing Java code – alternatively to using <acronym title="Extensible Markup Language">XML</acronym>. Typically you lay out the static base <acronym title="Graphical User Interface">GUI</acronym> in <acronym title="Extensible Markup Language">XML</acronym>, and use Java commands if you need to change the <acronym title="Graphical User Interface">GUI</acronym> dynamically at runtime. In theory, you can also lay out the whole <acronym title="Graphical User Interface">GUI</acronym> in Java (but we don't cover that here). |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Sample Code</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
Sample project |
||||
</p> |
||||
<ul> |
||||
<li><div> <strong>Original Source Code:</strong> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://nifty-gui.svn.sourceforge.net/viewvc/nifty-gui/nifty-default-controls-examples/trunk/src/main/java/de/lessvoid/nifty/examples/"><param name="text" value="<html><u>/nifty-default-controls-examples/trunk/src/main/java/de/lessvoid/nifty/examples/</u></html>"><param name="textColor" value="blue"></object>. <br/> |
||||
</div> |
||||
</li> |
||||
<li><div> <strong>Download demo project:</strong> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://files.seapegasus.org/NiftyGuiDemo.zip"><param name="text" value="<html><u>http://files.seapegasus.org/NiftyGuiDemo.zip</u></html>"><param name="textColor" value="blue"></object> (jme3-ready) <br/> |
||||
The full demo ZIP is based on <code>de.lessvoid.nifty.examples.controls.ControlsDemo.java</code>.</div> |
||||
<ol> |
||||
<li><div> The demo is a SimpleApplication-based game (use e.g. the BasicGame template in the jMonkeyPlatform).</div> |
||||
</li> |
||||
<li><div> Copy images and sound files into your project's <code>assets/Interface/</code> directory. (In this example, I copied them from <code>nifty-default-controls-examples/trunk/src/main/resources/</code> to <code>assets/Interface/</code>).</div> |
||||
</li> |
||||
<li><div> Make sure to use paths relative to your project's <code>assets/</code> directory.</div> |
||||
<ul> |
||||
<li><div> E.g. for .fnt/.png/.jpg files use <code>filename("Interface/yang.png");</code> ( not <code>filename("yang.png");</code>).</div> |
||||
</li> |
||||
<li><div> E.g. for .wav/.ogg files use <code>filename("Interface/sounds/gong.wav");</code> (not <code>filename("sounds/gong.wav");</code>).</div> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
</ol> |
||||
</li> |
||||
</ul> |
||||
|
||||
<p> |
||||
|
||||
Just so you get a quick picture what Nifty <acronym title="Graphical User Interface">GUI</acronym>'s Java Syntax looks like, here is the most basic example. It creates a screen with a layer and a panel that contains a button. |
||||
</p> |
||||
<pre>package mygame; |
||||
|
||||
import com.jme3.app.SimpleApplication; |
||||
import com.jme3.niftygui.NiftyJmeDisplay; |
||||
import de.lessvoid.nifty.Nifty; |
||||
import de.lessvoid.nifty.builder.ScreenBuilder; |
||||
import de.lessvoid.nifty.builder.LayerBuilder; |
||||
import de.lessvoid.nifty.builder.PanelBuilder; |
||||
import de.lessvoid.nifty.controls.button.builder.ButtonBuilder; |
||||
import de.lessvoid.nifty.screen.DefaultScreenController; |
||||
|
||||
<span>/** |
||||
* @author iamcreasy |
||||
*/</span> |
||||
public class Main extends SimpleApplication { |
||||
|
||||
public static void main(String[] args) { |
||||
Main app = new Main(); |
||||
app.start(); |
||||
} |
||||
|
||||
@Override |
||||
public void simpleInitApp() { |
||||
NiftyJmeDisplay niftyDisplay = new NiftyJmeDisplay( |
||||
assetManager, inputManager, audioRenderer, guiViewPort); |
||||
Nifty nifty = niftyDisplay.getNifty(); |
||||
guiViewPort.addProcessor(niftyDisplay); |
||||
flyCam.setDragToRotate(true); |
||||
|
||||
nifty.loadStyleFile("nifty-default-styles.xml"); |
||||
nifty.loadControlFile("nifty-default-controls.xml"); |
||||
|
||||
// <screen> |
||||
nifty.addScreen("Screen_ID", new ScreenBuilder("Hello Nifty Screen"){{ |
||||
controller(new DefaultScreenController()); // Screen properties |
||||
|
||||
// <layer> |
||||
layer(new LayerBuilder("Layer_ID") {{ |
||||
childLayoutVertical(); // layer properties, add more... |
||||
|
||||
// <panel> |
||||
panel(new PanelBuilder("Panel_ID") {{ |
||||
childLayoutCenter(); // panel properties, add more... |
||||
|
||||
// GUI elements |
||||
control(new ButtonBuilder("Button_ID", "Hello Nifty"){{ |
||||
alignCenter(); |
||||
valignCenter(); |
||||
height("5%"); |
||||
width("15%"); |
||||
}}); |
||||
|
||||
//.. add more GUI elements here |
||||
|
||||
}}); |
||||
// </panel> |
||||
}}); |
||||
// </layer> |
||||
}}.build(nifty)); |
||||
// </screen> |
||||
|
||||
nifty.gotoScreen("Screen_ID"); // start the screen |
||||
} |
||||
}</pre> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Implement Your GUI Layout</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
<img src="nbdocs:/com/jme3/gde/core/docs/jme3/advanced/gui-layout-draft.png"> |
||||
</p> |
||||
|
||||
<p> |
||||
In this tutorial, you recreate the same screen as in the Nifty <acronym title="Graphical User Interface">GUI</acronym> <acronym title="Extensible Markup Language">XML</acronym> example. |
||||
</p> |
||||
|
||||
<p> |
||||
Create an Screen.Java file in the <code>assets/Interfaces/</code> directory of your project. One Java file can contain several, or even all screens. As a reminder: Nifty displays one screen at a time; a screen contains several layers on top of one another; each layer contains panels that are embedded into another; the panels contain the actual content (text, images, or controls). |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Make Screens</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
The following minimal Java file contains a start screen and a HUD screen. (Neither has been defined yet.) |
||||
</p> |
||||
<pre>nifty.addScreen("start", new ScreenBuilder("start"){{ |
||||
controller(new DefaultScreenController()); |
||||
// <!-- ... --> |
||||
}}.build(nifty)); |
||||
|
||||
nifty.addScreen("hud", new ScreenBuilder("hud"){{ |
||||
controller(new DefaultScreenController()); |
||||
// <!-- ... --> |
||||
}}.build(nifty));</pre> |
||||
|
||||
<p> |
||||
Every Nifty <acronym title="Graphical User Interface">GUI</acronym> must have a start screen. The others (in this example, the HUD screen) are optional. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Make Layers</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
The following Java code shows how we add layers to the start screen and HUD screen: |
||||
</p> |
||||
<pre>nifty.addScreen("start", new ScreenBuilder("start"){{ |
||||
controller(new DefaultScreenController()); |
||||
|
||||
// layer added |
||||
layer(new LayerBuilder("background") {{ |
||||
childLayoutCenter(); |
||||
backgroundColor("#000f"); |
||||
|
||||
// <!-- ... --> |
||||
}}); |
||||
|
||||
layer(new LayerBuilder("foreground") {{ |
||||
childLayoutVertical(); |
||||
backgroundColor("#0000"); |
||||
|
||||
// <!-- ... --> |
||||
}}); |
||||
// layer added |
||||
|
||||
}}.build(nifty));</pre> |
||||
|
||||
<p> |
||||
Repeat the same, but use |
||||
</p> |
||||
<pre>nifty.addScreen("hud", new ScreenBuilder("hud"){{</pre> |
||||
|
||||
<p> |
||||
for the HUD screen. |
||||
</p> |
||||
|
||||
<p> |
||||
In a layer, you can now add panels and arrange them. Panels are containers that mark the areas where you want to display text, images, or controls (buttons etc) later. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Make Panels</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
A panel is the inner-most container (that will contain the actual content: text, images, or controls). You place panels inside layers. The following panels go into in the <code>start</code> screen: |
||||
</p> |
||||
<pre> nifty.addScreen("start", new ScreenBuilder("start") {{ |
||||
controller(new DefaultScreenController()); |
||||
layer(new LayerBuilder("background") {{ |
||||
childLayoutCenter(); |
||||
backgroundColor("#000f"); |
||||
// <!-- ... --> |
||||
}}); |
||||
|
||||
layer(new LayerBuilder("foreground") {{ |
||||
childLayoutVertical(); |
||||
backgroundColor("#0000"); |
||||
|
||||
// panel added |
||||
panel(new PanelBuilder("panel_top") {{ |
||||
childLayoutCenter(); |
||||
alignCenter(); |
||||
backgroundColor("#f008"); |
||||
height("25%"); |
||||
width("75%"); |
||||
}}); |
||||
|
||||
panel(new PanelBuilder("panel_mid") {{ |
||||
childLayoutCenter(); |
||||
alignCenter(); |
||||
backgroundColor("#0f08"); |
||||
height("50%"); |
||||
width("75%"); |
||||
}}); |
||||
|
||||
panel(new PanelBuilder("panel_bottom") {{ |
||||
childLayoutHorizontal(); |
||||
alignCenter(); |
||||
backgroundColor("#00f8"); |
||||
height("25%"); |
||||
width("75%"); |
||||
|
||||
panel(new PanelBuilder("panel_bottom_left") {{ |
||||
childLayoutCenter(); |
||||
valignCenter(); |
||||
backgroundColor("#44f8"); |
||||
height("50%"); |
||||
width("50%"); |
||||
}}); |
||||
|
||||
panel(new PanelBuilder("panel_bottom_right") {{ |
||||
childLayoutCenter(); |
||||
valignCenter(); |
||||
backgroundColor("#88f8"); |
||||
height("50%"); |
||||
width("50%"); |
||||
}}); |
||||
}}); // panel added |
||||
}}); |
||||
|
||||
}}.build(nifty));</pre> |
||||
|
||||
<p> |
||||
The following panels go into in the <code>hud</code> screen: |
||||
</p> |
||||
<pre> nifty.addScreen("hud", new ScreenBuilder("hud") {{ |
||||
controller(new DefaultScreenController()); |
||||
|
||||
layer(new LayerBuilder("background") {{ |
||||
childLayoutCenter(); |
||||
backgroundColor("#000f"); |
||||
// <!-- ... --> |
||||
}}); |
||||
|
||||
layer(new LayerBuilder("foreground") {{ |
||||
childLayoutHorizontal(); |
||||
backgroundColor("#0000"); |
||||
|
||||
// panel added |
||||
panel(new PanelBuilder("panel_left") {{ |
||||
childLayoutVertical(); |
||||
backgroundColor("#0f08"); |
||||
height("100%"); |
||||
width("80%"); |
||||
// <!-- spacer --> |
||||
}}); |
||||
|
||||
panel(new PanelBuilder("panel_right") {{ |
||||
childLayoutVertical(); |
||||
backgroundColor("#00f8"); |
||||
height("100%"); |
||||
width("20%"); |
||||
|
||||
panel(new PanelBuilder("panel_top_right1") {{ |
||||
childLayoutCenter(); |
||||
backgroundColor("#00f8"); |
||||
height("15%"); |
||||
width("100%"); |
||||
}}); |
||||
|
||||
panel(new PanelBuilder("panel_top_right2") {{ |
||||
childLayoutCenter(); |
||||
backgroundColor("#44f8"); |
||||
height("15%"); |
||||
width("100%"); |
||||
}}); |
||||
|
||||
panel(new PanelBuilder("panel_bot_right") {{ |
||||
childLayoutCenter(); |
||||
valignCenter(); |
||||
backgroundColor("#88f8"); |
||||
height("70%"); |
||||
width("100%"); |
||||
}}); |
||||
}}); // panel added |
||||
}}); |
||||
}}.build(nifty));</pre> |
||||
|
||||
<p> |
||||
Try the sample. Remember to activate a screen using <code>nifty.gotoScreen("start");</code> or <code>hud</code> respectively. |
||||
The result should look as follows: |
||||
</p> |
||||
|
||||
<p> |
||||
<img src="nbdocs:/com/jme3/gde/core/docs/jme3/advanced/nifty-gui-panels.png"> |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Adding Content to Panels</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
See also <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://sourceforge.net/apps/mediawiki/nifty-gui/index.php?title=Layout_Introduction"><param name="text" value="<html><u>Layout Introduction</u></html>"><param name="textColor" value="blue"></object> on the Nifty <acronym title="Graphical User Interface">GUI</acronym> site. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Add Images</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
The start-background.png image is a fullscreen background picture. In the <code>start</code> screen, add the following image element: |
||||
|
||||
</p> |
||||
<pre> nifty.addScreen("start", new ScreenBuilder("start") {{ |
||||
controller(new DefaultScreenController()); |
||||
layer(new LayerBuilder("background") {{ |
||||
childLayoutCenter(); |
||||
backgroundColor("#000f"); |
||||
|
||||
// add image |
||||
image(new ImageBuilder() {{ |
||||
filename("Interface/tutorial/start-background.png"); |
||||
}}); |
||||
|
||||
}});</pre> |
||||
|
||||
<p> |
||||
The hud-frame.png image is a transparent frame that we use as HUD decoration. In the <code>hud</code> screen, add the following image element: |
||||
|
||||
</p> |
||||
<pre> nifty.addScreen("hud", new ScreenBuilder("hud") {{ |
||||
controller(new DefaultScreenController()); |
||||
|
||||
layer(new LayerBuilder("background") {{ |
||||
childLayoutCenter(); |
||||
backgroundColor("#000f"); |
||||
|
||||
// add image |
||||
image(new ImageBuilder() {{ |
||||
filename("Interface/tutorial/hud-frame.png"); |
||||
}}); |
||||
|
||||
}});</pre> |
||||
|
||||
<p> |
||||
The face1.png image is an image that you want to use as a status icon. |
||||
In the <code>hud</code> screen's <code>foreground</code> layer, add the following image element: |
||||
|
||||
</p> |
||||
<pre> panel(new PanelBuilder("panel_top_right2") {{ |
||||
childLayoutCenter(); |
||||
backgroundColor("#44f8"); |
||||
height("15%"); |
||||
width("100%"); |
||||
|
||||
// add image |
||||
image(new ImageBuilder() {{ |
||||
filename("Interface/tutorial/face1.png"); |
||||
valignCenter(); |
||||
alignCenter(); |
||||
height("50%"); |
||||
width("30%"); |
||||
}}); |
||||
|
||||
}});</pre> |
||||
|
||||
<p> |
||||
|
||||
This image is scaled to use 50% of the height and 30% of the width of its container. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Add Static Text</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
The game title is a typical example of static text. In the <code>start</code> screen, add the following text element: |
||||
|
||||
</p> |
||||
<pre> // panel added |
||||
panel(new PanelBuilder("panel_top") {{ |
||||
childLayoutCenter(); |
||||
alignCenter(); |
||||
backgroundColor("#f008"); |
||||
height("25%"); |
||||
width("75%"); |
||||
|
||||
// add text |
||||
text(new TextBuilder() {{ |
||||
text("My Cool Game"); |
||||
font("Interface/Fonts/Default.fnt"); |
||||
height("100%"); |
||||
width("100%"); |
||||
}}); |
||||
|
||||
}});</pre> |
||||
|
||||
<p> |
||||
For longer pieces of static text, such as an introduction, you can use wrap="true". Add the following text element to the <code>Start screen</code>: |
||||
</p> |
||||
<pre> panel(new PanelBuilder("panel_mid") {{ |
||||
childLayoutCenter(); |
||||
alignCenter(); |
||||
backgroundColor("#0f08"); |
||||
height("50%"); |
||||
width("75%"); |
||||
// add text |
||||
text(new TextBuilder() {{ |
||||
text("Here goes some text describing the game and the rules and stuff. "+ |
||||
"Incidentally, the text is quite long and needs to wrap at the end of lines. "); |
||||
font("Interface/Fonts/Default.fnt"); |
||||
wrap(true); |
||||
height("100%"); |
||||
width("100%"); |
||||
}}); |
||||
|
||||
}});</pre> |
||||
|
||||
<p> |
||||
The font used is jME3's default font "Interface/Fonts/Default.fnt" which is included in the jMonkeyEngine.JAR. You can add your own fonts to your own <code>assets/Interface</code> directory. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Add Controls</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
Before you can use any control, you must load a Control Definition first. Add the following two lines <em>before</em> your screen definitions: |
||||
</p> |
||||
<pre> nifty.loadStyleFile("nifty-default-styles.xml"); |
||||
nifty.loadControlFile("nifty-default-controls.xml");</pre> |
||||
|
||||
</div> |
||||
|
||||
<h4><a>Label Control</a></h4> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
Use label controls for text that you want to edit dynamically from Java. One example for this is the score display. |
||||
In the <code>hud</code> screen's <code>foreground</code> layer, add the following text element: |
||||
</p> |
||||
<pre> panel(new PanelBuilder("panel_top_right1") {{ |
||||
childLayoutCenter(); |
||||
backgroundColor("#00f8"); |
||||
height("15%"); |
||||
width("100%"); |
||||
|
||||
control(new LabelBuilder(){{ |
||||
color("#000"); |
||||
text("123"); |
||||
width("100%"); |
||||
height("100%"); |
||||
}});</pre> |
||||
|
||||
<p> |
||||
Note that the width and height do not scale the bitmap font, but the make indirectly certain it is centered. If you want a different size for the font, you need to provide an extra bitmap font (they come with fixes sizes and don't scale well). |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h4><a>Button Control</a></h4> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
Our <acronym title="Graphical User Interface">GUI</acronym> plan asks for two buttons on the start screen. You add the Start and Quit buttons to the bottom panel of the <code>start</code> screen using the <code><control></code> element: |
||||
</p> |
||||
<pre> panel(new PanelBuilder("panel_bottom_left") {{ |
||||
childLayoutCenter(); |
||||
valignCenter(); |
||||
backgroundColor("#44f8"); |
||||
height("50%"); |
||||
width("50%"); |
||||
|
||||
// add control |
||||
control(new ButtonBuilder("StartButton", "Start") {{ |
||||
alignCenter(); |
||||
valignCenter(); |
||||
height("50%"); |
||||
width("50%"); |
||||
}}); |
||||
|
||||
}}); |
||||
|
||||
panel(new PanelBuilder("panel_bottom_right") {{ |
||||
childLayoutCenter(); |
||||
valignCenter(); |
||||
backgroundColor("#88f8"); |
||||
height("50%"); |
||||
width("50%"); |
||||
|
||||
// add control |
||||
control(new ButtonBuilder("QuitButton", "Quit") {{ |
||||
alignCenter(); |
||||
valignCenter(); |
||||
height("50%"); |
||||
width("50%"); |
||||
}}); |
||||
|
||||
}});</pre> |
||||
|
||||
<p> |
||||
Note that these controls don't do anything yet – we'll get to that soon. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h4><a>Other Controls</a></h4> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
Nifty additionally offers many customizable controls such as check boxes, text fields, menus, chats, tabs, … See also <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://sourceforge.net/apps/mediawiki/nifty-gui/index.php?title=Elements"><param name="text" value="<html><u>Elements</u></html>"><param name="textColor" value="blue"></object> on the Nifty <acronym title="Graphical User Interface">GUI</acronym> site. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Intermediate Result</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
When you preview this code in the jMonkeyEngine <acronym title="Software Development Kit">SDK</acronym>, our tutorial demo should looks as follows: A start screen with two buttons, and a game screen with a simple HUD frame and a blue cube (which stands for any jME3 game content). |
||||
</p> |
||||
|
||||
<p> |
||||
<strong>Tip:</strong> Remove all lines that set background colors, you only needed them to see the arrangement. |
||||
</p> |
||||
|
||||
<p> |
||||
<img src="nbdocs:/com/jme3/gde/core/docs/jme3/advanced/nifty-gui-simple-demo.png"> |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Nifty Java Settings</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
Before initializing the nifty screens, you set up properties and register media. |
||||
</p> |
||||
<div><table> |
||||
<tr> |
||||
<th> Nifty Method </th><th> Description </th> |
||||
</tr> |
||||
<tr> |
||||
<td> registerSound("mysound", "Interface/abc.wav"); </td><td> </td> |
||||
</tr> |
||||
<tr> |
||||
<td> registerMusic("mymusic", "Interface/xyz.ogg"); </td><td> </td> |
||||
</tr> |
||||
<tr> |
||||
<td> registerMouseCursor("mypointer", "Interface/abc.png", 5, 4); </td><td> </td> |
||||
</tr> |
||||
<tr> |
||||
<td> registerEffect(?); </td><td> ? </td> |
||||
</tr> |
||||
<tr> |
||||
<td> setDebugOptionPanelColors(true);</td><td> Highlight all panels, makes it easier to arrange them. </td> |
||||
</tr> |
||||
</table></div> |
||||
<!-- EDIT1 TABLE [17259-17582] --> |
||||
<p> |
||||
|
||||
Example: |
||||
</p> |
||||
<pre>nifty.registerMouseCursor("hand", "Interface/mouse-cursor-hand.png", 5, 4);</pre> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Next Steps</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
Integrate the <acronym title="Graphical User Interface">GUI</acronym> into the game. Typically, you will overlay the <acronym title="Graphical User Interface">GUI</acronym>. |
||||
</p> |
||||
<ul> |
||||
<li><div> <a href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_overlay.html">Nifty GUI Overlay</a> (recommended)</div> |
||||
</li> |
||||
<li><div> <a href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_projection.html">Nifty GUI Projection</a> (optional)</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
<p><em><a href="http://direct.jmonkeyengine.org/wiki/doku.php/jme3:advanced:nifty_gui_java_layout?do=export_xhtmlbody">view online version</a></em></p> |
||||
@ -1,54 +1,87 @@ |
||||
<h1><a |
||||
name="integrating_nifty_guioverlay">Integrating Nifty GUI: Overlay</a></h1><div |
||||
class="level1"><ol><li |
||||
class="level1"><div |
||||
class="li"> <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_xml_layout.html">Nifty GUI XML Layout</a></div></li><li |
||||
class="level1"><div |
||||
class="li"> <strong>Nifty <acronym |
||||
title="Graphical User Interface">GUI</acronym> Overlay</strong> or <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_projection.html">Nifty GUI Projection</a></div></li><li |
||||
class="level1"><div |
||||
class="li"> <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_java_interaction.html">Interact with the GUI from Java</a></div></li></ol><p> Define a key (for example escape) that switches the <acronym |
||||
title="Graphical User Interface">GUI</acronym> on and off. |
||||
You can either overlay the running game with the <acronym |
||||
title="Graphical User Interface">GUI</acronym> (you will most likely pause the game then), or even <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_projection.html">project</a> it as a texture onto a mesh texture (but then you cannot click to select). |
||||
On this page, we look at the overlay variant (more commonly used).</p><p> <a |
||||
href="/wiki/lib/exe/detail.php/jme3:advanced:nifty-gui-example.png?id=jme3%3Aadvanced%3Anifty_gui_overlay"><img |
||||
src="nbdocs:/com/jme3/gde/core/docs/jme3/advanced/nifty-gui-example.png?w=360&h=203" class="mediacenter" alt="" width="360" height="203" /></a></p></div><h2><a |
||||
name="sample_code">Sample Code</a></h2><div |
||||
class="level2"><ul><li |
||||
class="level1"><div |
||||
class="li"> <a |
||||
href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/niftygui/TestNiftyGui.java">TestNiftyGui.java</a></div></li></ul></div><h2><a |
||||
name="overlaying_the_user_interface_over_the_screen">Overlaying the User Interface Over the Screen</a></h2><div |
||||
class="level2"><p> This code shows you how to overlay anything on the screen with the <acronym |
||||
title="Graphical User Interface">GUI</acronym>. This is the most common usecase.</p><pre>NiftyJmeDisplay niftyDisplay = new NiftyJmeDisplay( |
||||
|
||||
<h1><a>Integrating Nifty GUI: Overlay</a></h1> |
||||
<div> |
||||
<ol> |
||||
<li><div> <a href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui.html">Nifty GUI Concepts</a></div> |
||||
</li> |
||||
<li><div> <a href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_xml_layout.html">Nifty GUI XML Layout</a> or <a href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_java_layout.html">Nifty GUI Java Layout</a></div> |
||||
</li> |
||||
<li><div> <strong>Nifty <acronym title="Graphical User Interface">GUI</acronym> Overlay</strong> or <a href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_projection.html">Nifty GUI Projection</a></div> |
||||
</li> |
||||
<li><div> <a href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_java_interaction.html">Interact with the GUI from Java</a></div> |
||||
</li> |
||||
</ol> |
||||
|
||||
<p> |
||||
|
||||
<img src="nbdocs:/com/jme3/gde/core/docs/jme3/advanced/nifty-gui-example.png"> |
||||
</p> |
||||
|
||||
<p> |
||||
Typically, you define a key (for example escape) that switches the <acronym title="Graphical User Interface">GUI</acronym> on and off. The <acronym title="Graphical User Interface">GUI</acronym> can be a StartScreen, OptionsScreen, CharacterCreationScreen, etc. While the <acronym title="Graphical User Interface">GUI</acronym> is up, you pause the running game, and then overlay the <acronym title="Graphical User Interface">GUI</acronym>. 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 <acronym title="Graphical User Interface">GUI</acronym>. |
||||
</p> |
||||
|
||||
<p> |
||||
You can also <a href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_projection.html">project</a> the <acronym title="Graphical User Interface">GUI</acronym> as a texture onto a mesh texture (but then you cannot click to select). |
||||
On this page, we look at the overlay variant, which is more commonly used in games. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Sample Code</a></h2> |
||||
<div> |
||||
<ul> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/niftygui/TestNiftyGui.java"><param name="text" value="<html><u>TestNiftyGui.java</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Overlaying the User Interface Over the Screen</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
This code shows you how to overlay anything on the screen with the <acronym title="Graphical User Interface">GUI</acronym>. This is the most common usecase. |
||||
</p> |
||||
<pre>NiftyJmeDisplay niftyDisplay = new NiftyJmeDisplay( |
||||
assetManager, inputManager, audioRenderer, guiViewPort); |
||||
/** Create a new NiftyGUI object */ |
||||
Nifty nifty = niftyDisplay.getNifty(); |
||||
/** Read your XML and initialize your custom ScreenController */ |
||||
nifty.fromXml("Interface/helloworld.xml", "start", new MySettingsScreen(data)); |
||||
nifty.fromXml("Interface/tutorial/step2/screen.xml", "start"); |
||||
// nifty.fromXml("Interface/helloworld.xml", "start", new MySettingsScreen(data)); |
||||
// attach the Nifty display to the gui view port as a processor |
||||
guiViewPort.addProcessor(niftyDisplay); |
||||
// disable the fly cam |
||||
flyCam.setDragToRotate(true);</pre><p> The <code>MySettingsScreen</code> class is a custom de.lessvoid.nifty.screen.ScreenController in which you implement your <acronym |
||||
title="Graphical User Interface">GUI</acronym> behaviour. The variable <code>data</code> contains an object that you use to exchange state info with the game. See <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_java_interaction.html">Nifty GUI Java Interaction</a> for details on how we created this class.</p><hr |
||||
/><ol><li |
||||
class="level1"><div |
||||
class="li"> <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_xml_layout.html">Nifty GUI XML Layout</a></div></li><li |
||||
class="level1"><div |
||||
class="li"> <strong>Nifty <acronym |
||||
title="Graphical User Interface">GUI</acronym> Overlay</strong> or <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_projection.html">Nifty GUI Projection</a></div></li><li |
||||
class="level1"><div |
||||
class="li"> <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_java_interaction.html">Interact with the GUI from Java</a></div></li></ol><div |
||||
class="tags"><span> <a |
||||
href="/wiki/doku.php/tag:documentation?do=showtag&tag=tag%3Adocumentation">documentation</a>, <a |
||||
href="/wiki/doku.php/tag:gui?do=showtag&tag=tag%3Agui">gui</a> </span></div></div> |
||||
<p><em><a href="http://jmonkeyengine.org/wiki/doku.php/jme3:advanced:nifty_gui_overlay?do=export_xhtmlbody">view online version</a></em></p> |
||||
flyCam.setDragToRotate(true);</pre> |
||||
|
||||
<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 <acronym title="Extensible Markup Language">XML</acronym> loading method: |
||||
</p> |
||||
<pre>nifty.fromXml("Interface/helloworld.xml", "start", new MySettingsScreen());</pre> |
||||
|
||||
<p> |
||||
The <code>MySettingsScreen</code> class is a custom de.lessvoid.nifty.screen.ScreenController in which you will implement your <acronym title="Graphical User Interface">GUI</acronym> behaviour. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Next Steps</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
Now that you have layed out and integrated the <acronym title="Graphical User Interface">GUI</acronym> in your app, you want to respond to user input and display the current game. Time to create a ScreenController! |
||||
</p> |
||||
<ul> |
||||
<li><div> <a href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_java_interaction.html">Interact with the GUI from Java</a></div> |
||||
</li> |
||||
</ul> |
||||
<div><span> |
||||
<a href="/wiki/doku.php/tag:documentation?do=showtag&tag=tag%3Adocumentation">documentation</a>, |
||||
<a href="/wiki/doku.php/tag:gui?do=showtag&tag=tag%3Agui">gui</a> |
||||
</span></div> |
||||
|
||||
</div> |
||||
<p><em><a href="http://direct.jmonkeyengine.org/wiki/doku.php/jme3:advanced:nifty_gui_overlay?do=export_xhtmlbody">view online version</a></em></p> |
||||
@ -1,121 +1,379 @@ |
||||
<h1><a |
||||
name="laying_out_the_gui_in_xml">Laying out the GUI in XML</a></h1><div |
||||
class="level1"><ol><li |
||||
class="level1"><div |
||||
class="li"> <strong>Nifty <acronym |
||||
title="Graphical User Interface">GUI</acronym> <acronym |
||||
title="Extensible Markup Language">XML</acronym> Layout</strong></div></li><li |
||||
class="level1"><div |
||||
class="li"> <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_overlay.html">Nifty GUI Overlay</a> or <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_projection.html">Nifty GUI Projection</a></div></li><li |
||||
class="level1"><div |
||||
class="li"> <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_java_interaction.html">Interact with the GUI from Java</a></div></li></ol><p> <a |
||||
href="/wiki/lib/exe/detail.php/jme3:advanced:nifty-screen-layer-panel.png?id=jme3%3Aadvanced%3Anifty_gui_xml_layout"><img |
||||
src="nbdocs:/com/jme3/gde/core/docs/jme3/advanced/nifty-screen-layer-panel.png" class="media" alt="" /></a></p><p> You "draw" the <acronym |
||||
title="Graphical User Interface">GUI</acronym> to the screen by writing <acronym |
||||
title="Extensible Markup Language">XML</acronym> code. We will be referring to the following elements:</p><ul><li |
||||
class="level1"><div |
||||
class="li"> Every Nifty Gui is made up of screens.</div><ul><li |
||||
class="level2"><div |
||||
class="li"> Nifty can display only one screen at a time.</div></li><li |
||||
class="level2"><div |
||||
class="li"> You must name the first screen <code>id="start"</code>. Name any others whatever you like.</div></li><li |
||||
class="level2"><div |
||||
class="li"> Every screen is <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_java_interaction.html">controlled by a Java class</a>.</div></li></ul></li><li |
||||
class="level1"><div |
||||
class="li"> A screen contains one or more layers.</div><ul><li |
||||
class="level2"><div |
||||
class="li"> Layers are containers that impose an alignment on their content (vertical, horizontal, centered)</div></li><li |
||||
class="level2"><div |
||||
class="li"> Layers can overlap (z-order), but cannot be nested.</div></li><li |
||||
class="level2"><div |
||||
class="li"> Layers are usually transparent (but can be opaque).</div></li></ul></li><li |
||||
class="level1"><div |
||||
class="li"> A layer contains panels.</div><ul><li |
||||
class="level2"><div |
||||
class="li"> Panels are containers that impose an alignment on their content (vertical, horizontal, centered)</div></li><li |
||||
class="level2"><div |
||||
class="li"> Panels can be nested, but not overlap.</div></li><li |
||||
class="level2"><div |
||||
class="li"> Panels are usually opaque (but can be transparent). ?</div></li></ul></li><li |
||||
class="level1"><div |
||||
class="li"> A panel can contain images, text fields, buttons, controls.</div></li><li |
||||
class="level1"><div |
||||
class="li"> Every element has an id to refer to it.</div></li></ul></div><h2><a |
||||
name="how_to_use_screens_and_layers">How to Use Screens and Layers</a></h2><div |
||||
class="level2"><p> Create an empty helloworld.xml file in the <code>assets/Interfaces/</code> directory of your project.</p><p> Here's a minimal example showing an empty centered layer on the start screen:</p><pre><span><?xml version="1.0" encoding="UTF-8"?></span> |
||||
<span><nifty xmlns="http://nifty-gui.sourceforge.net/nifty.xsd" </span> |
||||
<span> xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" </span> |
||||
<span> xsi:schemaLocation="http://nifty-gui.sourceforge.net/nifty.xsd |
||||
http://nifty-gui.sourceforge.net/nifty.xsd"></span> |
||||
|
||||
<span><screen id="start" controller="de.lessvoid.nifty.examples.helloworld.HelloWorldStartScreen"></span> |
||||
<span><layer id="layer1" backgroundColor="#003f" childLayout="center"></span> |
||||
<!-- ... panels go here... --> |
||||
|
||||
<h1><a>Laying out the GUI in XML</a></h1> |
||||
<div> |
||||
<ol> |
||||
<li><div> <a href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui.html">Nifty GUI Concepts</a></div> |
||||
</li> |
||||
<li><div> <strong>Nifty <acronym title="Graphical User Interface">GUI</acronym> <acronym title="Extensible Markup Language">XML</acronym> Layout</strong> or <a href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_java_layout.html">Nifty GUI Java Layout</a></div> |
||||
</li> |
||||
<li><div> <a href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_overlay.html">Nifty GUI Overlay</a> or <a href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_projection.html">Nifty GUI Projection</a></div> |
||||
</li> |
||||
<li><div> <a href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_java_interaction.html">Interact with the GUI from Java</a></div> |
||||
</li> |
||||
</ol> |
||||
|
||||
<p> |
||||
|
||||
You can "draw" the <acronym title="Graphical User Interface">GUI</acronym> to the screen by writing <acronym title="Extensible Markup Language">XML</acronym> code (alternatively you can also use Java). |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Plan Your GUI Layout</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
<img src="nbdocs:/com/jme3/gde/core/docs/jme3/advanced/gui-layout-draft.png"> |
||||
</p> |
||||
|
||||
<p> |
||||
In this tutorial, you want to create two game screens: An out-of-game StartScreen that the players see before the game starts; and an in-game <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://en.wikipedia.org/wiki/HUD_%28video_gaming%29"><param name="text" value="<html><u>HUD</u></html>"><param name="textColor" value="blue"></object> that displays info during the game. Before writing code, you plan the <acronym title="Graphical User Interface">GUI</acronym> layout, either on paper or in a graphic application. |
||||
</p> |
||||
|
||||
<p> |
||||
The StartScreen contains: |
||||
</p> |
||||
<ul> |
||||
<li><div> The background layer has a centered layout and contains an image.</div> |
||||
</li> |
||||
<li><div> The top layer has a vertical layout, containing 3 panels: </div> |
||||
<ul> |
||||
<li><div> The top panel contains a label with the game title, </div> |
||||
</li> |
||||
<li><div> The middle panel contains a text field with the game description. </div> |
||||
</li> |
||||
<li><div> The bottom panel has a horizontal layout and contains two more panels:</div> |
||||
<ul> |
||||
<li><div> The left panel contains a Start button.</div> |
||||
</li> |
||||
<li><div> The right panel contains a Quit button.</div> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
</ul> |
||||
|
||||
<p> |
||||
|
||||
The HUD contains: |
||||
</p> |
||||
<ul> |
||||
<li><div> The background layer has a centered layout, and contains a the partially transparent HUD image.</div> |
||||
</li> |
||||
<li><div> The top layer has a horizontal layout, containing 2 panels: </div> |
||||
<ul> |
||||
<li><div> The left panel as transparent spacer.</div> |
||||
</li> |
||||
<li><div> The right panel has a vertical layout containing 2 panels, a label and an image.</div> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Implement Your GUI Layout</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
<img src="nbdocs:/com/jme3/gde/core/docs/jme3/advanced/nifty-screen-layer-panel.png"> |
||||
</p> |
||||
|
||||
<p> |
||||
Create an empty screen.xml file in the <code>assets/Interfaces/</code> directory of your project. One <acronym title="Extensible Markup Language">XML</acronym> file can contain several, or even all screens. As a reminder: Nifty displays one screen at a time; a screen contains several layers on top of one another; each layer contains panels that are embedded into another; the panels contain the actual content (text, images, or controls). |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Make Screens</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
The following minimal <acronym title="Extensible Markup Language">XML</acronym> file contains a start screen and a HUD screen. (Neither has been defined yet.) |
||||
</p> |
||||
<pre><span><?xml version="1.0" encoding="UTF-8"?></span> |
||||
<span><nifty xmlns="http://nifty-gui.sourceforge.net/nifty.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" </span> |
||||
<span> xsi:schemaLocation="http://nifty-gui.sourceforge.net/nifty.xsd http://nifty-gui.sourceforge.net/nifty.xsd"></span> |
||||
<span><screen id="start"></span> |
||||
<!-- ... --> |
||||
<span><span></screen></span></span> |
||||
<span><screen id="hud"></span> |
||||
<!-- ... --> |
||||
<span><span></screen></span></span> |
||||
<span><span></nifty></span></span></pre> |
||||
|
||||
<p> |
||||
Every Nifty <acronym title="Graphical User Interface">GUI</acronym> must have a start screen. The others (in this example, the HUD screen) are optional. |
||||
</p> |
||||
|
||||
<p> |
||||
<strong>Note:</strong> In the following examples, the <acronym title="Extensible Markup Language">XML</acronym> schema header is abbreviated to just <code><nifty></code>. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Make Layers</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
The following minimal <acronym title="Extensible Markup Language">XML</acronym> file shows how we added layers to the start screen and HUD screen: |
||||
</p> |
||||
<pre><span><span><nifty></span></span> |
||||
<span><screen id="start"></span> |
||||
<span><layer id="background" backgroundColor="#000f"></span> |
||||
<!-- ... --> |
||||
<span><span></layer></span></span> |
||||
<span><layer id="foreground" backgroundColor="#0000" childLayout="vertical"></span> |
||||
<!-- ... --> |
||||
<span><span></layer></span></span> |
||||
<span><span></screen></span></span> |
||||
|
||||
<span><span></nifty></span></span></pre><p> Into a layer, you add panels (text, images, etc), and specify their properties:</p></div><h3><a |
||||
name="panel">Panel</a></h3><div |
||||
class="level3"><p> A panels looks like a rectangular colored box.</p><pre>... |
||||
<span><panel height="25%" width="35%" align="center" valign="center" backgroundColor="#f60f"</span> |
||||
<span> childLayout="center" visibleToMouse="true"></span> |
||||
<span><span></panel></span></span> |
||||
...</pre></div><h3><a |
||||
name="text">Text</a></h3><div |
||||
class="level3"><pre>... |
||||
<span><text font="verdana-24-shadow.fnt" text="Hello World!" align="center" valign="center" /></span> |
||||
...</pre><p> or</p><pre>... |
||||
<span><label text="this is my text" align="left"/></span> |
||||
...</pre></div><h3><a |
||||
name="image">Image</a></h3><div |
||||
class="level3"><pre><span><image filename="Textures/jme-logo.png" ><span></image></span></span></pre><p> Nifty additionally offers predefined controls – learn more from the NiftyGUI page:</p><ul><li |
||||
class="level1"><div |
||||
class="li"> <a |
||||
href="http://sourceforge.net/apps/mediawiki/nifty-gui/index.php?title=Layout_Introduction">http://sourceforge.net/apps/mediawiki/nifty-gui/index.php?title=Layout_Introduction</a></div></li><li |
||||
class="level1"><div |
||||
class="li"> <a |
||||
href="http://sourceforge.net/apps/mediawiki/nifty-gui/index.php?title=Elements">http://sourceforge.net/apps/mediawiki/nifty-gui/index.php?title=Elements</a></div></li></ul></div><h2><a |
||||
name="effects">Effects</a></h2><div |
||||
class="level2"><p> You can register effects to screen elements.</p><ul><li |
||||
class="level1"><div |
||||
class="li"> Respond to element events such as onStartScreen, onEndScreen, onHover, onFocus, onActive,</div></li><li |
||||
class="level1"><div |
||||
class="li"> Trigger effects that change movement, blending, size, color, fading, and much more.</div></li></ul><p> Here is an example that moves a panel when the startScreen opens. You place an < effect > tag inside the element that you want to want to be affected.</p><pre>... |
||||
<span><panel height="25%" width="35%" ...></span> |
||||
<span><span><effect></span></span> |
||||
<span><onStartScreen name="move" mode="in" direction="top" </span> |
||||
<span> length="300" startDelay="0" inherit="true"/></span> |
||||
<span><span></effect></span></span> |
||||
<span><screen id="hud"></span> |
||||
<span><layer id="background" backgroundColor="#000f"></span> |
||||
<!-- ... --> |
||||
<span><span></layer></span></span> |
||||
<span><layer id="foreground" backgroundColor="#0000" childLayout="vertical"></span> |
||||
<!-- ... --> |
||||
<span><span></layer></span></span> |
||||
<span><span></screen></span></span> |
||||
<span><span></nifty></span></span></pre> |
||||
|
||||
<p> |
||||
In a layer, you can now add panels and arrange them. Panels are containers that mark the areas where you want to display text, images, or controls (buttons etc) later. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Make Panels</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
A panel is the inner-most container (that will contain the actual content: text, images, or controls). You place panels inside layers. The following panels go into in the <code>start</code> screen's <code>foreground</code> layer: |
||||
</p> |
||||
<pre> <span><panel id="panel_top" height="25%" width="75%" align="center" childLayout="center"</span> |
||||
<span> backgroundColor="#f008"></span> |
||||
<span><span></panel></span></span> |
||||
<span><panel id="panel_mid" height="50%" width="75%" align="center" childLayout="center"</span> |
||||
<span> backgroundColor="#0f08"></span> |
||||
<span><span></panel></span></span> |
||||
<span><panel id="panel_bottom" height="25%" width="75%" align="center" childLayout="horizontal"</span> |
||||
<span> backgroundColor="#00f8"></span> |
||||
<span><panel id="panel_bottom_left" height="50%" width="50%" valign="center" childLayout="center" </span> |
||||
<span> backgroundColor="#44f8"></span> |
||||
<span><span></panel></span></span> |
||||
<span><panel id="panel_bottom_right" height="50%" width="50%" valign="center" childLayout="center"</span> |
||||
<span> backgroundColor="#88f8"></span> |
||||
<span><span></panel></span></span> |
||||
<span><span></panel></span></span></pre> |
||||
|
||||
<p> |
||||
The following panels go into in the <code>hud</code> screen's <code>foreground</code> layer: |
||||
</p> |
||||
<pre> <span><panel id="panel_left" width="80%" height="100%" childLayout="vertical" </span> |
||||
<span> backgroundColor="#0f08"></span> |
||||
<!-- spacer --> |
||||
<span><span></panel></span></span> |
||||
<span><panel id="panel_right" width="20%" height="100%" childLayout="vertical" </span> |
||||
<span> backgroundColor="#00f8" ></span> |
||||
<span><panel id="panel_top_right1" width="100%" height="15%" childLayout="center"</span> |
||||
<span> backgroundColor="#00f8"></span> |
||||
<span><span></panel></span></span> |
||||
<span><panel id="panel_top_right2" width="100%" height="15%" childLayout="center"</span> |
||||
<span> backgroundColor="#44f8"></span> |
||||
<span><span></panel></span></span> |
||||
<span><panel id="panel_bot_right" width="100%" height="70%" valign="center"</span> |
||||
<span> backgroundColor="#88f8"></span> |
||||
<span><span></panel></span></span> |
||||
<span><span></panel></span></span></pre> |
||||
|
||||
<p> |
||||
The result should look as follows: |
||||
</p> |
||||
|
||||
<p> |
||||
<img src="nbdocs:/com/jme3/gde/core/docs/jme3/advanced/nifty-gui-panels.png"> |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Adding Content to Panels</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
See also <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://sourceforge.net/apps/mediawiki/nifty-gui/index.php?title=Layout_Introduction"><param name="text" value="<html><u>Layout Introduction</u></html>"><param name="textColor" value="blue"></object> on the Nifty <acronym title="Graphical User Interface">GUI</acronym> site. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Add Images</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
The start-background.png image is a fullscreen background picture. In the <code>start</code> screen, add the following image element: |
||||
|
||||
</p> |
||||
<pre> <span><layer id="background" childLayout="center"></span> |
||||
<span><image filename="Interface/tutorial/step2/start-background.png"><span></image></span></span> |
||||
<span><span></layer></span></span></pre> |
||||
|
||||
<p> |
||||
The hud-frame.png image is a transparent frame that we use as HUD decoration. In the <code>hud</code> screen, add the following image element: |
||||
|
||||
</p> |
||||
<pre> <span><layer id="background" childLayout="center"></span> |
||||
<span><image filename="Interface/tutorial/step2/hud-frame.png"><span></image></span></span> |
||||
<span><span></layer></span></span></pre> |
||||
|
||||
<p> |
||||
The face1.png image is an image that you want to use as a status icon. |
||||
In the <code>hud</code> screen's <code>foreground</code> layer, add the following image element: |
||||
|
||||
</p> |
||||
<pre> <span><panel id="panel_bottom_left" height="75%" width="20%" valign="center" childLayout="center"></span> |
||||
<span><image filename="Interface/tutorial/step2/face1.png" </span> |
||||
<span> valign="center" align="center" height="50%" width="30%" ></span> |
||||
<span><span></image></span></span> |
||||
<span><span></panel></span></span></pre> |
||||
|
||||
<p> |
||||
|
||||
This image is scaled to use 50% of the height and 30% of the width of its container. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Add Static Text</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
The game title is a typical exmaple of static text. In the <code>start</code> screen, add the following text element: |
||||
|
||||
</p> |
||||
<pre> <span><panel id="panel_top" height="25%" width="75%" align="center" childLayout="center"></span> |
||||
<span><text text="My Cool Game" font="Interface/Fonts/Default.fnt" width="100%" height="100%" /></span> |
||||
<span><span></panel></span></span></pre> |
||||
|
||||
<p> |
||||
For longer pieces of static text, such as an introduction, you can use wrap="true". Add the following text element to the <code>Start screen</code>: |
||||
</p> |
||||
<pre> <span><panel id="panel_mid" height="50%" width="75%" align="center" childLayout="center"></span> |
||||
<span><text text="Here goes some text describing the game and the rules and stuff. Incidentally, |
||||
the text is quite long and needs to wrap at the end of lines. ..." </span> |
||||
<span> font="Interface/Fonts/Default.fnt" width="100%" height="100%" wrap="true" /></span> |
||||
<span><span></panel></span></span></pre> |
||||
|
||||
<p> |
||||
The font used is jME3's default font "Interface/Fonts/Default.fnt" which is included in the jMonkeyEngine.JAR. You can add your own fonts to your own <code>assets/Interface</code> directory. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Add Controls</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
Before you can use any control, you must load a Control Definition first. Add the following two lines <em>before</em> your screen definitions: |
||||
</p> |
||||
<pre> <span><useControls filename="nifty-default-controls.xml" /></span> |
||||
<span><useStyles filename="nifty-default-styles.xml" /></span></pre> |
||||
|
||||
</div> |
||||
|
||||
<h4><a>Label Control</a></h4> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
Use label controls for text that you want to edit dynamically from Java. One example for this is the score display. |
||||
In the <code>hud</code> screen's <code>foreground</code> layer, add the following text element: |
||||
</p> |
||||
<pre> <span><panel id="panel_top_right" height="100%" width="15%" childLayout="center"></span> |
||||
<span><control name="label" color="#000" text="123" width="100%" height="100%" /></span> |
||||
<span><span></panel></span></span></pre> |
||||
|
||||
<p> |
||||
Note that the width and height do not scale the bitmap font, but the make indirectly certain it is centered. If you want a different size for the font, you need to provide an extra bitmap font (they come with fixes sizes and don't scale well). |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h4><a>Button Control</a></h4> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
Our <acronym title="Graphical User Interface">GUI</acronym> plan asks for two buttons on the start screen. You add the Start and Quit buttons to the bottom panel of the <code>start</code> screen using the <code><control></code> element: |
||||
</p> |
||||
<pre> <span><panel id="panel_bottom_left" height="50%" width="50%" valign="center" childLayout="center"></span> |
||||
<span><control name="button" label="Start" id="StartButton" align="center" valign="center"></span> |
||||
<span><span></control></span></span> |
||||
<span><span></panel></span></span> |
||||
...</pre><p> Playing sounds using nifty is also possible with effects as triggers. Remember to first register the sound you're going to play:</p><pre>... |
||||
<span><registerSound id="click" filename="Sounds/Gui/ButtonClick.ogg" /></span> |
||||
... |
||||
<span><span><label></span></span> |
||||
<span><span><effect></span></span> |
||||
<span><onClick name="playSound" sound="click"/></span> |
||||
<span><span></effect></span></span> |
||||
<span><span></label></span></span> |
||||
...</pre><p> Learn more from the NiftyGUI page:</p><ul><li |
||||
class="level1"><div |
||||
class="li"> <a |
||||
href="http://sourceforge.net/apps/mediawiki/nifty-gui/index.php?title=Effects">http://sourceforge.net/apps/mediawiki/nifty-gui/index.php?title=Effects</a></div></li></ul><hr |
||||
/><ol><li |
||||
class="level1"><div |
||||
class="li"> <strong>Nifty <acronym |
||||
title="Graphical User Interface">GUI</acronym> <acronym |
||||
title="Extensible Markup Language">XML</acronym> Layout</strong></div></li><li |
||||
class="level1"><div |
||||
class="li"> <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_overlay.html">Nifty GUI Overlay</a> or <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_projection.html">Nifty GUI Projection</a></div></li><li |
||||
class="level1"><div |
||||
class="li"> <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_java_interaction.html">Interact with the GUI from Java</a></div></li></ol><div |
||||
class="tags"><span> <a |
||||
href="/wiki/doku.php/tag:documentation?do=showtag&tag=tag%3Adocumentation">documentation</a>, <a |
||||
href="/wiki/doku.php/tag:gui?do=showtag&tag=tag%3Agui">gui</a> </span></div></div> |
||||
<p><em><a href="http://jmonkeyengine.org/wiki/doku.php/jme3:advanced:nifty_gui_xml_layout?do=export_xhtmlbody">view online version</a></em></p> |
||||
<span><panel id="panel_bottom_right" height="50%" width="50%" valign="center" childLayout="center"></span> |
||||
<span><control name="button" label="Quit" id="QuitButton" align="center" valign="center"></span> |
||||
<span><span></control></span></span> |
||||
<span><span></panel></span></span></pre> |
||||
|
||||
<p> |
||||
Note that these controls don't do anything yet – we'll get to that soon. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h4><a>Other Controls</a></h4> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
Nifty additionally offers many customizable controls such as check boxes, text fields, menus, chats, tabs, … See also <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://sourceforge.net/apps/mediawiki/nifty-gui/index.php?title=Elements"><param name="text" value="<html><u>Elements</u></html>"><param name="textColor" value="blue"></object> on the Nifty <acronym title="Graphical User Interface">GUI</acronym> site. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Intermediate Result</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
When you preview this code in the jMonkeyEngine <acronym title="Software Development Kit">SDK</acronym>, our tutorial demo should looks as follows: A start screen with two buttons, and a game screen with a simple HUD frame and a blue cube (which stands for any jME3 game content). |
||||
</p> |
||||
|
||||
<p> |
||||
<img src="nbdocs:/com/jme3/gde/core/docs/jme3/advanced/nifty-gui-simple-demo.png"> |
||||
</p> |
||||
|
||||
<p> |
||||
Compare this result with the layout draft above. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Next Steps</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
Integrate the <acronym title="Graphical User Interface">GUI</acronym> into the game. Typically, you will overlay the <acronym title="Graphical User Interface">GUI</acronym>. |
||||
</p> |
||||
<ul> |
||||
<li><div> <a href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_overlay.html">Nifty GUI Overlay</a> (recommended)</div> |
||||
</li> |
||||
<li><div> <a href="/com/jme3/gde/core/docs/jme3/advanced/nifty_gui_projection.html">Nifty GUI Projection</a> (optional)</div> |
||||
</li> |
||||
</ul> |
||||
<div><span> |
||||
<a href="/wiki/doku.php/tag:documentation?do=showtag&tag=tag%3Adocumentation">documentation</a>, |
||||
<a href="/wiki/doku.php/tag:gui?do=showtag&tag=tag%3Agui">gui</a>, |
||||
<a href="/wiki/doku.php/tag:nifty?do=showtag&tag=tag%3Anifty">nifty</a> |
||||
</span></div> |
||||
|
||||
</div> |
||||
<p><em><a href="http://direct.jmonkeyengine.org/wiki/doku.php/jme3:advanced:nifty_gui_xml_layout?do=export_xhtmlbody">view online version</a></em></p> |
||||
|
After Width: | Height: | Size: 10 KiB |
@ -0,0 +1,192 @@ |
||||
|
||||
<h1><a>Open Game Finder</a></h1> |
||||
<div> |
||||
|
||||
<p> |
||||
The Open Game Finder (OGF) by Mark Schrijver can be plugged into any Java game. OGF enables you to find other people playing the same multiplayer game, and join them. |
||||
</p> |
||||
<ul> |
||||
<li><div> Homepage: <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/open-game-finder/"><param name="text" value="<html><u>http://code.google.com/p/open-game-finder/</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
<li><div> Documentation: <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/open-game-finder/w/list"><param name="text" value="<html><u>http://code.google.com/p/open-game-finder/w/list</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
</ul> |
||||
|
||||
<p> |
||||
Both on the client and the server side of OGF is written purely in Java. OGF has a pluggable architecture and comes with a full set of plugins to get the job done. You can add your own plugins, or replace existing plugins to make them more in line with your game. OGF uses NiftyGUI as the main <acronym title="Graphical User Interface">GUI</acronym> plugin. |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Installation</a></h2> |
||||
<div> |
||||
<ol> |
||||
<li><div> Go to <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/open-game-finder/downloads/list"><param name="text" value="<html><u>http://code.google.com/p/open-game-finder/downloads/list</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
<li><div> Download Client-1.0-bin.zip and Server-1.0-bin.zip</div> |
||||
</li> |
||||
<li><div> Unzip the two files to, for example, your jMonkeyProjects directory.</div> |
||||
</li> |
||||
</ol> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Setting up the Database</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
The OGF server uses an embedded Apache Derby database. You have to install the database, this means creating the data files and adding the tables. You can do this straight from the command line by running a script file. |
||||
</p> |
||||
<ul> |
||||
<li><div> On Windows, use installServer.bat to create a new database from scratch. On Mac <acronym title="Operating System">OS</acronym> or Linux, run <code>java -jar lib/Server-0.1.jar install</code> in the Terminal.</div> |
||||
</li> |
||||
<li><div> On Windows, use updateServer.bat to update the difference between the current state of the database and the way it should be. On Mac <acronym title="Operating System">OS</acronym> and Linux, run <code>java -jar lib/Server-0.1.jar update</code> in the Terminal. <br/> |
||||
<strong>This new feature is currently untested.</strong></div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Running the server</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
Change into the OGF-Server directory and run the server: |
||||
</p> |
||||
<ul> |
||||
<li><div> On Windows: Run startServer.bat</div> |
||||
</li> |
||||
<li><div> On Linux and MacOS X: Run <code>java -jar lib/Server-1.0.jar</code> in the Terminal.</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
<p> |
||||
The server is now running and ready to accept connections. <br/> |
||||
|
||||
<strong>Note:</strong> In the alpha release, the server runs on localhost. In the final release, you will be able to configure the host! |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Running the client</a></h2> |
||||
<div> |
||||
<ol> |
||||
<li><div> Change into the OGF-Client directory and run the client:</div> |
||||
<ul> |
||||
<li><div> On Windows: Run startClient.bat</div> |
||||
</li> |
||||
<li><div> On Linux and MacOS X: Run <code>java -jar lib/Client-1.0.jar</code> in the Terminal.</div> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
<li><div> If a Display Settings window appears, you can keep the defaults and click OK.</div> |
||||
</li> |
||||
</ol> |
||||
|
||||
<p> |
||||
A client is now running, connects to the server, and displays a registration/login window. |
||||
<img src="nbdocs:/com/jme3/gde/core/docs/jme3/advanced/open-game-finder-1.png"> |
||||
<strong>Note:</strong> You can run several clients on localhost for testing. |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Client: 1. Registration</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
If clients use OGF for the first time, they need to register. |
||||
On the main screen of the client: |
||||
</p> |
||||
<ol> |
||||
<li><div> Click Register</div> |
||||
</li> |
||||
<li><div> Choose a user name and password (repeat the password).</div> |
||||
</li> |
||||
<li><div> Select an Avatar image.</div> |
||||
</li> |
||||
<li><div> Click register to complete the registration.</div> |
||||
</li> |
||||
</ol> |
||||
|
||||
<p> |
||||
The client registers the account and opens the chat window directly. |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Client: 2. Login</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
If returning clients are already registered to an OGF server, they can log in. |
||||
On the main screen of the client: |
||||
</p> |
||||
<ol> |
||||
<li><div> Enter a user name and password that you previously registered.</div> |
||||
</li> |
||||
<li><div> Click Login</div> |
||||
</li> |
||||
</ol> |
||||
|
||||
<p> |
||||
The client logs you in and opens the chat window. |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Client: 3. Chat</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
The chat window shows a list of all users logged in to the server. Logged-in users can send public messages, and can receive public messages from others. |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Connecting to a Game</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
Q: I want to gather players using the OGF client to connect to the game server. How do I start my multiplayer game? <br/> |
||||
|
||||
A: The following sample code demos the typical use case: <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/open-game-finder/source/browse/OGF/TRUNK/Client/src/main/java/com/ractoc/opengamefinder/client/OGFClientStartup.java"><param name="text" value="<html><u>OGFClientStartup.java</u></html>"><param name="textColor" value="blue"></object> |
||||
<br/> |
||||
|
||||
In a JME3 Application's init method: |
||||
</p> |
||||
<ol> |
||||
<li><div> Create a com.ractoc.opengamefinder.client.GUIContainer object.</div> |
||||
</li> |
||||
<li><div> Create a game instance using the GUIContainer (via a ClientFactory).</div> |
||||
</li> |
||||
<li><div> Check the com.ractoc.pffj.api.BasePluginMessageResult for success or failure.</div> |
||||
</li> |
||||
</ol> |
||||
|
||||
<p> |
||||
After this, continue writing your JME3 init method. |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Configuration</a></h2> |
||||
<div> |
||||
<ul> |
||||
<li><div> Q: How can I offer more avatars to choose from? <br/> |
||||
A: Save the image files in the path <code>jMonkeyProjects/OGF-Client-1.0-bin/OGF/resources/avatars/</code></div> |
||||
</li> |
||||
<li><div> Q: How do I configure servers addresses? <br/> |
||||
A: TBD</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
<p><em><a href="http://direct.jmonkeyengine.org/wiki/doku.php/jme3:advanced:open_game_finder?do=export_xhtmlbody">view online version</a></em></p> |
||||
|
Before Width: | Height: | Size: 196 KiB After Width: | Height: | Size: 183 KiB |
|
Before Width: | Height: | Size: 196 KiB After Width: | Height: | Size: 182 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 18 KiB |
@ -1,193 +1,236 @@ |
||||
<h1><a |
||||
name="particle_emmitter_settings">Particle Emmitter Settings</a></h1><div |
||||
class="level1"><p> You cannot create a 3D model for delicate things like fire, smoke, or explosions. Particle Emitters are quite an efficient solution to create these kinds of effects: The emitter renders a series of flat orthogonal images and manipulates them in a way that creates the illusion of a anything from a delicate smoke cloud to individual flames, etc.</p><p> Creating an effect involves some trial and error to get the settings <em>just right</em>, and it's worth exploring the expressiveness of the options described below. <strong>Tip:</strong> Use the Scene Editor in the <a |
||||
href="/com/jme3/gde/core/docs/sdk.html">jMonkeyPlatform</a> to design and preview effects.</p><p> <a |
||||
href="/wiki/lib/exe/detail.php/jme3:advanced:explosion-5.png?id=jme3%3Aadvanced%3Aparticle_emitters"><img |
||||
src="nbdocs:/com/jme3/gde/core/docs/jme3/advanced/explosion-5.png?w=150&h=100" class="media" alt="" width="150" height="100" /></a> <a |
||||
href="/wiki/lib/exe/detail.php/jme3:advanced:particle.png?id=jme3%3Aadvanced%3Aparticle_emitters"><img |
||||
src="nbdocs:/com/jme3/gde/core/docs/jme3/advanced/particle.png?w=150&h=100" class="media" alt="" width="150" height="100" /></a> <a |
||||
href="/wiki/lib/exe/detail.php/jme3:beginner:beginner-effect-fire.png?id=jme3%3Aadvanced%3Aparticle_emitters"><img |
||||
src="nbdocs:/com/jme3/gde/core/docs/jme3/beginner/beginner-effect-fire.png?w=150&h=100" class="media" alt="" width="150" height="100" /></a> <a |
||||
href="/wiki/lib/exe/detail.php/jme3:advanced:butterfly-particle-emitter.png?id=jme3%3Aadvanced%3Aparticle_emitters"><img |
||||
src="nbdocs:/com/jme3/gde/core/docs/jme3/advanced/butterfly-particle-emitter.png?w=150&h=100" class="media" alt="" width="150" height="100" /></a></p></div><h2><a |
||||
name="create_an_emitter">Create an Emitter</a></h2><div |
||||
class="level2"><ol><li |
||||
class="level1"><div |
||||
class="li"> Create one emitter for each effect:<pre>ParticleEmitter explosion = new ParticleEmitter( |
||||
"My explosion effect", ParticleMesh.Type.Triangle, 30);</pre></div></li><li |
||||
class="level1"><div |
||||
class="li"> Attach the emitter to the rootNode and position it in the scene:<pre>rootNode.attachChild(explosion); |
||||
explosion.setLocalTranslation(bomb.getLocalTranslation());</pre></div></li><li |
||||
class="level1"><div |
||||
class="li"> Trigger the effect by calling<pre>explosion.emitAllParticles()</pre></div></li><li |
||||
class="level1"><div |
||||
class="li"> End the effect by calling<pre>explosion.killAllParticles()</pre></div></li></ol><p> Choose one of the following mesh shapes</p><ul><li |
||||
class="level1"><div |
||||
class="li"> ParticleMesh.Type.Triangle</div></li><li |
||||
class="level1"><div |
||||
class="li"> ParticleMesh.Type.Point</div></li></ul></div><h2><a |
||||
name="configure_parameters">Configure Parameters</a></h2><div |
||||
class="level2"><p> Not all of these parameters are required for all kinds of effects. If you don't specify one of them, a default value will be used.</p><div |
||||
class="table sectionedit1"><table |
||||
class="inline"><tr |
||||
class="row0"><th |
||||
class="col0 leftalign"> Parameter</th><th |
||||
class="col1 leftalign"> Method</th><th |
||||
class="col2"> Default</th><th |
||||
class="col3"> Description</th></tr><tr |
||||
class="row1"><td |
||||
class="col0 leftalign"> number</td><td |
||||
class="col1"> <code>setNumParticles()</code></td><td |
||||
class="col2 leftalign"></td><td |
||||
class="col3"> The maximum number of particles visible at the same time. Specified by user in constructor.</td></tr><tr |
||||
class="row2"><td |
||||
class="col0 leftalign"> emission rate</td><td |
||||
class="col1"> <code>setParticlesPerSec()</code></td><td |
||||
class="col2"> 20</td><td |
||||
class="col3"> Density of the effect, how many new particles are emitted per second. <br/> Set to zero to control the start of the effect. <br/> Set to a number for a constantly running effect.</td></tr><tr |
||||
class="row3"><td |
||||
class="col0 leftalign"> size</td><td |
||||
class="col1"> <code>setStartSize()</code>, <code>setEndSize()</code></td><td |
||||
class="col2"> 0.2f, 2f</td><td |
||||
class="col3"> Set both to same value for constant size effect. <br/> Set to different values for shrink/grow effect.</td></tr><tr |
||||
class="row4"><td |
||||
class="col0 leftalign"> color</td><td |
||||
class="col1"> <code>setStartColor()</code>, <code>setEndColor()</code></td><td |
||||
class="col2"> gray, darkgray</td><td |
||||
class="col3"> Set both to the same color for single-colored effects (e.g. fog). <br/> Set both to different colors for a gradient effect (e.g. fire).</td></tr><tr |
||||
class="row5"><td |
||||
class="col0 leftalign"> velocity/direction</td><td |
||||
class="col1"> <code>setInitialVelocity()</code></td><td |
||||
class="col2"> Vector3f(0,0,0)</td><td |
||||
class="col3"> A vector specifying how fast or slow particles fly, and it which direction.</td></tr><tr |
||||
class="row6"><td |
||||
class="col0 leftalign"> randomness</td><td |
||||
class="col1"> <code>setVelocityVariation()</code></td><td |
||||
class="col2"> 0.2f</td><td |
||||
class="col3"> How much the direction/speed (<code>setInitialVelocity()</code>) can vary. <br/> 1 = Maximum variation (particles emit in random directions) <br/> 0 = No variation (particles fly straight with start velocity only).</td></tr><tr |
||||
class="row7"><td |
||||
class="col0 leftalign"> direction</td><td |
||||
class="col1"> <code>setFacingVelocity()</code></td><td |
||||
class="col2"> false</td><td |
||||
class="col3"> true = Flying particles pitch in the direction they're flying (e.g. missiles). <br/> false = Particles keep flying rotated the way they started (e.g. debris).</td></tr><tr |
||||
class="row8"><td |
||||
class="col0 leftalign"> direction</td><td |
||||
class="col1"> <code>setRandomAngle()</code></td><td |
||||
class="col2"> false</td><td |
||||
class="col3"> true = Flying particle should face at a random angle (e.g. explosion). <br/> false = Flying particle flies straight.</td></tr><tr |
||||
class="row9"><td |
||||
class="col0 leftalign"> direction</td><td |
||||
class="col1"> <code>setFaceNormal()</code></td><td |
||||
class="col2"> Vector3f.NAN</td><td |
||||
class="col3"> Vector3f = Flying particles face in the given direction. <br/> Vector3f.NAN = Flying particles face the camera.</td></tr><tr |
||||
class="row10"><td |
||||
class="col0 leftalign"> lifetime</td><td |
||||
class="col1"> <code>setLowLife()</code></td><td |
||||
class="col2"> 3f</td><td |
||||
class="col3"> Minimum time period before particles fade</td></tr><tr |
||||
class="row11"><td |
||||
class="col0 leftalign"> lifetime</td><td |
||||
class="col1"> <code>setHighLife()</code></td><td |
||||
class="col2"> 7f</td><td |
||||
class="col3"> Maximum time period before particles fade</td></tr><tr |
||||
class="row12"><td |
||||
class="col0 leftalign"> rotation</td><td |
||||
class="col1"> <code>setRotateSpeed()</code></td><td |
||||
class="col2"> 0f</td><td |
||||
class="col3"> 0 = Flying particles don't spin. <br/> > 0 = How fast particle spins while flying.</td></tr><tr |
||||
class="row13"><td |
||||
class="col0 leftalign"> gravity</td><td |
||||
class="col1"> <code>setGravity()</code></td><td |
||||
class="col2"> 0.1f</td><td |
||||
class="col3"> >0 = Particles fall "down" (e.g. debris, sparks). <br/> 0.0f = Particles keep flying (e.g. flames, zero g explosion.)</td></tr></table></div><p> Build up you effect by specifying one parameter after the other. If you change several parameters at the same time, it's difficult to tell which of the values caused which outcome.</p></div><h2><a |
||||
name="create_an_effect_material">Create an Effect Material</a></h2><div |
||||
class="level2"><p> <a |
||||
href="/wiki/lib/exe/fetch.php?hash=b9f99a&media=http%3A%2F%2Fjmonkeyengine.googlecode.com%2Fsvn%2Ftrunk%2Fengine%2Fsrc%2Ftest-data%2FEffects%2FExplosion%2Fflash.png"><img |
||||
src="/wiki/lib/exe/fetch.php?hash=b9f99a&w=128&h=128&media=http%3A%2F%2Fjmonkeyengine.googlecode.com%2Fsvn%2Ftrunk%2Fengine%2Fsrc%2Ftest-data%2FEffects%2FExplosion%2Fflash.png" class="mediaright" align="right" alt="" width="128" height="128" /></a></p><p> Use the common Particle.j3md Material Definition to specify the shape of the particles. The shape is only limited by the texture you provide and can be anything – debris, flames, smoke, mosquitoes, leaves, butterflies… be creative.</p><pre> Material mat_flash = new Material( |
||||
|
||||
<h1><a>Particle Emmitter Settings</a></h1> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
You cannot create a 3D model for delicate things like fire, smoke, or explosions. Particle Emitters are quite an efficient solution to create these kinds of effects: The emitter renders a series of flat orthogonal images and manipulates them in a way that creates the illusion of a anything from a delicate smoke cloud to individual flames, etc. |
||||
Creating an effect involves some trial and error to get the settings <em>just right</em>, and it's worth exploring the expressiveness of the options described below. |
||||
</p> |
||||
|
||||
<p> |
||||
<strong>Tip:</strong> Use the Scene Editor in the <a href="/com/jme3/gde/core/docs/sdk.html">jMonkeyPlatform</a> to design and preview effects. |
||||
</p> |
||||
|
||||
<p> |
||||
<img src="nbdocs:/com/jme3/gde/core/docs/jme3/advanced/explosion-5.png"> <img src="nbdocs:/com/jme3/gde/core/docs/jme3/advanced/particle.png"> <img src="nbdocs:/com/jme3/gde/core/docs/jme3/beginner/beginner-effect-fire.png"> <img src="nbdocs:/com/jme3/gde/core/docs/jme3/advanced/butterfly-particle-emitter.png"> |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Create an Emitter</a></h2> |
||||
<div> |
||||
<ol> |
||||
<li><div> Create one emitter for each effect: <pre>ParticleEmitter explosion = new ParticleEmitter( |
||||
"My explosion effect", ParticleMesh.Type.Triangle, 30);</pre> |
||||
</div> |
||||
</li> |
||||
<li><div> Attach the emitter to the rootNode and position it in the scene: <pre>rootNode.attachChild(explosion); |
||||
explosion.setLocalTranslation(bomb.getLocalTranslation());</pre> |
||||
</div> |
||||
</li> |
||||
<li><div> Trigger the effect by calling <pre>explosion.emitAllParticles()</pre> |
||||
</div> |
||||
</li> |
||||
<li><div> End the effect by calling <pre>explosion.killAllParticles()</pre> |
||||
</div> |
||||
</li> |
||||
</ol> |
||||
|
||||
<p> |
||||
Choose one of the following mesh shapes |
||||
</p> |
||||
<ul> |
||||
<li><div> ParticleMesh.Type.Triangle</div> |
||||
</li> |
||||
<li><div> ParticleMesh.Type.Point</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Configure Parameters</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
Not all of these parameters are required for all kinds of effects. If you don't specify one of them, a default value will be used. |
||||
</p> |
||||
<div><table> |
||||
<tr> |
||||
<th> Parameter </th><th> Method </th><th> Default </th><th> Description </th> |
||||
</tr> |
||||
<tr> |
||||
<td> number </td><td> <code>setNumParticles()</code> </td><td> </td><td> The maximum number of particles visible at the same time. Specified by user in constructor. </td> |
||||
</tr> |
||||
<tr> |
||||
<td> emission rate </td><td> <code>setParticlesPerSec()</code> </td><td> 20 </td><td> Density of the effect, how many new particles are emitted per second. <br/> |
||||
Set to zero to control the start/end of the effect. <br/> |
||||
Set to a number for a constantly running effect. </td> |
||||
</tr> |
||||
<tr> |
||||
<td> size </td><td> <code>setStartSize()</code>, <code>setEndSize()</code> </td><td> 0.2f, 2f </td><td> The radius of the scaled sprite image. Set both to same value for constant size effect. <br/> |
||||
Set to different values for shrink/grow effect. </td> |
||||
</tr> |
||||
<tr> |
||||
<td> color </td><td> <code>setStartColor()</code>, <code>setEndColor()</code> </td><td> gray </td><td> Controls how the opaque (non-black) parts of the texture are colorized. <br/> |
||||
Set both to the same color for single-colored effects (e.g. fog, debris). <br/> |
||||
Set both to different colors for a gradient effect (e.g. fire). </td> |
||||
</tr> |
||||
<tr> |
||||
<td> direction/velocity </td><td> <code>getParticleInfluencer(). setInitialVelocity(initialVelocity)</code> </td><td> Vector3f(0,0,0) </td><td> A vector specifying the initial direction and speed of particles. The longer the vector, the faster. </td> |
||||
</tr> |
||||
<tr> |
||||
<td> fanning out </td><td> <code>getParticleInfluencer(). setVelocityVariation(variation)</code> </td><td> 0.2f </td><td> How much the direction (<code>setInitialVelocity()</code>) can vary among particles. Use a value between 1 and 0 to create a directed swarm-like cloud of particles. <br/> |
||||
1 = Maximum variation, particles emit in random 360° directions (e.g. explosion, butterflies). <br/> |
||||
0.5f = particles are emitted within 180° of the initial direction. <br/> |
||||
0 = No variation, particles fly in a straight line in direction of start velocity (e.g. lasergun blasts). </td> |
||||
</tr> |
||||
<tr> |
||||
<td> direction <br/> |
||||
(pick one)</td><td> <code>setFacingVelocity()</code> </td><td> false </td><td> true = Flying particles pitch in the direction they're flying (e.g. missiles). <br/> |
||||
false = Particles keep flying rotated the way they started (e.g. debris). </td> |
||||
</tr> |
||||
<tr> |
||||
<td> direction <br/> |
||||
(pick one)</td><td> <code>setFaceNormal()</code> </td><td> Vector3f.NAN </td><td> Vector3f = Flying particles face in the given direction (e.g. horizontal shockwave faces up = Vector3f.UNIT_Y). <br/> |
||||
Vector3f.NAN = Flying particles face the camera. </td> |
||||
</tr> |
||||
<tr> |
||||
<td> lifetime </td><td> <code>setLowLife()</code>, <code>setHighLife()</code> </td><td> 3f, 7f </td><td> The time period before a particle fades is set to a random value between minimum and maximum; minimum must be smaller than maximum. A minimum < 1f makes the effect more busy, a higher minimum looks more steady. Use a maximum < 1f for short bursts, and higher maxima for long lasting swarms or smoke. Set maximum and minimum to similar values to create an evenly spaced effect (e.g. fountain), set the to very different values to create a distorted effect (e.g. fire with individual long flames). </td> |
||||
</tr> |
||||
<tr> |
||||
<td> spinning </td><td> <code>setRotateSpeed()</code> </td><td> 0f </td><td> 0 = Flying particles don't spin while flying (e.g. smoke, insects, controlled projectiles). <br/> |
||||
> 0 = How fast particle spins while flying (e.g. debris, shuriken, missiles out of control). </td> |
||||
</tr> |
||||
<tr> |
||||
<td> rotation </td><td> <code>setRandomAngle()</code> </td><td> false </td><td> true = The particle sprite is rotated at a random angle when it is emitted (e.g. explosion, debris). <br/> |
||||
false = Particles fly straight like you drew them in the sprite texture (e.g. insects). </td> |
||||
</tr> |
||||
<tr> |
||||
<td> gravity </td><td> <code>setGravity()</code> </td><td> Vector3f(0.0f,0.1f,0.0f) </td><td> Particles fall in the direction of the vector (e.g. debris, sparks). <br/> |
||||
(0,0,0) = Particles keep flying in start direction (e.g. flames, zero-gravity explosion.) </td> |
||||
</tr> |
||||
<tr> |
||||
<td> start area </td><td><code>setShape(new EmitterSphereShape( Vector3f.ZERO, 2f));</code></td><td>EmitterPointShape()</td><td>By default, particles are emitted from the emitters location (a point). You can increase the emitter shape to occupy a sphere, so that the start point of new particles can be anywhere inside the sphere, which makes the effect a bit more irregular.</td> |
||||
</tr> |
||||
</table></div> |
||||
<!-- EDIT1 TABLE [1635-5409] --> |
||||
<p> |
||||
Build up you effect by specifying one parameter after the other. If you change several parameters at the same time, it's difficult to tell which of the values caused which outcome. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Create an Effect Material</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
<img src="/wiki/lib/exe/fetch.php"> |
||||
</p> |
||||
|
||||
<p> |
||||
Use the common Particle.j3md Material Definition and a texture to specify the shape of the particles. The shape is defined by the texture you provide and can be anything – debris, flames, smoke, mosquitoes, leaves, butterflies… be creative. |
||||
</p> |
||||
<pre> Material flash_mat = new Material( |
||||
assetManager, "Common/MatDefs/Misc/Particle.j3md"); |
||||
mat_flash.setTexture("Texture", |
||||
flash_mat.setTexture("Texture", |
||||
assetManager.loadTexture("Effects/Explosion/flash.png")); |
||||
flash.setMaterial(debris_mat); |
||||
flash.setMaterial(flash_mat); |
||||
flash.setImagesX(2); // columns |
||||
flash.setImagesY(2); // rows |
||||
flash.setSelectRandomImage(true);</pre><p> The effect texture can contain Sprite animations – a series of different pictures in equally spaced rows and columns.</p><ul><li |
||||
class="level1"><div |
||||
class="li"> Specify the number of rows and columns</div></li><li |
||||
class="level1"><div |
||||
class="li"> Specify whether you want to play the series in order or at random.</div></li></ul><p> Have a look at the following default textures and you will see that you can easily create your own Sprite textures after the same fashion.</p></div><h3><a |
||||
name="default_particle_textures">Default Particle Textures</a></h3><div |
||||
class="level3"><p> The Material is used together with grayscale texture: The black parts will be transparent and the white parts will be opaque.</p><p> The following effect textures are available by default from <code>test-data.jar</code>. You can also load your own textures from your assets directory.</p><div |
||||
class="table sectionedit2"><table |
||||
class="inline"><tr |
||||
class="row0"><th |
||||
class="col0 leftalign"> Texture Path</th><th |
||||
class="col1"> Dimension</th><th |
||||
class="col2"> Preview</th></tr><tr |
||||
class="row1"><td |
||||
class="col0 leftalign"> Effects/Explosion/Debris.png</td><td |
||||
class="col1 leftalign"> 3*3</td><td |
||||
class="col2"> <a |
||||
href="/wiki/lib/exe/fetch.php?hash=3fc13d&media=http%3A%2F%2Fjmonkeyengine.googlecode.com%2Fsvn%2Ftrunk%2Fengine%2Fsrc%2Ftest-data%2FEffects%2FExplosion%2FDebris.png"><img |
||||
src="/wiki/lib/exe/fetch.php?hash=3fc13d&w=32&h=32&media=http%3A%2F%2Fjmonkeyengine.googlecode.com%2Fsvn%2Ftrunk%2Fengine%2Fsrc%2Ftest-data%2FEffects%2FExplosion%2FDebris.png" class="media" alt="" width="32" height="32" /></a></td></tr><tr |
||||
class="row2"><td |
||||
class="col0 leftalign"> Effects/Explosion/flame.png</td><td |
||||
class="col1 leftalign"> 2*2</td><td |
||||
class="col2"> <a |
||||
href="/wiki/lib/exe/fetch.php?hash=27332f&media=http%3A%2F%2Fjmonkeyengine.googlecode.com%2Fsvn%2Ftrunk%2Fengine%2Fsrc%2Ftest-data%2FEffects%2FExplosion%2Fflame.png"><img |
||||
src="/wiki/lib/exe/fetch.php?hash=27332f&w=32&h=32&media=http%3A%2F%2Fjmonkeyengine.googlecode.com%2Fsvn%2Ftrunk%2Fengine%2Fsrc%2Ftest-data%2FEffects%2FExplosion%2Fflame.png" class="media" alt="" width="32" height="32" /></a></td></tr><tr |
||||
class="row3"><td |
||||
class="col0 leftalign"> Effects/Explosion/flash.png</td><td |
||||
class="col1 leftalign"> 2*2</td><td |
||||
class="col2"> <a |
||||
href="/wiki/lib/exe/fetch.php?hash=b9f99a&media=http%3A%2F%2Fjmonkeyengine.googlecode.com%2Fsvn%2Ftrunk%2Fengine%2Fsrc%2Ftest-data%2FEffects%2FExplosion%2Fflash.png"><img |
||||
src="/wiki/lib/exe/fetch.php?hash=b9f99a&w=32&h=32&media=http%3A%2F%2Fjmonkeyengine.googlecode.com%2Fsvn%2Ftrunk%2Fengine%2Fsrc%2Ftest-data%2FEffects%2FExplosion%2Fflash.png" class="media" alt="" width="32" height="32" /></a></td></tr><tr |
||||
class="row4"><td |
||||
class="col0"> Effects/Explosion/roundspark.png</td><td |
||||
class="col1 leftalign"> 1*1</td><td |
||||
class="col2"> <a |
||||
href="/wiki/lib/exe/fetch.php?hash=467d19&media=http%3A%2F%2Fjmonkeyengine.googlecode.com%2Fsvn%2Ftrunk%2Fengine%2Fsrc%2Ftest-data%2FEffects%2FExplosion%2Froundspark.png"><img |
||||
src="/wiki/lib/exe/fetch.php?hash=467d19&w=32&h=32&media=http%3A%2F%2Fjmonkeyengine.googlecode.com%2Fsvn%2Ftrunk%2Fengine%2Fsrc%2Ftest-data%2FEffects%2FExplosion%2Froundspark.png" class="media" alt="" width="32" height="32" /></a></td></tr><tr |
||||
class="row5"><td |
||||
class="col0 leftalign"> Effects/Explosion/shockwave.png</td><td |
||||
class="col1 leftalign"> 1*1</td><td |
||||
class="col2"> <a |
||||
href="/wiki/lib/exe/fetch.php?hash=fc0cbc&media=http%3A%2F%2Fjmonkeyengine.googlecode.com%2Fsvn%2Ftrunk%2Fengine%2Fsrc%2Ftest-data%2FEffects%2FExplosion%2Fshockwave.png"><img |
||||
src="/wiki/lib/exe/fetch.php?hash=fc0cbc&w=32&h=32&media=http%3A%2F%2Fjmonkeyengine.googlecode.com%2Fsvn%2Ftrunk%2Fengine%2Fsrc%2Ftest-data%2FEffects%2FExplosion%2Fshockwave.png" class="media" alt="" width="32" height="32" /></a></td></tr><tr |
||||
class="row6"><td |
||||
class="col0"> Effects/Explosion/smoketrail.png</td><td |
||||
class="col1 leftalign"> 1*3</td><td |
||||
class="col2"> <a |
||||
href="/wiki/lib/exe/fetch.php?hash=cb2aa9&media=http%3A%2F%2Fjmonkeyengine.googlecode.com%2Fsvn%2Ftrunk%2Fengine%2Fsrc%2Ftest-data%2FEffects%2FExplosion%2Fsmoketrail.png"><img |
||||
src="/wiki/lib/exe/fetch.php?hash=cb2aa9&w=32&h=32&media=http%3A%2F%2Fjmonkeyengine.googlecode.com%2Fsvn%2Ftrunk%2Fengine%2Fsrc%2Ftest-data%2FEffects%2FExplosion%2Fsmoketrail.png" class="media" alt="" width="32" height="32" /></a></td></tr><tr |
||||
class="row7"><td |
||||
class="col0 leftalign"> Effects/Explosion/spark.png</td><td |
||||
class="col1 leftalign"> 1*1</td><td |
||||
class="col2"> <a |
||||
href="/wiki/lib/exe/fetch.php?hash=603e22&media=http%3A%2F%2Fjmonkeyengine.googlecode.com%2Fsvn%2Ftrunk%2Fengine%2Fsrc%2Ftest-data%2FEffects%2FExplosion%2Fspark.png"><img |
||||
src="/wiki/lib/exe/fetch.php?hash=603e22&w=32&h=32&media=http%3A%2F%2Fjmonkeyengine.googlecode.com%2Fsvn%2Ftrunk%2Fengine%2Fsrc%2Ftest-data%2FEffects%2FExplosion%2Fspark.png" class="media" alt="" width="32" height="32" /></a></td></tr><tr |
||||
class="row8"><td |
||||
class="col0 leftalign"> Effects/Smoke/Smoke.png</td><td |
||||
class="col1"> 1*15</td><td |
||||
class="col2"> <a |
||||
href="/wiki/lib/exe/fetch.php?hash=9adb0f&media=http%3A%2F%2Fjmonkeyengine.googlecode.com%2Fsvn%2Ftrunk%2Fengine%2Fsrc%2Ftest-data%2FEffects%2FSmoke%2FSmoke.png"><img |
||||
src="/wiki/lib/exe/fetch.php?hash=9adb0f&w=96&h=32&media=http%3A%2F%2Fjmonkeyengine.googlecode.com%2Fsvn%2Ftrunk%2Fengine%2Fsrc%2Ftest-data%2FEffects%2FSmoke%2FSmoke.png" class="media" alt="" width="96" height="32" /></a></td></tr></table></div><p> <strong>Tip:</strong> Use the <code>setStartColor()</code>/<code>setEndColor()</code> settings described above to colorize the textures.</p></div><h2><a |
||||
name="usage_example">Usage Example</a></h2><div |
||||
class="level2"><pre> ParticleEmitter fire = new ParticleEmitter("Emitter", ParticleMesh.Type.Triangle, 30); |
||||
flash.setSelectRandomImage(true);</pre> |
||||
|
||||
<p> |
||||
The effect texture can be one image, or contain a sprite animation – a series of slightly different pictures in equally spaced rows and columns. If you choose the sprite animation: |
||||
</p> |
||||
<ul> |
||||
<li><div> Specify the number of rows and columns using setImagesX(2) and setImagesY().</div> |
||||
</li> |
||||
<li><div> Specify whether you want to play the sprite series in order (animation), or at random (explosion, flame), by setting setSelectRandomImage() true or false.</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
<p> |
||||
|
||||
<strong>Examples:</strong> Have a look at the following default textures and you will see how you can create your own sprite textures after the same fashion. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Default Particle Textures</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
The Material is used together with grayscale texture: The black parts will be transparent and the white parts will be opaque (colored). |
||||
The following effect textures are available by default from <code>test-data.jar</code>. You can also load your own textures from your assets directory. |
||||
</p> |
||||
<div><table> |
||||
<tr> |
||||
<th> Texture Path </th><th> Dimension </th><th> Preview </th> |
||||
</tr> |
||||
<tr> |
||||
<td> Effects/Explosion/Debris.png </td><td> 3*3 </td><td> <img src="/wiki/lib/exe/fetch.php"> </td> |
||||
</tr> |
||||
<tr> |
||||
<td> Effects/Explosion/flame.png </td><td> 2*2 </td><td> <img src="/wiki/lib/exe/fetch.php"> </td> |
||||
</tr> |
||||
<tr> |
||||
<td> Effects/Explosion/flash.png </td><td> 2*2 </td><td> <img src="/wiki/lib/exe/fetch.php"> </td> |
||||
</tr> |
||||
<tr> |
||||
<td> Effects/Explosion/roundspark.png </td><td> 1*1 </td><td> <img src="/wiki/lib/exe/fetch.php"> </td> |
||||
</tr> |
||||
<tr> |
||||
<td> Effects/Explosion/shockwave.png </td><td> 1*1 </td><td> <img src="/wiki/lib/exe/fetch.php"> </td> |
||||
</tr> |
||||
<tr> |
||||
<td> Effects/Explosion/smoketrail.png </td><td> 1*3 </td><td> <img src="/wiki/lib/exe/fetch.php"> </td> |
||||
</tr> |
||||
<tr> |
||||
<td> Effects/Explosion/spark.png </td><td> 1*1 </td><td> <img src="/wiki/lib/exe/fetch.php"> </td> |
||||
</tr> |
||||
<tr> |
||||
<td> Effects/Smoke/Smoke.png </td><td> 1*15 </td><td> <img src="/wiki/lib/exe/fetch.php"> </td> |
||||
</tr> |
||||
</table></div> |
||||
<!-- EDIT2 TABLE [7232-8509] --> |
||||
<p> |
||||
|
||||
<strong>Tip:</strong> Use the <code>setStartColor()</code>/<code>setEndColor()</code> settings described above to colorize the white and gray parts of textures. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Usage Example</a></h2> |
||||
<div> |
||||
<pre> ParticleEmitter fire = new ParticleEmitter("Emitter", ParticleMesh.Type.Triangle, 30); |
||||
Material mat_red = new Material(assetManager, "Common/MatDefs/Misc/Particle.j3md"); |
||||
mat_red.setTexture("Texture", assetManager.loadTexture("Effects/Explosion/flame.png")); |
||||
fire.setMaterial(mat_red); |
||||
fire.setImagesX(2); fire.setImagesY(2); // 2x2 texture animation |
||||
fire.setEndColor( new ColorRGBA(1f, 0f, 0f, 1f)); // red |
||||
fire.setStartColor(new ColorRGBA(1f, 1f, 0f, 0.5f)); // yellow |
||||
fire.setInitialVelocity(new Vector3f(0, 2, 0)); |
||||
fire.getParticleInfluencer().setInitialVelocity(new Vector3f(0,2,0)); |
||||
fire.setStartSize(1.5f); |
||||
fire.setEndSize(0.1f); |
||||
fire.setGravity(0); |
||||
fire.setGravity(0,0,0); |
||||
fire.setLowLife(0.5f); |
||||
fire.setHighLife(3f); |
||||
fire.setVelocityVariation(0.3f); |
||||
rootNode.attachChild(fire);</pre><p> Browse the full source code of all <a |
||||
href="http://code.google.com/p/jmonkeyengine/source/browse/#svn/branches/jme3/src/test/jme3test/effect">effect examples</a> here.</p><hr |
||||
/><p> See also: <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/effects_overview.html">Effects Overview</a></p></div> |
||||
<p><em><a href="http://jmonkeyengine.org/wiki/doku.php/jme3:advanced:particle_emitters?do=export_xhtmlbody">view online version</a></em></p> |
||||
fire.getParticleInfluencer().setVelocityVariation(0.3f); |
||||
rootNode.attachChild(fire);</pre> |
||||
|
||||
<p> |
||||
|
||||
Browse the full source code of all <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/#svn/branches/jme3/src/test/jme3test/effect"><param name="text" value="<html><u>effect examples</u></html>"><param name="textColor" value="blue"></object> here. |
||||
</p> |
||||
<hr /> |
||||
|
||||
<p> |
||||
|
||||
See also: <a href="/com/jme3/gde/core/docs/jme3/advanced/effects_overview.html">Effects Overview</a> |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
<p><em><a href="http://direct.jmonkeyengine.org/wiki/doku.php/jme3:advanced:particle_emitters?do=export_xhtmlbody">view online version</a></em></p> |
||||
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 5.6 KiB |
@ -0,0 +1,29 @@ |
||||
|
||||
<h1><a>Read Graphic Card Capabilites</a></h1> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
You can read the graphic card's capabilities using the <code>com.jme3.renderer.Caps</code> class: |
||||
</p> |
||||
<pre>Collection<Caps> caps = renderer.getCaps(); |
||||
Logger.getLogger(HelloWorld.class.getName()).log(Level.INFO, “Caps: {0}” + caps.toString()); </pre> |
||||
|
||||
<p> |
||||
Replace HelloWorld by the name of the class where you are using this line. |
||||
</p> |
||||
|
||||
<p> |
||||
The result looks like the following example: |
||||
</p> |
||||
<pre>Caps: [FrameBuffer, FrameBufferMRT, FrameBufferMultisample, |
||||
OpenGL20, ARBprogram, GLSL100, GLSL110, GLSL120, |
||||
VertexTextureFetch, FloatTexture, TextureCompressionLATC]</pre> |
||||
|
||||
<p> |
||||
This would tell you that this user's graphic card only supports OpenGL 2.0 and cannot handle newer OpenGL features. |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
<p><em><a href="http://direct.jmonkeyengine.org/wiki/doku.php/jme3:advanced:read_graphic_card_capabilites?do=export_xhtmlbody">view online version</a></em></p> |
||||
@ -0,0 +1,53 @@ |
||||
|
||||
<h1><a>Remote-Controlling the Camera</a></h1> |
||||
<div> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Positioning the Camera</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
You can steer the camera using <a href="/com/jme3/gde/core/docs/jme3/advanced/cinematics.html">Cinematics</a>: |
||||
</p> |
||||
<ol> |
||||
<li><div> Create a Cinematic.</div> |
||||
</li> |
||||
<li><div> Create a CameraNode and bind the camera object to the Cinematic. Note that we also give the camera node a name in this step. <pre>CameraNode camNode = cinematic.bindCamera("topView", cam);</pre> |
||||
</div> |
||||
</li> |
||||
<li><div> Position the camera node in its start location.</div> |
||||
</li> |
||||
<li><div> Use activateCamera() to give the control of the camera to this node. You now see the scene from this camera's point of view. For example to see through the camera node named "topView", 6 seconds after the start of the cinematic, you'd write <pre>cinematic.activateCamera(6, "topView");</pre> |
||||
</div> |
||||
</li> |
||||
</ol> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Code Sample</a></h3> |
||||
<div> |
||||
<pre>flyCam.setEnabled(false); |
||||
Cinematic cinematic = new Cinematic(rootNode, 20); |
||||
|
||||
CameraNode camNodeTop = cinematic.bindCamera("topView", cam); |
||||
camNodeTop.setControlDir(ControlDirection.SpatialToCamera); |
||||
camNodeTop.getControl(0).setEnabled(false); |
||||
|
||||
CameraNode camNodeSide = cinematic.bindCamera("sideView", cam); |
||||
camNodeSide.setControlDir(ControlDirection.CameraToSpatial); |
||||
camNodeSide.getControl(0).setEnabled(false);</pre> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Moving the Camera</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
If desired, attach the camNode to a MotionTrack to let it travel along waypoints. This is demonstrated in the <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/animation/TestCinematic.java"><param name="text" value="<html><u>TestCameraMotionPath.java example</u></html>"><param name="textColor" value="blue"></object>. |
||||
</p> |
||||
|
||||
</div> |
||||
<p><em><a href="http://direct.jmonkeyengine.org/wiki/doku.php/jme3:advanced:remote-controlling_the_camera?do=export_xhtmlbody">view online version</a></em></p> |
||||
@ -0,0 +1,48 @@ |
||||
|
||||
<h1><a>Saving and Loading Games</a></h1> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
You can save and load scenes and individual Nodes using com.jme3.export.binary.BinaryExporter and com.jme3.export.binary.BinaryImporter. Use standard Java serialization to load game data. The jMonkeyEngine binary file format is .j3o. You can open, view, and edit .j3o files in the jMonkeyPlatform. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Saving a Node</a></h2> |
||||
<div> |
||||
<pre> @Override |
||||
public void destroy() { |
||||
System.getProperty("user.home"); |
||||
BinaryExporter exporter = BinaryExporter.getInstance(); |
||||
File(userHome+"/somefile.j3o"); |
||||
try { |
||||
exporter.save(rootNode, file); |
||||
} catch (IOException ex) { |
||||
Logger.getLogger(Main.class.getName()).log(Level.SEVERE, "Failed to save node!", ex); |
||||
} |
||||
super.destroy(); |
||||
}</pre> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Loading a Node</a></h2> |
||||
<div> |
||||
<pre> @Override |
||||
public void simpleInitApp() { |
||||
System.getProperty("user.home"); |
||||
BinaryImporter importer = BinaryImporter.getInstance(); |
||||
importer.setAssetManager(assetManager); |
||||
File(userHome+"/somefile.j3o"); |
||||
try { |
||||
Node loadedNode = (Node)importer.load(file); |
||||
loadedNode.setName("loaded node"); |
||||
rootNode.attachChild(loadedNode); |
||||
} catch (IOException ex) { |
||||
Logger.getLogger(Main.class.getName()).log(Level.SEVERE, "No saved node loaded.", ex); |
||||
} |
||||
... |
||||
</pre> |
||||
|
||||
</div> |
||||
<p><em><a href="http://direct.jmonkeyengine.org/wiki/doku.php/jme3:advanced:save_and_load?do=export_xhtmlbody">view online version</a></em></p> |
||||
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 30 KiB |
@ -1,33 +1,147 @@ |
||||
<h1><a |
||||
name="shapes">Shapes</a></h1><div |
||||
class="level1"><p> The simplest type of Meshes are jME's default Shapes. You can use Shapes to build complex Geometries. Shapes are created without using the AssetManager.</p><p> <strong>3D shapes:</strong></p><ul><li |
||||
class="level1"><div |
||||
class="li"> com.jme3.scene.shape.Sphere – A ball or elipsoid.</div></li><li |
||||
class="level1"><div |
||||
class="li"> com.jme3.scene.shape.Box – A cube or cuboid.</div></li><li |
||||
class="level1"><div |
||||
class="li"> com.jme3.scene.shape.Cylinder – A disk or pillar.</div></li><li |
||||
class="level1"><div |
||||
class="li"> com.jme3.scene.shape.Dome – Half a sphere.</div></li><li |
||||
class="level1"><div |
||||
class="li"> com.jme3.scene.shape.Torus – An single-holed torus ("donut").</div></li><li |
||||
class="level1"><div |
||||
class="li"> com.jme3.scene.shape.PQTorus – A parameterized torus, also known as PQ torus. Looks like a <a |
||||
href="http://en.wikipedia.org/wiki/Torus_knot">donut knotted into spirals</a>.</div></li></ul><p> <strong>Non-3D shapes:</strong></p><ul><li |
||||
class="level1"><div |
||||
class="li"> com.jme3.scene.shape.Quad – A flat 2D rectangle (has two sides)</div></li><li |
||||
class="level1"><div |
||||
class="li"> com.jme3.scene.shape.Line – A 1D line (has a length)</div></li><li |
||||
class="level1"><div |
||||
class="li"> come.jme3.math.Ray – A 1D line (has length, direction, start point, but no end)</div></li></ul></div><h2><a |
||||
name="usage">Usage</a></h2><div |
||||
class="level2"><p> To add a shape to the scene:</p><ol><li |
||||
class="level1"><div |
||||
class="li"> Create the base mesh shape</div></li><li |
||||
class="level1"><div |
||||
class="li"> Wrap it into a Geometry</div></li><li |
||||
class="level1"><div |
||||
class="li"> Attach the Geometry to the rootNode to make it visible.</div></li></ol><pre>Sphere sphereMesh = new Sphere(32, 32, 10, false, true); |
||||
Geometry sphere = new Geometry("Sky", sphereMesh); |
||||
rootNode.attachChild(sphere);</pre></div> |
||||
<p><em><a href="http://jmonkeyengine.org/wiki/doku.php/jme3:advanced:shape?do=export_xhtmlbody">view online version</a></em></p> |
||||
|
||||
<h1><a>Shapes</a></h1> |
||||
<div> |
||||
|
||||
<p> |
||||
The simplest type of Meshes are the built-in JME Shapes. You can create Shapes without using the AssetManager. |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>List of 3D shapes</a></h2> |
||||
<div> |
||||
<ul> |
||||
<li><div> com.jme3.scene.shape.Box – A cube or cuboid. Single-sided Quad faces (outside only). </div> |
||||
</li> |
||||
<li><div> com.jme3.scene.shape.StripBox – A cube or cuboid. Solid filled faces (inside and outside).</div> |
||||
</li> |
||||
<li><div> com.jme3.scene.shape.Cylinder – A disk or pillar.</div> |
||||
</li> |
||||
<li><div> com.jme3.scene.shape.Sphere – A ball or elipsoid.</div> |
||||
</li> |
||||
<li><div> com.jme3.scene.shape.Dome – Semi-sphere, e.g. SkyDome. </div> |
||||
</li> |
||||
<li><div> com.jme3.scene.shape.Torus – An single-holed torus or "donut".</div> |
||||
</li> |
||||
<li><div> com.jme3.scene.shape.PQTorus – A parameterized torus. A PQ-Torus looks like a <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://en.wikipedia.org/wiki/Torus_knot"><param name="text" value="<html><u>donut knotted into spirals</u></html>"><param name="textColor" value="blue"></object>.</div> |
||||
</li> |
||||
<li><div> com.jme3.scene.shape.Surface – A curved surface (called <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://en.wikipedia.org/wiki/File:NURBS_3-D_surface.gif"><param name="text" value="<html><u>NURBS</u></html>"><param name="textColor" value="blue"></object>) described by knots, weights and control points. Compare with shape.Curve.</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>List of Non-3D shapes</a></h2> |
||||
<div> |
||||
<ul> |
||||
<li><div> com.jme3.scene.shape.Quad – A flat 2D rectangle (has two sides)</div> |
||||
</li> |
||||
<li><div> com.jme3.scene.shape.Line – A straight 1D line defined by a start and end point.</div> |
||||
</li> |
||||
<li><div> com.jme3.scene.shape.Curve – A curved 1D spline. Compare with shape.Surface.</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Math versus Shape?</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
Do not mix up these visible Shapes with similarly named classes from the maths package. Choose the right package when letting your IDE fill in the import statements! |
||||
</p> |
||||
<ul> |
||||
<li><div> com.jme3.math.Line – is invisible, has a direction, goes through a point, infinite length.</div> |
||||
</li> |
||||
<li><div> com.jme3.math.Ray – is invisible, has a direction and start point, but no end.</div> |
||||
</li> |
||||
<li><div> com.jme3.math.Spline – is an invisible curve.</div> |
||||
</li> |
||||
<li><div> etc</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
<p> |
||||
These maths objects are invisible and are used for collision testing (ray casting) or to describe motion paths. They cannot be wrapped into a Geometry. |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Usage</a></h2> |
||||
<div> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Basic Usage</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
To add a shape to the scene: |
||||
</p> |
||||
<ol> |
||||
<li><div> Create the base mesh shape.</div> |
||||
</li> |
||||
<li><div> Wrap it into a Geometry.</div> |
||||
</li> |
||||
<li><div> Assign a Material to the Geometry.</div> |
||||
</li> |
||||
<li><div> Attach the Geometry to the rootNode to make it visible.</div> |
||||
</li> |
||||
</ol> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Complex Shapes</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
You can compose more complex custom Geometries out of simple Shapes. Think of the buildings in games like Angry Birds, or the building blocks in Second Life ("prims") and in Tetris ("Tetrominos"). |
||||
</p> |
||||
<ol> |
||||
<li><div> Create a Node. By default it is located at the origin (0/0/0) – leave the Node there for now.</div> |
||||
</li> |
||||
<li><div> Create your shapes and wrap each into a Geometry, as just described.</div> |
||||
</li> |
||||
<li><div> Attach each Geometry to the Node.</div> |
||||
</li> |
||||
<li><div> Arrange the Geometries around the Node (using <code>setLocalTranslation()</code>) so that the Node is in the center of the new constellation. The central Node is the pivot point for transformations (move/scale/rotate).</div> |
||||
</li> |
||||
<li><div> Move the pivot Node to its final location in the scene. Moving the pivot Node moves the attached constellation of Geometries with it.</div> |
||||
</li> |
||||
</ol> |
||||
|
||||
<p> |
||||
The order is important: First arrange around origin, then transform. Otherwise, transformations are applied around the wrong center (pivot). Of course, you can attach your constellation to other pivot Nodes to create even more complex shapes (a chair, a furnished room, a house, a city, …), but again, arrange them around the origin first before you transform them. |
||||
<br/> |
||||
|
||||
Note: Obviously, these composed Geometries are simpler than hand-sculpted meshes from a mesh editor. |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Code Examples</a></h2> |
||||
<div> |
||||
<pre>Sphere mesh = new Sphere(32, 32, 10, false, true);</pre> |
||||
<pre>Dome mesh = new Dome(Vector3f.ZERO, 2, 4, 1f,false); // Pyramid</pre> |
||||
<pre>Dome mesh = new Dome(Vector3f.ZERO, 2, 32, 1f,false); // Cone</pre> |
||||
<pre>Dome mesh = new Dome(Vector3f.ZERO, 32, 32, 1f,false); // Small hemisphere</pre> |
||||
<pre>Dome mesh = new Dome(Vector3f.ZERO, 32, 32, 1000f,true); // SkyDome</pre> |
||||
<pre>PQTorus mesh = new PQTorus(5,3, 2f, 1f, 32, 32); // Spiral torus</pre> |
||||
<pre>PQTorus mesh = new PQTorus(3,8, 2f, 1f, 32, 32); // Flower torus</pre> |
||||
|
||||
<p> |
||||
|
||||
Use one of the above examples together with the following geometry in a scene: |
||||
|
||||
</p> |
||||
<pre>Geometry geom = new Geometry("A shape", mesh); |
||||
Material mat = new Material(assetManager, |
||||
"Common/MatDefs/Misc/ShowNormals.j3md"); |
||||
geom.setMaterial(mat); |
||||
rootNode.attachChild(geom);</pre> |
||||
|
||||
</div> |
||||
<p><em><a href="http://direct.jmonkeyengine.org/wiki/doku.php/jme3:advanced:shape?do=export_xhtmlbody">view online version</a></em></p> |
||||
|
Before Width: | Height: | Size: 100 KiB After Width: | Height: | Size: 57 KiB |
@ -1,42 +1,101 @@ |
||||
<h1><a |
||||
name="how_to_add_a_sky_to_your_scene">How to add a Sky to your Scene</a></h1><div |
||||
class="level1"><p> <br/></p><p> Here is an example for how you add a static horizon (a background landscape and a sky) to a scene. |
||||
Having a discernable horizon with a suitable landscape (or space, or ocean, or whatever) in the background makes scenes look more realistic than just a single-colored "sky" background.</p></div><h2><a |
||||
name="adding_the_sky">Adding the Sky</a></h2><div |
||||
class="level2"><p> Adding a sky is extremely easy using the <code>com.jme3.util.SkyFactory</code>.</p><pre>rootNode.attachChild(SkyFactory.createSky( |
||||
assetManager, "Textures/Sky/Bright/BrightSky.dds", false));</pre><p> To add a sky you need to supply:</p><ol><li |
||||
class="level1"><div |
||||
class="li"> The assetManager object to use</div></li><li |
||||
class="level1"><div |
||||
class="li"> A cube or sphere map texture of the sky</div></li><li |
||||
class="level1"><div |
||||
class="li"> Set the boolean to true if you are using a sphere map texture. For a cube map, use false. <br/> Tip: Cube map is the default. You would know if you had created a sphere map.</div></li></ol><p> Internally, the SkyFactory calls the following methods:</p><ol><li |
||||
class="level1"><div |
||||
class="li"> <code>sky.setQueueBucket(Bucket.Sky);</code> makes certain the sky is rendered in the right order, behind everything else.</div></li><li |
||||
class="level1"><div |
||||
class="li"> <code>sky.setCullHint(Spatial.CullHint.Never);</code> makes certain that the sky is never culled.</div></li><li |
||||
class="level1"><div |
||||
class="li"> The SkyFactory uses the internal jME3 material definition <code>Sky.j3md</code>. This Material definition works with sphere and cube maps.</div></li></ol></div><h2><a |
||||
name="creating_the_textures">Creating the Textures</a></h2><div |
||||
class="level2"><p> As the sky texture we use the sample BrightSky.dds file from jme3test-test-data.</p><p> How to create a sky textures?</p><ul><li |
||||
class="level1"><div |
||||
class="li"> There are many tools out there that generate cube and sphere maps. <br/> Examples for landscape texture generators are Terragen or Bryce.</div></li><li |
||||
class="level1"><div |
||||
class="li"> The actual texture size does not matter, as long as you add the Sky Geometry to the Sky bucket: Everything in the sky bucket will always be infinitely far away behind everything else, and never intersect with your scene. <br/> Of course the higher the resolution, the better it will look. On the other hand, if the graphic is too big, it will slow the game down.</div></li><li |
||||
class="level1"><div |
||||
class="li"> A box or sphere map is the simplest solution. But you can use any Node as sky, even complex sets of geometries and quads with animated clouds, blinking stars, city skylines, etc.</div></li><li |
||||
class="level1"><div |
||||
class="li"> JME3 supports cube maps in <acronym |
||||
title="Portable Network Graphics">PNG</acronym>, <acronym |
||||
title="Joint Photographics Experts Group">JPG</acronym>, or (compressed) DDS format.</div></li></ul><p> Box or Sphere?</p><ul><li |
||||
class="level1"><div |
||||
class="li"> If you have access to cube map textures, then use a SkyBox</div><ul><li |
||||
class="level2"><div |
||||
class="li"> <a |
||||
href="http://1.bp.blogspot.com/_uVsWqMqIGQU/SN0IZEE117I/AAAAAAAAAPs/4lfHx1Erdqg/s1600/skybox">SkyBox examples</a></div></li></ul></li><li |
||||
class="level1"><div |
||||
class="li"> If you have access to sphere map textures – specially projected sky images that fit inside a sphere – then you use a SkySphere or SkyDome.</div><ul><li |
||||
class="level2"><div |
||||
class="li"> <a |
||||
href="http://wiki.delphigl.com/index.php/Datei:Skysphere.jpg">SkySphere example</a></div></li></ul></li></ul></div> |
||||
<p><em><a href="http://jmonkeyengine.org/wiki/doku.php/jme3:advanced:sky?do=export_xhtmlbody">view online version</a></em></p> |
||||
|
||||
<h1><a>How to add a Sky to your Scene</a></h1> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
<br/> |
||||
|
||||
</p> |
||||
|
||||
<p> |
||||
Here is an example for how you add a static horizon (a background landscape and a sky) to a scene. |
||||
Having a discernable horizon with a suitable landscape (or space, or ocean, or whatever) in the background makes scenes look more realistic than just a single-colored "sky" background. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Adding the Sky</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
Adding a sky is extremely easy using the <code>com.jme3.util.SkyFactory</code>. |
||||
</p> |
||||
<pre>rootNode.attachChild(SkyFactory.createSky( |
||||
assetManager, "Textures/Sky/Bright/BrightSky.dds", false));</pre> |
||||
|
||||
<p> |
||||
To add a sky you need to supply: |
||||
</p> |
||||
<ol> |
||||
<li><div> The assetManager object to use</div> |
||||
</li> |
||||
<li><div> A cube or sphere map texture of the sky</div> |
||||
</li> |
||||
<li><div> Set the boolean to true if you are using a sphere map texture. For a cube map, use false. <br/> |
||||
Tip: Cube map is the default. You would know if you had created a sphere map.</div> |
||||
</li> |
||||
</ol> |
||||
|
||||
<p> |
||||
|
||||
Internally, the SkyFactory calls the following methods: |
||||
</p> |
||||
<ol> |
||||
<li><div> <code>sky.setQueueBucket(Bucket.Sky);</code> makes certain the sky is rendered in the right order, behind everything else.</div> |
||||
</li> |
||||
<li><div> <code>sky.setCullHint(Spatial.CullHint.Never);</code> makes certain that the sky is never culled.</div> |
||||
</li> |
||||
<li><div> The SkyFactory uses the internal jME3 material definition <code>Sky.j3md</code>. This Material definition works with sphere and cube maps. </div> |
||||
</li> |
||||
</ol> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Creating the Textures</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
As the sky texture we use the sample BrightSky.dds file from jme3test-test-data. |
||||
</p> |
||||
|
||||
<p> |
||||
How to create a sky textures? |
||||
|
||||
</p> |
||||
<ul> |
||||
<li><div> There are many tools out there that generate cube and sphere maps. <br/> |
||||
Examples for landscape texture generators are Terragen or Bryce.</div> |
||||
</li> |
||||
<li><div> The actual texture size does not matter, as long as you add the Sky Geometry to the Sky bucket: Everything in the sky bucket will always be infinitely far away behind everything else, and never intersect with your scene. <br/> |
||||
Of course the higher the resolution, the better it will look. On the other hand, if the graphic is too big, it will slow the game down. </div> |
||||
</li> |
||||
<li><div> A box or sphere map is the simplest solution. But you can use any Node as sky, even complex sets of geometries and quads with animated clouds, blinking stars, city skylines, etc.</div> |
||||
</li> |
||||
<li><div> JME3 supports cube maps in <acronym title="Portable Network Graphics">PNG</acronym>, <acronym title="Joint Photographics Experts Group">JPG</acronym>, or (compressed) DDS format.</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
<p> |
||||
|
||||
Box or Sphere? |
||||
</p> |
||||
<ul> |
||||
<li><div> If you have access to cube map textures, then use a SkyBox</div> |
||||
<ul> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://1.bp.blogspot.com/_uVsWqMqIGQU/SN0IZEE117I/AAAAAAAAAPs/4lfHx1Erdqg/s1600/skybox"><param name="text" value="<html><u>SkyBox examples</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
<li><div> If you have access to sphere map textures – specially projected sky images that fit inside a sphere – then you use a SkySphere or SkyDome. </div> |
||||
<ul> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://wiki.delphigl.com/index.php/Datei:Skysphere.jpg"><param name="text" value="<html><u>SkySphere example</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
<p><em><a href="http://direct.jmonkeyengine.org/wiki/doku.php/jme3:advanced:sky?do=export_xhtmlbody">view online version</a></em></p> |
||||
@ -1,59 +1,138 @@ |
||||
<h1><a |
||||
name="spatial">Spatial</a></h1><div |
||||
class="level1"><p> This is an introduction to the concept of of Spatials, the elements of the 3D scene graph. The scene graph is a data structure that manages all objects in your 3D world. For example it keeps track of the 3D models that you load and position. When you extend a Java class from com.jme3.app.SimpleApplication, you inherit the scene graph and rootNode.</p><p> The main element of the scene graph is a Spatial called rootNode. All other Spatials are <em>attached</em> to the rootNode in a parent-child relationship. If you think you want to understand the scene graph better, please read <a |
||||
href="/com/jme3/gde/core/docs/jme3/scenegraph_for_dummies.html">Scenegraph for dummies</a> first.</p></div><h2><a |
||||
name="node_versus_geometry">Node versus Geometry</a></h2><div |
||||
class="level2"><p> A Spatial is either a Node or a Geometry.</p><p> <a |
||||
href="/wiki/lib/exe/detail.php/jme3:intermediate:scene-graph.png?id=jme3%3Aadvanced%3Aspatial"><img |
||||
src="nbdocs:/com/jme3/gde/core/docs/jme3/intermediate/scene-graph.png" class="mediacenter" alt="" /></a></p><div |
||||
class="table sectionedit1"><table |
||||
class="inline"><tr |
||||
class="row0"><td |
||||
class="col0 leftalign"></td><th |
||||
class="col1" colspan="2"> Spatials</th></tr><tr |
||||
class="row1"><th |
||||
class="col0"> Purpose:</th><td |
||||
class="col1" colspan="2"> A Spatial is an abstract data structure that stores transformations (translation, rotation, scale) of elements of the scene graph. A Spatial can be saved and loaded using the AssetManager.</td></tr><tr |
||||
class="row2"><td |
||||
class="col0 leftalign"></td><th |
||||
class="col1"> com.jme3.scene.Geometry</th><th |
||||
class="col2"> com.jme3.scene.Node</th></tr><tr |
||||
class="row3"><th |
||||
class="col0"> Visibility:</th><td |
||||
class="col1"> A Geometry represents a visible 3-D object in the scene graph.</td><td |
||||
class="col2"> A Node is an invisible "handle" for a group of objects in the scene graph.</td></tr><tr |
||||
class="row4"><th |
||||
class="col0 leftalign"> Purpose:</th><td |
||||
class="col1"> Use Geometries to represent an object's looks: Every Geometry contains a polygon mesh and a material, specifying its shape, color, texture, and opacity/transparency. <br/> You can attach a Geometry to an Node.</td><td |
||||
class="col2"> Use nodes to structure and group Geometries and other Nodes. Every Node is attached to parent node, and the node can have children attached to itself. When you transform a parent node, all its children are transformed as well.</td></tr><tr |
||||
class="row5"><th |
||||
class="col0 leftalign"> Content:</th><td |
||||
class="col1"> Transformations, mesh, material.</td><td |
||||
class="col2"> Transformations. No mesh, no material.</td></tr><tr |
||||
class="row6"><th |
||||
class="col0 leftalign"> Examples:</th><td |
||||
class="col1"> A box, a sphere, player, a building, a piece of terrain, a vehicle, missiles, NPCs, etc…</td><td |
||||
class="col2"> The rootNode, the guiNode, an audio node, a custom grouping node, etc…</td></tr></table></div><p> <strong>Important:</strong> You never create a Spatial with <code>Spatial s = new Spatial();</code> – it's abstract. Instead you create (e.g. load) a Node or Geometry object, and cast it to Spatial. You use the Spatial type in methods that accept both Nodes and Geometries as arguments.</p></div><h3><a |
||||
name="mesh">Mesh</a></h3><div |
||||
class="level3"><p> The polygon <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/mesh.html">Mesh</a> inside a Geometry can be one of three things:</p><ul><li |
||||
class="level1"><div |
||||
class="li"> <strong>Shapes:</strong> The simplest type of Meshes are jME's default <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/shape.html">Shape</a>s such as cubes and spheres. You can use several Shapes to build complex Geometries. Shapes are built-in and can be created without using the AssetManager.</div></li><li |
||||
class="level1"><div |
||||
class="li"> <strong>3D Models:</strong> <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/3d_models.html">3D models and scenes</a> are also made up of meshes, but are more complex than Shapes. You create Models and Scenes in external 3D Mesh Editors and export them as Ogre <acronym |
||||
title="Extensible Markup Language">XML</acronym> or Wavefront OBJ. Use the <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/asset_manager.html">Asset Manager</a> to load models into a your jME3 game.</div></li><li |
||||
class="level1"><div |
||||
class="li"> <strong>Custom Meshes:</strong> Advanced users can create <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/custom_meshes.html">Custom Meshes</a> programmatically.</div></li></ul></div><h2><a |
||||
name="how_to_access_a_named_sub-mesh">How to Access a Named Sub-Mesh</a></h2><div |
||||
class="level2"><p> Often after you load a scene or model, you need to access a part of it as an individual Geometry in the scene graph. Maybe you want to swap a character's weapon, or you want to play a door-opening animation. First you need to know the unique name of the sub-mesh.</p><ol><li |
||||
class="level1"><div |
||||
class="li"> Open the model in a 3D mesh editor, or in the jMonkeyPlatform's viewer.</div></li><li |
||||
class="level1"><div |
||||
class="li"> Find out the existing names of sub-meshes in the model.</div></li><li |
||||
class="level1"><div |
||||
class="li"> Assign unique names to sub-meshes in the model if neccessary.</div></li></ol><p> In the following example, the Node <code>house</code> is the loaded model. The sub-meshes in the Node are called its children. The String, here <code>door 12</code>, is the name of the mesh that you are searching.</p><pre>Geometry submesh = (Geometry) houseScene.getChild("door 12");</pre></div> |
||||
<p><em><a href="http://jmonkeyengine.org/wiki/doku.php/jme3:advanced:spatial?do=export_xhtmlbody">view online version</a></em></p> |
||||
|
||||
<h1><a>Spatial</a></h1> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
This is an introduction to the concept of Spatials, the elements of the 3D scene graph. The scene graph is a data structure that manages all objects in your 3D world. For example, the scene graph keeps track of the 3D models that you load and position. When you extend a Java class from com.jme3.app.SimpleApplication, you automatically inherit the scene graph and its rootNode. |
||||
</p> |
||||
|
||||
<p> |
||||
The rootNode is the central element of the scene graph. Even if the scenegraph is empty, it always has at least its rootNode. All other Spatials are <em>attached</em> to the rootNode in a parent-child relationship. If you think you need to understand the scene graph concept better, please read <a href="/com/jme3/gde/core/docs/jme3/scenegraph_for_dummies.html">Scenegraph for dummies</a> first. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Node versus Geometry</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
In your Java code, a Spatial is either a com.jme3.scene.Node or a com.jme3.scene.Geometry. You use the two for different purposes: |
||||
</p> |
||||
|
||||
<p> |
||||
<img src="nbdocs:/com/jme3/gde/core/docs/jme3/intermediate/scene-graph.png"> |
||||
|
||||
</p> |
||||
<div><table> |
||||
<tr> |
||||
<td> </td><th>com.jme3.scene.Spatial </th> |
||||
</tr> |
||||
<tr> |
||||
<th> Purpose: </th><td> A Spatial is an abstract data structure that stores transformations (translation, rotation, scale) of elements of the scene graph. Spatials can be saved and loaded using the AssetManager. </td> |
||||
</tr> |
||||
<tr> |
||||
<td> </td><th> com.jme3.scene.Geometry </th><th> com.jme3.scene.Node </th> |
||||
</tr> |
||||
<tr> |
||||
<th> Visibility: </th><td> A Geometry represents a visible 3-D object in the scene graph. </td><td> A Node is an invisible "handle" for a group of objects in the scene graph. </td> |
||||
</tr> |
||||
<tr> |
||||
<th> Purpose: </th><td> Use Geometries to represent an object's looks: Every Geometry contains a polygon mesh and a material, specifying its shape, color, texture, and opacity/transparency. <br/> |
||||
You can attach a Geometry to a Node. </td><td> Use Nodes to structure and group Geometries and other Nodes. Every Node is attached to one parent node, and each node can have zero or more children attached to itself. When you transform a parent node, all its children are transformed as well. </td> |
||||
</tr> |
||||
<tr> |
||||
<th> Content: </th><td> Transformations; custom user data; <br/> |
||||
mesh, material; </td><td> Transformations; custom user data; <br/> |
||||
no mesh, no material.</td> |
||||
</tr> |
||||
<tr> |
||||
<th> Examples: </th><td> A box, a sphere, player, a building, a piece of terrain, a vehicle, missiles, NPCs, etc… </td><td> The rootNode, the guiNode, an audio node, a custom grouping node, etc… </td> |
||||
</tr> |
||||
</table></div> |
||||
<!-- EDIT1 TABLE [944-2177] --> |
||||
<p> |
||||
|
||||
<p><div>You never create a Spatial with <code>Spatial s = new Spatial();</code>! A Spatial is an abstract concept, like a mammal (there is no actual creature called "mammal" walking around here). You create a Node, or load a Geometry object. Some methods however require a Spatial argement: This is because they are able to accept both Nodes and Geometries as arguments. In this case, you must cast a Node or Geometry to Spatial. |
||||
</div></p> |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Mesh</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
The polygon <a href="/com/jme3/gde/core/docs/jme3/advanced/mesh.html">Mesh</a> inside a Geometry can be one of three things: |
||||
|
||||
</p> |
||||
<ul> |
||||
<li><div> <strong>Shapes:</strong> The simplest type of Meshes are jME's default <a href="/com/jme3/gde/core/docs/jme3/advanced/shape.html">Shape</a>s such as cubes and spheres. You can use several Shapes to build complex Geometries. Shapes are built-in and can be created without using the AssetManager.</div> |
||||
</li> |
||||
<li><div> <strong>3D Models:</strong> <a href="/com/jme3/gde/core/docs/jme3/advanced/3d_models.html">3D models and scenes</a> are also made up of meshes, but are more complex than Shapes. You create Models and Scenes in external 3D Mesh Editors and export them as Ogre <acronym title="Extensible Markup Language">XML</acronym> or Wavefront OBJ. Use the <a href="/com/jme3/gde/core/docs/jme3/advanced/asset_manager.html">Asset Manager</a> to load models into a your jME3 game.</div> |
||||
</li> |
||||
<li><div> <strong>Custom Meshes:</strong> Advanced users can create <a href="/com/jme3/gde/core/docs/jme3/advanced/custom_meshes.html">Custom Meshes</a> programmatically.</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>How to Add User Data to a Spatial</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
You can include custom Java objects in Nodes and Geometries. This is useful for maintaining information about a game element, such as health, budget, ammunition, inventory, equipment, etc for players, or landmark locations for terrains, and much more. Where ever the spatial is accessible, you can also access the object's game data. |
||||
</p> |
||||
<pre>// create and instance of your custom data class |
||||
PlayerData playerData = new PlayerData("joe", 0, 100); |
||||
// store custom data in Node or Geometry |
||||
player.setUserData("player data", playerData); |
||||
... |
||||
// Elsewhere: retrieved data from Node or Geometry... |
||||
PlayerData playerData = player.getUserData("player data"); |
||||
// ... set the data... |
||||
playerData.setHealth("99"); |
||||
// ... or get the data for tests or to display it in the HUD. |
||||
health = playerData.getHealth();</pre> |
||||
|
||||
<p> |
||||
You can add as many data objects to a Spatial as you need. Just make sure to label them with different Strings (<code>player data</code>, <code>player inventory</code>, <code>player equipment</code>, etc). |
||||
</p> |
||||
|
||||
<p> |
||||
You can also list all data keys that are defined for one Spatial: |
||||
</p> |
||||
<pre>for(String key : geom.getUserDataKeys()){ |
||||
System.out.println(geom.getName()+"'s keys: "+key); |
||||
}</pre> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>How to Access a Named Sub-Mesh</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
Often after you load a scene or model, you need to access a part of it as an individual Geometry in the scene graph. Maybe you want to swap a character's weapon, or you want to play a door-opening animation. First you need to know the unique name of the sub-mesh. |
||||
|
||||
</p> |
||||
<ol> |
||||
<li><div> Open the model in a 3D mesh editor, or in the jMonkeyPlatform's viewer. </div> |
||||
</li> |
||||
<li><div> Find out the existing names of sub-meshes in the model.</div> |
||||
</li> |
||||
<li><div> Assign unique names to sub-meshes in the model if neccessary.</div> |
||||
</li> |
||||
</ol> |
||||
|
||||
<p> |
||||
|
||||
In the following example, the Node <code>house</code> is the loaded model. The sub-meshes in the Node are called its children. The String, here <code>door 12</code>, is the name of the mesh that you are searching. |
||||
</p> |
||||
<pre>Geometry submesh = (Geometry) houseScene.getChild("door 12");</pre> |
||||
|
||||
</div> |
||||
<p><em><a href="http://direct.jmonkeyengine.org/wiki/doku.php/jme3:advanced:spatial?do=export_xhtmlbody">view online version</a></em></p> |
||||
@ -1,60 +1,180 @@ |
||||
<h1><a |
||||
name="jme3_canvas_in_a_swing_gui">JME3 Canvas in a Swing GUI</a></h1><div |
||||
class="level1"><p> 3D games are typically played full-screen, or in a window that takes over the mouse and all inputs. However it is also possible to embed a jME 3 canvas in a standard Swing application. <br/> <br/> This can be useful when you create some sort of interactive 3D viewer with a user interface that is more complex than just a HUD: For instance an interactive scientific demo, a level editor, or a game character designer. <br/> <br/></p><ul><li |
||||
class="level1"><div |
||||
class="li"> Advantages:</div><ul><li |
||||
class="level2"><div |
||||
class="li"> You can use Swing components (frame, panels, menus, controls) next to your jME3 game.</div></li><li |
||||
class="level2"><div |
||||
class="li"> The NetBeans <acronym |
||||
title="Graphical User Interface">GUI</acronym> builder is compatible with the jMonkeyEngine; you can use it it to lay out the Swing <acronym |
||||
title="Graphical User Interface">GUI</acronym> frame, and then add() the jME canvas into it. Install the <acronym |
||||
title="Graphical User Interface">GUI</acronym> builder via Tools → Plugins → Available Plugins.</div></li></ul></li><li |
||||
class="level1"><div |
||||
class="li"> Disadvantages:</div><ul><li |
||||
class="level2"><div |
||||
class="li"> You cannot use SimpleApplication's default mouse capturing for camera navigation, but have to come up with a custom solution.</div></li></ul></li></ul><p> Here is the full <a |
||||
href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/awt/TestCanvas.java">TestCanvas.java</a> code sample.</p></div><h2><a |
||||
name="extending_simpleapplication">Extending SimpleApplication</a></h2><div |
||||
class="level2"><p> You start out just the same as for any jME3 game: The base application, here SwingCanvasTest, extends <code>com.jme3.app.SimpleApplication</code>. As usual, you use <code>simpleInitApp()</code> to initialize the scene, and <code>simpleUpdate()</code> as event loop. <br/> <br/> The camera's default behaviour in SimpleApplication is to capture the mouse, which doesn't make sense in a Swing window. You have to deactivate and replace this behaviour by <code>flyCam.setDragToRotate(true);</code> when you initialize the application:</p><pre>public void simpleInitApp() { |
||||
|
||||
<h1><a>JME3 Canvas in a Swing GUI</a></h1> |
||||
<div> |
||||
|
||||
<p> |
||||
3D games are typically played full-screen, or in a window that takes over the mouse and all inputs. However it is also possible to embed a jME 3 canvas in a standard Swing application. <br/> |
||||
<br/> |
||||
|
||||
This can be useful when you create some sort of interactive 3D viewer with a user interface that is more complex than just a HUD: For instance an interactive scientific demo, a level editor, or a game character designer. <br/> |
||||
<br/> |
||||
|
||||
</p> |
||||
<ul> |
||||
<li><div> Advantages:</div> |
||||
<ul> |
||||
<li><div> You can use Swing components (frame, panels, menus, controls) next to your jME3 game.</div> |
||||
</li> |
||||
<li><div> The NetBeans <acronym title="Graphical User Interface">GUI</acronym> builder is compatible with the jMonkeyEngine; you can use it it to lay out the Swing <acronym title="Graphical User Interface">GUI</acronym> frame, and then add() the jME canvas into it. Install the <acronym title="Graphical User Interface">GUI</acronym> builder via Tools → Plugins → Available Plugins.</div> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
<li><div> Disadvantages:</div> |
||||
<ul> |
||||
<li><div> You cannot use SimpleApplication's default mouse capturing for camera navigation, but have to come up with a custom solution.</div> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
</ul> |
||||
|
||||
<p> |
||||
Here is the full <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/awt/TestCanvas.java"><param name="text" value="<html><u>TestCanvas.java</u></html>"><param name="textColor" value="blue"></object> code sample. |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Extending SimpleApplication</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
You start out just the same as for any jME3 game: The base application, here SwingCanvasTest, extends <code>com.jme3.app.SimpleApplication</code>. As usual, you use <code>simpleInitApp()</code> to initialize the scene, and <code>simpleUpdate()</code> as event loop. <br/> |
||||
<br/> |
||||
|
||||
The camera's default behaviour in SimpleApplication is to capture the mouse, which doesn't make sense in a Swing window. You have to deactivate and replace this behaviour by <code>flyCam.setDragToRotate(true);</code> when you initialize the application: |
||||
|
||||
</p> |
||||
<pre>public void simpleInitApp() { |
||||
// activate windowed input behaviour |
||||
flyCam.setDragToRotate(true); |
||||
// Set up inputs and load your scene as usual |
||||
... |
||||
}</pre><p> In short: The first thing that is different is the <code>main()</code> method. We don't call start() on the SwingCanvasTest object as usual. Instead we create a Runnable() that creates and opens a standard Swing jFrame. In the runnable, we also create our SwingCanvasTest game with special settings, create a Canvas for it, and add that to the jFrame. Then we call startCanvas().</p></div><h2><a |
||||
name="main_and_runnable">Main() and Runnable()</a></h2><div |
||||
class="level2"><p> The Swing isn't thread-safe and doesn't allow us to keep the jME3 canvas up-to-date. This is why we create a runnable for the jME canvas and queue it in the AWT event thread, so it can be invoked "later" in the loop, when Swing is ready with updating its own stuff. <br/> <br/> In the SwingCanvasTest's main() method, create a queued runnable(). It will contain the jME canvas and the Swing frame.</p><pre> public static void main(String[] args) { |
||||
}</pre> |
||||
|
||||
<p> |
||||
|
||||
In short: The first thing that is different is the <code>main()</code> method. We don't call start() on the SwingCanvasTest object as usual. Instead we create a Runnable() that creates and opens a standard Swing jFrame. In the runnable, we also create our SwingCanvasTest game with special settings, create a Canvas for it, and add that to the jFrame. Then we call startCanvas(). |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Main() and Runnable()</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
The Swing isn't thread-safe and doesn't allow us to keep the jME3 canvas up-to-date. This is why we create a runnable for the jME canvas and queue it in the AWT event thread, so it can be invoked "later" in the loop, when Swing is ready with updating its own stuff. <br/> |
||||
<br/> |
||||
|
||||
In the SwingCanvasTest's main() method, create a queued runnable(). It will contain the jME canvas and the Swing frame. |
||||
|
||||
</p> |
||||
<pre> public static void main(String[] args) { |
||||
java.awt.Runnable() { |
||||
public void run() { |
||||
// ... see below ... |
||||
} |
||||
}); |
||||
}</pre></div><h3><a |
||||
name="creating_the_canvas">Creating the Canvas</a></h3><div |
||||
class="level3"><p> Here in the <code>run()</code> method, we start the jME application, create its canvas, create a Swing frame, and add everything together. <br/> <br/> Specify the com.jme3.system.AppSettings so jME knows the size of the Swing panel that we put it into. The application will not ask the user for display settings, you have to specify them in advance.</p><pre>AppSettings settings = new AppSettings(true); |
||||
}</pre> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Creating the Canvas</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
Here in the <code>run()</code> method, we start the jME application, create its canvas, create a Swing frame, and add everything together. <br/> |
||||
<br/> |
||||
|
||||
Specify the com.jme3.system.AppSettings so jME knows the size of the Swing panel that we put it into. The application will not ask the user for display settings, you have to specify them in advance. |
||||
|
||||
</p> |
||||
<pre>AppSettings settings = new AppSettings(true); |
||||
settings.setWidth(640); |
||||
settings.setHeight(480);</pre><p> We create our canvas application SwingCanvasTest, and give it the settings. We manually create a canvas for this game and configure the com.jme3.system.JmeCanvasContext. The method setSystemListener() makes sure that the listener receives events relating to context creation, update, and destroy.</p><pre>SwingCanvasTest canvasApplication = new SwingCanvasTest(); |
||||
settings.setHeight(480);</pre> |
||||
|
||||
<p> |
||||
|
||||
We create our canvas application SwingCanvasTest, and give it the settings. We manually create a canvas for this game and configure the com.jme3.system.JmeCanvasContext. The method setSystemListener() makes sure that the listener receives events relating to context creation, update, and destroy. |
||||
|
||||
</p> |
||||
<pre>SwingCanvasTest canvasApplication = new SwingCanvasTest(); |
||||
canvasApplication.setSettings(settings); |
||||
canvasApplication.createCanvas(); // create canvas! |
||||
JmeCanvasContext ctx = (JmeCanvasContext) canvasApplication.getContext(); |
||||
ctx.setSystemListener(canvasApplication); |
||||
Dimension(640, 480); |
||||
ctx.getCanvas().setPreferredSize(dim);</pre><p> Note that we have not called start() on the application, as we would usually do in the main() method. We will call startCanvas() later instead.</p></div><h3><a |
||||
name="creating_the_swing_frame">Creating the Swing Frame</a></h3><div |
||||
class="level3"><p> Inside the run() method, you create the Swing window as you would usually do. Create an empty jFrame and add() components to it, or create a custom jFrame object in another class file (for example, by using the NetBeans <acronym |
||||
title="Graphical User Interface">GUI</acronym> builder) and create an instance of it here. |
||||
Which ever you do, let's call the jFrame <code>window</code>.</p><pre>JFrame("Swing Application"); |
||||
window.setDefaultCloseOperation(FlowLayout()); // a panel |
||||
ctx.getCanvas().setPreferredSize(dim);</pre> |
||||
|
||||
<p> |
||||
|
||||
Note that we have not called start() on the application, as we would usually do in the main() method. We will call startCanvas() later instead. |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Creating the Swing Frame</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
Inside the run() method, you create the Swing window as you would usually do. Create an empty jFrame and add() components to it, or create a custom jFrame object in another class file (for example, by using the NetBeans <acronym title="Graphical User Interface">GUI</acronym> builder) and create an instance of it here. |
||||
Which ever you do, let's call the jFrame <code>window</code>. |
||||
|
||||
</p> |
||||
<pre>JFrame("Swing Application"); |
||||
window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);</pre> |
||||
|
||||
<p> |
||||
|
||||
We create a standard JPanel inside the JFrame. Give it any Layout you wish – here we use a simple Flow Layout. Where the code sample says "Some Swing Component", this is where you add your buttons and controls. <br/> |
||||
<br/> |
||||
|
||||
The important step is to add() the canvas component into the panel, like all the other Swing components. |
||||
|
||||
</p> |
||||
<pre>FlowLayout()); // a panel |
||||
// add all your Swing components ... |
||||
panel.add(new JButton("Some Swing Component")); |
||||
... |
||||
// add the JME canvas |
||||
panel.add(ctx.getCanvas());</pre><p> OK, the jFrame and the panel are ready. We add the panel into the jFrame, and pack everything together. Set the window's visibility to true make it appear.</p><pre>window.add(panel); |
||||
panel.add(ctx.getCanvas());</pre> |
||||
|
||||
<p> |
||||
|
||||
OK, the jFrame and the panel are ready. We add the panel into the jFrame, and pack everything together. Set the window's visibility to true make it appear. |
||||
|
||||
</p> |
||||
<pre>window.add(panel); |
||||
window.pack(); |
||||
window.setVisible(true);</pre><p> Remember that we haven't called start() on the jME appliation yet? For the canvas, there is a special <code>startCanvas()</code> method that you must call now:</p><pre>canvasApplication.startCanvas();</pre><p> Clean, build, and run!</p></div><h2><a |
||||
name="navigation">Navigation</a></h2><div |
||||
class="level2"><p> Remember, to navigate in the scene, click and drag (!) the mouse, or press the WASD keys. Depending on your game you may even want to define custom inputs to handle navigation in this untypical environment.</p><div |
||||
class="tags"><span> <a |
||||
href="/wiki/doku.php/tag:documentation?do=showtag&tag=tag%3Adocumentation">documentation</a>, <a |
||||
href="/wiki/doku.php/tag:gui?do=showtag&tag=tag%3Agui">gui</a> </span></div></div> |
||||
<p><em><a href="http://jmonkeyengine.org/wiki/doku.php/jme3:advanced:swing_canvas?do=export_xhtmlbody">view online version</a></em></p> |
||||
window.setVisible(true);</pre> |
||||
|
||||
<p> |
||||
|
||||
Remember that we haven't called start() on the jME appliation yet? For the canvas, there is a special <code>startCanvas()</code> method that you must call now: |
||||
|
||||
</p> |
||||
<pre>canvasApplication.startCanvas();</pre> |
||||
|
||||
<p> |
||||
|
||||
Clean, build, and run! |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Navigation</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
Remember, to navigate in the scene, click and drag (!) the mouse, or press the WASD keys. Depending on your game you may even want to define custom inputs to handle navigation in this untypical environment. |
||||
|
||||
</p> |
||||
<div><span> |
||||
<a href="/wiki/doku.php/tag:documentation?do=showtag&tag=tag%3Adocumentation">documentation</a>, |
||||
<a href="/wiki/doku.php/tag:gui?do=showtag&tag=tag%3Agui">gui</a> |
||||
</span></div> |
||||
|
||||
</div> |
||||
<p><em><a href="http://direct.jmonkeyengine.org/wiki/doku.php/jme3:advanced:swing_canvas?do=export_xhtmlbody">view online version</a></em></p> |
||||
@ -1,95 +1,176 @@ |
||||
<h1><a |
||||
name="terramonkey_-_jme3_s_terrain_system">TerraMonkey - jME3's Terrain System</a></h1><div |
||||
class="level1"><p> The goal of TerraMonkey is to provide a base implementation that will be usable for 80% of people's goals, while providing tools and a good foundation for the other 20% to build off of.</p></div><h2><a |
||||
name="overview">Overview</a></h2><div |
||||
class="level2"><p> TerraMonkey is a GeoMipMapping quad tree of terrain tiles that supports real time editing and texture splatting. That's a mouth full! Lets look at each part:</p><ul><li |
||||
class="level1"><div |
||||
class="li"> <strong>GeoMipMapping:</strong> a method of changing the level of detail (LOD) of geometry tiles based on how far away they are from the camera. Between the edges of two tiles, it will seam those edges together so you don't get gaps or holes. For an in-depth read on how it works, here is a pdf <a |
||||
href="http://www.flipcode.com/archives/article_geomipmaps.pdf">http://www.flipcode.com/archives/article_geomipmaps.pdf</a>.</div></li><li |
||||
class="level1"><div |
||||
class="li"> <strong>Quad Tree:</strong> The entire terrain structure is made up of TerrainPatches (these hold the actual meshes) as leaves in a quad tree (TerrainQuad). TerrainQuads are subdivided by 4 until they reach minimum size, then a TerrainPatch is created, and that is where the actual geometry mesh lives. This allows for fast culling of the terrain that you can't see.</div></li><li |
||||
class="level1"><div |
||||
class="li"> <strong>Splatting:</strong> The ability to paint multiple textures onto your terrain. What differs here from JME2 is that this is all done in a shader, no more render passes. So it performs much faster.</div></li><li |
||||
class="level1"><div |
||||
class="li"> <strong>Real-time editing:</strong> TerraMonkey will be editable in JMonkeyPlatform, and you will be able to do it in real time: raising and lowering terrain.</div></li></ul></div><h2><a |
||||
name="current_features">Current Features:</a></h2><div |
||||
class="level2"><ul><li |
||||
class="level1"><div |
||||
class="li"> Support for up to 3 splat textures.</div></li><li |
||||
class="level1"><div |
||||
class="li"> GeoMipMapping</div></li><li |
||||
class="level1"><div |
||||
class="li"> can be supplied a heightmap</div></li></ul></div><h2><a |
||||
name="planned_features">Planned Features:</a></h2><div |
||||
class="level2"><ul><li |
||||
class="level1"><div |
||||
class="li"> jMonkeyPlatform terrain editor</div></li><li |
||||
class="level1"><div |
||||
class="li"> Support for up to 16 splat textures.</div></li><li |
||||
class="level1"><div |
||||
class="li"> Hydraulic erosion and procedural texture generation</div></li><li |
||||
class="level1"><div |
||||
class="li"> Streaming terrain (ie. "infinite" terrain)</div></li><li |
||||
class="level1"><div |
||||
class="li"> Holes: caves, cliffs</div></li></ul></div><h2><a |
||||
name="geo_mip_mapping">Geo Mip Mapping</a></h2><div |
||||
class="level2"><p> You have seen GeoMipMapping implemented in games before. This is where the farther away terrain has fewer polygons, and as you move closer, more polygons fill in. The whole terrain is divided into a grid of patches, and each one has its own LOD. The GeoMipMapping algorithm will look at each patch, and its neighbours, to determine how to render the geometry. It will seam the edges between two patches with different LOD. |
||||
|
||||
<h1><a>TerraMonkey - jME3's Terrain System</a></h1> |
||||
<div> |
||||
|
||||
<p> |
||||
The goal of TerraMonkey is to provide a base implementation that will be usable for 80% of people's goals, while providing tools and a good foundation for the other 20% to build off of. Check out the videos in the following announcements: |
||||
</p> |
||||
<ul> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://jmonkeyengine.org/2011/06/17/infinite-terrains-with-terraingrid-new-features-in-terramonkey/"><param name="text" value="<html><u>New features</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://jmonkeyengine.org/2011/07/03/terramonkey-more-textures-tools-and-undo/"><param name="text" value="<html><u>More textures and Tools</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Overview</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
TerraMonkey is a GeoMipMapping quad tree of terrain tiles that supports real time editing and texture splatting. That's a mouth full! Lets look at each part: |
||||
</p> |
||||
<ul> |
||||
<li><div> <strong>GeoMipMapping:</strong> a method of changing the level of detail (LOD) of geometry tiles based on how far away they are from the camera. Between the edges of two tiles, it will seam those edges together so you don't get gaps or holes. For an in-depth read on how it works, here is a pdf <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://www.flipcode.com/archives/article_geomipmaps.pdf"><param name="text" value="<html><u>http://www.flipcode.com/archives/article_geomipmaps.pdf</u></html>"><param name="textColor" value="blue"></object>.</div> |
||||
</li> |
||||
<li><div> <strong>Quad Tree:</strong> The entire terrain structure is made up of TerrainPatches (these hold the actual meshes) as leaves in a quad tree (TerrainQuad). TerrainQuads are subdivided by 4 until they reach minimum size, then a TerrainPatch is created, and that is where the actual geometry mesh lives. This allows for fast culling of the terrain that you can't see.</div> |
||||
</li> |
||||
<li><div> <strong>Splatting:</strong> The ability to paint multiple textures onto your terrain. What differs here from JME2 is that this is all done in a shader, no more render passes. So it performs much faster.</div> |
||||
</li> |
||||
<li><div> <strong>Real-time editing:</strong> TerraMonkey will be editable in JMonkeyPlatform, and you will be able to do it in real time: raising and lowering terrain.</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Current Features:</a></h2> |
||||
<div> |
||||
<ul> |
||||
<li><div> Support for up to 3 splat textures.</div> |
||||
</li> |
||||
<li><div> GeoMipMapping</div> |
||||
</li> |
||||
<li><div> can be supplied a heightmap</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Planned Features:</a></h2> |
||||
<div> |
||||
<ul> |
||||
<li><div> jMonkeyPlatform terrain editor</div> |
||||
</li> |
||||
<li><div> Support for up to 16 splat textures.</div> |
||||
</li> |
||||
<li><div> Hydraulic erosion and procedural texture generation</div> |
||||
</li> |
||||
<li><div> Streaming terrain (ie. "infinite" terrain)</div> |
||||
</li> |
||||
<li><div> Holes: caves, cliffs</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Geo Mip Mapping</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
You have seen GeoMipMapping implemented in games before. This is where the farther away terrain has fewer polygons, and as you move closer, more polygons fill in. The whole terrain is divided into a grid of patches, and each one has its own LOD. The GeoMipMapping algorithm will look at each patch, and its neighbours, to determine how to render the geometry. It will seam the edges between two patches with different LOD. |
||||
This often leads to "popping" where you see the terrain switch from one LOD to another. TerraMonkey has been designed so you can swap out different LOD calculation algorithms based on what will look best for your game. |
||||
You can do this with the LodCalculator interface. |
||||
GeoMipMapping in TerraMonkey has been split into several parts: the terrain quad tree, and the LODGeomap. The geomap deals with the actual LOD and seaming algorithm. So if you want a different data structure for your terrain system, you can re-use this piece of code. |
||||
The quad tree (TerrainQuad and TerrainPatch) provide a means to organize the LODGeomaps, notify them of their neighbour's LOD change, and to update the geometry when the LOD does change. |
||||
To change the LOD it does this by changing the index buffer of the triangle strip, so the whole geometry doesn't have to be re-loaded onto the video card.</p><p> If you are eager, you can read up more detail how GeoMipMapping works here: <a |
||||
href="http://www.flipcode.com/archives/article_geomipmaps.pdf">www.flipcode.com/archives/article_geomipmaps.pdf</a></p></div><h2><a |
||||
name="terrain_quad_tree">Terrain Quad Tree</a></h2><div |
||||
class="level2"><p> TerraMonkey is a quad tree. Each node is a TerrainQuad, and each leaf is a TerrainPatch. A TerrainQuad has either 4 child TerrainQuads, or 4 child TerrainPatches. The TerrainPatch holds the actual mesh geometry. This structure is almost exactly the same as JME2's TerrainPage system. Except now each leaf has a reference to its neighbours, so it doesn't ever have to traverse the tree to get them.</p></div><h2><a |
||||
name="texture_splatting">Texture Splatting</a></h2><div |
||||
class="level2"><p> The default material for TerraMonkey is Terrain.j3md. This material combines an alphamap with several textures to produce the final texture. |
||||
To change the LOD it does this by changing the index buffer of the triangle strip, so the whole geometry doesn't have to be re-loaded onto the video card. |
||||
If you are eager, you can read up more detail how GeoMipMapping works here: <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://www.flipcode.com/archives/article_geomipmaps.pdf"><param name="text" value="<html><u>www.flipcode.com/archives/article_geomipmaps.pdf</u></html>"><param name="textColor" value="blue"></object> |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Terrain Quad Tree</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
TerraMonkey is a quad tree. Each node is a TerrainQuad, and each leaf is a TerrainPatch. A TerrainQuad has either 4 child TerrainQuads, or 4 child TerrainPatches. The TerrainPatch holds the actual mesh geometry. This structure is almost exactly the same as JME2's TerrainPage system. Except now each leaf has a reference to its neighbours, so it doesn't ever have to traverse the tree to get them. |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Texture Splatting</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
The default material for TerraMonkey is Terrain.j3md. This material combines an alphamap with several textures to produce the final texture. |
||||
Right now there is support for only 3 textures and an alpha map. This is in place until we finish the terrain editor in JMP, and then the texture support will be 16 textures. |
||||
It is only 3 right now so you can hand-paint them in a drawing program, like Photoshop, setting each splat texture in either Red, Green, or Blue. The test case has an example texture to show you how this works.</p><p> Along with getting more splat texture support, we will be adding in lighting and normal mapping support. The normal mapping isn't fully planned out yet. We need to decide how we are going to handle a normal map for each texture that is passed in. That could generate some very odd effects. |
||||
Thoughts, ideas, and recommendations are appreciated!</p></div><h2><a |
||||
name="code_sample">Code Sample</a></h2><div |
||||
class="level2"><p> First, we load our textures and the heightmap texture for the terrain</p><pre>// Create material from Terrain Material Definition |
||||
It is only 3 right now so you can hand-paint them in a drawing program, like Photoshop, setting each splat texture in either Red, Green, or Blue. The test case has an example texture to show you how this works. |
||||
Along with getting more splat texture support, we will be adding in lighting and normal mapping support. The normal mapping isn't fully planned out yet. We need to decide how we are going to handle a normal map for each texture that is passed in. That could generate some very odd effects. |
||||
Thoughts, ideas, and recommendations are appreciated! |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Code Sample</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
First, we load our textures and the heightmap texture for the terrain |
||||
|
||||
</p> |
||||
<pre>// Create material from Terrain Material Definition |
||||
matRock = new Material(assetManager, "Common/MatDefs/Terrain/Terrain.j3md"); |
||||
// Load alpha map (for splat textures) |
||||
matRock.setTexture("m_Alpha", assetManager.loadTexture("Textures/Terrain/splat/alphamap.png")); |
||||
// load heightmap image (for the terrain heightmap) |
||||
Texture heightMapImage = assetManager.loadTexture("Textures/Terrain/splat/mountains512.png"); |
||||
|
||||
// load grass texture |
||||
Texture grass = assetManager.loadTexture("Textures/Terrain/splat/grass.jpg"); |
||||
grass.setWrap(WrapMode.Repeat); |
||||
matRock.setTexture("m_Tex1", grass); |
||||
matRock.setFloat("m_Tex1Scale", 64f); |
||||
|
||||
// load dirt texture |
||||
Texture dirt = assetManager.loadTexture("Textures/Terrain/splat/dirt.jpg"); |
||||
dirt.setWrap(WrapMode.Repeat); |
||||
matRock.setTexture("m_Tex2", dirt); |
||||
matRock.setFloat("m_Tex2Scale", 32f); |
||||
|
||||
// load rock texture |
||||
Texture rock = assetManager.loadTexture("Textures/Terrain/splat/road.jpg"); |
||||
rock.setWrap(WrapMode.Repeat); |
||||
matRock.setTexture("m_Tex3", rock); |
||||
matRock.setFloat("m_Tex3Scale", 128f);</pre><p> We create the heightmap from the <code>heightMapImage</code>.</p><pre>AbstractHeightMap heightmap = null; |
||||
matRock.setFloat("m_Tex3Scale", 128f);</pre> |
||||
|
||||
<p> |
||||
|
||||
We create the heightmap from the <code>heightMapImage</code>. |
||||
|
||||
</p> |
||||
<pre>AbstractHeightMap heightmap = null; |
||||
heightmap = new ImageBasedHeightMap( |
||||
ImageToAwt.convert(heightMapImage.getImage(), false, true, 0), 1f); |
||||
heightmap.load();</pre><p> Next we create the actual terrain.</p><ul><li |
||||
class="level1"><div |
||||
class="li"> The terrain tiles are 65x65.</div></li><li |
||||
class="level1"><div |
||||
class="li"> The total size of the terrain is 513x513, but it can easily be up to 1025x1025.</div></li><li |
||||
class="level1"><div |
||||
class="li"> It uses the heightmap to generate the height values.</div></li></ul><pre>terrain = new TerrainQuad("terrain", 65, 513, heightmap.getHeightMap()); |
||||
heightmap.load();</pre> |
||||
|
||||
<p> |
||||
|
||||
Next we create the actual terrain. |
||||
</p> |
||||
<ul> |
||||
<li><div> The terrain tiles are 65x65.</div> |
||||
</li> |
||||
<li><div> The total size of the terrain is 513x513, but it can easily be up to 1025x1025.</div> |
||||
</li> |
||||
<li><div> It uses the heightmap to generate the height values.</div> |
||||
</li> |
||||
</ul> |
||||
<pre>terrain = new TerrainQuad("terrain", 65, 513, heightmap.getHeightMap()); |
||||
terrain.setMaterial(matRock); |
||||
terrain.setModelBound(new BoundingBox()); |
||||
terrain.updateModelBound(); |
||||
terrain.setLocalScale(2f, 1f, 2f); // scale to make it less steep |
||||
|
||||
List<Camera> cameras = new ArrayList<Camera>(); |
||||
cameras.add(getCamera()); |
||||
TerrainLodControl control = new TerrainLodControl(terrain, cameras); |
||||
terrain.addControl(control); |
||||
|
||||
rootNode.attachChild(terrain);</pre><p> PS: As an alternative to an image-based height map, you can also generate a Hill hightmap:</p><pre>heightmap = new HillHeightMap(1025, 1000, 50, 100, (byte) 3);</pre></div> |
||||
<p><em><a href="http://jmonkeyengine.org/wiki/doku.php/jme3:advanced:terrain?do=export_xhtmlbody">view online version</a></em></p> |
||||
rootNode.attachChild(terrain);</pre> |
||||
|
||||
<p> |
||||
|
||||
PS: As an alternative to an image-based height map, you can also generate a Hill hightmap: |
||||
|
||||
</p> |
||||
<pre>heightmap = new HillHeightMap(1025, 1000, 50, 100, (byte) 3);</pre> |
||||
|
||||
</div> |
||||
<p><em><a href="http://direct.jmonkeyengine.org/wiki/doku.php/jme3:advanced:terrain?do=export_xhtmlbody">view online version</a></em></p> |
||||
@ -0,0 +1,324 @@ |
||||
|
||||
<h2><a>Terrain Collision</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
This tutorial expands the HelloTerrain tutorial and makes the terrain solid. You combine what you learned in <a href="/com/jme3/gde/core/docs/jme3/beginner/hello_terrain.html">Hello Terrain</a> and <a href="/com/jme3/gde/core/docs/jme3/beginner/hello_collision.html">Hello Collision</a> and add a CollisionShape to the terrain. The terrain's CollisionShape lets the first-person player (who is also a CollisionShape) collide with the terrain, i.e. walk on it and stand on it. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Sample Code</a></h2> |
||||
<div> |
||||
<pre>package jme3test.helloworld; |
||||
|
||||
import com.jme3.app.SimpleApplication; |
||||
import com.jme3.bullet.BulletAppState; |
||||
import com.jme3.bullet.collision.shapes.CapsuleCollisionShape; |
||||
import com.jme3.bullet.collision.shapes.CollisionShape; |
||||
import com.jme3.bullet.control.CharacterControl; |
||||
import com.jme3.bullet.control.RigidBodyControl; |
||||
import com.jme3.bullet.util.CollisionShapeFactory; |
||||
import com.jme3.input.KeyInput; |
||||
import com.jme3.input.controls.ActionListener; |
||||
import com.jme3.input.controls.KeyTrigger; |
||||
import com.jme3.material.Material; |
||||
import com.jme3.math.Vector3f; |
||||
import com.jme3.renderer.Camera; |
||||
import com.jme3.scene.Node; |
||||
import com.jme3.terrain.geomipmap.TerrainLodControl; |
||||
import com.jme3.terrain.heightmap.AbstractHeightMap; |
||||
import com.jme3.terrain.geomipmap.TerrainQuad; |
||||
import com.jme3.terrain.heightmap.ImageBasedHeightMap; |
||||
import com.jme3.texture.Texture; |
||||
import com.jme3.texture.Texture.WrapMode; |
||||
import java.util.ArrayList; |
||||
import java.util.List; |
||||
import jme3tools.converters.ImageToAwt; |
||||
|
||||
<span>/** |
||||
* This demo shows a terrain with collision detection, |
||||
* that you can walk around in with a first-person perspective. |
||||
* This code combines HelloCollision and HelloTerrain. |
||||
*/</span> |
||||
public class HelloTerrainCollision extends SimpleApplication |
||||
implements ActionListener { |
||||
|
||||
private BulletAppState bulletAppState; |
||||
private RigidBodyControl landscape; |
||||
private CharacterControl player; |
||||
private Vector3f walkDirection = new Vector3f(); |
||||
private boolean left = false, right = false, up = false, down = false; |
||||
private TerrainQuad terrain; |
||||
private Material mat_terrain; |
||||
|
||||
public static void main(String[] args) { |
||||
HelloTerrainCollision app = new HelloTerrainCollision(); |
||||
app.start(); |
||||
} |
||||
|
||||
@Override |
||||
public void simpleInitApp() { |
||||
/** Set up Physics */ |
||||
bulletAppState = new BulletAppState(); |
||||
stateManager.attach(bulletAppState); |
||||
//bulletAppState.getPhysicsSpace().enableDebug(assetManager); |
||||
|
||||
flyCam.setMoveSpeed(100); |
||||
setUpKeys(); |
||||
|
||||
/** 1. Create terrain material and load four textures into it. */ |
||||
mat_terrain = new Material(assetManager, |
||||
"Common/MatDefs/Terrain/Terrain.j3md"); |
||||
|
||||
/** 1.1) Add ALPHA map (for red-blue-green coded splat textures) */ |
||||
mat_terrain.setTexture("Alpha", assetManager.loadTexture( |
||||
"Textures/Terrain/splat/alphamap.png")); |
||||
|
||||
/** 1.2) Add GRASS texture into the red layer (Tex1). */ |
||||
Texture grass = assetManager.loadTexture( |
||||
"Textures/Terrain/splat/grass.jpg"); |
||||
grass.setWrap(WrapMode.Repeat); |
||||
mat_terrain.setTexture("Tex1", grass); |
||||
mat_terrain.setFloat("Tex1Scale", 64f); |
||||
|
||||
/** 1.3) Add DIRT texture into the green layer (Tex2) */ |
||||
Texture dirt = assetManager.loadTexture( |
||||
"Textures/Terrain/splat/dirt.jpg"); |
||||
dirt.setWrap(WrapMode.Repeat); |
||||
mat_terrain.setTexture("Tex2", dirt); |
||||
mat_terrain.setFloat("Tex2Scale", 32f); |
||||
|
||||
/** 1.4) Add ROAD texture into the blue layer (Tex3) */ |
||||
Texture rock = assetManager.loadTexture( |
||||
"Textures/Terrain/splat/road.jpg"); |
||||
rock.setWrap(WrapMode.Repeat); |
||||
mat_terrain.setTexture("Tex3", rock); |
||||
mat_terrain.setFloat("Tex3Scale", 128f); |
||||
|
||||
/** 2. Create the height map */ |
||||
AbstractHeightMap heightmap = null; |
||||
Texture heightMapImage = assetManager.loadTexture( |
||||
"Textures/Terrain/splat/mountains512.png"); |
||||
heightmap = new ImageBasedHeightMap( |
||||
ImageToAwt.convert(heightMapImage.getImage(), false, true, 0)); |
||||
heightmap.load(); |
||||
|
||||
<span>/** 3. We have prepared material and heightmap. |
||||
* Now we create the actual terrain: |
||||
* 3.1) Create a TerrainQuad and name it "my terrain". |
||||
* 3.2) A good value for terrain tiles is 64x64 -- so we supply 64+1=65. |
||||
* 3.3) We prepared a heightmap of size 512x512 -- so we supply 512+1=513. |
||||
* 3.4) As LOD step scale we supply Vector3f(1,1,1). |
||||
* 3.5) We supply the prepared heightmap itself. |
||||
*/</span> |
||||
terrain = new TerrainQuad("my terrain", 65, 513, heightmap.getHeightMap()); |
||||
|
||||
/** 4. We give the terrain its material, position & scale it, and attach it. */ |
||||
terrain.setMaterial(mat_terrain); |
||||
terrain.setLocalTranslation(0, -100, 0); |
||||
terrain.setLocalScale(2f, 1f, 2f); |
||||
rootNode.attachChild(terrain); |
||||
|
||||
/** 5. The LOD (level of detail) depends on were the camera is: */ |
||||
List<Camera> cameras = new ArrayList<Camera>(); |
||||
cameras.add(getCamera()); |
||||
TerrainLodControl control = new TerrainLodControl(terrain, cameras); |
||||
terrain.addControl(control); |
||||
|
||||
/** 6. Add physics: */ |
||||
// We set up collision detection for the scene by creating a |
||||
// compound collision shape and a static RigidBodyControl with mass zero.*/ |
||||
CollisionShape terrainShape = |
||||
CollisionShapeFactory.createMeshShape((Node) terrain); |
||||
landscape = new RigidBodyControl(terrainShape, 0); |
||||
terrain.addControl(landscape); |
||||
|
||||
// We set up collision detection for the player by creating |
||||
// a capsule collision shape and a CharacterControl. |
||||
// The CharacterControl offers extra settings for |
||||
// size, stepheight, jumping, falling, and gravity. |
||||
// We also put the player in its starting position. |
||||
CapsuleCollisionShape capsuleShape = new CapsuleCollisionShape(1.5f, 6f, 1); |
||||
player = new CharacterControl(capsuleShape, 0.05f); |
||||
player.setJumpSpeed(20); |
||||
player.setFallSpeed(30); |
||||
player.setGravity(30); |
||||
player.setPhysicsLocation(new Vector3f(0, 10, 0)); |
||||
|
||||
// We attach the scene and the player to the rootnode and the physics space, |
||||
// to make them appear in the game world. |
||||
bulletAppState.getPhysicsSpace().add(terrain); |
||||
bulletAppState.getPhysicsSpace().add(player); |
||||
|
||||
} |
||||
<span>/** We over-write some navigational key mappings here, so we can |
||||
* add physics-controlled walking and jumping: */</span> |
||||
private void setUpKeys() { |
||||
inputManager.addMapping("Left", new KeyTrigger(KeyInput.KEY_A)); |
||||
inputManager.addMapping("Right", new KeyTrigger(KeyInput.KEY_D)); |
||||
inputManager.addMapping("Up", new KeyTrigger(KeyInput.KEY_W)); |
||||
inputManager.addMapping("Down", new KeyTrigger(KeyInput.KEY_S)); |
||||
inputManager.addMapping("Jump", new KeyTrigger(KeyInput.KEY_SPACE)); |
||||
inputManager.addListener(this, "Left"); |
||||
inputManager.addListener(this, "Right"); |
||||
inputManager.addListener(this, "Up"); |
||||
inputManager.addListener(this, "Down"); |
||||
inputManager.addListener(this, "Jump"); |
||||
} |
||||
|
||||
<span>/** These are our custom actions triggered by key presses. |
||||
* We do not walk yet, we just keep track of the direction the user pressed. */</span> |
||||
public void onAction(String binding, boolean value, float tpf) { |
||||
if (binding.equals("Left")) { |
||||
if (value) { left = true; } else { left = false; } |
||||
} else if (binding.equals("Right")) { |
||||
if (value) { right = true; } else { right = false; } |
||||
} else if (binding.equals("Up")) { |
||||
if (value) { up = true; } else { up = false; } |
||||
} else if (binding.equals("Down")) { |
||||
if (value) { down = true; } else { down = false; } |
||||
} else if (binding.equals("Jump")) { |
||||
player.jump(); |
||||
} |
||||
} |
||||
|
||||
<span>/** |
||||
* This is the main event loop--walking happens here. |
||||
* We check in which direction the player is walking by interpreting |
||||
* the camera direction forward (camDir) and to the side (camLeft). |
||||
* The setWalkDirection() command is what lets a physics-controlled player walk. |
||||
* We also make sure here that the camera moves with player. |
||||
*/</span> |
||||
@Override |
||||
public void simpleUpdate(float tpf) { |
||||
Vector3f camDir = cam.getDirection().clone().multLocal(0.6f); |
||||
Vector3f camLeft = cam.getLeft().clone().multLocal(0.4f); |
||||
walkDirection.set(0, 0, 0); |
||||
if (left) { walkDirection.addLocal(camLeft); } |
||||
if (right) { walkDirection.addLocal(camLeft.negate()); } |
||||
if (up) { walkDirection.addLocal(camDir); } |
||||
if (down) { walkDirection.addLocal(camDir.negate()); } |
||||
player.setWalkDirection(walkDirection); |
||||
cam.setLocation(player.getPhysicsLocation()); |
||||
} |
||||
}</pre> |
||||
|
||||
<p> |
||||
To try this code, create a New Project → JME3 → BasicGame using the default settings. Paste the sample code over the pregenerated Main.java class. Chnage the package to "mygame" if necessary. Open the Project Properties, Libraries, and add the <code>jme3-test-data</code> library to make certain you have all the files. |
||||
</p> |
||||
|
||||
<p> |
||||
Compile and run the code. You should see a terrain. You can use the WASD keys and the mouse to run up and down the hills. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Understanding the Code</a></h2> |
||||
<div> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>The Terrain Code</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
Read <a href="/com/jme3/gde/core/docs/jme3/beginner/hello_terrain.html">Hello Terrain</a> for details of the following parts that we reuse: |
||||
</p> |
||||
<ol> |
||||
<li><div> The <code>AbstractHeightMap</code> is an efficient way to describe the shape of the terrain.</div> |
||||
</li> |
||||
<li><div> The <code>Terrain.j3md</code>-based Material and its texture layers let you colorize rocky mountain, grassy valleys, and a paved path criss-crossing over the landscape. </div> |
||||
</li> |
||||
<li><div> The TerrainQuad is the finished <code>terrain</code> Spatial that you attach to the rootNode.</div> |
||||
</li> |
||||
</ol> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>The Collision Detection Code</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
Read <a href="/com/jme3/gde/core/docs/jme3/beginner/hello_collision.html">Hello Collision</a> for details of the following parts that we reuse: |
||||
</p> |
||||
<ol> |
||||
<li><div> The <code>BulletAppState</code> lines activate physics.</div> |
||||
</li> |
||||
<li><div> The <code>ActionListener</code> (<code>onAction()</code>) lets you reconfigure the input handling for the first-person player, so it takes collision detection into account.</div> |
||||
</li> |
||||
<li><div> The custom <code>setUpKeys()</code> method loads your reconfigured input handlers. They now don't just walk blindly, but calculate the <code>walkDirection</code> vector that we need for collision detection.</div> |
||||
</li> |
||||
<li><div> <code>simpleUpdate()</code> uses the <code>walkDirection</code> vector and makes the character walk, while taking obstacles and solid walls/floor into account. <pre>player.setWalkDirection(walkDirection);</pre> |
||||
</div> |
||||
</li> |
||||
<li><div> The RigidBodyControl <code>landscape</code> is the CollisionShape of the terrain.</div> |
||||
</li> |
||||
<li><div> The physical first-person player is a CapsuleCollisionShape with a CharacterControl.</div> |
||||
</li> |
||||
</ol> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Combining the Two</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
Here are the changed parts to combine the two: |
||||
|
||||
</p> |
||||
<ol> |
||||
<li><div> The CollisionShapeFactory creates the CollisionShape <code>terrainShape</code> for the <code>terrain</code> node.</div> |
||||
</li> |
||||
<li><div> Out of the <code>terrainShape</code>, you create a static (zero-mass) RigidBodyControl <code>landscape</code>. </div> |
||||
</li> |
||||
<li><div> Add the <code>landscape</code> control to the <code>terrain</code> to make it physical.</div> |
||||
</li> |
||||
</ol> |
||||
<pre>/** 6. Add physics: */ |
||||
CollisionShape terrainShape = |
||||
CollisionShapeFactory.createMeshShape((Node) terrain); |
||||
landscape = new RigidBodyControl(terrainShape, 0); |
||||
terrain.addControl(landscape); </pre> |
||||
|
||||
<p> |
||||
You attach the <code>terrain</code> and the first-person <code>player</code> to the rootNode, and to the physics space, to make them appear in the game world. |
||||
</p> |
||||
<pre> bulletAppState.getPhysicsSpace().add(terrain); |
||||
bulletAppState.getPhysicsSpace().add(player);</pre> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Conclusion</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
You see that you can combine snippets of sample code (such as HelloTerrain and HelloCollision), and create a new application from it that combines two features into soemthing new. |
||||
</p> |
||||
|
||||
<p> |
||||
You should spawn high up in the area and fall down to the map, giving you a few seconds to survey the area. Then walk around and see how you like the lay of the land. |
||||
</p> |
||||
<hr /> |
||||
|
||||
<p> |
||||
See also: |
||||
|
||||
</p> |
||||
<ul> |
||||
<li><div> <a href="/com/jme3/gde/core/docs/jme3/beginner/hello_terrain.html">Hello Terrain</a>,</div> |
||||
</li> |
||||
<li><div> <a href="/com/jme3/gde/core/docs/jme3/advanced/terrain.html">Terrain</a></div> |
||||
</li> |
||||
</ul> |
||||
<div><span> |
||||
<a href="/wiki/doku.php/tag:terrain?do=showtag&tag=tag%3Aterrain">terrain</a>, |
||||
<a href="/wiki/doku.php/tag:collision?do=showtag&tag=tag%3Acollision">collision</a> |
||||
</span></div> |
||||
|
||||
</div> |
||||
<p><em><a href="http://direct.jmonkeyengine.org/wiki/doku.php/jme3:advanced:terrain_collision?do=export_xhtmlbody">view online version</a></em></p> |
||||
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 22 KiB |
@ -1,52 +1,74 @@ |
||||
<h1><a |
||||
name="update_loop">Update Loop</a></h1><div |
||||
class="level1"><p> Extending your application from com.jme3.app.<a |
||||
href="/com/jme3/gde/core/docs/jme3/intermediate/simpleapplication.html">SimpleApplication</a> provides you with an update loop. This is where you implement your game logic (game mechanics).</p><p> Examples: Here you remote-control NPCs (computer controlled characters), generate game events, and respond to user input.</p><ol><li |
||||
class="level1"><div |
||||
class="li"> Initialization (<code>simpleInit()</code>)</div></li><li |
||||
class="level1"><div |
||||
class="li"> If exit is requested, then cleanup and destroy</div></li><li |
||||
class="level1"><div |
||||
class="li"> <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/input_handling.html">Input handling</a> (listeners)</div></li><li |
||||
class="level1"><div |
||||
class="li"> Update game state</div><ol><li |
||||
class="level2"><div |
||||
class="li"> <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/application_states.html">Application States</a> update</div></li><li |
||||
class="level2"><div |
||||
class="li"> User update (<code>simpleUpdate()</code> method)</div></li><li |
||||
class="level2"><div |
||||
class="li"> Entity logical update (<a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/custom_controls.html">Custom Controls</a>)</div></li></ol></li><li |
||||
class="level1"><div |
||||
class="li"> render</div><ol><li |
||||
class="level2"><div |
||||
class="li"> <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/application_states.html">Application States</a> rendering</div></li><li |
||||
class="level2"><div |
||||
class="li"> Scene rendering</div></li><li |
||||
class="level2"><div |
||||
class="li"> User rendering (<code>simpleRender()</code> method)</div></li></ol></li><li |
||||
class="level1"><div |
||||
class="li"> Repeat (goto 2)</div></li></ol></div><h2><a |
||||
name="usage">Usage</a></h2><div |
||||
class="level2"><p> Use…</p><ul><li |
||||
class="level1"><div |
||||
class="li"> <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/application_states.html">Application States</a> to implement global game mechanics <br/> Example: Physics, Global gameplay control</div></li><li |
||||
class="level1"><div |
||||
class="li"> <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/custom_controls.html">Custom Controls</a> to implement entity behavior <br/> Example: Enemy AI</div></li><li |
||||
class="level1"><div |
||||
class="li"> <code>simpleUpdate()</code> to implement the rest, or for testing during development.</div></li></ul><div |
||||
class="tags"><span> <a |
||||
href="/wiki/doku.php/tag:basegame?do=showtag&tag=tag%3Abasegame">basegame</a>, <a |
||||
href="/wiki/doku.php/tag:controller?do=showtag&tag=tag%3Acontroller">controller</a>, <a |
||||
href="/wiki/doku.php/tag:input?do=showtag&tag=tag%3Ainput">input</a>, <a |
||||
href="/wiki/doku.php/tag:init?do=showtag&tag=tag%3Ainit">init</a>, <a |
||||
href="/wiki/doku.php/tag:keyinput?do=showtag&tag=tag%3Akeyinput">keyinput</a>, <a |
||||
href="/wiki/doku.php/tag:loop?do=showtag&tag=tag%3Aloop">loop</a>, <a |
||||
href="/wiki/doku.php/tag:states?do=showtag&tag=tag%3Astates">states</a>, <a |
||||
href="/wiki/doku.php/tag:state?do=showtag&tag=tag%3Astate">state</a> </span></div></div> |
||||
<p><em><a href="http://jmonkeyengine.org/wiki/doku.php/jme3:advanced:update_loop?do=export_xhtmlbody">view online version</a></em></p> |
||||
|
||||
<h1><a>Update Loop</a></h1> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
Extending your application from com.jme3.app.<a href="/com/jme3/gde/core/docs/jme3/intermediate/simpleapplication.html">SimpleApplication</a> provides you with an update loop. This is where you implement your game logic (game mechanics). |
||||
</p> |
||||
|
||||
<p> |
||||
Examples: Here you remote-control NPCs (computer controlled characters), generate game events, and respond to user input. |
||||
|
||||
</p> |
||||
<ul> |
||||
<li><div> Initialization – <code>simpleInitApp()</code> method</div> |
||||
<ol> |
||||
<li><div> <a href="/com/jme3/gde/core/docs/jme3/advanced/input_handling.html">Input handling</a> – input listeners</div> |
||||
</li> |
||||
<li><div> Update game state</div> |
||||
<ol> |
||||
<li><div> <a href="/com/jme3/gde/core/docs/jme3/advanced/application_states.html">Application States</a> update</div> |
||||
</li> |
||||
<li><div> User update – <code>simpleUpdate()</code> method</div> |
||||
</li> |
||||
<li><div> Entity logical update – <a href="/com/jme3/gde/core/docs/jme3/advanced/custom_controls.html">Custom Controls</a></div> |
||||
</li> |
||||
</ol> |
||||
</li> |
||||
<li><div> render</div> |
||||
<ol> |
||||
<li><div> <a href="/com/jme3/gde/core/docs/jme3/advanced/application_states.html">Application States</a> rendering</div> |
||||
</li> |
||||
<li><div> Scene rendering</div> |
||||
</li> |
||||
<li><div> User rendering – <code>simpleRender()</code> method</div> |
||||
</li> |
||||
</ol> |
||||
</li> |
||||
</ol> |
||||
</li> |
||||
<li><div> If exit is requested, then cleanup and destroy</div> |
||||
</li> |
||||
<li><div> Repeat</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Usage</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
There are two strategies how advanced developers can spread out their init and update code over several Java objects: |
||||
</p> |
||||
<ul> |
||||
<li><div> Move code blocks from the simpleInitApp() method to <a href="/com/jme3/gde/core/docs/jme3/advanced/application_states.html">AppStates</a>.</div> |
||||
</li> |
||||
<li><div> Move code blocks from the simpleUpdate() method to <a href="/com/jme3/gde/core/docs/jme3/advanced/custom_controls.html">Custom Controls</a> to control entity behavior.</div> |
||||
</li> |
||||
</ul> |
||||
<div><span> |
||||
<a href="/wiki/doku.php/tag:basegame?do=showtag&tag=tag%3Abasegame">basegame</a>, |
||||
<a href="/wiki/doku.php/tag:controller?do=showtag&tag=tag%3Acontroller">controller</a>, |
||||
<a href="/wiki/doku.php/tag:input?do=showtag&tag=tag%3Ainput">input</a>, |
||||
<a href="/wiki/doku.php/tag:init?do=showtag&tag=tag%3Ainit">init</a>, |
||||
<a href="/wiki/doku.php/tag:keyinput?do=showtag&tag=tag%3Akeyinput">keyinput</a>, |
||||
<a href="/wiki/doku.php/tag:loop?do=showtag&tag=tag%3Aloop">loop</a>, |
||||
<a href="/wiki/doku.php/tag:states?do=showtag&tag=tag%3Astates">states</a>, |
||||
<a href="/wiki/doku.php/tag:state?do=showtag&tag=tag%3Astate">state</a> |
||||
</span></div> |
||||
|
||||
</div> |
||||
<p><em><a href="http://direct.jmonkeyengine.org/wiki/doku.php/jme3:advanced:update_loop?do=export_xhtmlbody">view online version</a></em></p> |
||||
@ -1,72 +1,339 @@ |
||||
<h1><a |
||||
name="walking_character">Walking Character</a></h1><div |
||||
class="level1"><p> <strong>Work in progress.</strong></p><p> In other code samples we have seen how to create collidable landscapes and walk around in a first-person perspective, by enclosing the camera with a collision shape.</p><p> Many games however require a third-person perspective of the character. If you load a character model, create a PhysicsControl for it, and use forces to push it around, you may not get the desired effect: Phyical objects often fall over when pushed, and that is not what you expect of a walking character.</p><p> This is why jME3 offers a special CharacterControl to implement walking characters.</p></div><h2><a |
||||
name="sample_code">Sample Code</a></h2><div |
||||
class="level2"><p> The full code sample can be found here:</p><ul><li |
||||
class="level1"><div |
||||
class="li"> <a |
||||
href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/bullet/TestWalkingChar.java">TestPhysicsCharacter.java</a> (third-person view)</div></li><li |
||||
class="level1"><div |
||||
class="li"> <a |
||||
href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/bullet/TestWalkingChar.java">TestWalkingChar.java</a> (third-person view)</div></li><li |
||||
class="level1"><div |
||||
class="li"> <a |
||||
href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/bullet/TestQ3.java">TestQ3.java</a> (first-person view)</div></li></ul></div><h2><a |
||||
name="overview_of_this_physics_application">Overview of this Physics Application</a></h2><div |
||||
class="level2"><ol><li |
||||
class="level1"><div |
||||
class="li"> Create a SimpleApplication with a <a |
||||
href="/com/jme3/gde/core/docs/jme3/advanced/physics.html">BulletAppState</a></div><ul><li |
||||
class="level2"><div |
||||
class="li"> This gives us a Physics Space</div></li></ul></li><li |
||||
class="level1"><div |
||||
class="li"> Load any physical game level model, terrain, or floor</div></li><li |
||||
class="level1"><div |
||||
class="li"> Load an animated character model</div></li><li |
||||
class="level1"><div |
||||
class="li"> Set up animation channel and controller</div></li><li |
||||
class="level1"><div |
||||
class="li"> Add a CharacterControl to the model</div></li></ol></div><h2><a |
||||
name="creating_the_character">Creating the Character</a></h2><div |
||||
class="level2"><ol><li |
||||
class="level1"><div |
||||
class="li"> Initialze physical character behaviour, including collision shape</div><ol><li |
||||
class="level2"><div |
||||
class="li"> Create CapsuleCollisionShape of the right size for the model.</div><ul><li |
||||
class="level3"><div |
||||
class="li"> A Capsule is a cylinder with rounded top and bottom: A good collision shape for a character since it reduces the risk of getting stuck on obstacles.</div></li></ul></li><li |
||||
class="level2"><div |
||||
class="li"> Create a CharacterControl from the collision shape</div></li></ol></li><li |
||||
class="level1"><div |
||||
class="li"> Load the visible character model, and add the physical behaviour to it</div><ol><li |
||||
class="level2"><div |
||||
class="li"> Load an animated model (e.g. "Models/Oto/Oto.mesh.xml").</div></li><li |
||||
class="level2"><div |
||||
class="li"> Add the CharacterControl to the character model.</div></li></ol></li><li |
||||
class="level1"><div |
||||
class="li"> Make character visible and physical</div><ol><li |
||||
class="level2"><div |
||||
class="li"> Attach the model to the rootNode to make it appear in the scene.</div></li><li |
||||
class="level2"><div |
||||
class="li"> Add the CharacterControl to the PhysicsSpace to make it physical.</div></li></ol></li></ol><pre>// initialze physical character behaviour, including collision shape |
||||
CapsuleCollisionShape capsule = new CapsuleCollisionShape(3f, 4f); |
||||
CharacterControl character = new CharacterControl(capsule, 0.01f); |
||||
// load the visible character model and add the physical behaviour to it |
||||
Node model = (Node) assetManager.loadModel("Models/Oto/Oto.mesh.xml"); |
||||
model.addControl(character); |
||||
// Make character visible and physical |
||||
rootNode.attachChild(model); // make it visible |
||||
getPhysicsSpace().add(character); // make it physical</pre></div><h2><a |
||||
name="setting_up_the_animation_controller">Setting Up the Animation Controller</a></h2><div |
||||
class="level2"><p> We create two AninChannels, for example one for walking, one for shooting. The shootingChannel only controls one arm, while the walking channels controls the whole animation.</p><pre>AnimControl animationControl = model.getControl(AnimControl.class); |
||||
animationControl.addListener(this); |
||||
|
||||
AnimChannel animationChannel = animationControl.createChannel(); |
||||
AnimChannel shootingChannel = animationControl.createChannel(); |
||||
|
||||
shootingChannel.addBone(animationControl.getSkeleton().getBone("uparm.right")); |
||||
shootingChannel.addBone(animationControl.getSkeleton().getBone("arm.right")); |
||||
shootingChannel.addBone(animationControl.getSkeleton().getBone("hand.right"));</pre><p> The extra shooting channel exists so the character can lift an arm to shoot and walk at the same time.</p></div><h2><a |
||||
name="walking">Walking</a></h2><div |
||||
class="level2"><p> Work in progress (this is being updated for the new physics and chase cam.)</p></div> |
||||
<p><em><a href="http://jmonkeyengine.org/wiki/doku.php/jme3:advanced:walking_character?do=export_xhtmlbody">view online version</a></em></p> |
||||
|
||||
<h1><a>Walking Character</a></h1> |
||||
<div> |
||||
|
||||
<p> |
||||
In the <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/bullet/TestQ3.java"><param name="text" value="<html><u>TestQ3.java</u></html>"><param name="textColor" value="blue"></object> code sample you have seen how to create collidable landscapes and walk around in a first-person perspective, where the camera is enclosed by a collision shape. Other games however require a third-person perspective of the character: In these cases you use a CharacterControl. This example uses a custom navigation – press WASD to walk and drag the mouse to rotate. |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Why use CharacterControl instead of RigidBodyControl?</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
When you load a character model with a RigidBodyControl, and use forces to push it around, you do not get the desired effect: RigidBodyControl'ed objects can tip over when pushed, and that is not what you expect of a walking character. jMonkeyEngine offers a special CharacterControl with a special walking methods to implement characters that walk upright. |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Sample Code</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
The several related code samples can be found here: |
||||
</p> |
||||
<ul> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/bullet/TestWalkingChar.java"><param name="text" value="<html><u>TestPhysicsCharacter.java</u></html>"><param name="textColor" value="blue"></object> (third-person view)</div> |
||||
</li> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/bullet/TestWalkingChar.java"><param name="text" value="<html><u>TestWalkingChar.java</u></html>"><param name="textColor" value="blue"></object> (third-person view)</div> |
||||
</li> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/bullet/TestQ3.java"><param name="text" value="<html><u>TestQ3.java</u></html>"><param name="textColor" value="blue"></object> (first-person view)</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
<p> |
||||
The code in this tutorial is a combination of them. |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Code Skeleton</a></h3> |
||||
<div> |
||||
<pre>public class WalkingCharacterDemo extends SimpleApplication |
||||
implements ActionListener, AnimEventListener { |
||||
public static void main(String[] args) { |
||||
WalkingCharacterDemo app = new WalkingCharacterDemo(); |
||||
app.start(); |
||||
} |
||||
public void simpleInitApp() { } |
||||
public void simpleUpdate(float tpf) { } |
||||
public void onAction(String name, boolean isPressed, float tpf) { } |
||||
public void onAnimCycleDone(AnimControl control, AnimChannel channel, String animName) { } |
||||
public void onAnimChange(AnimControl control, AnimChannel channel, String animName) { }</pre> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Overview</a></h3> |
||||
<div> |
||||
<ol> |
||||
<li><div> Activate physics by adding a <a href="/com/jme3/gde/core/docs/jme3/advanced/physics.html">BulletAppState</a>.</div> |
||||
</li> |
||||
<li><div> Init the scene by loading a game level model (terrain or floor/buildings) and giving it a MeshCollisionShape.</div> |
||||
</li> |
||||
<li><div> Create the animated character</div> |
||||
<ol> |
||||
<li><div> Load an animated character model.</div> |
||||
</li> |
||||
<li><div> Add a CharacterControl to the model.</div> |
||||
</li> |
||||
</ol> |
||||
</li> |
||||
<li><div> Set up animation channel and controllers.</div> |
||||
</li> |
||||
<li><div> Add a ChaseCam or CameraNode.</div> |
||||
</li> |
||||
<li><div> Handle navigational inputs</div> |
||||
</li> |
||||
</ol> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Activate Physics</a></h2> |
||||
<div> |
||||
<pre>private BulletAppState bulletAppState; |
||||
... |
||||
public void simpleInitApp() { |
||||
bulletAppState = new BulletAppState(); |
||||
//bulletAppState.setThreadingType(BulletAppState.ThreadingType.PARALLEL); |
||||
stateManager.attach(bulletAppState); |
||||
... |
||||
}</pre> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Initialize the Scene</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
In the simpleInitApp() method you initialize the scene and give it a MeshCollisionShape. The sample in the jme3 sources uses a custom helper class that simply creates a flat floor and drops some cubes and spheres on it: |
||||
|
||||
</p> |
||||
<pre>public void simpleInitApp() { |
||||
... |
||||
PhysicsTestHelper.createPhysicsTestWorld(rootNode, |
||||
assetManager, bulletAppState.getPhysicsSpace()); |
||||
...</pre> |
||||
|
||||
<p> |
||||
|
||||
In a real game, you would load a scene model here instead of a test world. You can load a model from a local or remote zip file, and scale and position it: |
||||
|
||||
</p> |
||||
<pre>private Node gameLevel; |
||||
.. |
||||
public void simpleInitApp() { |
||||
... |
||||
//assetManager.registerLocator("quake3level.zip", ZipLocator.class.getName()); |
||||
assetManager.registerLocator( |
||||
"http://jmonkeyengine.googlecode.com/files/quake3level.zip", |
||||
HttpZipLocator.class.getName()); |
||||
MaterialList matList = (MaterialList) assetManager.loadAsset("Scene.material"); |
||||
OgreMeshKey key = new OgreMeshKey("main.meshxml", matList); |
||||
gameLevel = (Node) assetManager.loadAsset(key); |
||||
gameLevel.setLocalTranslation(-20, -16, 20); |
||||
gameLevel.setLocalScale(0.10f); |
||||
gameLevel.addControl(new RigidBodyControl(0)); |
||||
rootNode.attachChild(gameLevel); |
||||
bulletAppState.getPhysicsSpace().addAll(gameLevel); |
||||
...</pre> |
||||
|
||||
<p> |
||||
|
||||
Also, add a light source to be able to see the scene. |
||||
|
||||
</p> |
||||
<pre> AmbientLight light = new AmbientLight(); |
||||
light.setColor(ColorRGBA.White.mult(2)); |
||||
rootNode.addLight(light);</pre> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Create the Animated Character</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
You create an animated model, such as Oto.mesh.xml. |
||||
</p> |
||||
<ol> |
||||
<li><div> Place the "Oto" model into the <code>assets/Models/Oto/</code> directory of your project.</div> |
||||
</li> |
||||
<li><div> Create the CollisionShape and adjust the capsule radius and height to fit your character model.</div> |
||||
</li> |
||||
<li><div> Create the CharacterControl and adjust the stepheight (here 0.05f) to the height that the character can climb up without jumping.</div> |
||||
</li> |
||||
<li><div> Load the visible model. Make sure its start position does not overlap with scene objects.</div> |
||||
</li> |
||||
<li><div> Add the CharacterControl to the model and register it to the physicsSpace.</div> |
||||
</li> |
||||
<li><div> Attach the visible model to the rootNode.</div> |
||||
</li> |
||||
</ol> |
||||
<pre>private CharacterControl character; |
||||
private Node model; |
||||
... |
||||
public void simpleInitApp() { |
||||
... |
||||
CapsuleCollisionShape capsule = new CapsuleCollisionShape(3f, 4f); |
||||
character = new CharacterControl(capsule, 0.05f); |
||||
character.setJumpSpeed(20f); |
||||
model = (Node) assetManager.loadModel("Models/Oto/Oto.mesh.xml"); |
||||
model.addControl(character); |
||||
bulletAppState.getPhysicsSpace().add(character); |
||||
rootNode.attachChild(model); |
||||
...</pre> |
||||
|
||||
<p> |
||||
|
||||
<br/> |
||||
|
||||
<strong>Did you know?</strong> A CapsuleCollisionShape is a cylinder with rounded top and bottom. A capsule rotated upright is a good collision shape for a humanoid character since its roundedness reduces the risk of getting stuck on obstacles. |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>Set Up AnimControl and AnimChannels</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
Create several AnimChannels, one for each animation that can happen simultaneously. In this example, you create one channel for walking and one for attacking. (Because the character can attack with its arms and walk with the rest of the body at the same time.) |
||||
|
||||
</p> |
||||
<pre>private AnimChannel animationChannel; |
||||
private AnimChannel attackChannel; |
||||
private AnimControl animationControl; |
||||
... |
||||
public void simpleInitApp() { |
||||
... |
||||
animationControl = model.getControl(AnimControl.class); |
||||
animationControl.addListener(this); |
||||
animationChannel = animationControl.createChannel(); |
||||
attackChannel = animationControl.createChannel(); |
||||
attackChannel.addBone(animationControl.getSkeleton().getBone("uparm.right")); |
||||
attackChannel.addBone(animationControl.getSkeleton().getBone("arm.right")); |
||||
attackChannel.addBone(animationControl.getSkeleton().getBone("hand.right")); |
||||
...</pre> |
||||
|
||||
<p> |
||||
|
||||
The attackChannel only controls one arm, while the walking channels controls the whole character. |
||||
|
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Add ChaseCam / CameraNode</a></h2> |
||||
<div> |
||||
<pre>private ChaseCamera chaseCam; |
||||
... |
||||
public void simpleInitApp() { |
||||
... |
||||
flyCam.setEnabled(false); |
||||
chaseCam = new ChaseCamera(cam, model, inputManager); |
||||
...</pre> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Handle navigational inputs</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
Configure custom key bindings for WASD keys that you will use to make the character walk. |
||||
|
||||
</p> |
||||
<pre>private boolean left = false, right = false, up = false, down = false; |
||||
... |
||||
public void simpleInitApp() { |
||||
... |
||||
inputManager.addMapping("CharLeft", new KeyTrigger(KeyInput.KEY_A)); |
||||
inputManager.addMapping("CharRight", new KeyTrigger(KeyInput.KEY_D)); |
||||
inputManager.addMapping("CharForward", new KeyTrigger(KeyInput.KEY_W)); |
||||
inputManager.addMapping("CharBackward", new KeyTrigger(KeyInput.KEY_S)); |
||||
inputManager.addMapping("CharJump", new KeyTrigger(KeyInput.KEY_RETURN)); |
||||
inputManager.addMapping("CharAttack", new KeyTrigger(KeyInput.KEY_SPACE)); |
||||
inputManager.addListener(this, "CharLeft", "CharRight"); |
||||
inputManager.addListener(this, "CharForward", "CharBackward"); |
||||
inputManager.addListener(this, "CharJump", "CharAttack"); |
||||
... |
||||
}</pre> |
||||
|
||||
<p> |
||||
|
||||
Respond to the key bindings by setting variables that track in which direction you will go. (No actual walking happens here yet) |
||||
|
||||
</p> |
||||
<pre>@Override |
||||
public void onAction(String binding, boolean value, float tpf) { |
||||
if (binding.equals("CharLeft")) { |
||||
if (value) left = true; |
||||
else left = false; |
||||
} else if (binding.equals("CharRight")) { |
||||
if (value) right = true; |
||||
else right = false; |
||||
} else if (binding.equals("CharForward")) { |
||||
if (value) up = true; |
||||
else up = false; |
||||
} else if (binding.equals("CharBackward")) { |
||||
if (value) down = true; |
||||
else down = false; |
||||
} else if (binding.equals("CharJump")) |
||||
character.jump(); |
||||
if (binding.equals("CharAttack")) |
||||
attack(); |
||||
}</pre> |
||||
|
||||
<p> |
||||
|
||||
The player can attack and walk at the same time. Attack() is a custom method that triggers an attack animation in the arms. Here you should also add custom code to play an effect and sound, and to determine whether the hit was successful. |
||||
|
||||
</p> |
||||
<pre>private void attack() { |
||||
attackChannel.setAnim("Dodge", 0.1f); |
||||
attackChannel.setLoopMode(LoopMode.DontLoop); |
||||
}</pre> |
||||
|
||||
<p> |
||||
|
||||
The update loop looks at the directional variables and moves the character accordingly. Since it's a physical character, we use setWalkDirection(). The variable airTime tracks how long the character is off the ground (e.g. when jumping or falling) and adjusts the walk and stand animations acccordingly. |
||||
|
||||
</p> |
||||
<pre>private Vector3f walkDirection = new Vector3f(0,0,0); |
||||
private float airTime = 0; |
||||
public void simpleUpdate(float tpf) { |
||||
Vector3f camDir = cam.getDirection().clone().multLocal(0.25f); |
||||
Vector3f camLeft = cam.getLeft().clone().multLocal(0.25f); |
||||
camDir.y = 0; |
||||
camLeft.y = 0; |
||||
walkDirection.set(0, 0, 0); |
||||
if (left) walkDirection.addLocal(camLeft); |
||||
if (right) walkDirection.addLocal(camLeft.negate()); |
||||
if (up) walkDirection.addLocal(camDir); |
||||
if (down) walkDirection.addLocal(camDir.negate()); |
||||
if (!character.onGround()) { |
||||
airTime = airTime + tpf; |
||||
} else { |
||||
airTime = 0; |
||||
} |
||||
if (walkDirection.length() == 0) { |
||||
if (!"stand".equals(animationChannel.getAnimationName())) { |
||||
animationChannel.setAnim("stand", 1f); |
||||
} |
||||
} else { |
||||
character.setViewDirection(walkDirection); |
||||
if (airTime > .3f) { |
||||
if (!"stand".equals(animationChannel.getAnimationName())) { |
||||
animationChannel.setAnim("stand"); |
||||
} |
||||
} else if (!"Walk".equals(animationChannel.getAnimationName())) { |
||||
animationChannel.setAnim("Walk", 0.7f); |
||||
} |
||||
} |
||||
character.setWalkDirection(walkDirection); |
||||
}</pre> |
||||
|
||||
<p> |
||||
|
||||
This method resets the walk animation. |
||||
|
||||
</p> |
||||
<pre>public void onAnimCycleDone(AnimControl control, AnimChannel channel, String animName) { |
||||
if (channel == attackChannel) channel.setAnim("stand"); |
||||
} |
||||
public void onAnimChange(AnimControl control, AnimChannel channel, String animName) { }</pre> |
||||
|
||||
</div> |
||||
<p><em><a href="http://direct.jmonkeyengine.org/wiki/doku.php/jme3:advanced:walking_character?do=export_xhtmlbody">view online version</a></em></p> |
||||
|
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 54 KiB |
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 163 KiB |
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 36 KiB |
@ -0,0 +1,250 @@ |
||||
|
||||
<h1><a>Android Support in the jMonkeyEngine</a></h1> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
This is a draft of a feature that is work in progress. If you have questions or suggestions, please leave a comment on the <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://jmonkeyengine.org/groups/android/forum/topic/android-deployment-via-checkbox-is-here"><param name="text" value="<html><u>Android forum thread</u></html>"><param name="textColor" value="blue"></object>! |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Requirements</a></h2> |
||||
<div> |
||||
<ul> |
||||
<li><div> Android device that supports OpenGL ES 2.0</div> |
||||
</li> |
||||
<li><div> Install <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://developer.android.com/sdk/index.html"><param name="text" value="<html><u>Android SDK 2.2</u></html>"><param name="textColor" value="blue"></object> or better.</div> |
||||
</li> |
||||
<li><div> Install jMonkeyPlatform</div> |
||||
</li> |
||||
<li><div> Install Android Project support in the jMonkeyPlatform:</div> |
||||
<ol> |
||||
<li><div> Open Tools→Plugins→Settings</div> |
||||
</li> |
||||
<li><div> Activate the nightly build.</div> |
||||
</li> |
||||
<li><div> Go to Tools→Plugins→Available Plugins.</div> |
||||
</li> |
||||
<li><div> Install the Android Support plugin.</div> |
||||
</li> |
||||
</ol> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Features</a></h2> |
||||
<div> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>JMonkeyEngine3 Android Integration</a></h3> |
||||
<div> |
||||
<ul> |
||||
<li><div> Android touch events are translated into mouse events.</div> |
||||
</li> |
||||
<li><div> No more unhandled exceptions (i.e. no more black screens)</div> |
||||
</li> |
||||
<li><div> Lifecycle management</div> |
||||
<ul> |
||||
<li><div> Leaving the activity with the Back key destroys the app (quit).</div> |
||||
</li> |
||||
<li><div> Leaving the activity with the Home key freezes the app in the background. When you return, the app is in the same state as when you left it (pause).</div> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
<li><div> Currently supports all jmetests except:</div> |
||||
<ul> |
||||
<li><div> Framebuffers - WIP</div> |
||||
</li> |
||||
<li><div> Shadows - WIP</div> |
||||
</li> |
||||
<li><div> Water - not tested yet</div> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h3><a>jMonkeyPlatform Android Integration</a></h3> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
Mobile deployment is a "one-click" option next to Desktop/WebStart/Applet deployment in the jMonkeyPlatform. |
||||
</p> |
||||
<ul> |
||||
<li><div> Automatic creation of Android harness and settings.</div> |
||||
</li> |
||||
<li><div> Ant script build target creates APK file.</div> |
||||
</li> |
||||
<li><div> Ant script run target executes APK on Android Emulator or mobile device.</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Beta Instructions</a></h2> |
||||
<div> |
||||
<ol> |
||||
<li><div> Make sure you have installed the Android Project Support into the jMonkeyPlatform.</div> |
||||
</li> |
||||
<li><div> Open the jMonkeyPlatform Options>Mobile and enter the path to your Android <acronym title="Software Development Kit">SDK</acronym> directory, and click OK. E.g. <code>/opt/android-sdk</code></div> |
||||
</li> |
||||
</ol> |
||||
|
||||
</div> |
||||
|
||||
<h4><a>Activate Android Deployment</a></h4> |
||||
<div> |
||||
<ol> |
||||
<li><div> Open an existing JME3 project, or create a new JME3 project.</div> |
||||
</li> |
||||
<li><div> Right-click the project node in the Projects Window and open the Properties.</div> |
||||
</li> |
||||
<li><div> In the Application>Mobile Properties, enable Mobile Deployment, and select an Android target. <br/> |
||||
This creates a "mobile" folder in your projects directory. This folder contains a complete android project with correct settings to run the application using the AndroidHarness.</div> |
||||
</li> |
||||
<li><div> (Restart the jMonkeyEngine)</div> |
||||
</li> |
||||
<li><div> A Mobile Files node appears in the Project window. <br/> |
||||
It lets you edit the MainActivitity.java, the AndroidManifest.xml, and build.properties.</div> |
||||
</li> |
||||
</ol> |
||||
|
||||
<p> |
||||
|
||||
<img src="nbdocs:/com/jme3/gde/core/docs/jme3/nvyyd.png"> |
||||
</p> |
||||
|
||||
<p> |
||||
The Android deployment option creates a separate sub-project for android and makes the main project and associated libraries available to the sub-project as libraries. The sub-project can be edited using NBAndroid (see below) or using Eclipse or any other IDE that supports standard android projects. Normally you do not need to edit the android project files. Exceptions are described further below. |
||||
</p> |
||||
|
||||
<p> |
||||
Activating the nbandroid plugin in the jMonkeyPlatform is optional, but recommended. You do not need the nbandroid plugin for Android support to work, however nbandroid will not interfere and will in fact allow you to edit the android source files and project more conveniently. To be able to edit, extend and code android-specific code in Android projects, install NBAndroid from the update center: |
||||
</p> |
||||
<ol> |
||||
<li><div> Open Tools→Plugins→Settings</div> |
||||
</li> |
||||
<li><div> Go to Tools→Plugins→Available Plugins.</div> |
||||
</li> |
||||
<li><div> Install the NbAndroid plugin. (Will show up as Android)</div> |
||||
</li> |
||||
</ol> |
||||
|
||||
<p> |
||||
|
||||
Restart the jMonkeyPlatform. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h4><a>Build and Run</a></h4> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
Open your game project in the jMonkeyPlatform. |
||||
</p> |
||||
<ol> |
||||
<li><div> Right-click the project node and choose Set Main Project.</div> |
||||
</li> |
||||
<li><div> Right-click the project node to build your project. <br/> |
||||
An APK file is created in the "dist" folder.</div> |
||||
</li> |
||||
<li><div> (Right-click and run the project. The default run target uses the default device set in the Android configuration utility. If you set that to a phone you can run the application directly on your phone!)</div> |
||||
</li> |
||||
<li><div> Alternatively, select the "Android Device" build configuration next to the Run toolbar button. You can run the project on the emulator (in theory – the emulator doesn’t support OpenGL 2.0 yet?)</div> |
||||
</li> |
||||
</ol> |
||||
|
||||
<p> |
||||
|
||||
Optionally, download <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://code.google.com/p/jmonkeyengine/downloads/detail?name=Jme3Beta1Demo.apk&can=1&q="><param name="text" value="<html><u>Jme3Beta1Demo.apk</u></html>"><param name="textColor" value="blue"></object> |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h4><a>Beta Notes</a></h4> |
||||
<div> |
||||
<ul> |
||||
<li><div> The package name parameter is only used when creating the project and only sets the android MainActivity package name</div> |
||||
</li> |
||||
<li><div> The needed jMonkeyEngine3.jar for android comes with the plugin and is automatically added to the android build</div> |
||||
</li> |
||||
<li><div> All non-android project libraries are automatically excluded from the android build. This is currently hard-coded in the build script, check nbproject/mobile-impl.xml for the details.</div> |
||||
</li> |
||||
<li><div> The main application class parameter for the AndroidHarness is taken from the jme3 project settings when enabling android deployment. Currently it is not updated when you change the main class package or name.</div> |
||||
</li> |
||||
<li><div> When you disable the mobile deployment option, the whole “mobile” folder is deleted.</div> |
||||
</li> |
||||
<li><div> The "errors" shown in the MainActivity are wrongly displayed only in the editor and will disappear when you install NBAndroid (see below).</div> |
||||
</li> |
||||
<li><div> To sign your application, edit the mobile/build.properties file to point at valid keystore files.</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Android Considerations</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
You can use the jMonkeyPlatform to save (theoretically) any jMonkeyEngine app as Android app. But the application has to be prepared for the fact that Android devices have a smaller screen resolution, touchscreens instead of mouse buttons, and (typically) no keyboards. |
||||
|
||||
</p> |
||||
<ul> |
||||
<li><div> <strong>Inputs:</strong> Devise an alternate control scheme that works for Android users (e.g. using com.jme3.input.controls.TouchListener). This mobile scheme is likely quite different from the desktop scheme.</div> |
||||
</li> |
||||
<li><div> <strong>Effects:</strong> Android devices do no support 3D features as well as PCs – or even not at all. E.g. post-processor filters (depth-of-field blur, bloom, light scattering, cartoon, etc), drop shadows, water effects, 3D Audio. Be prepared that these effects will (at best) slow down the application or (in the worst case) not work at all. Provide the option to switch to a low-fi equivalent! </div> |
||||
</li> |
||||
<li><div> <strong>Nifty <acronym title="Graphical User Interface">GUI</acronym>:</strong> Use different base UI layout <acronym title="Extensible Markup Language">XML</acronym> files for the mobile version of your app to account for the different screen settings.</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
<p> |
||||
|
||||
<strong>Best Practice:</strong> Ideally, you write the core application code in a way that it checks for the environment it's being run on, and automatically adapts the device's limitations by switching off effects, changing input mechanisms etc. Learn how to <a href="/com/jme3/gde/core/docs/jme3/advanced/read_graphic_card_capabilites.html">read graphic card capabilites</a> here. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>Using Android specific functions</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
As described above, you should always try to design your application as platform independent as possible. If your game becomes a sudden hit on android, why not release it on Facebook as an applet as well? When your application is designed in a platform independent way, you don't have to do much more but check a checkbox to deploy your application as an applet. But what if you want to for example access the camera of an android device? Inevitably you will have to use android specific api to access the camera. |
||||
</p> |
||||
|
||||
<p> |
||||
Since the main project is not configured to access the android api directly, you have to install NBAndroid (see above) to be able to edit the created android project in the <acronym title="Software Development Kit">SDK</acronym>. After installing, click the "open project" button and navigate to the "mobile" folder inside the main project folder (it should show up with an android "a" icon) and open it. |
||||
</p> |
||||
|
||||
<p> |
||||
<img src="nbdocs:/com/jme3/gde/core/docs/jme3/android_access.png"> |
||||
Although you will use android specific api, using a camera is not exactly android specific and so you should try to design this part of the application as platform independent as possible as well. As an example, if you want to use the phones camera as an image input stream for a texture, you can create e.g. the AppState that manages the image and makes it available to the application inside the main project (no android code is needed). Then in the android part of the code you make a connection to the camera and update the image in the AppState. This also allows you to easily support cameras on other platforms in the same way or fallback to something else in case the platform doesn't support a camera. |
||||
</p> |
||||
|
||||
</div> |
||||
|
||||
<h2><a>More Info</a></h2> |
||||
<div> |
||||
|
||||
<p> |
||||
|
||||
The <acronym title="Software Development Kit">SDK</acronym> will later provide tools to adapt the material and other graphics settings of the Android deployment version automatically. |
||||
|
||||
</p> |
||||
<ul> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://jmonkeyengine.org/groups/android/forum/topic/android-deployment-via-checkbox-is-here"><param name="text" value="<html><u>Android Forum Thread (beta)</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
<li><div> <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"><param name="content" value="http://jmonkeyengine.org/groups/android/forum/topic/how-to-run-your-jme3-application-on-android-androidharness"><param name="text" value="<html><u>Android Forum Thread (alpha)</u></html>"><param name="textColor" value="blue"></object></div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
<p><em><a href="http://direct.jmonkeyengine.org/wiki/doku.php/jme3:android?do=export_xhtmlbody">view online version</a></em></p> |
||||
|
After Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 45 KiB After Width: | Height: | Size: 48 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 61 KiB After Width: | Height: | Size: 65 KiB |
|
Before Width: | Height: | Size: 151 KiB After Width: | Height: | Size: 150 KiB |
|
Before Width: | Height: | Size: 114 KiB After Width: | Height: | Size: 116 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue