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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>jMonkeyEngine 3 Tutorial (7) - Hello Animation :: jMonkeyEngine Docs</title>
    <link rel="canonical" href="https://wiki.jmonkeyengine.org/docs/3.8/tutorials/beginner/hello_animation.html">
    <link rel="prev" href="hello_material.html">
    <link rel="next" href="hello_picking.html">
    <meta name="keywords" content="beginner, intro, animation, documentation, keyinput, input, node, model">
    <meta name="generator" content="Antora 3.0.1">
    <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 (7) - Hello Animation">
<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="3.4">
  <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">JME</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.4.1-stable">JavaDoc</a>
  </li>
  <li class="nav-item" data-depth="1">
    <a class="nav-link" href="../../release.html">Release Guide</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="0">
<ul class="nav-list">
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <a class="nav-link" href="beginner.html">Beginner Tutorials</a>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="hello_simpleapplication.html">Hello SimpleApplication</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="hello_node.html">Hello Node</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="hello_asset.html">Hello Asset</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="hello_main_event_loop.html">Hello Update Loop</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="hello_input_system.html">Hello Input System</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="hello_material.html">Hello Material</a>
  </li>
  <li class="nav-item is-current-page" data-depth="2">
    <a class="nav-link" href="hello_animation.html">Hello Animation</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="hello_picking.html">Hello Picking</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="hello_collision.html">Hello Collision</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="hello_terrain.html">Hello Terrain</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="hello_audio.html">Hello Audio</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="hello_effects.html">Hello Effects</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="hello_physics.html">Hello Physics</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Key Concepts</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../concepts/best_practices.html">Best Practices</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../concepts/optimization.html">Optimization</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../concepts/faq.html">Frequently Asked Questions</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../concepts/math_for_dummies.html">Math for Dummies</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../concepts/math.html">Math overview</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../concepts/math_cheet_sheet.html">3D math "cheat sheet"</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../concepts/rotate.html">3-D Rotation</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../concepts/math_video_tutorials.html">Math video tutorial series</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../concepts/multi-media_asset_pipeline.html">Multi-Media Asset Pipeline</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../concepts/the_scene_graph.html">The Scene Graph</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../concepts/scenegraph_for_dummies.html">Scene Graph for Dummies</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../concepts/terminology.html">3D Graphics Terminology</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../concepts/transparency_sorting.html">Transparency Sorting</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Articles and How-to&#8217;s</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">How to Model</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../how-to/modeling/3dsmax/3dsmax.html">3dsmax</a>
  </li>
  <li class="nav-item" data-depth="3">
    <button class="nav-item-toggle"></button>
    <a class="nav-link" href="../how-to/modeling/blender/blender.html">Blender</a>
<ul class="nav-list">
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../how-to/modeling/blender/blender_buffer_clearing.html">Buffer Clearing</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../how-to/modeling/blender/blender_gltf.html">Export as GlTF</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../how-to/modeling/blender/blender_ogre_export.html">Export as Ogre XML</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../how-to/modeling/blender/blender_ogre_compatibility.html">Ogre Compatibility</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../how-to/modeling/blender/makehuman.html">MakeHuman</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../how-to/modeling/blender/makehuman_blender_ogrexml_toolchain.html">MakeHuman toolchain</a>
  </li>
</ul>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">How to Animate</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Mixamo</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../how-to/modeling/blender/mixamo.html">Blender Models</a>
  </li>
  <li class="nav-item" data-depth="4">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Video</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="5">
    <a class="nav-link" href="https://youtu.be/jHgAgTWIers?list=PLv6qR9TGkz8RcUr-fOHI2SksWA4BAU9TS">Part 1- Download Model</a>
  </li>
  <li class="nav-item" data-depth="5">
    <a class="nav-link" href="https://youtu.be/GQJSrOpNQwI?list=PLv6qR9TGkz8RcUr-fOHI2SksWA4BAU9TS">Part 2- Rig and Animate</a>
  </li>
  <li class="nav-item" data-depth="5">
    <a class="nav-link" href="https://youtu.be/JzRe2Dxbcmc?list=PLv6qR9TGkz8RcUr-fOHI2SksWA4BAU9TS">Part 3- Import to JME</a>
  </li>
  <li class="nav-item" data-depth="5">
    <a class="nav-link" href="https://youtu.be/8wwDRDJop7k?list=PLv6qR9TGkz8RcUr-fOHI2SksWA4BAU9TS">Part 4- Play Animation</a>
  </li>
