DEV Community: Eduardo Julião

Animated Sprite 2D

Eduardo Julião — Wed, 03 Jan 2024 00:52:16 +0000

Today's article is a simple one but a very powerful tool to have under your belt.

We're going to create an animated coin collectible in our game, and to do that, we're going to explore the AnimatedSprite2D node.

Source file

For the rotating coin sprite, I'm using the free coin asset that you can find in Open Game Art.

Folder structure

We're going to create two folders structure, one to store our sprites and other to store our items.

res:///
├─ Objects/
│  ├─ Items/
│  │  ├─ Coin/
├─ Sprites/
│  ├─ Objects/
│  │  ├─ Items/
│  │  │   ├─ Coin/

The Objects folder will contain our scenes and scripts while everything under the sprites folder will be, well, sprites.

The Coin Scene

Let's create a new Scene under the Coin folder and name it Coin.tscn, this will be a Node2D scene.

Adding an `AnimatedSprite2D`

Right click the main Coin node, select Add child node and search for AnimatedSprite2D

Now that we have our AnimatedSprite2D node under our coin, let's add our Coin sprite to it.

Adding the Sprite to our `AnimatedSprite2D`

In the scene panel on the left side, select your AnimatedSprite2D (it can be named as Sprite2D), and on the right side, in the inspector, select Sprite Frames > New Sprite Frames.

This will open tab in the bottom panel called Sprite Frames, here is where we're going to import our coin sprite sheet.

But before we add, let's "fix" the framerate to 8, because that's the number of frames our sprite sheet has.

Now, click on the icon on the right of the folder icon to import our spritesheet, it's called: Add frames from sprite sheet

When you click open this window will appear, this will let us split our spritesheet into smaller sprites

As you can see, there are vertical and horizontal lines, this tells the engine how the spritesheet should be split. Lets adjust these rows using the tools on the right side of this window.

Since we have just wone row and 8 sprites, let's set Horizontal to 8 and Vertical to 1. Once you have your sprite sheet splitted, select the frames you want to add and press Add x Frames, in our case, it should be 8.

You can press play and you'll see the coin rotating in your scene! 😁

CONGRATULATIONS!

🎉 Bravo on successfully completing this tutorial! Today's article might be simple, but the tool you've just added to your game development toolkit is undeniably powerful.

Thank you

As always, thank you for reading and I hope you're enjoying it and learning from it!

I see you, in the next article 😄

Learn more

Animated Sprite 2D Official documentation

Player camera

Eduardo Julião — Mon, 01 Jan 2024 02:13:49 +0000

Hello everyone! In today's article, I'm going to show you two ways you can make a camera follow the player character in Godot!

The easy way

To make the camera follow the player is really easy, just create a camera node inside your player node and that's it!

Running the game in the current state, you'll notice that the player is now always in the center, that's because the camera is following the player!

Is that it? Is this really simple?

As this works for prototyping, you'll hit some problems later in your game dev cycle, by making the camera inside your character, the character will need to know things about the world, which it doesn't actually need to know, like the size of the world you're in.

To fix that, we're going the long hard way.

The long way

Deleting the camera

We need to delete the camera we created inside our player node, so we can start creating a new one.

Organizing the code

We're going to create a new folder inside the Player folder, called it camera! All the code and nodes related to the player camera will be stored here.

The project strucutre should look like this now:

res:///
├─ Characters/
│  ├─ Player/
│  │   ├─ Camera/
├─ Scenes/

RemoteTransform2D

Before we start developing our camera, we need to attach a RemoteTransform2D.
This is a very cool node! It pushes its position into another node that you tell it to, in our case, the player camera.

So click on your player node and add a new node of type RemoteTransform2D.

You'll notice that the node shows a warning, no need to worry, because we're going to set what this note will send signals to dynamically on our camera script!

Player camera

We're all set to start developing our camera, so lets get to it.

Create the scene

Now that our folders are nice and organized, let's go ahead and create our player camera, really simple!

Let's start by create a PlayerCamera scene into the Player/Camera folder! But this time, select other node and when prompted to select the node type, look for Camera2D.

Camera Script

Right click the PlayerCamera node and Attach a script to it!

For now, the script will be really simple, but we're going to revisit it when we dynamically instantiate the player into the scene.

In the PlayerCamera.gd, start by create a func ready():, in there we're going to find the player in the current scene and attach to our camera.

func _ready():
    # This script is used to set the remote path of the player's RemoteTransform2D
    # so that the player's position is synced across the nodes.
    var playerRemoteTransform2d = get_tree().current_scene.get_node("Player/RemoteTransform2D");
    playerRemoteTransform2d.remote_path = get_path();

Let's analyze whats happening here.

Getting the player node in the scene

The first line we're getting the RemoteTransform2D inside our Player by using get_node(...), inside our current_scene that is in our tree of nodes get_tree().

It's somethig like this

When you run your project, in the scene tab you can change to Remote and find all nodes that are currently running, when you have nodes that are singleton/auto loads, they'll show outside the scene and inside the tree.

Attaching the camera to the RemoteTransform2d

The second line, sets the remote_path of the Player/RemoteTransform2D to our player camera, to do that we use the get_path() method, which will return the path of the current node.

Updating our Scene!

We have everything we need for our camera to follow our player around!
Now, let's add our PlayerCamera scene into our FirstScene, you can do so by dragging in dropping the PlayerCamera into the scene main node.

Also, to get a sense our player is moving, Drag and dro the icon.svg (the godot icon) and set the modulate to another color, this will make it easier to distinguish between this image and the player.

To do that, click on the icon node inside the scene, navigate to Canvas Item and then modulate, you can give the color you want here, I gave i a light green.

Your scene should look something like this.

Now run your project and you can see the player moving and your camera following it! How cool is that?

Congratulations!

We learn a lot in this series and we can see our project taking shape! Now that we have a functional player and camera, we can start building the world around it!

Thank you

As always, thank you for reading and I hope you're enjoying it and learning from it!

I see you, in the next article 😄

Make your player roll and animations!

Eduardo Julião — Sat, 30 Dec 2023 23:52:21 +0000

