02.player_input.rst 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. :article_outdated: True
  2. .. _doc_first_3d_game_player_scene_and_input:
  3. Player scene and input actions
  4. ==============================
  5. In the next two lessons, we will design the player scene, register custom input
  6. actions, and code player movement. By the end, you'll have a playable character
  7. that moves in eight directions.
  8. .. TODO: add player animated gif?
  9. .. player_movement.gif
  10. Create a new scene by going to the Scene menu in the top-left and clicking *New
  11. Scene*.
  12. |image0|
  13. Create a :ref:`CharacterBody3D <class_CharacterBody3D>` node as the root
  14. .. image:: img/02.player_input/add_character_body3D.webp
  15. Name the :ref:`CharacterBody3D <class_CharacterBody3D>` to ``Player``.
  16. Character bodies are complementary to the area and rigid bodies used in the 2D
  17. game tutorial. Like rigid bodies, they can move and collide with the
  18. environment, but instead of being controlled by the physics engine, **you** dictate
  19. their movement. You will see how we use the node's unique features when we code
  20. the jump and squash mechanics.
  21. .. seealso::
  22. To learn more about the different physics node types, see the
  23. :ref:`doc_physics_introduction`.
  24. For now, we're going to create a basic rig for our character's 3D model. This
  25. will allow us to rotate the model later via code while it plays an animation.
  26. Add a :ref:`Node3D <class_Node3D>` node as a child of ``Player`` and name it ``Pivot``
  27. .. image:: img/02.player_input/adding_node3D.webp
  28. Then, in the FileSystem dock, expand the ``art/`` folder
  29. by double-clicking it and drag and
  30. drop ``player.glb`` onto ``Pivot``.
  31. |image1|
  32. This should instantiate the model as a child of ``Pivot``.
  33. You can rename it to ``Character``.
  34. |image2|
  35. .. note::
  36. The ``.glb`` files contain 3D scene data based on the open source GLTF 2.0
  37. specification. They're a modern and powerful alternative to a proprietary format
  38. like FBX, which Godot also supports. To produce these files, we designed the
  39. model in `Blender 3D <https://www.blender.org/>`__ and exported it to GLTF.
  40. As with all kinds of physics nodes, we need a collision shape for our character
  41. to collide with the environment. Select the ``Player`` node again and add a child node
  42. :ref:`CollisionShape3D <class_CollisionShape3D>`. In the *Inspector*, on the *Shape* property, add a new :ref:`SphereShape3D <class_SphereShape3D>`.
  43. .. image:: img/02.player_input/add_capsuleshape3d.webp
  44. The sphere's wireframe appears below the character.
  45. |image3|
  46. It will be the shape the physics engine uses to collide with the environment, so
  47. we want it to better fit the 3D model. Shrink it a bit by dragging the orange
  48. dot in the viewport. My sphere has a radius of about ``0.8`` meters.
  49. Then, move the shape up so its bottom roughly aligns with the grid's plane.
  50. |image4|
  51. You can toggle the model's visibility by clicking the eye icon next to the
  52. ``Character`` or the ``Pivot`` nodes.
  53. |image5|
  54. Save the scene as ``player.tscn``
  55. With the nodes ready, we can almost get coding. But first, we need to define
  56. some input actions.
  57. Creating input actions
  58. ----------------------
  59. To move the character, we will listen to the player's input, like pressing the
  60. arrow keys. In Godot, while we could write all the key bindings in code, there's
  61. a powerful system that allows you to assign a label to a set of keys and
  62. buttons. This simplifies our scripts and makes them more readable.
  63. This system is the Input Map. To access its editor, head to the *Project* menu
  64. and select *Project Settings*.
  65. |image6|
  66. At the top, there are multiple tabs. Click on *Input Map*. This window allows
  67. you to add new actions at the top; they are your labels. In the bottom part, you
  68. can bind keys to these actions.
  69. |image7|
  70. Godot projects come with some predefined actions designed for user interface
  71. design, which we could use here. But we're defining our own to support gamepads.
  72. We're going to name our actions ``move_left``, ``move_right``, ``move_forward``,
  73. ``move_back``, and ``jump``.
  74. To add an action, write its name in the bar at the top and press Enter.
  75. |image8|
  76. Create the following five actions:
  77. |image9|
  78. To bind a key or button to an action, click the "+" button to its right. Do this
  79. for ``move_left``. Press the left arrow key and click *OK*.
  80. .. image:: img/02.player_input/left_inputmap.webp
  81. Bind also the :kbd:`A` key, onto the action ``move_left``.
  82. |image12|
  83. Let's now add support for a gamepad's left joystick. Click the "+" button again
  84. but this time, select *Manual Selection -> Joypad Axes*.
  85. .. image:: img/02.player_input/joystick_axis_input.webp
  86. Select the negative X axis of the left joystick.
  87. .. image:: img/02.player_input/left_joystick_select.webp
  88. Leave the other values as default and press *OK*
  89. .. note::
  90. If you want controllers to have different input actions, you should use the Devices option in Additional Options. Device 0 corresponds to the first plugged gamepad, Device 1 corresponds to the second plugged gamepad, and so on.
  91. Do the same for the other input actions. For example, bind the right arrow, D,
  92. and the left joystick's positive axis to ``move_right``. After binding all keys,
  93. your interface should look like this.
  94. |image15|
  95. The final action to set up is the ``jump`` action. Bind the Space key and the gamepad's
  96. A button.
  97. |image16|
  98. Your jump input action should look like this.
  99. |image18|
  100. That's all the actions we need for this game. You can use this menu to label any
  101. groups of keys and buttons in your projects.
  102. In the next part, we'll code and test the player's movement.
  103. .. |image0| image:: img/02.player_input/01.new_scene.png
  104. .. |image1| image:: img/02.player_input/02.instantiating_the_model.webp
  105. .. |image2| image:: img/02.player_input/03.scene_structure.png
  106. .. |image3| image:: img/02.player_input/04.sphere_shape.png
  107. .. |image4| image:: img/02.player_input/05.moving_the_sphere_up.png
  108. .. |image5| image:: img/02.player_input/06.toggling_visibility.webp
  109. .. |image6| image:: img/02.player_input/07.project_settings.png
  110. .. |image7| image:: img/02.player_input/07.input_map_tab.png
  111. .. |image8| image:: img/02.player_input/07.adding_action.webp
  112. .. |image9| image:: img/02.player_input/08.actions_list_empty.png
  113. .. |image11| image:: img/02.player_input/09.keyboard_key_popup.png
  114. .. |image12| image:: img/02.player_input/09.keyboard_keys.png
  115. .. |image15| image:: img/02.player_input/12.move_inputs_mapped.webp
  116. .. |image16| image:: img/02.player_input/13.joy_button_option.webp
  117. .. |image17| image:: img/02.player_input/14.add_jump_button.png
  118. .. |image18| image:: img/02.player_input/14.jump_input_action.webp