</ul>
  </li>
</ul>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../how-to/debugging.html">Debugging with Wireframes</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../how-to/util/free_skymaps.html">How to create free skymaps</a>
  </li>
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Java Tips</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../how-to/java/localization.html">Localization</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../how-to/java/swing_canvas.html">Swing Canvas</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../how-to/java/logging.html">Logging</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../how-to/java/read_graphic_card_capabilites.html">Read Graphics Capabilities</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Articles</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Physically Based Rendering</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../how-to/articles/pbr/pbr_part1.html">PBR – Part one</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../how-to/articles/pbr/pbr_part2.html">PBR – Part two</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../how-to/articles/pbr/pbr_part3.html">PBR – Part three</a>
  </li>
</ul>
  </li>
</ul>
  </li>
</ul>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="0">
<ul class="nav-list">
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Core Engine</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/app/simpleapplication.html">SimpleApplication</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/system/appsettings.html">AppSettings</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Controlling Game Logic</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/app/update_loop.html">Update Loop</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/app/state/application_states.html">Application States</a>
  </li>
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <a class="nav-link" href="../../core/scene/control/custom_controls.html">Custom Controls</a>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Video</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="https://www.youtube.com/watch?v=MNDiZ9YHIpM">Control any scene node</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="https://www.youtube.com/watch?v=-OzRZscLlHY">Control a character</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="https://wiki.jmonkeyengine.org/Scenes/SDK-UsecaseDemo_1.zip">Video Source Code</a>
  </li>
</ul>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/app/multithreading.html">Multithreading</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Scene Graph</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/scene/traverse_scenegraph.html">Traverse SceneGraph</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/scene/spatial.html">Spatial: Node vs Geometry</a>
  </li>
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <a class="nav-link" href="../../core/scene/mesh.html">Mesh</a>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../core/scene/custom_meshes.html">Custom Meshes</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../core/scene/shape/shape.html">Shape</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../core/scene/3d_models.html">3D Models</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/asset/asset_manager.html">Asset Manager</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/export/save_and_load.html">Saving and Loading Nodes</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/collision/collision_and_intersection.html">Collision and Intersection</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/scene/control/level_of_detail.html">Level of Detail</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Animation, Scene</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/animation/animation.html">Animation-Old</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/cinematic/cinematics.html">Cinematics (cutscenes, fake destruction physics)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/cinematic/motionpath.html">MotionPaths and Waypoints</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Material, Light, Shadow</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/material/how_to_use_materials.html">How to use Materials</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/material/j3m_material_files.html">.j3m Material Files</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/material/material_definitions.html">.j3md Material Definitions</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/material/materials_overview.html">.j3md Properties</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/shader/jme3_shaders.html">Shaders and JME3</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/shader/jme3_shadernodes.html">Shader Node System</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/shader/shader_video_tutorials.html">Shader Video Tutorials</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/light/light_and_shadow.html">Light and Shadow</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/texture/anisotropic_filtering.html">Anisotropic Filtering</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/system/jme3_srgbpipeline.html">Gamma Correction</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Audio, Video</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/audio/audio.html">Playing Sounds</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/audio/audio_environment_presets.html">Audio Environment Presets</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/app/state/screenshots.html">Capture Screenshots</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/app/state/capture_audio_video_to_a_file.html">Capture Audio/Video</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Filter, Effect</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/effect/effects_overview.html">Overview</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/effect/bloom_and_glow.html">Bloom and Glow</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/effect/particle_emitters.html">Particle Emitters</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Landscapes</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/util/sky.html">Sky</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/terrain/terrain.html">Terrain (TerraMonkey)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/collision/terrain_collision.html">Terrain Collision</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/effect/water.html">Simple Water</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/effect/post-processor_water.html">Post-Processor Water</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Camera</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/renderer/camera.html">Camera</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/renderer/making_the_camera_follow_a_character.html">Follow a Character</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/renderer/remote-controlling_the_camera.html">Remote-Controlling</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/renderer/multiple_camera_views.html">Multiple Camera Views</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/renderer/jme3_renderbuckets.html">Render Buckets</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">User Interaction</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/input/input_handling.html">Input Handling</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/input/combo_moves.html">Combo Moves</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/input/mouse_picking.html">Mouse Picking</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <a class="nav-link" href="../../core/gui/topic_gui.html">Graphical User Interface</a>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Nifty GUI</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../core/gui/nifty_gui.html">Integration Tutorial</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../core/gui/nifty_gui_best_practices.html">Best Practices</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../core/gui/nifty_gui_scenarios.html">Scenarios</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/ui/hud.html">Head-Up Display (HUD)</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Virtual Reality</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/vr/virtualreality.html">Virtual Reality</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/vr/virtualrealitycontrollers.html">Virtual Reality Controllers</a>
  </li>