In today's article, I'm going to show you how to make your player roll, manage states and basics of animation.

Creating a new action in the Input Map

Before we start writing our code, let's create a new action into our Input Map named roll. I've attached the letter K on the keyboard, but you can bind any key you prefer.

Adding a new state

Open the Player.gd script and lets update our states enum, adding the action ROLL.

enum states {
   MOVE,
   ROLL
}

Using `_input(event)` to change states

In the previous article I introduced the _input(event) method, now, we're going to use it to change the player state based on the player input!

## Called when player input is detected.
## @param event: InputEvent
## @return void
func _input(event):
    if event is InputEventMouseButton or event is InputEventMouseMotion:
        return;

    # Only process input if the player is in the MOVE state.
    if _current_state == states.MOVE:
        # If the player presses the roll button, then the player should roll.
        if event.is_action_pressed("roll"):
            # sets the _current_state to states.ROLL
            _current_state = states.ROLL;

First, we're going to check if the player is in the MOVE state, this will prevent the player from rolling mid attack, or attack mid rolling.

Then, we check if the player pressed what is mapped to the roll, if so, we change the current state to ROLL.

Updating player movement

Now that we changed our state to ROLL, we need to tell the script what to do when the player is in this state.

Let's start by creating a roll function, like we created with the move(delta). And as we did in the move(delta) function, we'll create a new variable, the _roll_speed.

@export var _roll_speed: float = 130;

Now, we update the _physics_process(delta) function to add the call to the roll function.

# delta = time between frames
func _physics_process(delta):
    match _current_state:
        states.MOVE:
            move(delta);
        states.ROLL:
            roll();

The editor will throw you an error since we don't have a roll() function created, so let's scroll all the way down on our script and create a new function.

func roll():
    velocity = _roll_speed;
    move_and_slide();

But wait, we can't simply say the velocity is the _roll_speed, we need a vector, just as we used the input_vector in our move(delta) function.

So let's create a new variable that will receive the input vector and we can use in our roll function.

var _roll_vector: Vector2 = Vector2.RIGHT;

This will create a _roll_vector variable we can use and will initialise its value to right.

Now, our roll() function will look like this:

func roll():
    velocity = _roll_vector * _roll_speed;
    move_and_slide();

And we can't forget to update our move(delta) function to set our new _roll_vector. Let's add the following code before we update our velocity.

# This will be used in the roll() function.
# This will be used to determine which direction the player should roll.
_roll_vector = input_vector;

And why we update only when the player moves? Because this will keep the player "facing diretion", so if the player decides to walk to the left, we store this "last facing direction" to our _roll_vector, if the player stops, this variable will keep this state, when the player rolls, it will roll to the left.

Run the player

We're ready to run our game! But notice one thing, if we roll, the player keeps going, and going and we can't stop it! But why this happens?

In the _input(event) function we only accept input when the player state is MOVE, but we don't have anything telling the script to revert to the MOVE state.

To solve this issue, we're going to use animations!

Creating the animation node.

Let's get back to our player node in Godot and add two new nodes AnimationPlayer and AnimationTree.

Notice the AnimationTree have a warning sign next to it, this is because it needs to be told how it should handle animations. Select the AnimationTree node and on the right side, in the inspector, and update the Tree Root to use AnimationNodeStateMachine

The next step, is to assign the Anim Player to the animation player we created.

This will open an AnimationTree window on the bottom of Godot, we're going to create a couple of animations (even though they're just the godot icon 😅), and update the animations through our script!

Creating new animations

First, select the Animation tab in the bottom panel, then, in new panel, click on Animation at the top and then select the option New.

Let's create animations for idle, walk and roll. Each of them having the facing direction, for example, idle_left, idle_right, so on.

You should have something like this

Understaing The animation window

Let's start by updating the roll_right animation, select it on the drop down and the first thing we're going to do, is to add our sprite to it!
To do this, keep the animation window open, select the Sprite2D node in the scene and under Animation in the inspector, select frame 0 and press the key icon to the right of it.

This will open a new window, just press create.

This will add our sprite to the tracks!

Cool! we have our first track with our sprite! But before continuing, let's update some options in the window, to make it easier for us to work.

In bottom right of the animation window, change from seconds to FPS.

Here is where we tell how many frames the animation will have, for the roll animation, lets pretend we have 4 frames, so let's update the value on the left to 4!

If you press the play button in the animation window, you'll notice that the track will stop on frame 4 (it counts 0,1,2,3), signaling the engine that the animation ended.

Adding a `Call Method Track`

The Call Method Track lets you call a methoid in a script at anypoint of the animation you want! Which is great! because we're going to use this to change the state of our player.

CLick on the + Add Track and select Call Method Track.

This will open a new window for you to select a node to animate, in this window, select the player. We're selecting the player node becuase we're adding the script there.

Once you're done, this will create a new track in the Animation window.

Let's get back to our Player.gd and create a simple function that will set the state back to move, let's call it on_roll_ended().

func on_roll_ended():
    _current_state = states.MOVE;

Now, to add your script, make sure the blue vertical bar is at the last frame of your animation (in this case, the end of the third frame beginning of the forth), right click it and press Add Key.

In the new window, select the method we just created:

This will tell the Engine that when the roll_right animation ends, it should call the method we assigned.

Before we continue, do this for all roll animations 😄.

The animation Tree

We're almost done, we need to set up the animations in the animation tree so we can use it on our scripts.

Select both animation tree under the player node and in the bottom panel.

You'll see a Start/End blocks, we're going to create a few more, one for idle, one for walk and one for roll. Right click anywhere between Start and End and select the Add Blend Space 2D option, once it's created, double click the text and rename it to Idle, do the same for walk and roll.

Now, let's link these aniumations together!
There are a couple of tool in to top left corner of the Animation tree

From left to right:

Select Tool With this selected, you can click on any node in the animation tree.
Add Tool When this is active, clicking anywhere in the animation tree with the left mouse button will open the add pop-up.
Connect Tool When Connect Tool is selected, you can link animations together.
Delete Tool Deletes the selected node.

