|
| 1 | + |
| 2 | +# Creating the player scene |
| 3 | + |
| 4 | +With the project settings in place, we can start working on the |
| 5 | +player-controlled character. |
| 6 | + |
| 7 | +The first scene will define the ``Player`` object. One of the benefits of |
| 8 | +creating a separate Player scene is that we can test it separately, even before |
| 9 | +we've created other parts of the game. |
| 10 | + |
| 11 | +## Node structure |
| 12 | + |
| 13 | +To begin, we need to choose a root node for the player object. As a general |
| 14 | +rule, a scene's root node should reflect the object's desired functionality - |
| 15 | +what the object *is*. In the upper-left corner, in the "Scene" tab, click the |
| 16 | +"Other Node" button and add an [Area2D](/docs/Classes/Area2D) node to the scene. |
| 17 | + |
| 18 | + |
| 19 | + |
| 20 | +When you add the ``Area2D`` node, Godot will display the following **warning icon** |
| 21 | +next to it in the scene tree: |
| 22 | + |
| 23 | + |
| 24 | + |
| 25 | +This warning tells us that the ``Area2D`` node requires a shape to detect collisions or overlaps. |
| 26 | +We can **ignore the warning temporarily** because we will first set up the player's visuals |
| 27 | +(using an animated sprite). Once the visuals are ready, we will add a collision shape as a child |
| 28 | +node. This will allow us to accurately size and position the shape based on the sprite's appearance. |
| 29 | + |
| 30 | +With ``Area2D`` we can detect objects that overlap or run into the player. |
| 31 | +Change the node's name to ``Player`` by double-clicking on it. Now that we've |
| 32 | +set the scene's root node, we can add additional nodes to give it more |
| 33 | +functionality. |
| 34 | + |
| 35 | +Before we add any children to the ``Player`` node, we want to make sure we don't |
| 36 | +accidentally move or resize them by clicking on them. Select the node and click |
| 37 | +the icon to the right of the lock. Its tooltip says "Groups the selected node |
| 38 | +with its children. This causes the parent to be selected when any child |
| 39 | +node is clicked in 2D and 3D view." |
| 40 | + |
| 41 | + |
| 42 | + |
| 43 | +Save the scene as ``player.tscn``. Click **Scene > Save**, or press `Ctrl + S` |
| 44 | +on Windows/Linux or `Cmd + S` on macOS. |
| 45 | + |
| 46 | +:::note |
| 47 | +For this project, we will be following the Godot naming conventions. |
| 48 | +- **GDScript**: Classes (nodes) use PascalCase, variables and |
| 49 | + functions use snake_case, and constants use ALL_CAPS (See |
| 50 | + [doc_gdscript_styleguide](doc_gdscript_styleguide)). |
| 51 | + |
| 52 | +- **C#**: Classes, export variables and methods use PascalCase, |
| 53 | + private fields use _camelCase, local variables and parameters use |
| 54 | + camelCase (See [doc_c_sharp_styleguide](doc_c_sharp_styleguide)). Be careful to type |
| 55 | + the method names precisely when connecting signals. |
| 56 | + |
| 57 | +::: |
| 58 | + |
| 59 | +## Sprite animation |
| 60 | + |
| 61 | +Click on the ``Player`` node and add (`Ctrl + A` on Windows/Linux or |
| 62 | +`Cmd + A` on macOS) a child node :ref:`AnimatedSprite2D |
| 63 | +<class_AnimatedSprite2D>`. The ``AnimatedSprite2D`` will handle the |
| 64 | +appearance and animations for our player. Notice that there is a warning symbol |
| 65 | +next to the node. An ``AnimatedSprite2D`` requires a :ref:`SpriteFrames |
| 66 | +<class_SpriteFrames>` resource, which is a list of the animations it can |
| 67 | +display. Make sure ``AnimatedSprite2D`` is selected and then find the ``Sprite Frames`` property under |
| 68 | +the ``Animation`` section in the Inspector and click "[empty]" -> "New SpriteFrames": |
| 69 | + |
| 70 | + |
| 71 | + |
| 72 | +Click on the ``SpriteFrames`` you just created to open the "SpriteFrames" panel: |
| 73 | + |
| 74 | + |
| 75 | + |
| 76 | +On the left is a list of animations. Click the ``default`` one and rename it to |
| 77 | +``walk``. Then click the **Add Animation** button to create a second animation |
| 78 | +named ``up``. |
| 79 | + |
| 80 | +Find the player images in the FileSystem dock - they're in the ``art`` folder |
| 81 | +you unzipped earlier. Drag the two images for each animation, into the |
| 82 | +**Animation Frames** side of the panel for the corresponding animation: |
| 83 | + |
| 84 | +- ``playerGrey_walk1`` and ``playerGrey_walk2`` for the ``walk`` animation |
| 85 | +- ``playerGrey_up1`` and ``playerGrey_up2`` for the ``up`` animation |
| 86 | + |
| 87 | + |
| 88 | + |
| 89 | +The player images are a bit too large for the game window, so we need to scale |
| 90 | +them down. Click on the ``AnimatedSprite2D`` node and set the ``Scale`` property |
| 91 | +to ``(0.5, 0.5)``. You can find it in the Inspector under the ``Node2D`` |
| 92 | +heading. |
| 93 | + |
| 94 | + |
| 95 | + |
| 96 | +Finally, add a [CollisionShape2D](/docs/Classes/CollisionShape2D) as a child of |
| 97 | +``Player``. This will determine the player's "hitbox", or the bounds of its |
| 98 | +collision area. For this character, a ``CapsuleShape2D`` node gives the best |
| 99 | +fit, so next to "Shape" in the Inspector, click "[empty]" -> "New |
| 100 | +CapsuleShape2D". Using the two size handles, resize the shape to cover the |
| 101 | +sprite: |
| 102 | + |
| 103 | + |
| 104 | + |
| 105 | +When you're finished, your ``Player`` scene should look like this: |
| 106 | + |
| 107 | + |
| 108 | + |
| 109 | +Once this is done, the warning on the ``Area2D`` node will disappear, as it now has |
| 110 | +a shape assigned and can interact with other objects. |
| 111 | + |
| 112 | +Make sure to save the scene again after these changes. |
| 113 | + |
| 114 | +In the next part, we'll add a script to the player node to move and animate it. |
| 115 | +Then, we'll set up collision detection to know when the player got hit by |
| 116 | +something. |
0 commit comments