</ul>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="0">
<ul class="nav-list">
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <a class="nav-link" href="../../physics/physics.html">Physics</a>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../physics/bullet_multithreading.html">Multi-Threaded Physics</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../physics/collision/physics_listeners.html">Collision Detection</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../physics/joint/hinges_and_joints.html">Hinges and Joints</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../physics/control/walking_character.html">Walking Character</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../physics/control/ragdoll.html">Ragdoll</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../physics/control/vehicles.html">Vehicles</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../physics/control/softbody.html">Softbody</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../physics/bullet_pitfalls.html">Bullet Physics Pitfalls</a>
  </li>
</ul>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="0">
<ul class="nav-list">
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Networking</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../networking/networking.html">Networking (SpiderMonkey)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../networking/headless_server.html">Headless Server</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../networking/monkey_zone.html">Multi-Player Demo Code</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../networking/networking_video_tutorials.html">Networking Video Tutorials</a>
  </li>
</ul>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="0">
<ul class="nav-list">
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">User Contributions</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../contributions/contributions.html">User Made Utilities</a>
  </li>
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Shader</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../contributions/shader/shaderblow_project.html">ShaderBlow Project</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Landscapes</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../contributions/lanscapes/vegetationsystem/vegetationsystem.html">Vegetation System</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Networking</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../contributions/networking/open_game_finder.html">Open Game Finder</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Entity System</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="#es/entitysystem.adoc">The Zay-ES Entity System</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Artificial Intelligence</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../contributions/ai/recast.html">Recast Navigation</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../contributions/ai/building_recast.html">Updating and building Recast Native Bindings</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../contributions/ai/monkey_brains.html">Monkey Brains</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../contributions/ai/steer_behaviours.html">Steer Behaviours</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../contributions/ai/jme3_ai.html">jME3 Artificial Intelligence</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <a class="nav-link" href="../../contributions/gui/topic_contributions_gui.html">GUI</a>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../contributions/contributions.html#lemur-gui-library">Lemur - a native jME3 GUI library with scene graph tools</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../contributions/contributions.html#tonegodgui">tonegodGUI - a native jME3 GUI library</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../contributions/contributions.html#immediate-graphical-user-interface">Immediate graphical user interface</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Tools</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../contributions/tools/navigation.html">Mercator Projection Tool (Marine Navigation)</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../contributions/tools/charts.html">Visualizing Maps in JME3 (Marine Charts)</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Projects</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../contributions/projects/rise_of_mutants_project.html">Rise of Mutants Project</a>
  </li>
</ul>
  </li>
</ul>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="0">
<ul class="nav-list">
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <a class="nav-link" href="../../sdk/sdk.html">SDK</a>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Video Tutorials</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">SDK Use Case Tutorials</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="http://www.youtube.com/watch?v=-OzRZscLlHY">Demo 1 (Quixote demo)</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="http://www.youtube.com/watch?v=6-YWxD3JByE">Demo 2 (Models and Materials)</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="3">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">SDK Tutorials</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="http://www.youtube.com/watch?v=M1_0pbeyJzI">Basics</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="http://www.youtube.com/watch?v=nL7woH40i5c">Importing Models</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="http://www.youtube.com/watch?v=DUmgAjiNzhY">Dragging&amp;Dropping Nodes</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="http://www.youtube.com/watch?v=ntPAmtsQ6eM">Scene Composing</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="http://www.youtube.com/watch?v=zgPV3W6dD4s">Terrain with Collision Shape</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="http://www.youtube.com/watch?v=Feu3-mrpolc">Working with Materials</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="http://www.youtube.com/watch?v=MNDiZ9YHIpM">Custom Controls</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="http://www.youtube.com/watch?v=oZnssg8TBWQ">WebStart Deployment</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="http://www.youtube.com/watch?v=D7JM4VMKqPc">Animation and Effect TrackEditing</a>
  </li>
