christine

Posted on Jul 17, 2023 • Edited on Oct 1, 2023

Learn Godot 4 by Making a 2D Platformer — Part 1: Project Editor & Overview

#gamedev #godot #tutorial #beginners

If you are into retro gaming history, you would know that the success Nintendo received in 1981 after releasing Donkey Kong was nothing short of a miracle. Not only did Donkey Kong introduce us to our beloved Mario (then known as Jumpman), but it also saved Nintendo from complete financial failure. In this tutorial series, we will follow in the footsteps of the greats — as we attempt at making a Donkey-Kong-like game of our own, titled Castle Climbers.

Figure 1: Donkey Kong Classic Game

This game, just like the Donkey Kong arcade game, will feature a King who needs to dodge bombs and boxes from its Pig enemies, as it makes its way to the top of the castle to escape to the next level. Unlike Jumpan, we have no princess to save, but that’s only because our Kings & Pigs asset set does not include a damsel-in-distress!

Figure 2: Castle Climbers End-Product

You can watch the preview video for this series here:

This tutorial series will cover the following aspects:

Player Animations and Movement
Player and Obstacle Stats Via Global Scripts
Pickups for Attack Activators, Lives, and Score Boosts
Enemy Animations
Player Death, Damage, and Attacks
Game Map with Collisions & Camera
Moving Platforms & Ranking System
Spawning of Obstacles
Level Progression
Pausing, Saving, and Loading
Music & SFX
Particle Effects
Complete GUI

This tutorial uses Godot version 4.0.3 — so errors can occur if you use a version newer to this since the engine is constantly changing! Please don’t hesitate to give me feedback on the quality of this tutorial series or notify me if you encounter bugs so that we can properly amend the fixes for it to this series. Now let’s get started!

WHAT YOU WILL LEARN IN THIS PART:

How to navigate through the Godot Editor.
How to change your Project Settings.
How to add a Scene & Node.

EDITOR OVERVIEW

Before we begin coding and going crazy, we first need to understand the layout of the Godot Editor. If you are already acquainted with the editor, you can skip to the Project Setup section of this part, but if not, I’d advise you quickly take a tour of the editor with me.

If you haven’t installed Godot yet, head on over to their website and download the latest version that is available to you. Once it’s done downloading, extract the file, and since Godot does not require any installation, you can just drag this to where you prefer to have it stored on your computer — or open it directly from your Downloads folder.

Launch the executable, and you’ll be met by the Project Manager window. Here you can create new projects, load existing projects, or scan entire directories to import multiple projects.

On top, you will see a menu called “Asset Library Projects”. This is where you can download and find projects, templates, or demos that are made for Godot by community members. It’s similar to other online marketplaces such as Itch.io, Unreal Marketplace, or the Unity Asset Store. The only difference is that everything here is free.

To create our project, we’ll click on “New Project”, and a window will appear where we will choose our project’s save location as well as give it a name. I named mine Castle Climbers but go ahead and call it whatever you want.

The three rendering methods available are:

**Forward+ mode, which is for more upscaled game projects that are more graphics and rendering intensive.
Mobile mode, which is generally used for mobile games.
Compatibility mode, which uses the same renderer as Godot 3, meaning the graphics and rendering quality is lower making it more suitable for older or more low-spec devices.

My integrated graphics card has compatibility issues with the Vulkan version supported with Godot 4, so I need to choose compatibility mode. It’s not a dealbreaker though, because it still runs like a dream. You can read more about the new rendering updates here.

Select “Create & Edit”, and you’ll be magically transported to the Project Window. On top, we have our workspaces, which is the space in which we complete our tasks. 3D will always be active by default. If you click on the other options, you can switch between the different workspaces.

Figure 2: Mouse Inputs for Workplace Navigation

Now, let’s go over each of these workspaces:

The 2D workspace is used to edit and view 2D scenes for 2D games.
The 3D workspace is used to edit and view 3D scenes for 3D games.
The Script workspace is the code editor where we write, edit, and view our scripts.
The AssetLib workspace is the Asset Library Projects that you can use in your projects for free.

The panel on the left side of the window is the Scene Dock. This lists the content of the current scene that you have open, and you can also add new nodes to your scene in this dock. A scene in Godot is the main holder or container for nodes, and nodes are the main building blocks of your game.

Different nodes have different functions, for example, collision shapes and animation sprites each have their purpose, so having the ability to combine them in a singular scene allows us to create components for our game with more complex functions. Scenes can also instantiate other scenes, for example, having enemy scenes in your world scene. I recommend you go and have a look at the Godot Documentation on Nodes & Scenes. I drew a Mural board to give you an example of nodes and scenes, which you can view here.

The other panel is called the Import Dock, and this is where you can set or edit the properties of assets such as images, fonts, and audio files that you’ve added to your project folder, and then you can reimport them with those properties saved.

Below the Scene and Import Dock, you will find the FileSystem panel, which is where you’ll manage your project files, folders, and assets. You can drag new assets into this panel to import them into your projects, as well as add new folders, scripts, scenes, and more.

The panel on the right side of the window is called the Inspector Panel, which is where you can view and edit the properties of currently selected nodes.

The Node Panel next to it is where you can hook up Signals and add Groups to nodes. Groups can be used to group types of scenes or nodes together, for example, our NPCs, so that our player knows how to interact with those nodes. Signals can be used in many cases, for example, to notify the game that a button has been pressed or that an animation has finished playing. This allows us to then tell the game what to do when certain events have occurred. Most nodes have built-in signals, such as buttons and animation players, but we can also create our own custom signals. I drew a Mural board to give you an example of custom and built-in signals, which you can view here.

Above the Inspector and Node Dock, you will see the options we will use to play, pause, restart, or stop our scenes. This is where we will launch our game to test it.

At the bottom of the Editor window, there is the Output Panel, the Debugger Console, the Audio Mixer, the Search Results Panel, and the Animation and Shader Editor. They are collapsed by default to save screen space, but if you click on them, they will maximize. Certain nodes that are customizable, such as the tilemap or animation-player node, will add new options to this window.

Let’s go over each of the pre-existing options:

The output console will return printed messages or notifications that we add to the code for testing.
The debugger console is used for — you guessed it — debugging and error handling.
The audio mixer is used to edit audio files.
The animation editor is used to create animations for the Animation Player node.

In the Ribbon or Menu bar above, you have a few options. Here you can manage your scenes underneath the Scenes tab. Scenes can be added, saved, opened, or closed.

You can manage your project settings and properties (such as input actions, window size, autoload singletons, etc.) underneath the Projects tab. You can also quit your Project Manager window from here. This is also where we will export our project from.

You can enable or disable debugging tools in the Debug tab, for instances where you want to say, make collisions visible so that you can see if collision events are executing during gameplay.

The Editor tab allows you to change settings related to the editor, for example, you can change its current layout or theme. You can even take screenshots of your current window.

And lastly, the Help tab gives you quick access to the Godot 4 documentation and community forum. If you’re feeling a bit more comfortable with working with the editor, we can go ahead and set up our project.

PROJECT SETUP

You can download the assets that you will require for this tutorial from my drive. All of the Assets have been acquired from Itch.io, and you can find the individual credits for each asset in the GitHub repository below. I’m also using this color palette for this game.

The full source code for this project can be found in its GitHub repository. I wouldn’t suggest that you go and read the source code without finishing the project yet, since you might get confused reading code that you haven’t written yet! I will be linking the separate source code versions at the end of each part. You will also find parts with “TROUBLESHOOTING” sections added to the end, which will teach you to find and fix bugs in your project as you go along. Debugging is an ongoing process, and I am trying to teach you how to build a game in a somewhat realistic manner.

If you haven’t already, let’s open up Godot and create a new project. I’m going to name my project “Castle Climbers” and I’ll save it in a dedicated folder where I will remember to find it. Make sure you do the same, but you can name it whatever you want.

Download the assets using the link provided above, extract the file, and drag it into your FileSystem panel. We can also go ahead and delete the default icon.svg and README.MD files that are present in your project.

Right-click on the panel and let’s create three new folders: Scenes, GUI and Scripts. The Scenes folder will contain all of our .tscn files (player scene, NPC scene, map scene, etc.), the Scripts folder will contain all of our .gd files, and the GUI folder will contain all of our UI element scenes (Score, Health, and Time UI).

In the Scenes folder, let’s create our first scene, which will be our Main Scene. The Main Scene is the scene that will serve as the core container for our game elements. This is usually the first level that will load when we start the game. On this Main scene, we will add our map, characters, and items that we will require to play the game. The Main Scene is also the one that runs automatically when the game launches — which we will change later on when we have a Main Menu scene.

Figure 4: Castle Climbers Scene Flow Overview

To add a scene, you can right-click on the FileSystem panel and add a new scene just like we did when we added our folders. You can also select the “2D Scene” option in your Scene Dock menu, which will automatically create a new scene with a Node2D node as its root.

I prefer to add new scenes via the plus icon in in our Workspace panel, since this is the quickest way to create new scenes. You don’t have to do this now, but for future reference I thought it would be informative for you to know how to add new scenes quickly.

Click on the 2D Scene option in your Scene dock and will see that it will automatically add a Node2D as the root node.

The Node2D node is the base node for a 2D game. We usually use this node in our Main scene or any scene that will contain many nodes and scenes of different types. To this Node2D, we can add any node in the 2D category — since it has the ability to instance and reference any 2D child node.

You will now see that a Node2D node has been added as our root, but our Scene hasn’t been saved yet. Save it in the Scenes menu above or use the shortcut CTRL + S. Save the Scene as “Main” in your Scenes folder.

Double-click on the Node2D root node to rename it. Let’s rename it to match the name of our scene. Renaming our root node the same as our scene will help us identify our scenes later on when we start instancing them in other scenes. Therefore, we will know that the “Player” node comes from the “Player” scene, and so forth.

Now we can add children nodes to our root node. You can do this via the plus icon again. Remember, we are making a 2D game, so nodes that end with “3D” will not work with our node! Let’s add a Sprite2D node for now because we need to change our texture filtering. A Sprite2D node will contain a sprite, which is a computer graphic which may be moved on-screen and otherwise manipulated as a single entity. Take note that any node you add will be added to your recent panel in the node menu, so you can easily select it from there next time without having to search for it!

In the 2D workspace (because we are making a 2D game), select your Sprite2D node and press F on your keyboard to focus on your selected node. With your node selected, in the inspector panel, you will see the option for texture. This will contain our sprite’s image.

If you go into your assets folder, you can drag any image you want into that texture property.

If you zoom in on your sprite, you might notice that it is a little bit blurry. This is because the texture is not reading our pixels to its closest pixel. Let’s fix our texture filtering so that it smoothens out our pixels.

In your projects settings option underneath Project > Project Settings, change your Textures Rendering from Linear to Nearest. This will scale up our texture rendering so that image assets are always high quality. You will now notice that it is nice and clear.

We also need to change our Stretch mode to “Viewport”, as well as change our Size mode to Maximized. The Stretch Mode setting defines how the base size is stretched to fit the resolution of the window or screen. Viewport mode stretches our game to fit the screen.

The last thing we need to do for this part is set our Main scene as well, our main scene. In your Project Settings, underneath Application > Run, you can set your Main Scene here to be our newly created scene. This will then run this scene whenever we run our game. Later on, we will change this to be our menu scene, because you want the player to be greeted by the start menu where they can start/load a level instead of just throwing them into the first level of the game.

Congratulations, you’ve learnt how to navigate through the Godot Editor, and you added your first node and scene for your project. It would be good practice for you to create your own GitHub repository or backup folder for your game so that you can make regular backups of your project.

And that’s it for our project overview and setup section! In the next part, we will set up our game character, i.e., our player, as well as add the functionality to move them around our game. That means more nodes, and you’ll get to work with Scripts for the first time! Remember to save your game project, and I’ll see you in the next part.

Next Part to the Tutorial Series

The tutorial series has 24 chapters. I’ll be posting all of the chapters in sectional daily parts over the next couple of weeks. You can find the updated list of the tutorial links for all 24 parts of this series on my GitBook. If you don’t see a link added to a part yet, then that means that it hasn’t been posted yet. Also, if there are any future updates to the series, my GitBook would be the place where you can keep up-to-date with everything!

Support the Series & Gain Early Access!

If you like this series and would like to support me, you could donate any amount to my KoFi shop or you could purchase the offline PDF that has the entire series in one on-the-go booklet!

The booklet gives you lifelong access to the full, offline version of the “Learn Godot 4 by Making a 2D Platformer” PDF booklet. This is a 451-page document that contains all the tutorials of this series in a sequenced format, plus you get dedicated help from me if you ever get stuck or need advice. This means you don’t have to wait for me to release the next part of the tutorial series on Dev.to or Medium. You can just move on and continue the tutorial at your own pace — anytime and anywhere!