Почетна Преглед Помоћ
Пријавите се
java
/
jMonkeyEngine-wiki
огледало од https://github.com/jMonkeyEngine/wiki.git
2
0
Креирај огранак 0
Датотеке Дискусије 0 Вики
Дрво: 035c93e1e8
Гране Ознаке
jMonkeyEngine-w...
/
jme3
/
advanced
/
making_the_camera_follow_a_character.html

making_the_camera_follow_a_character.html 14 KB
Историја Датотека

12345678910111213141516171819202122232425262728293031323334353637383940414243444546 
  1. <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]--><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="generator" content="Asciidoctor 1.5.4"><title>Making the Camera Follow a 3rd-Person Character</title><link rel="stylesheet" href="./asciidoctor.css">
    2. 

  2. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
    3. 

  3. <link rel="stylesheet" href="./coderay-asciidoctor.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css"><link rel="stylesheet" href="/home/travis/build/jMonkeyEngine/wiki/build/asciidoc/html5/jme3/advanced/twemoji-awesome.css"></head><body class="article toc2 toc-left"><div id="header"><div id="toolbar"><a href="https://github.com/jMonkeyEngine/wiki/edit/master/src/docs/asciidoc/jme3/advanced/making_the_camera_follow_a_character.adoc"><i class="fa fa-pencil-square" aria-hidden="true"></i></a><a href="https://github.com/jMonkeyEngine/wiki/new/master/src/docs/asciidoc/jme3/advanced/"><i class="fa fa-plus-square" aria-hidden="true"></i></a><input dir="auto" style="position: relative; vertical-align: top;" spellcheck="false" autocomplete="off" class="searchbox__input aa-input" id="doc-search" name="search" placeholder="Search in the doc" required="required" type="search"></div><h1>Making the Camera Follow a 3rd-Person Character</h1><div class="details"><span class="author" id="author"></span><br><span id="revnumber">version ,</span> <span id="revdate">2016/03/17 20:48</span></div><div id="toc" class="toc2"><div id="toctitle">Table of Contents</div><ul class="sectlevel1"><li><a href="#code-samples">Code Samples</a></li><li><a href="#camera-node">Camera Node</a></li><li><a href="#chase-camera">Chase Camera</a></li><li><a href="#which-to-choose">Which to Choose?</a></li></ul></div></div><div id="content"><div id="preamble"><div class="sectionbody"><div class="paragraph"><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></div>
    4. 

  4. <div class="paragraph"><p>There are two ways how the camera can do that:</p></div>
    5. 

  5. <div class="ulist"><ul><li><p>Registering a chase camera to the player and the input manager.</p></li><li><p>Attaching the camera to the character using a camera node.</p></li></ul></div>
    6. 

  6. <div class="paragraph"><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="../../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-physical character you can use <code>player.move()</code>.</p></div></div></div>
    7. 

  7. <div class="sect1"><h2 id="code-samples">Code Samples</h2><div class="sectionbody"><div class="paragraph"><p>Press the WASD or arrow keys to move. Drag with the left mouse button to rotate.</p></div>
    8. 

  8. <div class="ulist"><ul><li><p><a href="https://github.com/jMonkeyEngine/jmonkeyengine/blob/master/jme3-examples/src/main/java/jme3test/input/TestChaseCamera.java">TestChaseCamera.java</a></p></li><li><p><a href="https://github.com/jMonkeyEngine/jmonkeyengine/blob/master/jme3-examples/src/main/java/jme3test/input/TestCameraNode.java">TestCameraNode.java</a></p></li></ul></div></div></div>
    9. 

  9. <div class="sect1"><h2 id="camera-node">Camera Node</h2><div class="sectionbody"><div class="paragraph"><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></div>
    10. 

  10. <div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="java"><span class="comment">// Disable the default flyby cam</span>
    11. 

  11. flyCam.setEnabled(<span class="predefined-constant">false</span>);
    12. 

  12. <span class="comment">//create the camera Node</span>
    13. 

  13. camNode = <span class="keyword">new</span> CameraNode(<span class="string"><span class="delimiter">&quot;</span><span class="content">Camera Node</span><span class="delimiter">&quot;</span></span>, cam);
    14. 

  14. <span class="comment">//This mode means that camera copies the movements of the target:</span>
    15. 

  15. camNode.setControlDir(ControlDirection.SpatialToCamera);
    16. 

  16. <span class="comment">//Attach the camNode to the target:</span>
    17. 

  17. target.attachChild(camNode);
    18. 

  18. <span class="comment">//Move camNode, e.g. behind and above the target:</span>
    19. 

  19. camNode.setLocalTranslation(<span class="keyword">new</span> Vector3f(<span class="integer">0</span>, <span class="integer">5</span>, -<span class="integer">5</span>));
    20. 

  20. <span class="comment">//Rotate the camNode to look at the target:</span>
    21. 

  21. camNode.lookAt(target.getLocalTranslation(), Vector3f.UNIT_Y);</code></pre></div></div>
    22. 

  22. <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>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></td></tr></table></div>
    23. 

  23. <table class="tableblock frame-all grid-all spread"><colgroup><col style="width: 50%;"><col style="width: 50%;"></colgroup><thead><tr><th class="tableblock halign-left valign-top">Methods</th><th class="tableblock halign-left valign-top">Description</th></tr></thead><tbody><tr><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>setControlDir(ControlDirection.SpatialToCamera)</p></div></div></td><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>User input steers the target spatial, and the camera follows the spatial.<br>
    24. 

  24. The spatial&#8217;s transformation is copied over the camera&#8217;s transformation.<br>
    25. 

  25. Example: Use with <a href="../../jme3/advanced/physics.html">CharacterControl</a>led spatial.</p></div></div></td></tr><tr><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>setControlDir(ControlDirection.CameraToSpatial)</p></div></div></td><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>User input steers the camera, and the target spatial follows the camera.<br>
    26. 

  26. The camera&#8217;s transformation is copied over the spatial&#8217;s transformation. Use with first-person flyCam.</p></div></div></td></tr></tbody></table>
    27. 

  27. <div class="paragraph"><p><strong>Code sample:</strong></p></div>
    28. 

  28. <div class="ulist"><ul><li><p><a href="https://github.com/jMonkeyEngine/jmonkeyengine/blob/master/jme3-examples/src/main/java/jme3test/input/TestCameraNode.java">TestCameraNode.java</a> – Press the WASD or arrow keys to move. Drag with the left mouse button to rotate.</p></li></ul></div></div></div>
    29. 

  29. <div class="sect1"><h2 id="chase-camera">Chase Camera</h2><div class="sectionbody"><div class="paragraph"><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></div>
    30. 

  30. <div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="java"><span class="comment">// Disable the default flyby cam</span>
    31. 

  31. flyCam.setEnabled(<span class="predefined-constant">false</span>);
    32. 

  32. <span class="comment">// Enable a chase cam for this target (typically the player).</span>
    33. 

  33. ChaseCamera chaseCam = <span class="keyword">new</span> ChaseCamera(cam, target, inputManager);
    34. 

  34. chaseCam.setSmoothMotion(<span class="predefined-constant">true</span>);</code></pre></div></div>
    35. 

  35. <table class="tableblock frame-all grid-all spread"><colgroup><col style="width: 50%;"><col style="width: 50%;"></colgroup><thead><tr><th class="tableblock halign-left valign-top">Method</th><th class="tableblock halign-left valign-top">Description</th></tr></thead><tbody><tr><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>setInvertVerticalAxis(true)</p></div></div></td><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>Invert the camera&#8217;s vertical rotation Axis</p></div></div></td></tr><tr><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>setInvertHorizontalAxis(true)</p></div></div></td><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>Invert the camera&#8217;s horizontal rotation Axis</p></div></div></td></tr><tr><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>setTrailingEnabled(true)</p></div></div></td><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>Camera follows the target and flies around and behind when the target moves towards the camera. Trailing only works with smooth motion enabled. (Default)</p></div></div></td></tr><tr><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>setTrailingEnabled(false)</p></div></div></td><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>Camera follows the target, but does not rotate around the target when the target changes direction.</p></div></div></td></tr><tr><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>setSmoothMotion(true)</p></div></div></td><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>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.</p></div></div></td></tr><tr><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>setSmoothMotion(false)</p></div></div></td><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>Disable smooth camera motion. Disabling SmoothMotion also disables trailing.</p></div></div></td></tr><tr><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>setLookAtOffset(Vector3f.UNIT_Y.mult(3))</p></div></div></td><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>Camera looks at a point 3 world units above the target.</p></div></div></td></tr><tr><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>setToggleRotationTrigger(new MouseButtonTrigger(MouseInput.BUTTON_MIDDLE))</p></div></div></td><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>Enable rotation by keeping the middle mouse button pressed (like in Blender). This disables the rotation on right and left mouse button click.</p></div></div></td></tr><tr><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>setToggleRotationTrigger(new MouseButtonTrigger(<br>
    36. 

  36. MouseInput.BUTTON_MIDDLE),<br>
    37. 

  37. new KeyTrigger(KeyInput.KEY_SPACE))</p></div></div></td><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>Activate mutiple triggers for the rotation of the camera, e.g. spacebar and middle mouse button, etc.</p></div></div></td></tr><tr><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>setRotationSensitivity(5f)</p></div></div></td><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>How fast the camera rotates. Use values around &lt;1.0f (all bigger values are ignored).</p></div></div></td></tr></tbody></table>
    38. 

  38. <div class="paragraph"><p><strong>Code sample:</strong></p></div>
    39. 

  39. <div class="ulist"><ul><li><p><a href="https://github.com/jMonkeyEngine/jmonkeyengine/blob/master/jme3-examples/src/main/java/jme3test/input/TestChaseCamera.java">TestChaseCamera.java</a> – Press the WASD or arrow keys to move. Drag with the left mouse button to rotate.</p></li></ul></div></div></div>
    40. 

  40. <div class="sect1"><h2 id="which-to-choose">Which to Choose?</h2><div class="sectionbody"><div class="paragraph"><p>What is the difference of the two code samples above?</p></div>
    41. 

  41. <table class="tableblock frame-all grid-all spread"><colgroup><col style="width: 50%;"><col style="width: 50%;"></colgroup><thead><tr><th class="tableblock halign-left valign-top">CameraNode</th><th class="tableblock halign-left valign-top">ChaseCam</th></tr></thead><tbody><tr><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>Camera follows immediately, flies at same speed as target.</p></div></div></td><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>Camera moves smoothly and accelerates and decelerates, flies more slowly than the target and catches up.</p></div></div></td></tr><tr><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>Camera stays attached to the target at a constant distance.</p></div></div></td><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>Camera orbits the target and approaches slowly.</p></div></div></td></tr><tr><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>Drag-to-Rotate rotates the target and the camera. You always see the target from behind.</p></div></div></td><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>Drag-to-Rotate rotates only the camera. You can see the target from various sides.</p></div></div></td></tr></tbody></table></div></div></div><div id="footer"><div id="footer-text">Version <br>Last updated 2019-12-20 23:30:51 +00:00</div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script><script>docsearch({
    42. 

  42.   apiKey: 'a736b6d93de805e26ec2f49b55013fbd',
    43. 

  43.   indexName: 'jmonkeyengine',
    44. 

  44.   inputSelector: '#doc-search',
    45. 

  45.   debug: false // Set debug to true if you want to inspect the dropdown
    46. 

  46. });</script></body></html>
    47.