| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width,initial-scale=1">
- <title>jMonkeyEngine 3 Tutorial (4) - Hello Update Loop :: jMonkeyEngine Docs</title>
- <link rel="canonical" href="https://wiki.jmonkeyengine.org/docs/jme3/beginner/hello_main_event_loop.html">
- <link rel="prev" href="hello_asset.html">
- <link rel="next" href="hello_input_system.html">
- <meta name="keywords" content="documentation, state, states, intro, beginner, control, loop">
- <meta name="generator" content="Antora 2.3.3">
- <link rel="stylesheet" href="../../../_/css/site.css">
- <meta property="og:image" content="https://wiki.jmonkeyengine.org/_/img/iconx128.png">
- <meta property="og:description" content="jMonkeyEngine 3 Tutorial (4) - Hello Update Loop">
- <meta property="og:title" content="jMonkeyEngine Docs">
- <link rel="stylesheet" href="../../../_/css/site-extra.css">
- <link rel="stylesheet" href="../../../_/css/vendor/docsearch.min.css">
- <!-- fetched from https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css -->
- <link rel="icon" href="../../../_/img/favicon.ico" type="image/x-icon">
- </head>
- <body class="article">
- <header class="header">
- <nav class="navbar">
- <div class="navbar-brand">
- <a class="navbar-item" href="https://wiki.jmonkeyengine.org">
- <img alt="" src="../../../_/img/jme-logo.png" height="32" type="image/x-icon">
- </a>
- <div class="navbar-item hide-for-print">
- <input id="search-input" type="text" placeholder="Search docs">
- </div>
- <button class="navbar-burger" data-target="topbar-nav">
- <span></span>
- <span></span>
- <span></span>
- </button>
- </div>
- <div id="topbar-nav" class="navbar-menu">
- <div class="navbar-end">
- <div class="navbar-item theme-switch-wrapper">
- <label class="theme-switch" for="checkbox">
- <input type="checkbox" id="checkbox" />
- <div class="slider round"></div>
- </label>
- </div>
- <a class="navbar-item" href="https://github.com/jmonkeyengine/wiki">Github</a>
- </div>
- </div>
- </nav>
- </header>
- <div class="body">
- <div class="nav-container" data-component="docs" data-version="master">
- <aside class="nav">
- <div class="panels">
- <div class="nav-panel-menu is-active" data-panel="menu">
- <nav class="nav-menu">
- <h3 class="title"><a href="../../documentation.html">Docs</a></h3>
- <ul class="nav-list">
- <li class="nav-item" data-depth="0">
- <ul class="nav-list">
- <li class="nav-item" data-depth="1">
- <a class="nav-link" href="../../documentation.html">Getting Started</a>
- </li>
- <li class="nav-item" data-depth="1">
- <a class="nav-link" href="https://javadoc.jmonkeyengine.org/v3.3.2-stable">JavaDoc</a>
- </li>
- <li class="nav-item" data-depth="1">
- <button class="nav-item-toggle"></button>
- <a class="nav-link" href="../../jme3.html">jMonkeyEngine 3</a>
- <ul class="nav-list">
- <li class="nav-item" data-depth="2">
- <button class="nav-item-toggle"></button>
- <span class="nav-text">Beginner Tutorials</span>
- <ul class="nav-list">
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="hello_simpleapplication.html">Hello SimpleApplication</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="hello_node.html">Hello Node</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="hello_asset.html">Hello Asset</a>
- </li>
- <li class="nav-item is-current-page" data-depth="3">
- <a class="nav-link" href="hello_main_event_loop.html">Hello Main Event Loop</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="hello_input_system.html">Hello Input System</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="hello_material.html">Hello Material</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="hello_animation.html">Hello Animation</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="hello_picking.html">Hello Picking</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="hello_collision.html">Hello Collision</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="hello_terrain.html">Hello Terrain</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="hello_audio.html">Hello Audio</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="hello_effects.html">Hello Effects</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="hello_physics.html">Hello Physics</a>
- </li>
- </ul>
- </li>
- <li class="nav-item" data-depth="2">
- <button class="nav-item-toggle"></button>
- <span class="nav-text">Intermediate Tutorials</span>
- <ul class="nav-list">
- <li class="nav-item" data-depth="3">
- <button class="nav-item-toggle"></button>
- <span class="nav-text">Concepts</span>
- <ul class="nav-list">
- <li class="nav-item" data-depth="4">
- <a class="nav-link" href="../intermediate/best_practices.html">Best Practices</a>
- </li>
- <li class="nav-item" data-depth="4">
- <a class="nav-link" href="../intermediate/simpleapplication.html">Simple Application</a>
- </li>
- <li class="nav-item" data-depth="4">
- <a class="nav-link" href="../features.html">Features</a>
- </li>
- <li class="nav-item" data-depth="4">
- <a class="nav-link" href="../intermediate/optimization.html">Optimization</a>
- </li>
- <li class="nav-item" data-depth="4">
- <a class="nav-link" href="../faq.html">FAQ</a>
- </li>
- </ul>
- </li>
- <li class="nav-item" data-depth="3">
- <button class="nav-item-toggle"></button>
- <span class="nav-text">Math Concepts</span>
- <ul class="nav-list">
- <li class="nav-item" data-depth="4">
- <a class="nav-link" href="../math_for_dummies.html">Math For Dummies</a>
- </li>
- <li class="nav-item" data-depth="4">
- <a class="nav-link" href="../intermediate/math.html">Math</a>
- </li>
- <li class="nav-item" data-depth="4">
- <a class="nav-link" href="../math.html">More Math</a>
- </li>
- <li class="nav-item" data-depth="4">
- <a class="nav-link" href="../rotate.html">Rotate</a>
- </li>
- <li class="nav-item" data-depth="4">
- <a class="nav-link" href="../math_video_tutorials.html">Math Video Tutorials</a>
- </li>
- </ul>
- </li>
- <li class="nav-item" data-depth="3">
- <button class="nav-item-toggle"></button>
- <span class="nav-text">3D Graphics Concepts</span>
- <ul class="nav-list">
- <li class="nav-item" data-depth="4">
- <a class="nav-link" href="../intermediate/multi-media_asset_pipeline.html">Multi-Media Asset Pipeline</a>
- </li>
- <li class="nav-item" data-depth="4">
- <a class="nav-link" href="../scenegraph_for_dummies.html">Scenegraph for Dummies</a>
- </li>
- <li class="nav-item" data-depth="4">
- <a class="nav-link" href="hellovector.html">Hello Vector</a>
- </li>
- <li class="nav-item" data-depth="4">
- <a class="nav-link" href="../terminology.html">Terminology</a>
- </li>
- <li class="nav-item" data-depth="4">
- <a class="nav-link" href="../intermediate/how_to_use_materials.html">How to Use Materials</a>
- </li>
- <li class="nav-item" data-depth="4">
- <a class="nav-link" href="../intermediate/transparency_sorting.html">Transparency and Sorting</a>
- </li>
- <li class="nav-item" data-depth="4">
- <a class="nav-link" href="../external/blender.html">Importing from Blender</a>
- </li>
- <li class="nav-item" data-depth="4">
- <a class="nav-link" href="../external/3dsmax.html">Importing from 3DS Max</a>
- </li>
- </ul>
- </li>
- </ul>
- </li>
- </ul>
- </li>
- <li class="nav-item" data-depth="1">
- <a class="nav-link" href="../../logo.html">Logo Usage</a>
- </li>
- <li class="nav-item" data-depth="1">
- <a class="nav-link" href="../../bsd_license.html">License</a>
- </li>
- <li class="nav-item" data-depth="1">
- <a class="nav-link" href="../../github_tips.html">Github Tips</a>
- </li>
- </ul>
- </li>
- <li class="nav-item" data-depth="0">
- <button class="nav-item-toggle"></button>
- <span class="nav-text">SDK</span>
- <ul class="nav-list">
- <li class="nav-item" data-depth="1">
- <a class="nav-link" href="../../sdk.html">jMonkeyEngine SDK</a>
- </li>
- </ul>
- </li>
- </ul>
- </nav>
- </div>
- <div class="nav-panel-explore" data-panel="explore">
- <div class="context">
- <span class="title">Docs</span>
- <span class="version">master</span>
- </div>
- <ul class="components">
- <li class="component is-current">
- <span class="title">Docs</span>
- <ul class="versions">
- <li class="version is-current is-latest">
- <a href="../../documentation.html">master</a>
- </li>
- </ul>
- </li>
- <li class="component">
- <span class="title">Wiki UI</span>
- <ul class="versions">
- <li class="version is-latest">
- <a href="../../../wiki-ui/index.html">master</a>
- </li>
- </ul>
- </li>
- </ul>
- </div>
- </div>
- </aside>
- </div>
- <main class="article">
- <div class="toolbar" role="navigation">
- <button class="nav-toggle"></button>
- <nav class="breadcrumbs" aria-label="breadcrumbs">
- <ul>
- <li><a href="../../documentation.html">Docs</a></li>
- <li><a href="../../jme3.html">jMonkeyEngine 3</a></li>
- <li>Beginner Tutorials</li>
- <li><a href="hello_main_event_loop.html">Hello Main Event Loop</a></li>
- </ul>
- </nav>
- <div class="edit-this-page"><a href="https://github.com/jMonkeyEngine/wiki/edit/master/docs/modules/ROOT/pages/jme3/beginner/hello_main_event_loop.adoc">Edit this Page</a></div>
- </div>
- <div class="content">
- <article class="doc">
- <h1 class="page">jMonkeyEngine 3 Tutorial (4) - Hello Update Loop</h1>
- <div id="preamble">
- <div class="sectionbody">
- <div class="paragraph">
- <p>Previous: <a href="hello_asset.html" class="page">Hello Assets</a>,
- Next: <a href="hello_input_system.html" class="page">Hello Input System</a></p>
- </div>
- <div class="paragraph">
- <p>Now that you know how to load assets, such as 3D models, you want to implement some gameplay that uses these assets. In this tutorial we look at the update loop. The update loop of your game is where the action happens.</p>
- </div>
- </div>
- </div>
- <div class="sect1">
- <h2 id="code-sample"><a class="anchor" href="#code-sample"></a>Code Sample</h2>
- <div class="sectionbody">
- <div class="listingblock">
- <div class="content">
- <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">package jme3test.helloworld;
- import com.jme3.app.SimpleApplication;
- import com.jme3.material.Material;
- import com.jme3.math.ColorRGBA;
- import com.jme3.scene.Geometry;
- import com.jme3.scene.shape.Box;
- /** Sample 4 - how to trigger repeating actions from the main event loop.
- * In this example, you use the loop to make the player character
- * rotate continuously. */
- public class HelloLoop extends SimpleApplication {
- public static void main(String[] args){
- HelloLoop app = new HelloLoop();
- app.start();
- }
- protected Geometry player;
- @Override
- public void simpleInitApp() {
- /** this blue box is our player character */
- Box b = new Box(1, 1, 1);
- player = new Geometry("blue cube", b);
- Material mat = new Material(assetManager,
- "Common/MatDefs/Misc/Unshaded.j3md");
- mat.setColor("Color", ColorRGBA.Blue);
- player.setMaterial(mat);
- rootNode.attachChild(player);
- }
- /* Use the main event loop to trigger repeating actions. */
- @Override
- public void simpleUpdate(float tpf) {
- // make the player rotate:
- player.rotate(0, 2*tpf, 0);
- }
- }</code></pre>
- </div>
- </div>
- <div class="paragraph">
- <p>Build and run the file: You see a constantly rotating cube.</p>
- </div>
- </div>
- </div>
- <div class="sect1">
- <h2 id="understanding-the-code"><a class="anchor" href="#understanding-the-code"></a>Understanding the Code</h2>
- <div class="sectionbody">
- <div class="paragraph">
- <p>Compared to our previous code samples you note that the player Geometry is now a class field. This is because we want the update loop to be able to access and transform this Geometry. As usual, we initialize the player object in the <code>simpleInitApp()</code> method.</p>
- </div>
- <div class="paragraph">
- <p>Now have a closer look at the <code>simpleUpdate()</code> method – this is the update loop.</p>
- </div>
- <div class="ulist">
- <ul>
- <li>
- <p>The <code>player.rotate(0, 2*tpf, 0);</code> line changes the rotation of the player object.</p>
- </li>
- <li>
- <p>We use the <code>tpf</code> variable (“time per frame”) to time this action depending on the current frames per second rate. This simply means that the cube rotates with the same speed on fast and slow machines, and the game remains playable.</p>
- </li>
- <li>
- <p>When the game runs, the rotate() code is executed again and again.</p>
- </li>
- </ul>
- </div>
- </div>
- </div>
- <div class="sect1">
- <h2 id="using-the-update-loop"><a class="anchor" href="#using-the-update-loop"></a>Using the Update Loop</h2>
- <div class="sectionbody">
- <div class="paragraph">
- <p>A rotating object is just a simple example. In the update loop, you typically have many tests and trigger various game actions. This is where you update score and health points, check for collisions, make enemies calculate their next move, roll the dice whether a trap has been set off, play random ambient sounds, and much more.</p>
- </div>
- <div class="ulist">
- <ul>
- <li>
- <p>The <code>simpleUpdate()</code> method starts running after the <code>simpleInitApp()</code> method has initialized the scene graph and state variables.</p>
- </li>
- <li>
- <p>JME3 executes everything in the <code>simpleUpdate()</code> method repeatedly, as fast as possible.</p>
- <div class="olist loweralpha">
- <ol class="loweralpha" type="a">
- <li>
- <p>Use the loop to poll the game state and then initiate actions.</p>
- </li>
- <li>
- <p>Use the loop to trigger reactions and update the game state.</p>
- </li>
- <li>
- <p>Use the loop wisely, because having too many calls in the loop also slows down the game.</p>
- </li>
- </ol>
- </div>
- </li>
- </ul>
- </div>
- </div>
- </div>
- <div class="sect1">
- <h2 id="init-update-render"><a class="anchor" href="#init-update-render"></a>Init - Update - Render</h2>
- <div class="sectionbody">
- <div class="paragraph">
- <p>Note the the three phases of every game:</p>
- </div>
- <div class="ulist">
- <ul>
- <li>
- <p><strong>Init:</strong> The <code>simpleInitApp()</code> method is executed only <em>once</em>, right at the beginning;</p>
- </li>
- <li>
- <p><strong>Update:</strong> The <code>simpleUpdate()</code> method runs <em>repeatedly</em>, during the game.</p>
- </li>
- <li>
- <p><strong>Render:</strong> After every update, the jMonkeyEngine <em>automatically</em> redraws (<code>renders</code>) the screen for you.</p>
- </li>
- </ul>
- </div>
- <div class="paragraph">
- <p>Since rendering is automatic, initialization and updating are the two most important concepts in a SimpleApplication-based game for you:</p>
- </div>
- <div class="ulist">
- <ul>
- <li>
- <p>The <code>simpleInitApp()</code> method is the application’s “first breath”.</p>
- <div class="ulist">
- <ul>
- <li>
- <p>Here you load and create game data (once).</p>
- </li>
- </ul>
- </div>
- </li>
- <li>
- <p>The <code>simpleUpdate()</code> method is the application’s “heartbeat” (the time unit is called <code>ticks</code>).<br>
- Here you change their properties to update the game state (repeatedly).</p>
- </li>
- </ul>
- </div>
- <div class="admonitionblock tip">
- <table>
- <tr>
- <td class="icon">
- <i class="fa icon-tip" title="Tip"></i>
- </td>
- <td class="content">
- <div class="paragraph">
- <p>Everything in a game happens either during initialization, or during the update loop. This means that these two methods grow very long over time. Follwo these two strategies to spread out init and update code over several modular Java classes:</p>
- </div>
- <div class="ulist">
- <ul>
- <li>
- <p>Move code blocks from the simpleInitApp() method to <a href="../advanced/application_states.html" class="page">AppStates</a>.</p>
- </li>
- <li>
- <p>Move code blocks from the simpleUpdate() method to <a href="../advanced/custom_controls.html" class="page">Custom Controls</a>.</p>
- </li>
- </ul>
- </div>
- <div class="paragraph">
- <p>Keep this in mind for later when your application grows.</p>
- </div>
- </td>
- </tr>
- </table>
- </div>
- </div>
- </div>
- <div class="sect1">
- <h2 id="exercises"><a class="anchor" href="#exercises"></a>Exercises</h2>
- <div class="sectionbody">
- <div class="paragraph">
- <p>Here are some fun things to try:</p>
- </div>
- <div class="olist arabic">
- <ol class="arabic">
- <li>
- <p>What happens if you give the rotate() method negative numbers?</p>
- </li>
- <li>
- <p>Can you create two Geometries next to each other, and make one rotate twice as fast as the other? (use the <code>tpf</code> variable)</p>
- </li>
- <li>
- <p>Can you make a cube that pulsates? (grows and shrinks)</p>
- </li>
- <li>
- <p>Can you make a cube that changes color? (change and set the Material)</p>
- </li>
- <li>
- <p>Can you make a rolling cube? (rotate around the x axis, and translate along the z axis)</p>
- </li>
- </ol>
- </div>
- <div class="paragraph">
- <p>Look back at the <a href="hello_node.html" class="page">Hello Node</a> tutorial if you do not remember the transformation methods for scaling, translating, and rotating.</p>
- </div>
- <div class="admonitionblock important">
- <table>
- <tr>
- <td class="icon">
- <i class="fa icon-important" title="Important"></i>
- </td>
- <td class="content">
- <div class="paragraph">
- <p>Link to user-proposed solutions: <a href="solutions.html" class="page">Some proposed solutions</a><br>
- <u>Be sure to try to solve them for yourself first!</u></p>
- </div>
- </td>
- </tr>
- </table>
- </div>
- </div>
- </div>
- <div class="sect1">
- <h2 id="conclusion"><a class="anchor" href="#conclusion"></a>Conclusion</h2>
- <div class="sectionbody">
- <div class="paragraph">
- <p>Now you are listening to the update loop, the “heartbeat” of the game, and you can add all kinds of action to it.</p>
- </div>
- <div class="paragraph">
- <p>The next thing the game needs is some <em>inter</em>action! Continue learning how to <a href="hello_input_system.html" class="page">respond to user input</a>.</p>
- </div>
- <hr>
- <div class="paragraph">
- <p>See also:</p>
- </div>
- <div class="ulist">
- <ul>
- <li>
- <p>Advanced jME3 developers use <a href="../advanced/application_states.html" class="page">Application States</a> and <a href="../advanced/custom_controls.html" class="page">Custom Controls</a> to implement game mechanics in their update loops. You will come across these topics again later when you proceed to more advanced documentation.</p>
- </li>
- </ul>
- </div>
- </div>
- </div>
- <nav class="pagination">
- <span class="prev"><a href="hello_asset.html">Hello Asset</a></span>
- <span class="next"><a href="hello_input_system.html">Hello Input System</a></span>
- </nav>
- </article>
- <aside class="toc sidebar" data-title="Contents" data-levels="2">
- <div class="toc-menu"></div>
- </aside>
- </div>
- </main>
- </div>
- <footer class="footer">
- <p>Copyright 2020 jMonkeyEngine Wiki Contributors. Licensed BSD-3.</p>
- </footer>
- <script src="../../../_/js/vendor/docsearch.min.js"></script>
- <!-- fetched from https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js -->
- <script>
- var search = docsearch({
- apiKey: 'a736b6d93de805e26ec2f49b55013fbd',
- indexName: 'jmonkeyengine',
- inputSelector: '#search-input',
- autocompleteOptions: { hint: false, keyboardShortcuts: ['s'] },
- algoliaOptions: { hitsPerPage: 10 }
- }).autocomplete
- search.on('autocomplete:closed', function () { search.autocomplete.setVal() })
- function focusSearchInput () { document.querySelector('#search-input').focus() }
- if (document.querySelector('.home-link.is-current')) window.addEventListener('load', focusSearchInput)
- </script>
- <script src="../../../_/js/site.js"></script>
- <script async src="../../../_/js/vendor/highlight.js"></script>
- </body>
- </html>
|