Skip to content

Commit

Permalink
Several improvements to "First 3D Game" tutorial
Browse files Browse the repository at this point in the history
This fixes the "Animation > Copy" issue mentioned in
#6744
(see Step 09, around Line 264)

The same issue as above was referenced in
godotengine/godot#60848
and the fix was to use the solution by @riidom

Also, a reference to a button icon has been changed
from "A+" to "A>" per feedback on PR 8460
  • Loading branch information
shane-smith authored and skyace65 committed Feb 14, 2024
1 parent e31543b commit c1c33e7
Show file tree
Hide file tree
Showing 11 changed files with 48 additions and 49 deletions.
2 changes: 0 additions & 2 deletions getting_started/first_3d_game/01.game_setup.rst
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
:article_outdated: True

.. _doc_first_3d_game_game_area:

Setting up the game area
Expand Down
12 changes: 6 additions & 6 deletions getting_started/first_3d_game/02.player_input.rst
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
:article_outdated: True

.. _doc_first_3d_game_player_scene_and_input:

Player scene and input actions
Expand Down Expand Up @@ -72,12 +70,12 @@ It will be the shape the physics engine uses to collide with the environment, so
we want it to better fit the 3D model. Shrink it a bit by dragging the orange
dot in the viewport. My sphere has a radius of about ``0.8`` meters.

Then, move the shape up so its bottom roughly aligns with the grid's plane.
Then, move the collision shape up so its bottom roughly aligns with the grid's plane.

|image4|

You can toggle the model's visibility by clicking the eye icon next to the
``Character`` or the ``Pivot`` nodes.
To make moving the shape easier, you can toggle the model's visibility by clicking
the eye icon next to the ``Character`` or the ``Pivot`` nodes.

|image5|

Expand Down Expand Up @@ -106,7 +104,9 @@ can bind keys to these actions.
|image7|

Godot projects come with some predefined actions designed for user interface
design, which we could use here. But we're defining our own to support gamepads.
design (see above screenshot). These will become visible if you enable the
*Show Built-in Actions* toggle. We could use these here, but instead we're
defining our own to support gamepads. Leave *Show Built-in Actions* disabled.

We're going to name our actions ``move_left``, ``move_right``, ``move_forward``,
``move_back``, and ``jump``.
Expand Down
21 changes: 11 additions & 10 deletions getting_started/first_3d_game/03.player_movement_code.rst
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
:article_outdated: True

.. _doc_first_3d_game_player_movement:

Moving the player with code
Expand All @@ -10,7 +8,8 @@ part to move the character.

Right-click the ``Player`` node and select *Attach Script* to add a new script to
it. In the popup, set the *Template* to *Empty* before pressing the *Create*
button.
button. We set it to *Empty* because we want to write our own code for
player movement.

|image0|

Expand Down Expand Up @@ -365,12 +364,14 @@ Adding a camera

Let's add the camera next. Like we did with our *Player*\ 's *Pivot*, we're
going to create a basic rig. Right-click on the ``Main`` node again and select
*Add Child Node*. Create a new :ref:`Marker3D <class_Marker3D>`, and name it ``CameraPivot``. Select ``CameraPivot`` and add a child node :ref:`Camera3D <class_Camera3D>` to it. Your scene tree should look like this.
*Add Child Node*. Create a new :ref:`Marker3D <class_Marker3D>`, and name it ``CameraPivot``.
Select ``CameraPivot`` and add a child node :ref:`Camera3D <class_Camera3D>` to it.
Your scene tree should look similar to this.

|image3|

Notice the *Preview* checkbox that appears in the top-left when you have the
*Camera* selected. You can click it to preview the in-game camera projection.
Notice the *Preview* checkbox that appears in the top-left of the 3D view when you
have the *Camera* selected. You can click it to preview the in-game camera projection.

|image4|

Expand All @@ -385,13 +386,13 @@ You can also press :kbd:`Ctrl + 2` (:kbd:`Cmd + 2` on macOS).

|image5|

On the bottom view, select your :ref:`Camera3D <class_Camera3D>` and turn on camera Preview by clicking
the checkbox.
On the bottom view, select your :ref:`Camera3D <class_Camera3D>` and turn on camera
Preview by clicking the checkbox.

|image6|

In the top view, move the camera about ``19`` units on the Z axis (the blue
one).
In the top view, make sure your *Camera3D* is selected and move the camera about
``19`` units on the Z axis (drag the blue arrow).

|image7|

Expand Down
2 changes: 0 additions & 2 deletions getting_started/first_3d_game/04.mob_scene.rst
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
:article_outdated: True

.. _doc_first_3d_game_designing_the_mob_scene:

Designing the mob scene
Expand Down
4 changes: 2 additions & 2 deletions getting_started/first_3d_game/05.spawning_mobs.rst
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
:article_outdated: True

.. _doc_first_3d_game_spawning_monsters:

Spawning monsters
Expand All @@ -20,6 +18,8 @@ Go to *Project -> Project Settings*.

|image1|

If you still have *Input Map* open, switch to the *General* tab.

In the left menu, navigate down to *Display -> Window*. On the right, set the
*Width* to ``720`` and the *Height* to ``540``.

Expand Down
2 changes: 0 additions & 2 deletions getting_started/first_3d_game/06.jump_and_squash.rst
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
:article_outdated: True

.. _doc_first_3d_game_jumping_and_squashing_monsters:

Jumping and squashing monsters
Expand Down
7 changes: 4 additions & 3 deletions getting_started/first_3d_game/07.killing_player.rst
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
:article_outdated: True

.. _doc_first_3d_game_killing_the_player:

Killing the player
Expand Down Expand Up @@ -115,7 +113,7 @@ the character should die when an enemy runs into the collider. Note that without
Vector3 playerPosition = GetNode<Player>("Player").Position;


gives error because there is no $Player!
gives an error because there is no $Player!

Also note that the enemy colliding with the player and dying depends on the size and position of the
``Player`` and the ``Mob``\ 's collision shapes. You may need to move them
Expand Down Expand Up @@ -152,6 +150,9 @@ Get the timer, and stop it, in the ``_on_player_hit()`` function.
If you try the game now, the monsters will stop spawning when you die,
and the remaining ones will leave the screen.

Notice also that the game no longer crashes or displays an error when the player dies. Because
we are stopping the MobTimer, it no longer triggers the ``_on_mob_timer_timeout()`` function.

You can pat yourself in the back: you prototyped a complete 3D game,
even if it's still a bit rough.

Expand Down
12 changes: 5 additions & 7 deletions getting_started/first_3d_game/08.score_and_replay.rst
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
:article_outdated: True

.. _doc_first_3d_game_score_and_replay:

Score and replay
Expand All @@ -12,8 +10,7 @@ We have to keep track of the current score in a variable and display it on
screen using a minimal interface. We will use a text label to do that.

In the main scene, add a new child node :ref:`Control <class_Control>` to ``Main`` and name it
``UserInterface``. You will automatically be taken to the 2D screen, where you can
edit your User Interface (UI).
``UserInterface``. Ensure you are on the 2D screen, where you can edit your User Interface (UI).

Add a :ref:`Label <class_Label>` node and name it ``ScoreLabel``

Expand Down Expand Up @@ -54,16 +51,17 @@ of how all the built-in UI widgets will look with your theme resource.

|image6|

By default, a theme only has one property, the *Default Font*.
By default, a theme only has a few properties: *Default Base Scale*, *Default Font*
and *Default Font Size*.

.. seealso::

You can add more properties to the theme resource to design complex user
interfaces, but that is beyond the scope of this series. To learn more about
creating and editing themes, see :ref:`doc_gui_skinning`.

This one expects a font file like the ones you have on your computer. Two common
font file formats are TrueType Font (TTF) and OpenType Font (OTF).
The *Default Font* expects a font file like the ones you have on your computer.
Two common font file formats are TrueType Font (TTF) and OpenType Font (OTF).

In the *FileSystem* dock, expand the ``fonts`` directory and click and drag the
``Montserrat-Medium.ttf`` file we included in the project onto the *Default Font*.
Expand Down
32 changes: 20 additions & 12 deletions getting_started/first_3d_game/09.adding_animations.rst
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
:article_outdated: True

.. _doc_first_3d_game_character_animation:

Character animation
Expand Down Expand Up @@ -45,7 +43,7 @@ time in seconds.
We want the animation to start playback automatically at the start of the game.
Also, it should loop.

To do so, you can click the button with an "A+" icon in the animation toolbar
To do so, you can click the button with an "A>" icon in the animation toolbar
and the looping arrows, respectively.

|image5|
Expand Down Expand Up @@ -104,7 +102,11 @@ timeline.

|timeline_05_click|

In the *Inspector*, set the *Position*'s *Y* axis to ``0.65`` meters and the *Rotation*' *X* axis to ``8``.
In the *Inspector*, set the *Position*'s *Y* axis to ``0.65`` meters and the
*Rotation*' *X* axis to ``8``.

If you don't see the properties in the *Inspector* panel, first click on the
``Character`` node again in the *Scene* dock.

|image13|

Expand Down Expand Up @@ -259,16 +261,22 @@ node structure, you can copy them to different scenes.
For example, both the ``Mob`` and the ``Player`` scenes have a ``Pivot`` and a
``Character`` node, so we can reuse animations between them.

Open the *Player* scene, select the AnimationPlayer node and open the "float"
animation. Next, click on **Animation > Copy**. Then open ``mob.tscn``,
create an AnimationPlayer child node and select it. Click **Animation > Paste**
and make sure that the button with an "A+" icon (Autoplay on Load) and the
looping arrows (Animation looping) are also turned on in the animation editor
in the bottom panel. That's it; all monsters will now play the float animation.
Open the *Player* scene, select the AnimationPlayer node and then click on
**Animation > Manage Animations...**. Click the *Copy animation to clipboard* button
(two small squares) alongside the *float* animation. Click OK to close the window.

Then open ``mob.tscn``, create an :ref:`AnimationPlayer <class_AnimationPlayer>` child
node and select it. Click **Animation > Manage Animations**, then **Add Library**. You
should see the message "Global library will be created." Leave the text field blank and
click OK. Click the *Paste* icon (clipboard) and it should appear in the window. Click OK
to close the window.

Next, make sure that the button with an "A>" icon (Autoplay on Load) and the looping
arrows (Animation looping) are also turned on in the animation editor in the bottom panel.
That's it; all monsters will now play the float animation.

We can change the playback speed based on the creature's ``random_speed``. Open
the *Mob*'s script and at the end of the ``initialize()`` function, add the
following line.
the *Mob*'s script and at the end of the ``initialize()`` function, add the following line.

.. tabs::
.. code-tab:: gdscript GDScript
Expand Down
2 changes: 0 additions & 2 deletions getting_started/first_3d_game/going_further.rst
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
:article_outdated: True

.. _doc_first_3d_game_going_further:

Going further
Expand Down
1 change: 0 additions & 1 deletion getting_started/first_3d_game/index.rst
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
:allow_comments: False
:article_outdated: True

.. _doc_your_first_3d_game:

Expand Down

0 comments on commit c1c33e7

Please sign in to comment.