Building a 2D Platformer Game with Godot. Part 1
Tags: godot, 2d, game, development
Published: 2023-09-19 21:07:01

---
title: Building a 2D Platformer Game with Godot. Part 1
published: true
date: 2023-09-19 00:26:12 UTC
tags: #godot #2d #game #development
canonical_url: https://carlosmv.hashnode.dev/building-a-2d-platformer-game-with-godot-part-1
---

This article is the first part of a series about building a 2D platformer game with Godot. In this article, we will cover how to install Godot, create a scene, a node, and a player.

We will use as assets for our game, the Sunny Land pixel game art created by Ansimuz, you can download it from [here](https://ansimuz.itch.io/sunny-land-pixel-game-art).

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687047415187/61e03564-fff3-48f8-8f8b-2b5e0e7d9956.png)

We have to download all these assets.

### Requirements

- Basic programming knowledge (variables, functions, loops, IF statement).

### Godot

The README page says, [Godot Engine](https://godotengine.org) is a feature-packed, cross-platform game engine to create 2D and 3D games from a unified interface\*\*.\*\* It provides a comprehensive set of [common tools](https://godotengine.org/features), so that users can focus on making games without having to reinvent the wheel. Games can be exported with one click to a number of platforms, including the major desktop platforms (Linux, macOS, Windows), mobile platforms (Android, iOS), as well as Web-based platforms and [consoles](https://docs.godotengine.org/en/latest/tutorials/platform/consoles.html).

Godot is completely free and open source under the very permissive [MIT license](https://godotengine.org/license). No strings attached, no royalties, nothing. The users' games are theirs, down to the last line of engine code. Godot's development is fully independent and community-driven, empowering users to help shape their engine to match their expectations. It is supported by the [Software Freedom Conservancy](https://sfconservancy.org/) not-for-profit.

### Installation

To install Godot, we navigate to this [page](https://godotengine.org/). Press "Download latest", by the time I'm writing this article, is version 4.0.3.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687034749620/1f4dee65-213c-40a1-ba51-54b550b8295c.png)

After we download the Godot folder, we execute the following file:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687043767123/641eb300-df80-45b4-922a-9643573b5eca.png)

### Creating a New project

The Godot windows will open and we click on "New project".

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687043907434/ec23da5d-f038-4702-8d8b-fd64ded5d71e.png)

That button will open a new window where we will have to give a name to our project and select a renderer.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687044542061/10da24af-3b0e-4a2c-ad83-544e6a7bfa73.png)

After naming the project, we click on "Create folder", then we choose a renderer, I will choose "Compatibility". Finally, we click on "Create & Edit".

The following windows will open, and it will be set to develop 3D games. We select 2D, to create a 2D scene:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687044778513/1135184e-d87d-43da-b3a3-42b64812533f.png)

Then, we will take all the assets, we previously downloaded and add them to our project.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687047506151/15f884a6-b7b1-45ed-bf28-e254b48eb2ee.png)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687047561419/aa86d8bd-bca3-4131-afdc-200b7c40b834.png)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687047589150/bbaf0f79-704a-44c0-8949-11f71270561d.png)

### Creating a Scene

We need to create a scene first, so we click on "2D scene".

I will stop right here for a moment and explain, what scenes and nodes are.

#### Nodes

As de [documentation](https://docs.godotengine.org/en/3.1/getting_started/step_by_step/scenes_and_nodes.html) says, nodes are fundamental building blocks for creating a game. A node can perform a variety of specialized functions. However, any given node always has the following attributes:

- It has a name.

- It has editable properties.

- It can receive a callback to process every frame.

- It can be extended (to have more functions).

- It can be added to another node as a child.

![../../_images/tree.png](https://docs.godotengine.org/en/3.1/_images/tree.png)

Nodes can have other nodes as children. When arranged in this way, the nodes become a tree.

In Godot, the ability to arrange nodes in this way creates a powerful tool for organizing projects. Since different nodes have different functions, combining them allows for the creation of more complex functions.

#### Scenes

According to the Godot documentation, a scene is composed of a group of nodes organized hierarchically (in tree fashion). A scene always has one root node, can be saved to disk and loaded back, and can be instanced.

Running a game means running a scene. A project can contain several scenes, but for the game to start, one of them must be selected as the main scene.

The Godot editor is a scene editor. It has plenty of tools for editing 2D and 3D scenes as well as user interfaces, but the editor is based on the concept of editing a scene and the nodes that compose it.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687367058559/c1f68d54-f094-49e2-922f-bbba3316abfb.png)

Then, a Node2D will be created, we need to give it a name. This node will be our parent node, so, I will name it "World".

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687367219556/7de256e4-957b-447e-b1f3-86d036790f1b.png)

In this node is where we will put our world assets, like the ground and background. It will be the parent node of the player node, enemies nodes, etc.

Now, let's add some props to this node. We go to `FileSystem` and click on `Sunny-land-assets-file`, then we go to `PNG/environment/props`, select `big-create.png`, and drag it into the scene.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687367922128/2b420d3e-703e-4001-b695-4b4e97e1ba43.png)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687367964546/ff0b2e19-a387-4db9-ba67-825f185c2fff.png)

If we click on the big create, we can adjust its dimension.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687368159172/22944ff6-5a3d-40a5-a357-8b2bd2c652d2.png)

And if we press ctrl + D, we can create duplicates of this node.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687368248544/4ff063aa-6ded-410e-85cb-2a8cede4bf2f.png)

We click on the big crate in the scene and drag it to any direction, to see the duplicates.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687368325502/4e070051-bdf8-465f-8410-11d42922a277.png)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687370360830/75fb13c8-91b0-4fda-8fab-636ca61c5bd6.png)

We press `ctrl + S` to save this scene. We have to save the scene every time we create one and change one, so we don't lose the changes we make.

### Creating a Player

To create a player, we have to create another scene.

We press on the plus symbol, to add a new scene.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687477201502/9de1d8c2-278e-40a3-b694-49db302f2a09.png)

Then, we select "Other Node.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687478837855/c90d9cd3-c8c2-498d-ae1e-a3b598a9d334.png)

Godot we ask to choose the kind of node we want to create, and we choose "CharacterBody2D" and press the "Create" button.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687478972295/251b26ad-cfae-41eb-9257-6a9c4b167adb.png)

After the `CharacterBody2D` node is created. Godot will tell us that we have to create a collision shape for the `CharacterBody2D` node.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687479019667/4601d75f-3882-4229-93d8-9affd62f11cb.png)

So, again, we create another child node, and select "CollisionShape2D". This node also must be a child node of the Player node.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687479071672/04e8cc58-f884-422f-9bc2-70aca5e5c9a0.png)

After the `CollisionShape2D` is created. Godot will tell us that we have to select a shape.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687479117768/1f8c9e29-ed1c-424f-857c-cceec985f818.png)

We go to the `CollisionShape2D` panel, and we select a shape.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687479173542/b87f7b8d-7783-477d-ab1e-9db742b01098.png)

We select "New CapsuleShape2D".

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687479216023/68ad9581-a5e7-4603-bbad-43f0e9f55e09.png)

After the collision shape is selected, a capsule form will appear in the scene window.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687479268071/4d63f73c-db99-41f1-99c3-01b4b4beaa86.png)

Now, we press `Ctrl + S`, to save this scene as `player.tscn` .

Now, is the moment to select the sprites. We have to create another node and select "AnimatedSprite2D".

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687479857910/55b6eafc-28ba-4c76-be83-ee3802180494.png)

We have to select "Sprite Frames" in the right panel where it says "AnimatedSprite2D".

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687479939819/bdb81d6b-8c3e-442f-ad12-d8645819796f.png)

And we select "New SpriteFrames".

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687480051313/e27c587e-5701-4ba7-be6a-8778702699f1.png)

Then, we click on "SpriteFrame", and it will appear the `Resource` tab. And the Animation section below.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687480343417/1950c806-3128-40ac-9a2a-8b46618dbadb.png)

We go to the `FileSystem` section a look in the "Sunny-land-assets-file" folder for the `PNG/sprites/player` folder.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687479608769/ee7dac21-4fb8-4f49-9e5f-2b84c35ed0a5.png)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687479667909/27f5257c-7e21-4c46-ae9b-fbf20302cfcb.png)

We create a new animation, we rename the "default" animation to "Idle".

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687480503943/c478792a-d3e7-4ca9-abe2-84df76f14dd7.png)

In the `Sunny-land-assets-file/PNG/sprites/player/idle` folder are 4 images. We drag them and drop them in the `Animation Frame` section.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687480727725/f30a8a5d-44a8-4c5d-b178-490f8fb236ef.png)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687480747753/6b27d580-6210-47bc-a7b3-08ce9d2fb750.png)

For this game, I think is necessary to add 3 animations more, a run animation, a jump and a death animation. In `Sunny-land-assets-file/PNG/sprites/player` folder, there are folders for the animation we want to create.

In the `Animation Frame` section, we click on the `Add Animation` button.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687481656815/9e8476bb-93bb-4491-8567-fd13ff76bce8.png)

We rename the "new\_animation" to "Jump". And look at the `Sunny-land-assets-file/PNG/sprites/player/jump` folder for the 2 images in it, and drag and drop them in the "Jump" animation section.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687481953916/dbc0c317-50f0-4046-a625-5ea05c54cb62.png)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687481996974/4bc7fc9b-0b90-45ba-8617-9889f2e84671.png)

We have to repeat the same steps for the run and death animation. The death sprites are in the `Sunny-land-assets-file/PNG/sprites/player/hurt` folder.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687482111435/1e5fa718-5cc5-4f55-94e8-25c8e4121583.png)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687482133229/228da14b-6d2d-4312-886a-245dbf6ada4c.png)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687482211537/b33a3486-001a-4428-b419-9ac8c00a994d.png)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687482244318/a680cefb-3888-4f56-950a-f0a765049f59.png)

We will create more `CharacterBody2D` nodes, so we renamed this one to "Player" to differentiate it from the others.

Now, we add a script for this node. A script is where we define the behavior of a node. For instance, the behavior of the `Player` node is its velocity, how high it can jump, its direction, etc.

We click on the "Add new script" for the `Player` node.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687482900437/ecc79080-0087-4d11-a870-8dca76523236.png)

We keep the Template selected. This is a new feature in Godot 4.0. It generates a script template with the basic movements of a character.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687482959559/644548f8-7e10-4b9c-a8ac-d2fcedbc5743.png)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687483123939/10abcfc3-946a-43a3-b5e7-d17f0e27a4c5.png)

This is the script that allows our character to Jump, move and handle gravity.

```
extends CharacterBody2D

const SPEED = 300.0
const JUMP_VELOCITY = -400.0

# Get the gravity from the project settings to be synced with RigidBody nodes.
var gravity = ProjectSettings.get_setting("physics/2d/default_gravity")

func _physics_process(delta):
    # Add the gravity.
    if not is_on_floor():
        velocity.y += gravity * delta

    # Handle Jump.
    if Input.is_action_just_pressed("ui_accept") and is_on_floor():
        velocity.y = JUMP_VELOCITY

    # Get the input direction and handle the movement/deceleration.
    # As good practice, you should replace UI actions with custom gameplay actions.
    var direction = Input.get_axis("ui_left", "ui_right")
    if direction:
        velocity.x = direction * SPEED
    else:
        velocity.x = move_toward(velocity.x, 0, SPEED)

    move_and_slide()

```

Here are some key things it does:

It defines a `SPEED` and `JUMP_VELOCITY` constant for the character.

In `_physics_process()`, it adds the project's gravity to the `velocity.y` to handle gravity.

It handles jumping when the `ui_accept` action is pressed and the character is on the floor.

It gets the input direction from `ui_left` and `ui_right` actions and applies a `velocity.x` accordingly.

It uses `move_toward()` to decelerate the character when no input is given.

Finally, it calls `move_and_slide()` to move the character.

We click on "2D" to return to edit our World scene.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687483420231/1f08610e-5e34-459e-8537-2dc47b4fde91.png)

Now, we drag and drop the `player.tscn` file in the World scene.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687483467264/6294e61e-2ced-4994-bab3-12abe8eace85.png)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687483507370/915d8d53-ece8-4ed8-8b47-a649f05b9e99.png)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687483602574/fee9fc1e-8f11-49d5-8d03-035319f67c48.png)

If we click on the "Play" button or press the F5 button, we can play the World scene.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687484224986/fe3e503e-4af4-4f17-940e-ef2064006135.png)

We can see how our player is falling through the screen. Because the `Big-crate` assets don't have any collision shape, yet.

Let's change that by clicking the right button of the mouse on any of the `Big-crate` assets (I going to select `Big-crate2`).

Then, we click on `Change Type`.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687786231545/42b93e5a-bd51-4aa7-b84b-5153ec28136b.png)

We select `StaticBody2D`.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687786317586/15377e5f-bdd0-4711-90bf-548baab1cc2d.png)

Then, we add a child node to the `Big-crate2` and select `CollisionShape2D`.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687786427159/958a237e-22e2-4e4e-8343-1f680a811ee2.png)

In the right panel, where it says "CollisionShape2D", we click on "Shape" and select "New Rectangle shape".

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687786584562/7e64b1df-d9c1-4029-b053-9823039f3cb2.png)

Again, we add another child node to `Big-crate2`, this time, we select `Sprite2D`.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687786917053/b684bf8e-3b2d-4c07-badb-b42694fe3dbd.png)

In the right panel, where it says "Sprite2D", we select a texture. We click on "Load" and select a "Big-crate" from the assets folder.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687787177097/dc261ad2-5019-4610-b930-ad205bb34728.png)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687787123023/6fe78e38-f5c6-425c-9bd7-4827f8b85123.png)

Now, we can repeat the process for the other "Big-crate" assets and we can add different assets. We just need to add a child node to the World node, select `StaticBody2D`, then add a child node to the `StaticBody2D` and select `CollisionShape2D`, after that another child node and select Sprite2D and finally, we select the texture to load a texture.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687787602190/9eb2ca38-b3fb-4607-91d6-f0b9d33eec0a.png)

As we can see in the image above, both `CollisionShape2D` and `Sprite2D` are child nodes of `Big-crate`.

If we play the scene again, we will notice that the player is not falling through the crates.

If we try to drag a crate, we will notice that we are dragging the `Sprite2D` node, and not the `CollisionShape2D`.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687788239750/1297bd58-1609-4fa4-941f-35a8124c2eff.png)

To avoid this, we select the Big-crate and then, click on "Group Selected Node", making sure to realign the `Sprite2D` with `CollisionShape2D` before grouping the node.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687788482678/514ab4eb-522a-4fe7-9f38-e158c7e0d3f2.png)

Now, we can move both nodes.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687788542057/5091954e-4dca-436e-9b0d-e16bbb9491f0.png)

Also, with "Group Selected Nodes" we can group all three "Big-crates" and be able to move them simultaneously.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1687788677578/d6614903-74cf-4b59-b532-7a73d373e0d2.png)

### Conclusion

In this article, we learn how to create a project in Godot, how to add assets and create a player.

I want to shout out to [Ansimuz](https://ansimuz.itch.io/) for allowing us to use its assets for free. [Coding Quest](https://www.youtube.com/@CodingQuests), [HeartBeast](https://www.youtube.com/@uheartbeast) and [BornCG](https://www.youtube.com/@BornCG) for creating very good content about Godot, their content motivated me to create this tutorial. Their videos were a great help for me to learn Godot and Game development.

Thank you for taking the time to read this article.

If you have any recommendations about other packages, architectures, how to improve my code, my English, or anything; please leave a comment or contact me through [**Twitter**](https://twitter.com/Carlos_marcv), or [**LinkedIn**](https://www.linkedin.com/in/carlos-marcano-a2135a134/).

### Resources

- [Sunny Land pixel game art](https://ansimuz.itch.io/sunny-land-pixel-game-art)

- [Godot page](https://godotengine.org/)

- [Godot documentation](https://docs.godotengine.org/en/stable/index.html)

- [FREE Crash Course On Godot 4.0! Build Your Own Platformer!](https://www.youtube.com/watch?v=jHLJZ6Qz6x4&list=WL&index=12)

- [Godot Game Development Crash Course for Beginners](https://www.youtube.com/watch?v=S8lMTwSRoRg&t=3s)

- [Pixel Platformer Tutorial / Code Along (Character Basics) - Godot Engine](https://www.youtube.com/watch?v=f3WGFwCduY0&t=12s)

- [Godot 3.2: Let's Build a 2D Platformer!: Part 1](https://www.youtube.com/watch?v=HvPTSZl2WCc)

- [Godot Scenes and Nodes](https://medium.com/partly-functional/godot-scenes-and-nodes-8e971e43e94f)

- [Scenes and nodes](https://docs.godotengine.org/en/3.1/getting_started/step_by_step/scenes_and_nodes.html)