</ul>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Getting Started</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/update_center.html">Updating jMonkeyEngine SDK</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/troubleshooting.html">Troubleshooting</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Java Development Features</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/project_creation.html">Project Creation</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/code_editor.html">Code Editor and Palette</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/version_control.html">File Version Control</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/debugging_profiling_testing.html">Debug, Profile, Test</a>
  </li>
  <li class="nav-item" data-depth="3">
    <button class="nav-item-toggle"></button>
    <a class="nav-link" href="../../sdk/application_deployment.html">Application Deployment</a>
<ul class="nav-list">
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../../sdk/default_build_script.html">Default Build Script</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../../sdk/android.html">Android</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../../sdk/android_cheat_sheet.html">Android Cheat Sheet</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../../sdk/ios.html">iOS</a>
  </li>
</ul>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Unique Features</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <button class="nav-item-toggle"></button>
    <a class="nav-link" href="../../sdk/model_loader_and_viewer.html">Import, View, Convert Models</a>
<ul class="nav-list">
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../../sdk/asset_packs.html">Asset Packs</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/scene_explorer.html">The SceneExplorer</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/scene_composer.html">Composing a Scene</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/terrain_editor.html">Terrain Editor</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/sample_code.html">Sample Code</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/material_editing.html">Material Editing</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/font_creation.html">Creating Bitmap Fonts</a>
  </li>
  <li class="nav-item" data-depth="3">
    <button class="nav-item-toggle"></button>
    <a class="nav-link" href="https://hub.jmonkeyengine.org/t/effecttrack-and-audiotrack-editing-in-the-sdk/23378">Audio and Effect Track Editing</a>
<ul class="nav-list">
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="https://www.youtube.com/watch?v=D7JM4VMKqPc">Video: Effect and AudioTrack editing in jMonkeyEngine 3 sdk</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/filters.html">Post-Processor Filter Editor and Viewer</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../core/app/state/application_states.html">Application States</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../core/scene/control/custom_controls.html">Custom Controls</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/vehicle_creator.html">Vehicle Creator</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Advanced Usage</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/build_platform.html">Building jMonkeyEngine SDK</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/use_own_jme.html#.adoc">Using your own (modified) version of jME3 in jMonkeyEngine SDK</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/increasing_heap_memory.html">Increasing Heap Memory</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/log_files.html">Log Files</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Available external plugins</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../contributions/contributions.html">Contributions</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/neotexture.html">Neo Texture Editor for procedural textures</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="http://www.youtube.com/watch?v=yS9a9o4WzL8">Video: Mesh Tool &amp; Physics Editor</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <a class="nav-link" href="../../sdk/development.html">Developing plugins for jMonkeyEngine SDK</a>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/development/setup.html">Creating a plugin</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/development/general.html">Creating components</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/development/scene.html">The Main Scene</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/development/sceneexplorer.html">The Scene Explorer</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/development/projects_assets.html">Projects and Assets</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/development/extension_library.html">Create a library plugin from a jar file</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/development/model_loader.html">Create a new or custom model filetype and loader</a>
  </li>
</ul>
  </li>
</ul>
  </li>
</ul>
  </li>
</ul>
  </nav>