Select the Connect Tool and let's start linkin them. To link animations, click on the node you want to link and drag to the next node.

You should have something like this.

Before we proceed, schange to the select tool and select the lines between nodes, now in the inspector, navigate to Advance and change the Mode property to Enabled.

Do this to all connections!
One last step!! (I swear, it's almost at the end) press the pencil icon in the Roll node, this will open a window with the details to the Roll (or any animation you pressed) animation.
Let's add our animations we created in the Animation window here, and we're ready to use them!

First, change the blend mode to the tree dots here:

Now, select the select tool in the top left corner.

Right click as close as you can to the 0 in the left of the graph > add animation > roll_left. Now, when we set the blend position in our script, it'll update the animation based on the X and Y positions. Do this for the remaining animations!
At the end, you will have something like this:

!! IMPORTANT !!

in Godot, up = -1 and down = 1, that's the reason we add the down animation up and up animation down.

Updating animations in the script

This is our last step, calling different animations in our script! Open the player script and let's start working on calling these animations!

Open the Player Script, first things first, lets get our nodes in the script, we can do so like this

@onready var animationTree = $AnimationTree;
@onready var animationState = animationTree.get("parameters/playback");

There are a couple of new keywords here, let's explore them.

@onready Tells the engine that this variable will be loaded once the player (or the node) is loaded into the scene tree.
$AnimationTree having the $ sign is a syntax sugar that would be the same as calling get_node("AnimationTree").

Enable the AnimationTree

In the _ready() function, add the following code, this will enable the animation tree once the player is ready.

animationTree.active = true;

Setting up the blend position

In this step, is very important to use the exact names in the animation tree, otherwise you'll get some errors in the run time.

The recipe to set the blend position is:

animationTree.set("parameters/<Animation_Name>/blend_position", <movement_vector>);

Let's add the following code in the _physics_process function. First, the idle animation, just beneath the if input_vector == Vector2.ZERO:

animationTree.set("parameters/Idle/blend_position", input_vector);

And for walk and roll animation we can set after the _roll_vector = input_vector;

_roll_vector = input_vector;

    animationTree.set("parameters/Walk/blend_position", input_vector);
    animationTree.set("parameters/Roll/blend_position", input_vector);

Calling animations

In this last step, we need to tell the animation state which animation should be playing.

Let's call our animations, Idle, Walk and Roll.

The code is really simple, just use:

# For Idle
animationState.travel("Idle");

# For Walk
animationState.travel("Walk");

# For Roll 
animationState.travel("Roll");

For the Idle, call it after setting the Idle blend_position. For Walk, call it after setting the Walk blend_position and for Roll, call it in the roll() function.

if input_vector == Vector2.ZERO:
        animationTree.set("parameters/Idle/blend_position", input_vector);
        animationState.travel("Idle");

_roll_vector = input_vector;

    animationTree.set("parameters/Walk/blend_position", input_vector);
    animationTree.set("parameters/Roll/blend_position", input_vector);

    animationState.travel("Walk");

func roll():
    velocity = _roll_vector * _roll_speed;
    animationState.travel("Roll");
    move_and_slide();

CONGRATULATIONS!

Phew, that was a long one, but now you now how powerful the animation can be in Godot!
Now, when you run the game, once you press the Roll action, your player will roll to the last facing position!

Thank you!

I hope you're enjoying this series as much as I'm enjoying writing them!

Thank you for reading it, any problems or questions drop a comment below and I'll get to it!

Thanks again, and I'll see you in the next article!

Player Character - First steps (literally)

Eduardo Julião — Sat, 30 Dec 2023 01:26:44 +0000

Today I'm going to show you how to make your player take its first steps!

To achieve this, we're going to write some code in GDScript, Godot native language.

You can use other languages with Godot, such as C++ and C#, but this series will use GDScript.

Player basics

Let's rename our CharacterBody2D to Player

Collision shape

In the previous article, I mentioned that the CharacterBody2D needs a collision shape node. We're going to add one, and it's really easy to do so.

Right click our player node and select the + Add Child Node option, in the newly open window, search for CollisionShape2D select it and hit Create.

Another warning? 🙄

We've added a collision shape 2d node, but we need to specify what is the shape of this collision! To do this, select the CollisionShape2D node and in the inspector (right side panel), expand the Shape options and select RectangleShape2D

Know error

Note that we added a collision node but it appears in a different position than our sprite:

What is happening here is that the collision shape is using the position of our Player node while the sprite position is different (we moved in the preivous article).

To fix this issue, first, let's move our Sprite2D back to the starting point of our scene, that being x = 0, y = 0.

Select the Sprite2D node, expand the transform option and set position x and y to 0.

This will bring the sprite to the starting position.

Collision Size

Now, let's set the collision format properly.

Select the CollisionShape2D, you're going to notice a small blue square in the center of our sprite

You can change the color of this shape (for debug purporses), to do this, select the CollisionShape2D and change the Debug Color to the color your heart desires, I used a yellow-ish tone.

Now, resize the Collision shape so it's the same size as the sprite.

Nice! We have added a collision node to our player.

What about we make our player move around?

Folders

Let's keep our project organised, I like to have a folder for my characters (be them player, Npcs, enemies).

res://
├─ Characters/
│  ├─ Player/

In this folder we're going to store the player scene and scripts. Since we already have a node called player in our scene, we can save this as our player.

To save our player as a scene (don't worry, a scene is like a prefab), right click our player node and select the option Save branch as scene

Save it under our Player folder.

Notice that our Player node in the scene is now just a "simple" node.

Don't worry, everything related to our player (sprites, animations, scripts, etc) are packed into this Node.

Now, double click our Player scene in the FileSystem to open our Player Scene.

See, all our nodes are there 😉

Project settings - input mapping

Before we start coding our player, we need to tell the Engine what types of input we want and how we want it.

Select Project > Project Settings in the top men

selet the Input Map tab.

Adding an input map

Now lets get started with telling the engine how we want our inputs to work.
Select the Add New Action text field, write move_up and hit add

This will create a new action for us.

Now we need to tell to the Engine which buttons will trigger this.

Press the + sign by the side of move_up, a new window will open up, in there, type W (or the key you want to make the player go up) and hit ok!

Note that you can add multiple inputs for this, like W, up arrow keys, up on a controller etc.

Do the same for all other movements: move_right, move_down, move_left. You should have something like this.

Close this window and we're done!

Creating the player script

The section we've all been waiting for! Creating a script!
Right click our Player node, and select the option Attach Script

Make sure the script is under the same folder and hit Create

Important functions

We're going to use a couple of functions to make our player move around.

_ready()

_ready is called once the player is added to the scene, we're going to use this function to set the innitial state of our player.

_input(event)

_input(event) is called when the engine receives an input (mapped or not), such as keyboard key presses, mouse movement, joypad button press and many others.
We're going to use this function to know what was pressed and change the player state.

Parameter: event

event is the event that it was pressed. You can read more on InputEvents from the official documentation

_process_physics(delta)

_process_physics(delta) is different than _process(delta). _process is called every frame while _process_physics is called at a fixed frame rate, being 60 frame per seconds by default, this is great for moving the player.

Parameter: delta

delta is the time, in seconds, since the previous call

Creating the player possible states

Our player will be able to walk, attack, interact and many others, so let's create an enum to keep track of there states.

enum states{
   MOVE
}

var _current_state: states;

func _ready():
    _current_state = states.MOVE;

In the above script I create an enum to hold the player states, a variable to store the current player state and in the _ready() function I'm setting the innitial state to MOVE.

Handling input

For now, we will simply return, and we will revisit this function when we have more actions.

Processing player movement

To start calculating the player movement, we're going to create a couple more variables, acceleration, friction and run speed, and use the function _process_physics(delta) to update the player position based on those properties

var _run_speed: float = 100;
var _acceleration: float = 500;
var _friction: float = 500;

You can add the @export keyword to your variables so they show in the editor and you can manipulate their value without having to change in the script.

@export var _run_speed: float = 100;
@export var _acceleration: float = 500;
@export var _friction: float = 500;

Time to make the player move. I've commented the code so it's easy to follow up on what's happening.

# delta = time between frames
# This function will move the player according to the player's input.
# @param delta: float
# @return void
func move(delta: float):
        # Set the initial vector for the player to be 0
    var input_vector = Vector2.ZERO;

    # Get input vector from player input.
    # Input.get_action_strength("move_right") - Input.get_action_strength("move_left") will return 0 if neither action is pressed, 
    # 1 if move_right is pressed, -1 if move_left is pressed, and a value between -1 and 1 if both actions are pressed.
    input_vector.x = Input.get_action_strength("move_right") - Input.get_action_strength("move_left");

    # Input.get_action_strength("move_down") - Input.get_action_strength("move_up") will return 0 if neither action is pressed,
    # 1 if move_down is pressed, -1 if move_up is pressed, and a value between -1 and 1 if both actions are pressed.
    input_vector.y = Input.get_action_strength("move_down") - Input.get_action_strength("move_up");

    # Normalize input vector to prevent diagonal movement from being faster.
    input_vector = input_vector.normalized();

    # If input_vector is zero, then the player is not pressing any movement keys.
    if input_vector == Vector2.ZERO:
        # If the player is not pressing any movement keys, then the player should slow down.
        # move_toward() will move the player toward the target velocity, but will not exceed the target velocity.
        velocity = velocity.move_toward(Vector2.ZERO, _friction * delta);

        # move_and_slide() will move the player according to the velocity, and will also apply gravity.
        move_and_slide();
        return;

    # If the player is pressing movement keys, then the player should speed up.
    # move_toward() will move the player toward the target velocity, but will not exceed the target velocity.
    velocity = velocity.move_toward(input_vector * _run_speed, _acceleration * delta);

    # move_and_slide() will move the player according to the velocity, and will also apply gravity.
    # move_and_slide() will also stop the player from moving if the player is colliding with a wall.
    move_and_slide();

CONGRATULATIONS!

Now you have a player walking around a scene! This is the first step (pun intended) for a working game!

Thank you!

I hope you find this article helpful!

See you in the next article!

Creating your first scene

Eduardo Julião — Fri, 29 Dec 2023 22:54:29 +0000

In this article, I'm going to talk about how to create a scene in Godot! For this, we're going to go through some steps.

Godot version

I'm using Godot 4.1.1 for this series, if I update it, I'll write an article on how to do it, differences and what changes from what I previously wrote 😉

Source code

The source code for this article (and series) can be found in my Github under the name GodotDevTo.

Creating a project

Launch Godot, on the right side you're going to find a panel with different options, for now, lets press + New Project, this will open another window for you to choose the project name and path.

I', using Forward+ renderer since it has more functionalities and we're not targeting older systems.
Once all is done, press create and we're good to go!

What are the differences?

Forward+

Forward+ is a modern rendering method, but requires a powerful device.

Mobile

Mobile is a simplified rendering method that works well on low-end devices, but has limited features.

Compatibility

Compatibility is a legacy rendering method that is compatible with older devices and drivers, but has poor performance.

Learn more on rendering

Godot documentation has a extensive article on how the different types of rendering works.

Welcome to Godot

Now that we have a project created, let's get started by getting used to what we're seeing 😄

Scene

In this area, you have everything related to your scene, all your nodes such as player, camera, UI etc.

Scene editor

Here is where you're going to create your scene, by moving nodes around and creating your world/

Upper panel

In here you can change the scene editor to be 2D, 3D, script and open Godot asset lib.

Let's go ahead and select 2D since we're creating a 2D Game.

Note on Script

Since we're using VS Code as our editor, opening a script will open VS Code and will not use the script editor the engine provides.

File System

This area shows all files related to the project, assets, sprites, scripts, nodes, etc.

Bottom Panel

Here you can find some cool windows to help you with yout project!

Inspector

Inspector is divided into 3 tabs:

Inspector

Shows the properties of the selected node.

Node

Shows details to the selected node, you can find Signals and Groups here (We're going to tackle these later)

History

The edits the selected node suffered.

Creating a Scene

FINALLY! What we're being waiting for, how to create a scene!

And it's pretty easy, in the Scene panel, click on 2D Scene option and that's it, you have a scene!

Don't believe me? Let's create out "player".

Creating the Player

To create a player, right click on Node2D option and select + Add child node

A new window will open, in there, search for CharacterBody2D, select it and press create.

Now we have a player node in our scene 😁... granted it does nothing, for now.

Note there's a warning message on the right side of it, it's telling us we need a collision node attached to it. Don't worry about it for now, as I'm going to cover it in the next articles.

Add a sprite to our player

Same as we did to our scene, right click the CharacterBody2D and + Add Child Node. This time, look for Sprite2D, select it and press create.
For now it's just for testing as we don't have a propper sprite for our player.

Adding a sprite to our Sprite 2D

Let's use the icon.svg that's already in our File System. Select the Sprite2D Node and in inspector, drag and drop the icon.svg into the Texture Property.

And let's move our CharacterBody2D to the middle of the screen, so we can easily find it.
Here are the coordinates I used.

Running the scene

To run our scene, we need to first save it. So let's create a Scenes folder in our File System.

Right click the res:// folder > Create new > Folder and name it Scenes. Now, select the base Node and save it in the Scenes Folder, I named this scene FirstScene.

Now that everything is setup, press F6 (this will run the selected scene).

This will open a new window with your scene! YAY!

Thank you!

I hope you find this article helpful!

See you in the next article!

Setting up environment - Godot with VSCode

Eduardo Julião — Fri, 29 Dec 2023 12:13:39 +0000

Summary

In this tutorial, I'm going to explore on how to set Godot (version 4.1, which can be found here) with VS Code on Windows!

Requisites

We're going to need to Godot and VS Code installed, alongside some extensions, which I'm going to list them when we're setting up VS Code.

Godot

But first, let's change some things in Godot!
In the top bar, select Editor > Editor Settings

Once the new window is open, navigate to Text Editor > External

Here, we're going to set up some properties:

Use External Editor
This property must be checked, marking it to be true. This will tell Godot that you want to use other editor to edit your scripts.
Exec Path
This is the path to the external editor .exe file, in our case, VS Code. Grab the full path with the .exe file name and paste it here.
Exec Flags
Last but not least, we need to use some flags to start VS Code properly: {project} --goto {file}:{line}:{col}.

Now we need to make sure the Language Server is correct, in the same window, navigate to Network > Language Server.

Remote Server
You can leave as 127.0.0.1
Remote Port
Make sure it's set to 6005, as the VS Code will use this port to communicate. It can be changed to another port, but you'll need to update in VS Code settings so they can match.
Enable Smart Resolve / Show Native Symbols in Editor
Set these two properties to true as will help with IntelliSense.
Use Thread
¯\(ツ)/¯
I leave it off as it makes no difference.

Ok, everything is set up in Godot, now we need to make some changes in VS Code!

VS Code

Let's start by installing some Extensions.

Extensions

C# Tools for Godot This extensions helps when using C# with Godot, and with debugging!
Godot files Helps with file paths resolve.
Godot tools The main Extension we need, this extension will connect with Godot Engine through the ports that we stetted previously and make the editor work 😄

Settings

Once the extensions are installed, we need to change some settings.

Open VS Code settings and search for Gdscript_lsp_server_port, make sure it's set up to 6005 (the same port we setup before in Godot).

Debugging

To create a new launch.json file, open Run and Debug on the left panel of VS Code > Create a launch.json file > GDScript Godot Debug.

Here's the settings I'm using for the launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Godot",
            "type": "godot",
            "request": "launch",
            "project": "${workspaceFolder}",
            "port": 6006,
            "debugServer": 6006,
            "address": "127.0.0.1",
            "launch_game_instance": true,
            "launch_scene": false
          }
    ]
}

