Your first game¶
This tutorial will guide you through making your first Godot project. You will learn how the Godot editor works, how to structure a project, and how to build a 2D game.
This project is an introduction to the Godot engine. It assumes that you have some programming experience already. If you’re new to programming entirely, you should start here: Scripting.
The game is called “Dodge the Creeps!”. Your character must move and avoid the enemies for as long as possible. Here is a preview of the final result:
Why 2D? 3D games are much more complex than 2D ones. You should stick to 2D until you have a good understanding of the game development process.
Launch Godot and create a new project. Then, download
dodge_assets.zip - the images and sounds you’ll be
using to make the game. Unzip these files to your project folder.
For this tutorial, we will assume you are familiar with the editor. If you haven’t read Scenes and nodes, do so now for an explanation of setting up a project and using the editor.
This game will use portrait mode, so we need to adjust the size of the
game window. Click on Project -> Project Settings -> Display -> Window and
set “Width” to
480 and “Height” to
Organizing the project¶
In this project, we will make 3 independent scenes:
HUD, which we will combine into the game’s
scene. In a larger project, it might be useful to make folders to hold
the various scenes and their scripts, but for this relatively small
game, you can save your scenes and scripts in the project’s root folder,
referred to as
res://. You can see your project folders in the FileSystem
Dock in the lower left corner:
The first scene we will make defines the
Player object. One of the benefits
of creating a separate Player scene is that we can test it separately, even
before we’ve created other parts of the game.
To begin, click the “Add/Create a New Node” button and add an Area2D node to the scene.
Area2D we can detect objects that overlap or run into the player.
Change its name to
Player by clicking on the node’s name.
This is the scene’s root node. We can add additional nodes to the player to add
Before we add any children to the
Player node, we want to make sure we don’t
accidentally move or resize them by clicking on them. Select the node and
click the icon to the right of the lock; its tooltip says “Makes sure the object’s children
are not selectable.”
Save the scene. Click Scene -> Save, or press
Ctrl+S on Windows/Linux or
Command+S on Mac.
For this project, we will be following the Godot naming conventions.
- GDScript: Classes (nodes) use PascalCase, variables and functions use snake_case, and constants use ALL_CAPS (See GDScript style guide).
- C#: Classes, export variables and methods use PascalCase, private fields use _camelCase, local variables and parameters use camelCase (See C# style guide). Be careful to type the method names precisely when connecting signals.
Click on the
Player node and add an AnimatedSprite node as a
AnimatedSprite will handle the appearance and animations
for our player. Notice that there is a warning symbol next to the node.
AnimatedSprite requires a SpriteFrames resource, which is a
list of the animations it can display. To create one, find the
Frames property in the Inspector and click “[empty]” ->
“New SpriteFrames”. This should automatically open the SpriteFrames panel.
On the left is a list of animations. Click the “default” one and rename
it to “right”. Then click the “Add” button to create a second animation
named “up”. Drag the two images for each animation, named
into the “Animation Frames” side of the panel:
The player images are a bit too large for the game window, so we need to
scale them down. Click on the
AnimatedSprite node and set the
(0.5, 0.5). You can find it in the Inspector under the
Finally, add a CollisionShape2D as a child
Player. This will determine the player’s “hitbox”, or the
bounds of its collision area. For this character, a
node gives the best fit, so next to “Shape” in the Inspector, click
“[empty]”” -> “New CapsuleShape2D”. Using the two size handles, resize the
shape to cover the sprite:
When you’re finished, your
Player scene should look like this:
Moving the player¶
Now we need to add some functionality that we can’t get from a built-in
node, so we’ll add a script. Click the
Player node and click the
“Add Script” button:
In the script settings window, you can leave the default settings alone. Just click “Create”:
If you’re creating a C# script or other languages, select the language from the language drop down menu before hitting create.
If this is your first time encountering GDScript, please read Scripting before continuing.
Start by declaring the member variables this object will need:
export keyword on the first variable
speed allows us to
set its value in the Inspector. This can be handy for values that you
want to be able to adjust just like a node’s built-in properties. Click on
Player node and you’ll see the property now appears in the “Script
Variables” section of the Inspector. Remember, if you change the value here, it
will override the value written in the script.
If you’re using C#, you need to (re)build the project assemblies whenever you want to see new export variables or signals. This build can be manually triggered by clicking the word “Mono” at the bottom of the editor window to reveal the Mono Panel, then clicking the “Build Project” button.
_ready() function is called when a node enters the scene tree,
which is a good time to find the size of the game window:
Now we can use the
_process() function to define what the player will do.
_process() is called every frame, so we’ll use it to update
elements of our game, which we expect will change often. For the player, we
need to do the following:
- Check for input.
- Move in the given direction.
- Play the appropriate animation.
First, we need to check for input - is the player pressing a key? For this game, we have 4 direction inputs to check. Input actions are defined in the Project Settings under “Input Map”. Here, you can define custom events and assign different keys, mouse events, or other inputs to them. For this demo, we will use the default events that are assigned to the arrow keys on the keyboard.
You can detect whether a key is pressed using
Input.is_action_pressed(), which returns
true if it is pressed
false if it isn’t.
We start by setting the
(0, 0) - by default the player
should not be moving. Then we check each input and add/subtract from the
velocity to obtain a total direction. For example, if you hold
down at the same time, the resulting
velocity vector will be
(1, 1). In this case, since we’re adding a horizontal and a vertical
movement, the player would move faster than if it just moved horizontally.
We can prevent that if we normalize the velocity, which means we set
its length to
1, and multiply by the desired speed. This means no
more fast diagonal movement.
If you’ve never used vector math before, or need a refresher, you can see an explanation of vector usage in Godot at Vector math. It’s good to know but won’t be necessary for the rest of this tutorial.
We also check whether the player is moving so we can start or stop the AnimatedSprite animation.
$ returns the node at the relative path from the current node, or returns
null if the node is not found.
Since AnimatedSprite is a child of the current node, we can use
$ is shorthand for
So in the code above,
$AnimatedSprite.play() is the same as
Now that we have a movement direction, we can update the player’s position. We
can also use
clamp() to prevent it from leaving the screen. Clamping a value
means restricting it to a given range. Add the following to the bottom of
The delta parameter in the _process() function refers to the frame length - the amount of time that the previous frame took to complete. Using this value ensures that your movement will remain consistent even if the frame rate changes.
Click “Play Scene” (
F6) and confirm you can move the player
around the screen in all directions. The console output that opens upon playing
the scene can be closed by clicking
Output (which should be highlighted in
blue) in the lower left of the Bottom Panel.
If you get an error in the “Debugger” panel that refers to a “null instance”,
this likely means you spelled the node name wrong. Node names are case-sensitive
get_node("NodeName") must match the name you see in the scene tree.
Now that the player can move, we need to change which animation the
AnimatedSprite is playing based on direction. We have a “right”
animation, which should be flipped horizontally using the
property for left movement, and an “up” animation, which should be
flipped vertically with
flip_v for downward movement.
Let’s place this code at the end of our
The boolean assignments in the code above are a common shorthand for programmers. Consider this code versus the shortened boolean assignment above:
Play the scene again and check that the animations are correct in each
of the directions. When you’re sure the movement is working correctly,
add this line to
_ready(), so the player will be hidden when the game
Preparing for collisions¶
Player to detect when it’s hit by an enemy, but we haven’t
made any enemies yet! That’s OK, because we’re going to use Godot’s
signal functionality to make it work.
Add the following at the top of the script, after
This defines a custom signal called “hit” that we will have our player
emit (send out) when it collides with an enemy. We will use
detect the collision. Select the
Player node and click the “Node” tab
next to the Inspector tab to see the list of signals the player can emit:
Notice our custom “hit” signal is there as well! Since our enemies are
going to be
RigidBody2D nodes, we want the
body_entered( Object body ) signal; this will be emitted when a
body contacts the player. Click “Connect..” and then “Connect” again on
the “Connecting Signal” window. We don’t need to change any of these
settings - Godot will automatically create a function in your player’s script.
This function will be called whenever the signal is emitted - it handles the
When connecting a signal, instead of having Godot create a function for you, you can also give the name of an existing function that you want to link the signal to.
Add this code to the function:
Each time an enemy hits the player, the signal is going to be emitted. We need
to disable the player’s collision so that we don’t trigger the
more than once.
Disabling the area’s collision shape can cause an error if it happens
in the middle of the engine’s collision processing. Using
allows us to have Godot wait to disable the shape until it’s safe to
The last piece for our player is to add a function we can call to reset the player when starting a new game.
Now it’s time to make the enemies our player will have to dodge. Their behavior will not be very complex: mobs will spawn randomly at the edges of the screen and move in a random direction in a straight line, then despawn when they go offscreen.
We will build this into a
Mob scene, which we can then instance to
create any number of independent mobs in the game.
Click Scene -> New Scene and we’ll create the Mob.
The Mob scene will use the following nodes:
Don’t forget to set the children so they can’t be selected, like you did with the Player scene.
In the RigidBody2D properties, set
Gravity Scale to
the mob will not fall downward. In addition, under the
PhysicsBody2D section, click the
Mask property and
uncheck the first box. This will ensure the mobs do not collide with each other.
Set up the AnimatedSprite like you did for the player.
This time, we have 3 animations:
walk. Set the
property in the Inspector to “On” and adjust the “Speed (FPS)” setting as shown below.
We’ll select one of these animations randomly so that the mobs will have some variety.
fly should be set to 3 FPS, with
walk set to 4 FPS.
Like the player images, these mob images need to be scaled down. Set the
Scale property to
As in the
Player scene, add a
CapsuleShape2D for the
collision. To align the shape with the image, you’ll need to set the
Rotation Degrees property to
Add a script to the
Mob and add the following member variables:
When we spawn a mob, we’ll pick a random value between
max_speed for how fast each mob will move (it would be boring if they
were all moving at the same speed). We also have an array containing the names
of the three animations, which we’ll use to select a random one. Make sure
you’ve spelled these the same in the script and in the SpriteFrames resource.
Now let’s look at the rest of the script. In
_ready() we randomly
choose one of the three animation types:
You must use
randomize() if you want
your sequence of “random” numbers to be different every time you run
the scene. We’re going to use
randomize() in our
so we won’t need it here.
randi() % n is the standard way to get
a random integer between
The last piece is to make the mobs delete themselves when they leave the
screen. Connect the
screen_exited() signal of the
node and add this code:
This completes the Mob scene.
Now it’s time to bring it all together. Create a new scene and add a
Main. Click the “Instance” button and select your
See Instancing to learn more about instancing.
Now, add the following nodes as children of
Main, and name them as
shown (values are in seconds):
- Timer (named
MobTimer) - to control how often mobs spawn
- Timer (named
ScoreTimer) - to increment the score every second
- Timer (named
StartTimer) - to give a delay before starting
- Position2D (named
StartPosition) - to indicate the player’s start position
Wait Time property of each of the
Timer nodes as
In addition, set the
One Shot property of
StartTimer to “On” and
Position of the
StartPosition node to
The Main node will be spawning new mobs, and we want them to appear at a
random location on the edge of the screen. Add a Path2D node named
MobPath as a child of
Main. When you select
you will see some new buttons at the top of the editor:
Select the middle one (“Add Point”) and draw the path by clicking to add the points at the corners shown. To have the points snap to the grid, make sure “Snap to Grid” is checked. This option can be found under the “Snapping options” button to the left of the “Lock” button, appearing as a series of three vertical dots.
Draw the path in clockwise order, or your mobs will spawn pointing outwards instead of inwards!
After placing point
4 in the image, click the “Close Curve” button and
your curve will be complete.
Now that the path is defined, add a PathFollow2D
node as a child of
MobPath and name it
MobSpawnLocation. This node will
automatically rotate and follow the path as it moves, so we can use it
to select a random position and direction along the path.
Add a script to
Main. At the top of the script, we use
export (PackedScene) to allow us to choose the Mob scene we want to
Mob.tscn from the “FileSystem” panel and drop it in the
Mob property under the Script Variables of the
Next, click on the Player and connect the
hit signal. We want to make a
new function named
game_over, which will handle what needs to happen when a
game ends. Type “game_over” in the “Method In Node” box at the bottom of the
“Connecting Signal” window. Add the following code, as well as a
function to set everything up for a new game:
Now connect the
timeout() signal of each of the Timer nodes (
MobTimer) to the main script.
StartTimer will start
the other two timers.
ScoreTimer will increment the score by 1.
_on_MobTimer_timeout(), we will create a mob instance, pick a
random starting location along the
Path2D, and set the mob in
PathFollow2D node will automatically rotate as it
follows the path, so we will use that to select the mob’s direction as
well as its position.
Note that a new instance must be added to the scene using
Now click on
MobTimer in the scene window then head to inspector window,
switch to node view then click on
timeout() and connect the signal.
Add the following code:
In functions requiring angles, GDScript uses radians,
not degrees. If you’re more comfortable working with
degrees, you’ll need to use the
rad2deg() functions to convert between the two.
The final piece our game needs is a UI: an interface to display things
like score, a “game over” message, and a restart button. Create a new
scene, and add a CanvasLayer node named
HUD. “HUD” stands for
“heads-up display”, an informational display that appears as an
overlay on top of the game view.
The CanvasLayer node lets us draw our UI elements on a layer above the rest of the game, so that the information it displays isn’t covered up by any game elements like the player or mobs.
The HUD displays the following information:
- Score, changed by
- A message, such as “Game Over” or “Get Ready!”
- A “Start” button to begin the game.
Create the following as children of the
- Label named
- Label named
- Button named
- Timer named
Click on the
ScoreLabel and type a number into the Text field in the
Inspector. The default font for
Control nodes is small and doesn’t scale
well. There is a font file included in the game assets called
“Xolonium-Regular.ttf”. To use this font, do the following for each of
- Under “Custom Fonts”, choose “New DynamicFont”
- Click on the “DynamicFont” you added, and under “Font/Font Data”,
choose “Load” and select the “Xolonium-Regular.ttf” file. You must
also set the font’s
Size. A setting of
Anchors and Margins:
Control nodes have a position and size,
but they also have anchors and margins. Anchors define the
origin - the reference point for the edges of the node. Margins
update automatically when you move or resize a control node. They
represent the distance from the control node’s edges to its anchor.
See Design interfaces with the Control nodes for more details.
Arrange the nodes as shown below. Click the “Layout” button to set a Control node’s layout:
You can drag the nodes to place them manually, or for more precise placement, use the following settings:
- Text :
- Layout : “Top Wide”
- Align : “Center”
- Text :
Dodge the Creeps!
- Layout : “HCenter Wide”
- Align : “Center”
- Autowrap : “On”
Connecting HUD to Main¶
Now that we’re done creating the
HUD scene, save it and go back to
HUD scene in
Main like you did the
Player scene, and
place it at the bottom of the tree. The full tree should look like this,
so make sure you didn’t miss anything:
Now we need to connect the
HUD functionality to our
This requires a few additions to the
In the Node tab, connect the HUD’s
start_game signal to the
new_game(), update the score display and show the “Get Ready”
game_over() we need to call the corresponding
Finally, add this to
_on_ScoreTimer_timeout() to keep the display in
sync with the changing score:
Now you’re ready to play! Click the “Play the Project” button. You will
be asked to select a main scene, so choose
Removing old creeps¶
If you play until “Game Over” and then start a new game the creeps from the previous game are still on screen. It would be better if they all disappeared at the start of a new game.
We’ll use the
start_game signal that’s already being emitted by the
node to remove the remaining creeps. We can’t use the editor to connect the
signal to the mobs in the way we need because there are no
Mob nodes in the
Main scene tree until we run the game. Instead we’ll use code.
Start by adding a new function to
queue_free() will delete the
current node at the end of the current frame.
Main.gd add a new line inside the
at the end.
This line tells the new Mob node (referenced by the
mob variable) to respond
start_game signal emitted by the
HUD node by running its
We have now completed all the functionality for our game. Below are some remaining steps to add a bit more “juice” to improve the game experience. Feel free to expand the gameplay with your own ideas.
The default gray background is not very appealing, so let’s change its
color. One way to do this is to use a ColorRect node.
Make it the first node under
Main so that it will be drawn behind the other
ColorRect only has one property:
Color. Choose a color
you like and drag the size of the
ColorRect so that it covers the
You could also add a background image, if you have one, by using a
Sound and music can be the single most effective way to add appeal to the game experience. In your game assets folder, you have two sound files: “House In a Forest Loop.ogg” for background music, and “gameover.wav” for when the player loses.
Add two AudioStreamPlayer nodes as children of
Main. Name one of
Music and the other
DeathSound. On each one, click on the
Stream property, select “Load”, and choose the corresponding audio
To play the music, add
$Music.play() in the
$Music.stop() in the
$DeathSound.play() in the
Since the game is played with keyboard controls, it would be convenient if we
could also start the game by pressing a key on the keyboard. One way to do this
is using the “Shortcut” property of the
HUD scene, select the
StartButton and find its Shortcut property
in the Inspector. Select “New Shortcut” and click on the “Shortcut” item. A
second Shortcut property will appear. Select “New InputEventAction” and click
the new “InputEvent”. Finally, in the Action property, type the name
This is the default input event associated with the spacebar.
Now when the start button appears, you can either click it or press the spacebar to start the game.
- You can find a completed version of this project at these locations: