Now that we have a smattering of how Godot works, in this tutorial we can start making a simple top-down RPG. We will use pixel art graphics, so we will learn how to set up Godot for this type of games.
The first step in developing the game will be to place our player on the screen.
Creating the project
First of all, let’s open Godot and create a new project called SimpleRPG:
Once we click Create, we will find ourselves in the 3D workspace. Since our project will be in 2D, let’s switch to the 2D workspace.
Setting up Godot for pixel art
Godot provides us with many options dedicated to those who make pixel art games.
In this type of games, we try to recreate the look and feel of 8-bit and 16-bit era games, when the available resolution was much lower than that of current monitors.
So, we need to set Godot to use a lower resolution and render the images with pixel precision. By default, Godot will render at sub-pixel resolution, but in that case pixel art images could be shown blurry.
What resolution should you use for pixel art games? It’s entirely up to you, because it’s basically a question of art style. But as a general rule, since the most common monitor resolution is 1920×1080, to achieve a pixel perfect look you should use a resolution with a 16:9 aspect ratio that scales up to 1920×1080 with an integer factor. So, for example, 640×360, 480×270 and 320×180 are three valid resolutions because they are respectively 1920×1080 divided by 3, 4 and 6. We will use a resolution of 320×180 for our RPG.
To set up Godot, open the Project Settings dialog by clicking on Project → Project Settings. In the General Tab, Find the Display → Window → Size section and set Width and Height to 320 and 180, then set Test Width and Test Height to 1280 and 720 (4x the game resolution). If you are using a screen with low resolution (as in some laptops), you can try to set Test Width and Test Height to 960 and 540 (3x the game resolution).
Now, in Display → Window → Stretch, set Mode to 2D and Aspect to keep, to tell Godot to use the entire window to render the game and to preserve the original aspect ratio.
To render the game with pixel precision, go to Render → Quality → 2D section and turn on Use Pixel Snap.
Close the Project Settings dialog. Finally, in the viewport toolbar, click on the three dots and enable Use Pixel Snap. In this way all the nodes in the scene will be perfectly aligned to pixels.
Adding a sprite for the player
The first thing you usually do when you have an empty scene is to add a main node that will be the root for the rest of the scene. To do so, in the Scene panel, click on the plus button, then select Node and add it to scene by clicking Create.
Now let’s add the player image to the project resources. First of all, download the image by clicking on the following button:
Once downloaded, drag it to Godot’s FileSystem panel. You should see something like this:
Now, with the player.png file selected, go to the Import panel, and in the Flags section disable Filter. Finally, click Reimport. In this way, the image will not be shown blurred in the viewport.
At this point, we want to add to our scene a node that allows us to show the player. To do this, we add a Sprite type node. A Sprite is simply a node that displays a 2D texture.
Once added to the project, you will see something appear in the upper left corner of the viewport. If you try to zoom in, you’ll see that no image is shown yet. This of course happens because we have not yet told the sprite what to show.
If you look at the Inspector panel with Sprite selected, you will see that there is a Texture property currently empty. Drag the file player.png from the FileSystem panel to the Texture property:
In the Inspector, in the properties inherited from Node2D, you will see a Transform section. Open It. Inside it you will find the Position, Rotation Degree and Scale properties. The meaning of these properties is self-explanatory.
The first thing we observe is that the current coordinates of the sprite are (0, 0), which therefore correspond to the upper left corner of the game window. Furthermore, we observe that the position identifies the center of the sprite.
If you try to edit the Position x and y values, you will see that by increasing the x value the sprite moves to the right, while increasing the y value the sprite moves downwards.
Since we want the player to be at the center of the window at the start of the game, enter the values 160 and 90 in Position.
Running the game
Before we can test what we’ve done so far, we need to save the current scene and set it as the main scene.
Click Scene → Save Scene and call it Main.tscn. Then, open the Project Settings dialog and, in the General Tab, go to Application → Run → Main Scene and select the scene you just saved.
Now you can press the Play button: a window will appear with our player in the middle.
In this post we have learned to add sprites to our project. For now, these sprites don’t do much, but in the next tutorial our player’s sprite will become interactive: we will make it move when the player presses the arrow keys on the keyboard or uses the analog stick of the joypad.