Conclusion

And you're all setup! If everything was done correctly, pressing F5 in VS Code will start Godot and you're ready to run your game!

Notes

Godot needs to be open for the language server to run, without it, there will be no IntelliSense.
This tutorial was tested using GDScript language, I'm not sure if this works with C# or C++.

If you need more help or anything in this guide is difficult to understand or wrong, let me know!

Thank you!

Hope you find this article helpful!

See you in the next one!

Loop audio in Godot

Eduardo Julião — Mon, 18 Sep 2023 03:31:25 +0000

In this article, I'm going to show you one way to loop music in Godot!

But first, we need some software installed before we start.

I'm using version 4.1.1 of the engine.
To work with the audio, I'm using Audacity.
Some audio to work on: I'm using the following: https://opengameart.org/content/woodcocky.

Working on the audio with Audacity

Open Audacity and import the audio file, you should see something like this:

In the bottom panel, click on the cog wheel and select Start and End of the Selection:

And on the little drop down to the right, select samples (Godot works with samples):

We have the information we need! Now, in Audacity, go to File > Export > Export as WAV:

Creating a scene

Let's start by creating a new 2D Scene.

Adding audio to Godot

Grab the .wav file we just exported and add to the res:// folder of your project:

Now, with your .wav file selected, click in the Import tab in the panel above your res:// folder, let's change some of the properties.
Set Loop Mode to Foward and Loop Begin and Loop End to the sample values found in Audacity. Then, click Reimport(*):