</div>
<div class="nav-panel-explore" data-panel="explore">
  <div class="context">
    <span class="title">JME</span>
    <span class="version">3.4</span>
  </div>
  <ul class="components">
    <li class="component is-current">
      <span class="title">JME</span>
      <ul class="versions">
        <li class="version">
          <a href="../../../3.8/documentation.html">3.8</a>
        </li>
        <li class="version is-current">
          <a href="../../documentation.html">3.4</a>
        </li>
        <li class="version">
          <a href="../../../3.3/documentation.html">3.3</a>
        </li>
        <li class="version">
          <a href="../../../3.2/documentation.html">3.2</a>
        </li>
      </ul>
    </li>
    <li class="component">
      <span class="title">Wiki Contribution</span>
      <ul class="versions">
        <li class="version">
          <a href="../../../../docs-wiki/3.8/wiki_contributor.html">3.8</a>
        </li>
      </ul>
    </li>
    <li class="component">
      <span class="title">Wiki UI</span>
      <ul class="versions">
        <li class="version">
          <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">JME</a></li>
    <li><a href="beginner.html">Beginner Tutorials</a></li>
    <li><a href="hello_animation.html">Hello Animation</a></li>
  </ul>
</nav>
<div class="page-versions">
  <button class="version-menu-toggle" title="Show other versions of page">3.4</button>
  <div class="version-menu">
    <a class="version" href="../../../3.8/tutorials/beginner/hello_animation.html">3.8</a>
    <a class="version is-current" href="hello_animation.html">3.4</a>
    <a class="version" href="../../../3.3/tutorials/beginner/hello_animation.html">3.3</a>
    <a class="version" href="../../../3.2/tutorials/beginner/hello_animation.html">3.2</a>
  </div>
</div>
  <div class="edit-this-page"><a href="https://github.com/jMonkeyEngine/wiki/edit/v3.4/docs/modules/tutorials/pages/beginner/hello_animation.adoc">Edit this Page</a></div>
  </div>
  <div class="content">
<article class="doc">
<h1 class="page">jMonkeyEngine 3 Tutorial (7) - Hello Animation</h1>
<div id="preamble">
<div class="sectionbody">
<div class="paragraph">
<p>This tutorial shows how to add an animation controller and channels, and how to respond to user input by triggering an animation in a loaded model.</p>
</div>
<div class="imageblock text-center">
<div class="content">
<img src="../_images/beginner/beginner-animation.png" alt="beginner-animation.png" width="" height="">
</div>
</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>To use the example assets in a new jMonkeyEngine SDK project, right-click your project, select <span class="menuseq"><b class="menu">Properties</b>&#160;<i class="fa fa-angle-right caret"></i> <b class="submenu">Libraries</b>&#160;<i class="fa fa-angle-right caret"></i> <b class="menuitem">Add Library</b></span>, and add the &#8220;jme3-test-data&#8221; library.</p>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="sect1">
<h2 id="sample-code"><a class="anchor" href="#sample-code"></a>Sample Code</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.animation.AnimChannel;
import com.jme3.animation.AnimControl;
import com.jme3.animation.AnimEventListener;
import com.jme3.animation.LoopMode;
import com.jme3.app.SimpleApplication;
import com.jme3.input.KeyInput;
import com.jme3.input.controls.ActionListener;
import com.jme3.input.controls.KeyTrigger;
import com.jme3.light.DirectionalLight;
import com.jme3.math.ColorRGBA;
import com.jme3.math.Vector3f;
import com.jme3.scene.Node;

/** Sample 7 - how to load an OgreXML model and play an animation,
 * using channels, a controller, and an AnimEventListener. */
public class HelloAnimation extends SimpleApplication
  implements AnimEventListener {
  private AnimChannel channel;
  private AnimControl control;
  Node player;
  public static void main(String[] args) {
    HelloAnimation app = new HelloAnimation();
    app.start();
  }

  @Override
  public void simpleInitApp() {
    viewPort.setBackgroundColor(ColorRGBA.LightGray);
    initKeys();
    DirectionalLight dl = new DirectionalLight();
    dl.setDirection(new Vector3f(-0.1f, -1f, -1).normalizeLocal());
    rootNode.addLight(dl);
    player = (Node) assetManager.loadModel("Models/Oto/Oto.mesh.xml");
    player.setLocalScale(0.5f);
    rootNode.attachChild(player);
    control = player.getControl(AnimControl.class);
    control.addListener(this);
    channel = control.createChannel();
    channel.setAnim("stand");
  }

  public void onAnimCycleDone(AnimControl control, AnimChannel channel, String animName) {
    if (animName.equals("Walk")) {
      channel.setAnim("stand", 0.50f);
      channel.setLoopMode(LoopMode.DontLoop);
      channel.setSpeed(1f);
    }
  }

  public void onAnimChange(AnimControl control, AnimChannel channel, String animName) {
    // unused
  }

  /** Custom Keybinding: Map named actions to inputs. */
  private void initKeys() {
    inputManager.addMapping("Walk", new KeyTrigger(KeyInput.KEY_SPACE));
    inputManager.addListener(actionListener, "Walk");
  }
  private ActionListener actionListener = new ActionListener() {
    public void onAction(String name, boolean keyPressed, float tpf) {
      if (name.equals("Walk") &amp;&amp; !keyPressed) {
        if (!channel.getAnimationName().equals("Walk")) {
          channel.setAnim("Walk", 0.50f);
          channel.setLoopMode(LoopMode.Loop);
        }
      }
    }
  };
}</code></pre>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="creating-and-loading-animated-models"><a class="anchor" href="#creating-and-loading-animated-models"></a>Creating and Loading Animated Models</h2>
<div class="sectionbody">
<div class="paragraph">
<p>You create animated models with a tool such as Blender. Take some time and learn how to create your own models in these <a href="http://www.blender.org/education-help/tutorials/animation/">Blender Animation Tutorials</a>. For now, download and use a free model, such as the one included here as an example (<a href="https://github.com/jMonkeyEngine/jmonkeyengine/tree/master/jme3-testdata/src/main/resources/Models/Oto/">Oto Golem</a>, and <a href="https://github.com/jMonkeyEngine/jmonkeyengine/tree/master/jme3-testdata/src/main/resources/Models/Ninja/">Ninja</a>).</p>
</div>
<div class="paragraph">
<p>Loading an animated model is pretty straight-forward, just as you have learned in the previous chapters. Animated Ogre models come as a set of files: The model is in <code>Oto.mesh.xml</code>, and the animation details are in <code>Oto.skeleton.xml</code>, plus the usual files for materials and textures. Check that all files of the model are together in the same <code>Model</code> subdirectory.</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">  public void simpleInitApp() {
    /* Displaying the model requires a light source */
    DirectionalLight dl = new DirectionalLight();
    dl.setDirection(new Vector3f(-0.1f, -1f, -1).normalizeLocal());
    rootNode.addLight(dl);
    /* load and attach the model as usual */
    player = assetManager.loadModel("Models/Oto/Oto.mesh.xml");
    player.setLocalScale(0.5f); // resize
    rootNode.attachChild(player);
    ...
    }</code></pre>
