For the root node
For the root node
Select Other Node
Select Other Node
Add an Area2D
Add an Area2D
Rename it to Player
Rename it to Player
Embedded Files
Press Ctrl+S to save the scene
Press Ctrl+S to save the scene
Create a new folder called Scenes
Create a new folder called Scenes
Create a new folder called Player
Create a new folder called Player
Save the Player scene as player.tscn
Save the Player scene as player.tscn
Rename the Coin Grabber folder to
Rename the Coin Grabber folder to
Assets
Assets
Change the folder colours
Change the folder colours
We chose Area2D because it can detect when other objects overlap or collide with the player.
We chose Area2D because it can detect when other objects overlap or collide with the player.
Now we will add the player visuals.
Now we will add the player visuals.
Select the Player node
Select the Player node
Add an AnimatedSprite2D as a child node
Add an AnimatedSprite2D as a child node
Ignore the warnings at this point.
Ignore the warnings at this point.
Select the AnimatedSprite2D node
Select the AnimatedSprite2D node
In the Inspector on the right
In the Inspector on the right
Choose New SpriteFrames
Choose New SpriteFrames
Now click on the word SpriteFrames
Now click on the word SpriteFrames
Which you just added
Which you just added
To open the SpriteFrames tab
To open the SpriteFrames tab
At the bottom of the screen
At the bottom of the screen
Rename the default animation to run
Rename the default animation to run
Add two new animations and call them
Add two new animations and call them
idle and hurt
idle and hurt
In the Assets => player folder
In the Assets => player folder
Drag the corresponding images into their animations
Drag the corresponding images into their animations
Set each animations speed to 8.0 FPS
Set each animations speed to 8.0 FPS
Select the idle animation
Select the idle animation
Press the A button
Press the A button
This makes idle autoplay by default
This makes idle autoplay by default
Because the Player image is a little small
Because the Player image is a little small
We will scale it up by doubling its size
We will scale it up by doubling its size
Select the AnimatedSprite2D node
Select the AnimatedSprite2D node
In the Inspector on the right find Transform
In the Inspector on the right find Transform
Expand it and find Scale
Expand it and find Scale
Set scale to 2.0 on x and y axis
Set scale to 2.0 on x and y axis
For the Area2D of our Player to detect anything
For the Area2D of our Player to detect anything
We must include a CollisionShape2D node
We must include a CollisionShape2D node
Add one as a child of Player
Add one as a child of Player
For the CollisionShape2D to function
For the CollisionShape2D to function
We must assign a shape
We must assign a shape
Select the CollisionShape2D
Select the CollisionShape2D
Assign a New Rectangle2D shape
Assign a New Rectangle2D shape
Use the orange handles and
Use the orange handles and
fit the shape around the player sprite
fit the shape around the player sprite
or set the size in the Inspector
or set the size in the Inspector
Notice how the warnings have been resolved!
Notice how the warnings have been resolved!
Player Script
Player Script
Now we will program functionality
Now we will program functionality
Into the player by attaching a script
Into the player by attaching a script
Press the attach script button
Press the attach script button
You can leave all settings as they are
You can leave all settings as they are
Hit the Create button
Hit the Create button
The first line of every script
The first line of every script
describes what node it is attached to
describes what node it is attached to
Here the script is attached to an Area2D node
Here the script is attached to an Area2D node
We will define some variables to control
We will define some variables to control
speed
speed
velocity (direction)
velocity (direction)
and screen size
and screen size
The @export tag makes a variable adjustable in the Inspector
The @export tag makes a variable adjustable in the Inspector
This is useful for tweaking values while testing the game
This is useful for tweaking values while testing the game
int is a data type that stores whole numbers (integers)
int is a data type that stores whole numbers (integers)
Vector2 is a data type that stores two values (x and y)
Vector2 is a data type that stores two values (x and y)
When the game runs we must repeatedly check for keyboard input, move the player in the given direction and play the correct animation.
When the game runs we must repeatedly check for keyboard input, move the player in the given direction and play the correct animation.
Godot provides a function which runs 60 times per second.
Godot provides a function which runs 60 times per second.
This function is called _process
This function is called _process
Add the process function
Add the process function
Get the input direction
Get the input direction
Calculate velocity
Calculate velocity
Update Player position on-screen
Update Player position on-screen
In game development, velocity is speed with a direction (pixels per second). We get the input direction, scale it by our speed to get our true velocity, and then multiply by delta so movement stays consistent regardless of frame rate.
In game development, velocity is speed with a direction (pixels per second). We get the input direction, scale it by our speed to get our true velocity, and then multiply by delta so movement stays consistent regardless of frame rate.
You can run the scene (press F6) and test the movement now.
You can run the scene (press F6) and test the movement now.
Notice that the fox can run out of the screen boundary? We can fix that by clamping his position to the screen extents.
Notice that the fox can run out of the screen boundary? We can fix that by clamping his position to the screen extents.
To match animation to movement in the process function
To match animation to movement in the process function
If the player is moving we play the "run"
If the player is moving we play the "run"
Otherwise we play "idle"
Otherwise we play "idle"
Depending on if they are moving left or right
Depending on if they are moving left or right
We flip the sprite
We flip the sprite
Note that $ followed by NodeName
Note that $ followed by NodeName
Gives us access to the internal properties of a node in our Scene
Gives us access to the internal properties of a node in our Scene
Eg: $AnimatedSprite2D.animation
Eg: $AnimatedSprite2D.animation
Lines 19 & 20 can be confusing so I have shown how they can be re-written to make their purpose move obvious
Lines 19 & 20 can be confusing so I have shown how they can be re-written to make their purpose move obvious
Take a moment to test your game again to check that it is animating correctly.
Take a moment to test your game again to check that it is animating correctly.
Right now, our _process() function is doing two very different jobs:
Right now, our _process() function is doing two very different jobs:
- Handling movement (calculating input and updating position)
- Handling visuals (deciding which animation to play and which way the sprite faces)
While this code works fine for a simple player, _process() runs every single frame. As we add mechanics like jumping, taking damage, or sound effects, cramming everything into one function makes scripts difficult to read and debug.
While this code works fine for a simple player, _process() runs every single frame. As we add mechanics like jumping, taking damage, or sound effects, cramming everything into one function makes scripts difficult to read and debug.
A good rule of thumb in game programming is to give each function a single responsibility. Instead of doing all the heavy lifting itself, _process() can act like a manager, calling small, dedicated helper functions to handle specific tasks.
A good rule of thumb in game programming is to give each function a single responsibility. Instead of doing all the heavy lifting itself, _process() can act like a manager, calling small, dedicated helper functions to handle specific tasks.
Let’s refactor our code by splitting movement and animations into their own functions:
Let’s refactor our code by splitting movement and animations into their own functions:
The new _process function
The new _process function
Calls two new functions
Calls two new functions
Look how neat and tidy it is!
Look how neat and tidy it is!
A new function for handling movement
A new function for handling movement
A new function for handling animation
A new function for handling animation
Now we can create a function for: starting the game
Now we can create a function for: starting the game
When a player loses a life or starts a brand-new match, we need a way to reset our character back to the centre of the screen, wake them up, and make sure they look ready to play.
When a player loses a life or starts a brand-new match, we need a way to reset our character back to the centre of the screen, wake them up, and make sure they look ready to play.
Now we can create a function for: ending the game
Now we can create a function for: ending the game
set_process(true) or set_process(false) turns the process function on or off.
When the player dies we turn it off, since movement and animation code is in the process function - it all stops!
set_process(true) or set_process(false) turns the process function on or off.
When the player dies we turn it off, since movement and animation code is in the process function - it all stops!
When the player hits a coin or an obstacle, they shouldn't have to worry about updating the score on the screen or triggering a game-over screen. The Player's only job is to announce what just happened to them: "I picked up an item!" or "I got hurt!"
When the player hits a coin or an obstacle, they shouldn't have to worry about updating the score on the screen or triggering a game-over screen. The Player's only job is to announce what just happened to them: "I picked up an item!" or "I got hurt!"
In Godot, this is done using signals. Think of signals like a megaphone: the Player shouts an event out into the game world, and any node that cares—like the UI or the Game Manager—can listen in and react accordingly.
In Godot, this is done using signals. Think of signals like a megaphone: the Player shouts an event out into the game world, and any node that cares—like the UI or the Game Manager—can listen in and react accordingly.
Let's create two signals at the top of our Player script:
Let's create two signals at the top of our Player script:
Signals need to be connected to the nodes that listen to their broadcast.
Signals need to be connected to the nodes that listen to their broadcast.
Select the Player node
Select the Player node
Select the Signals tab to the right of Inspector
Select the Signals tab to the right of Inspector
You can see the custom signals which we made
You can see the custom signals which we made
As well as the built-in signal for Area2D nodes
As well as the built-in signal for Area2D nodes
Called area_entered
Called area_entered
To connect the signal to our script
To connect the signal to our script
Double click the area_entered signal
Double click the area_entered signal
Click the Connect button
Click the Connect button
Godot Connects the signal to a new function in our script
Godot Connects the signal to a new function in our script
Whenever our player overlaps another area, Godot automatically calls _on_area_entered(area) and hands us the specific object we touched through the area parameter. We can check what that area is, whether it belongs to a coin or an obstacle, and react accordingly.
Whenever our player overlaps another area, Godot automatically calls _on_area_entered(area) and hands us the specific object we touched through the area parameter. We can check what that area is, whether it belongs to a coin or an obstacle, and react accordingly.
If it is a coin we call the pickup function
If it is a coin we call the pickup function
then we emit the pickup signal
then we emit the pickup signal
If it is an obstacle we emit the hurt signal
If it is an obstacle we emit the hurt signal
and then call the die function
and then call the die function
We use area.is_in_group() to check whether the touched object is tagged as a "coins" or "obstacles" group member.
We use area.is_in_group() to check whether the touched object is tagged as a "coins" or "obstacles" group member.
This code references things we haven't built yet (like area.pickup()
This code references things we haven't built yet (like area.pickup()
We will create the Coin and Obstacle scenes in the very next step and tag them with these exact group names.
We will create the Coin and Obstacle scenes in the very next step and tag them with these exact group names.
Page updated
Google Sites
Report abuse