Adding Audio Stream to the scene

In the scene tab, right click Node2D and add a new child node of
the typeAudioStreamPlayer2D:

Select the newly created AudioStreamPlayer2D under Node2D and this will open an Inspector for this node. In the Stream property of your audio player, drag and drop the .wav file, make sure Autoplay is enabled.

Testing

Save your scene and press F6 to run the current scene (or press this button).

Now, your audio will play normally, but will loop between the samples you've set int the Loop Begin and End!

Thank you

Switching engines is always a challenge, but learning Godot for the past few days feels great, the engine is lightweight, and GDScript is a delight to work with.

Hope you find this article helpful!

See you in the next one!

Adding Items - Coin

Eduardo Julião — Sat, 12 Aug 2023 14:59:15 +0000

Creating a coin

As we're just prototyping our game, we're going to create a simple circle 2D sprite, you can do that by right-clicking the project area, then Create > 2D > Sprites > Circle.

Once the sprite is created, Create a new Empty Object in the Hierarchy, rename it to Coin, and drag and drop the sprite into this new game object.

Now, lets add a Circle collider to this game object.

Note that I've marked Is Trigger to true, and why do we need to set it to true?
This will tell the physics engine to not actually collide with the object, but to be a trigger to an event, this way, the player (or any other object) can pass through.

Coin Controller

Now that we have the basics of our coin in place, let's create a CoinController to our Coin game object.

First let's create a new Folder under our scripts folder and call it Objects, from them, right click it and create a new C# Script, call it CoinController and add it to our Coin game object.

The code doesn't do much, just a trigger check. In this scenario, it checks if it collided with the player, if so, it destroys itself.

Rotate our coin

That's great! We actually have a collectable in our game! (I mean, it doesn't do anything for now but we'll make it better in the future 😉)

For now, let's create a script to rotate our coin in place, just to add a new animation to it.
First, create a folder in our scripts folder, let's call it, animations. In there, create a new c# script, I've called RotateController.

The code is pretty simple! in the Update method, rotate the transform property of our game object. Note, that this script can be attached to ANY game object, making it reusable.

transfor.Rotate() accepts 3 parameters, x, y and z, which are the 3 axis from a 3d object.
We're passing 0 to x because we don't want to rotate it on the X axis, we're multiplying our speed field by Time.deltaTtime and passing down to the y parameter, and 0 to z axis.

Time.deltaTime

Time.deltaTime is a property that provides the time in seconds between the current and previous frame in Unity. You can use it to make something happen at a constant rate regardless of the framerate3. For example, you can use Time.deltaTime to move a Game Object at a certain speed per second.

You can read more about it in the official Official Unity documentation for Time.deltaTime

Thanks

That's a wrap on our simple collectable object! We can use this concept of Trigger in many places, not only for objects, but to trigger a cutscene for example!
Hope you're enjoying these series and it's easy to follow. Until next chapter!

Creating abilities - Ground pound

Eduardo Julião — Fri, 11 Aug 2023 22:21:12 +0000

Cool! Our character can move left, right and jump! (and fall off the edge of the map 😅).

But we can add something to our character to make our jump more, spicy, what about we add a Ground pound option?

It's pretty simple and can open a lot of doors for movement interaction, such as breakable ground and force push enemies once we hit the ground.

Also, it's not needed to create a new binding action in our PlayerInput script, we're going to use what we've already created and check for 3 things, if the player is holding down on the controller (or S or down arrow key) pressed jump and it's not grounded.

Ground Pound code

New fields

Let's start by creating something similar to jumpForce, but instead of making our character go up, we'll make our character go down.

And since we've added a Boolean field to tell us if the player pressed the jump button while grounded, we're going to use the same principle and create a field to tell us if the player met the conditions to do a ground pound.

And a couple more fields to help us, such as verticalMovement ( which follows the same idea of horizontal movement, but for, well, vertical) and baseGravityScale, which is the default gravity value our RigidBody2D starts with (in our scenario, 1).

And finally, set our baseGravityScale in the Awake method.

Updating our new fields

Let's starting by updating our verticalMovement by reading the Y value from our input.

With our verticalMovement updating, we can do our check.

Updating `FixedUpdate` method

Now, it's time to use these new fields in our FixedUpdate method, which controls the character.

First, let's update our velocityX variable, because we don't want to our player to move while ground pound is active.
To do that, we check if isForceDown is true, if it's true, we set our X movement to 0, otherwise, we keep the same movement logic as before.

And if it's force down, we set our gravityScale in the RigidBody to our downforce.

Some other code changes

Since we're creating more and more fields, I've decided to handle them in a single if statement instead of handling them individually.

In here, I'm setting isForceDown and hasJumpButtonTriggered back to false, and body.gravityScale back to its default.

Now that we have a single if statement to handle these fields, we can remove hasJumpButtonTriggered = false from our hasJumpButtonTriggered check, making the code simply:

Important changes

In some occasions, we're falling to fast to Unity to detect collision, this will break and make the player fall through the ground, to fix that, change the Collision Detection from Discrete to Continuous in the RigidBody2D options.

Thanks

And that's pretty much it! There's a lot of room for improvements but, its taking shape, slowly but surely! Hope this series is helpful, fun and easy to read! Until next chapter!

Full code

public class PlayerMovement : MonoBehaviour
{
    private PlayerInput playerInput;
    private Rigidbody2D body;
    private float horizontalMovement;
    private float verticalMovement;
    private float baseGravityScale;
    private bool hasJumpButtonTriggered;
    private bool isForceDown;


    [SerializeField]
    private float speed = 5f;

    [SerializeField]
    private float jumpForce = 5f;

    [SerializeField]
    private float downForce = 5f;

    [SerializeField]
    private bool isGrounded;
    [SerializeField]
    private Transform groundCheck;
    [SerializeField]
    private LayerMask groundLayer;

    private void Awake()
    {
        playerInput = new PlayerInput();
        body = GetComponent<Rigidbody2D>();
        baseGravityScale = body.gravityScale;
    }

    // Start is called before the first frame update
    void Start()
    {

    }

    // Update is called once per frame
    void Update()
    {
        horizontalMovement = Mathf.RoundToInt(playerInput.Player.Move.ReadValue<Vector2>().x);
        verticalMovement = Mathf.RoundToInt(playerInput.Player.Move.ReadValue<Vector2>().y);

        isGrounded = Physics2D.OverlapCircle(groundCheck.position, 0.02f, groundLayer);

        if(playerInput.Player.Jump.triggered && isGrounded)
            hasJumpButtonTriggered = true;

        if (playerInput.Player.Jump.triggered && verticalMovement == -1 && !isGrounded)
            isForceDown = true;
    }