</div>
</div>
<div class="paragraph">
<p>Don&#8217;t forget to add a light source to make the material visible.</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="animation-controller-and-channel"><a class="anchor" href="#animation-controller-and-channel"></a>Animation Controller and Channel</h2>
<div class="sectionbody">
<div class="paragraph">
<p>After you load the animated model, you register it to the Animation Controller.</p>
</div>
<div class="ulist">
<ul>
<li>
<p>The controller object gives you access to the available animation sequences.</p>
</li>
<li>
<p>The controller can have several channels, each channel can run one animation sequence at a time.</p>
</li>
<li>
<p>To run several sequences, you create several channels, and set them each to their animation.</p>
</li>
</ul>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">  private AnimChannel channel;
  private AnimControl control;

  public void simpleInitApp() {
    ...
    /* Load the animation controls, listen to animation events,
     * create an animation channel, and bring the model in its default position.
     */
    control = player.getControl(AnimControl.class);
    control.addListener(this);
    channel = control.createChannel();
    channel.setAnim("stand");
    ...
}</code></pre>
</div>
</div>
<div class="paragraph">
<p>This line of code will return NULL if the AnimControl is not in the main node of your model.</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">control = player.getControl(AnimControl.class);</code></pre>
</div>
</div>
<div class="paragraph">
<p>To check this, <b class="button">RMB</b> select your model and click &#8220;Edit in SceneComposer&#8221; if the models file extension is .j3o, or &#8220;View&#8221; if not. You can then see the tree for the model so you can locate the node the control resides in. You can access the subnode with the following code.</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">player.getChild("Subnode").getControl(AnimControl.class);</code></pre>
</div>
</div>
<div class="admonitionblock note">
<table>
<tr>
<td class="icon">
<i class="fa icon-note" title="Note"></i>
</td>
<td class="content">
<div class="paragraph">
<p>In response to a question about animations on different channels interfering with each other, <strong>Nehon</strong>, on the jME forum wrote,</p>
</div>
<div class="quoteblock">
<blockquote>
<div class="paragraph">
<p>You have to consider channels as part of the skeleton that are animated. The default behavior is to use the whole skeleton for a channel.</p>
</div>
<div class="paragraph">
<p>In your example the first channel plays the walk anim, then the second channel plays the dodge animation.</p>
</div>
<div class="paragraph">
<p>Arms and feet are probably not affected by the doge animation so you can see the walk anim for them, but the rest of the body plays the dodge animation.</p>
</div>
<div class="paragraph">
<p>Usually multiple channels are used to animate different part of the body. For example you create one channel for the lower part of the body and one for the upper part. This allow you to play a walk animation with the lower part and for example a shoot animation with the upper part. This way your character can walk while shooting.</p>
</div>
<div class="paragraph">
<p>In your case, where you want animations to chain for the whole skeleton, you just have to use one channel.</p>
</div>
</blockquote>
<div class="attribution">
&#8212; Nehon<br>
<cite>Team Leader: Retired</cite>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="sect1">
<h2 id="responding-to-animation-events"><a class="anchor" href="#responding-to-animation-events"></a>Responding to Animation Events</h2>
<div class="sectionbody">
<div class="paragraph">
<p>Add <code>implements AnimEventListener</code> to the class declaration. This interface gives you access to events that notify you when a sequence is done, or when you change from one sequence to another, so you can respond to it. In this example, you reset the character to a standing position after a <code>Walk</code> cycle is done.</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">public class HelloAnimation extends SimpleApplication
                         implements AnimEventListener {
  ...

  public void onAnimCycleDone(AnimControl control,
                              AnimChannel channel, String animName) {
    if (animName.equals("Walk")) {
      channel.setAnim("stand", 0.50f);
      channel.setLoopMode(LoopMode.DontLoop);
      channel.setSpeed(1f);
    }
  }
  public void onAnimChange(AnimControl control, AnimChannel channel, String animName) {
    // unused
  }
 ...
}</code></pre>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="trigger-animations-after-user-input"><a class="anchor" href="#trigger-animations-after-user-input"></a>Trigger Animations After User Input</h2>
<div class="sectionbody">
<div class="paragraph">
<p>There are ambient animations like animals or trees that you may want to trigger in the main event loop. In other cases, animations are triggered by user interaction, such as key input. You want to play the Walk animation when the player presses a certain key (here the spacebar), at the same time as the avatar performs the walk action and changes its location.</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Initialize a new input controller (in <code>simpleInitApp()</code>).</p>
<div class="ulist">
<ul>
<li>
<p>Write the <code>initKey()</code> convenience method and call it from <code>simpleInitApp()</code>.</p>
</li>
</ul>
</div>
</li>
<li>
<p>Add a key mapping with the name as the action you want to trigger.</p>
<div class="ulist">
<ul>
<li>
<p>Here for example, you map <code>Walk</code> to the Spacebar key.</p>
</li>
</ul>
</div>
</li>
<li>
<p>Add an input listener for the <code>Walk</code> action.</p>
</li>
</ol>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">  private void initKeys() {
    inputManager.addMapping("Walk", new KeyTrigger(KeyInput.KEY_SPACE));
    inputManager.addListener(actionListener, "Walk");
  }</code></pre>