    private void FixedUpdate()
    {
        var velocityX = !isForceDown ? speed * horizontalMovement : 0;

        body.velocity = new Vector2(velocityX, body.velocity.y);

        if (hasJumpButtonTriggered)
        {
            body.velocity = new Vector2(body.velocity.x, jumpForce);
        }

        if (isForceDown)
            body.gravityScale = downForce;

        if (isGrounded)
        {
            isForceDown = false;
            hasJumpButtonTriggered = false;
            body.gravityScale = baseGravityScale;
        }
    }

    private void OnEnable()
    {
        playerInput.Player.Enable();
    }

    private void OnDisable()
    {
        playerInput.Player.Disable();
    }
}

Make your character jump in Unity2D

Eduardo Julião — Tue, 30 Aug 2022 06:24:24 +0000

Now that we have our player character moving from left to right, we need to take a step forward and make him jump.

Binding Jump action to a button

We need to create a new binding into our PlayerInputController, this binding will be our Jump binding!
We'll be creating more bindings throughout this tutorial.

And we need to create a new binding for the keyboard too.

Once created, don't forget to "Save Asset", otherwise the binding will not be created.

Jump Code

Same as speed we will need a new property to tell us the jump force for our character.

On our Update(), we need to tell that the Y velocity for our character body.

Problems

Our character can jump! YAY! But he can jump and jump and jump as long we keep pressing the Jump button and we don't want that.

To fix that, we need to know if our character is touching the ground before jumping.

Is our character Grounded?

Let's add a new game object as a child of our character. This will be our "ground checker".

Once created, move it slightly down in the Y axis, -0.55 should be enough.

Couple more things we need to add to our code:

Property telling if the player is grounded or not.
A game object property so the code knows what is our ground check object.
LayerMask so our code knows what is a ground in our game.

Let's add them!

In the editor we're going to drag and drop the GroundCheck game object into our groundCheck property in the player controller script.

For the layer mask, we'll need to do some extra work.

Creating a Layer Mask

Go into the inspector (can be the player object) and select Layers, and Add Layer....

In this new screen, create a new layer called Ground.

We have our Layer now, let's change our ground game object layer to be ground.

And with that, go back to our player input controller, and change the GroundLayer to Ground.

Is Player Character grounded?

We have everything we need in order to make our player jump properly!

Using Physics2D class from Unity, we'll check if our groundCheck is overlapping with something, in this case the ground!

Run the game and keep pressing the jump button, we won't be able to jump more than once!

EXTRA!

It's not good to handle physics (like moving the rigidbody around) in the Update method, so we'll move some of the code to the FixedUpdate() code, and leave the Update() method to handle the player input.

Some extra properties:

And the actual code:

Thanks

Thanks for reading! Hope this series is being helpful and fun for you as fun is being writing them! See you in the next chapter!

Edit

Bug fixes

Fixed a bug in the code where you can press space bar multiple times and would trigger a second jump when hitting the ground.

Why it happened?

When pressing space bar multiple times, the code would just set hasJumpButtonTriggered to true in mid air, making a jump action valid and thus, jumping again once hitting the ground.

The fix

The fix was pretty easy, moving the isGrounded check to Update where the code is checking if it's ground, with this change, hasJumpButtonTriggered can only be changed to true once the jump key is pressed AND it's grounded

Moving your character in Unity 2d

Eduardo Julião — Sat, 20 Aug 2022 22:00:54 +0000

Have you ever wanted to create your own game but find it too overwhelming or not knowing where to start?
So let's start with very basic things, like making our character move from A to B!

In this tutorial we will be using Input System from Unity to create a 2D Platformer. It's not available by default so you'll need to add it to your project.

Installing Input Manager

To do that, simply go select window in the to bar menu, navigate to Package Manager, in the package manager window, change the package resource to Unity Registry and download the Input System into your project!

When the package is installed, it'll pop up a warning, saying that it'll change the default input system to the new installed package, hit Yes and Unity will be restarted.

Using the Input Manager

Now that the Input Manager is installed let's start using it!

First, let's create a mock for our player character. In the Assets folder, click with the right mouse button and create a new 2D Sprite, I personally use squares for the player mockups, but you can pick whatever sprite you want! With your sprite created, drag it up into the scene so we can have a GameObject.

Now that you have our Player Game Object created in our scene, let's add the Input system.

Select Open Input Settings and in the newly opened window, click Create settings asset

Once the settings are created, click in Create actions in the Player Input component in you Player Game Object, this will prompt you to create a Input Manager to our player. I created a folder called Input Managers inside the asset folder and renamed the file name to PlayerInput.

If you open this file, you'll see a window with some pre-defined options, like move, which we are going to use in this tutorial!

Don't forget to check Generate C# Class int the recently created PlayerInput, so we can use in our code!

Player movement

Our setup for inputs is ready! now, we need to make it work with our player!

Extra components

There's two components we need to add to our player game object, first, BoxCollider2D, this component will be responsible to handle collisions and triggers... let's leave it as it is. The second component is Rigidbody2D, this component will handle our physics, for this component, expand constraints and freeze rotation on the Z axis, this will prevent the game object to rotate.

Player Controller

To make things more organized, let's create a folder called Scripts and a folder called PlayerScripts inside that folder, the structure should look like this:



Assets/
├─ Scripts/
│  ├─ PlayerScripts/
│  │  ├─ PlayerController.cs

Let's start defining some properties, let's start with speed! I like to keep these properties private and decorate them with [SerializeField]. Decorating it as Serialize Field, you can still access the property in the editor, even if it's private.



[SerializeField]
private float speed = 5f;

And let's get our PlayerInput.
First we create a property, and we're not going to decorate with [SerializeField] because we don't want to access it in the editor.



private PlayerInput playerInput;

In the Awake method we're going to instantiate our playerInput.
We need to initialize it on Awake method because the lifecycle of the MonoBehaviour, Awake is called before everything else in the script.



void Awake()
{
    playerInput = new PlayerInput();
}

And couple of methods for the player input.



private void OnEnable()
{
    playerInput.Player.Enable();
}

private void OnDisable()
{
    playerInput.Player.Disable();
}

We also need to initialize the rigidbody in our Start method, making it look like this:



private PlayerInput playerInput;
private Rigidbody body;

void Awake()
{
    playerInput = new PlayerInput();
}

void Start()
{
    body = GetComponent<Rigidbody>();
}

With all this, we can attach this script to the Player Game Object, go back to the object and add the component, you can search for the script when adding a component.

GetComponent

The GetComponent<>() method is responsible for getting a component attached to the GameObject.

Player Movement

For the player movement, we'll handle the in then Update method, which is called every frame 🤯

Since the game is a platformer, let's get the X value of the input from the player.



var horizontal = Mathf.RoundToInt(playerInput.Player.Move.ReadValue<Vector2>().x);

The Mathf.RoundToInt will make sure the value is -1 when the player is moving left, 0 when no input is detected and 1 when the player ,is moving to the right.

With the horizontal input known, we can calculate the velocity which we'll move the player game object.



var velocityX = speed * horizontal;

And finally, MOVE THE PLAYER! By changing the body velocity.



body.velocity = new Vector2(velocityX, body.velocity.y);

But there's a thing, if we start the game our Player Game Object will start falling into the void...

To fix this problem, let's create a floor for our player to be on.
Same as creating a player, create a new Square Sprite (make things a little bit easier), drag and drop into the scene and expand it on the X axis.

And add BoxCollider2D and RigidBody2D to the floor game object and mark the Body Type in the rigidbody component as Static, so it won't move.

Starting the scene

If you reached here you should have a moving player object!
The best part of it, you can move the player using A, D, Left arrow key and Right arrow key on the keyboard and if you have a controller connected, you can move it by using the left joystick!

In the next post we're making the player jump!

Update:

Full Player Script



public class PlayerMovement : MonoBehaviour
{
    private PlayerInput playerInput;
    private Rigidbody2D rb;

    [SerializeField]
    private float speed = 5f;

    private void Awake()
    {
        playerInput = new PlayerInput();
        rb = GetComponent<Rigidbody2D>();
    }

    // Start is called before the first frame update
    void Start()
    {

    }

    // Update is called once per frame
    void Update()
    {
        var horizontal = Mathf.RoundToInt(playerInput.Player.Move.ReadValue<Vector2>().x);
        var velocityX = speed * horizontal;
        rb.velocity = new Vector2(velocityX, rb.velocity.y);
    }

    private void OnEnable()
    {
        playerInput.Player.Enable();
    }

    private void OnDisable()
    {
        playerInput.Player.Disable();
    }
}

Event Stream - Server Side

Eduardo Julião — Thu, 22 Jul 2021 20:38:23 +0000

For this post, we're going to explore a way to stream data to the client using a Web Api and C#.

Picture this requirement, you need to process an array of data, lets say of a 100 items, once each item is processed, the api should return data to the client, without SignalR.

To do this, in this example, we will have a worker that will return a IAsyncEnumerable and between each iteration, the method will wait between 5 to 10 seconds.

//Service.cs
private static readonly Random _random = new Random();

public async IAsyncEnumerable<int> GetData(int amount)
{
    foreach(var item in Enumerable.Range(0, amount))
    {
        // Wait a random amount of time to simulate some work.
        var secondsToWait = _random.Next(5,10);
        await Task.Delay(Timespan.FromSeconds(secondsToWait));
        yield return item;
    }
}

With the simulated service in place, we can move on to the Controller. For the endpoint, we're going to have an async Task Get method that will write the result to the Response and send it for every item it was processed.

// StreamController.cs
private readonly IService _service;

public StreamController(IService service)
{
    _service = service;
}

[HttpGet("{amount:int:min(1)}")]
public async Task GetStreamData(int amount)
{
    // Set Content-Type to text/event-stream
    Response.Headers.Add("Content-Type", "text/event-stream");

    await foreach(var data in _service.GetData(amount))
    {
        // this can be anything, even just a json object
        string dataItem = $"data: {data}\n\n";

        // Convert the text to a byte array
        var utf8DataitemBytes = Encoding.UTF8.GetBytes(dataItem);

        // Write the byte array to the HttpResponse
        await Response.Body.WriteAsync(utf8DataitemBytes, 0, utf8DataitemBytes.Length);
        // Push
        await Response.Body.FlushAsync();
    }
}

When the endpoint is called, it'll send a new "line" of data instead of waiting for all items to be processed to be sent at once.

DEV Community: Eduardo Julião

Animated Sprite 2D

Source file

Folder structure

The Coin Scene

Adding an AnimatedSprite2D

Adding the Sprite to our AnimatedSprite2D

CONGRATULATIONS!

Thank you

Learn more

Player camera

The easy way

The long way

Deleting the camera

Organizing the code

RemoteTransform2D

Player camera

Create the scene

Camera Script

Getting the player node in the scene

Attaching the camera to the RemoteTransform2d

Updating our Scene!

Congratulations!

Thank you

Make your player roll and animations!

Creating a new action in the Input Map

Adding a new state

Using _input(event) to change states

Updating player movement

Run the player

Creating the animation node.

Creating new animations

Understaing The animation window

Adding a Call Method Track

The animation Tree

!! IMPORTANT !!

Updating animations in the script

Enable the AnimationTree

Setting up the blend position

Calling animations

CONGRATULATIONS!

Thank you!

Player Character - First steps (literally)

Player basics

Collision shape

Another warning? 🙄

Know error

Collision Size

Folders

Project settings - input mapping

Adding an input map

Creating the player script

Important functions

_ready()

_input(event)

Parameter: event

_process_physics(delta)

Parameter: delta

Creating the player possible states

Handling input

Processing player movement

CONGRATULATIONS!

Thank you!

Creating your first scene

Godot version

Source code

Creating a project

Forward+

Mobile

Compatibility

Learn more on rendering

Welcome to Godot

Scene

Scene editor

Upper panel

Note on Script

File System

Bottom Panel

Inspector

Inspector

Adding an `AnimatedSprite2D`

Adding the Sprite to our `AnimatedSprite2D`

Using `_input(event)` to change states

Adding a `Call Method Track`

Updating `FixedUpdate` method