</div>
</div>
<div class="paragraph">
<p>To use the input controller, you need to implement the actionListener by testing for each action by name, then set the channel to the corresponding animation to run.</p>
</div>
<div class="ulist">
<ul>
<li>
<p>The second parameter of setAnim() is the blendTime (how long the current animation should overlap with the last one).</p>
</li>
<li>
<p>LoopMode can be Loop (repeat), Cycle (forward then backward), and DontLoop (only once).</p>
</li>
<li>
<p>If needed, use channel.setSpeed() to set the speed of this animation.</p>
</li>
<li>
<p>Optionally, use channel.setTime() to Fast-forward or rewind to a certain moment in time of this animation.</p>
</li>
</ul>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">  private ActionListener actionListener = new ActionListener() {
    public void onAction(String name, boolean keyPressed, float tpf) {
        if (name.equals("Walk") &amp;&amp; !keyPressed) {
            if (!channel.getAnimationName().equals("Walk")){
                channel.setAnim("Walk", 0.50f);
                channel.setLoopMode(LoopMode.Cycle);
            }
        }
    }
  };</code></pre>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="exercises"><a class="anchor" href="#exercises"></a>Exercises</h2>
<div class="sectionbody">
<div class="sect2">
<h3 id="exercise-1-two-animations"><a class="anchor" href="#exercise-1-two-animations"></a>Exercise 1: Two Animations</h3>
<div class="paragraph">
<p>Make a mouse click trigger another animation sequence!</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Create a second channel in the controller.</p>
</li>
<li>
<p>Create a new key trigger mapping and action. (see: <a href="hello_input_system.html" class="xref page">Hello Input</a>)</p>
<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>Do you want to find out what animation sequences are available in the model?</p>
</div>
<div class="paragraph">
<p>Use:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">for (String anim : control.getAnimationNames()) {
    System.out.println(anim);
}</code></pre>
</div>
</div>
</td>
</tr>
</table>
</div>
</li>
</ol>
</div>
</div>
<div class="sect2">
<h3 id="exercise-2-revealing-the-skeleton-1"><a class="anchor" href="#exercise-2-revealing-the-skeleton-1"></a>Exercise 2: Revealing the Skeleton (1)</h3>
<div class="paragraph">
<p>Open the <code>skeleton.xml</code> file in a text editor of your choice. You don&#8217;t have to be able to read or write these xml files (Blender does that for you) – but it is good to know how skeletons work. There&#8217;s no magic to it!</p>
</div>
<div class="ulist">
<ul>
<li>
<p>Note how the bones are numbered and named. All names of animated models follow a naming scheme.</p>
</li>
<li>
<p>Note the bone hierarchy that specifies how the bones are connected.</p>
</li>
<li>
<p>Note the list of animations: Each animation has a name, and several tracks. Each track tells individual bones how and when to transform. These animation steps are called keyframes.</p>
</li>
</ul>
</div>
</div>
<div class="sect2">
<h3 id="exercise-3-revealing-the-skeleton-2"><a class="anchor" href="#exercise-3-revealing-the-skeleton-2"></a>Exercise 3: Revealing the Skeleton (2)</h3>
<div class="paragraph">
<p>Add the following import statements for the SkeletonDebugger and Material classes:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">     import com.jme3.scene.debug.SkeletonDebugger;
     import com.jme3.material.Material;</code></pre>
</div>
</div>
<div class="paragraph">
<p>Add the following code snippet to <code>simpleInitApp()</code> to make the bones (that you just read about) visible!</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">     SkeletonDebugger skeletonDebug =
         new SkeletonDebugger("skeleton", control.getSkeleton());
     Material mat = new Material(assetManager, "Common/MatDefs/Misc/Unshaded.j3md");
     mat.setColor("Color", ColorRGBA.Green);
     mat.getAdditionalRenderState().setDepthTest(false);
     skeletonDebug.setMaterial(mat);
     player.attachChild(skeletonDebug);</code></pre>
</div>
</div>
<div class="paragraph">
<p>Can you identify individual bones in the skeleton?</p>
</div>
</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 can load animated models, identify stored animations, and trigger animations by using onAnimCycleDone() and onAnimChange(). You also learned that you can play several animations simultaneously, by starting each in a channel of its own. This could be useful if you ever want to animate the lower and upper part of the characters body independently, for example the legs run, while the arms use a weapon.</p>
</div>
</div>
</div>
<nav class="pagination">
  <span class="prev"><a href="hello_material.html">Hello Material</a></span>
  <span class="next"><a href="hello_picking.html">Hello Picking</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>