introduction & project set-up, part #1 of godot-roguelike series
Wed 14 September 2016 2D Godot roguelike Unity3D , 0 comments
Sat 24 September 2016

disclaimer

Although I have quite a bit of programming experience in high level languages, I may not be qualified to teach you anything about game development as I am learning myself and I probably do not have a sense of how code should be written just yet. So please keep in mind that I am very new at this as well and don’t take it as the definite way to do it. It is only my way

updates

2016-09-24 17:02: added accordion menus for the extra information sections () so they don’t break the flow of the tutorial
2016-09-20 00:10: added at the bottom a link to the finished project files for your convenience
2016-09-18 12:48: added a more elaborate explanation on why I chose to divide the original sprite sheet, this information is found in the Unity3D-to-Godot sprite sheet conversion : AnimatedSprite vs. Sprite + AnimationPlayer

overview

with Godot v2.1.stable.officiali-godot

Ladies and gentleman, boys and girls of all ages, I would like to invite you to a Godot tutorial based on a tutorial for Unity3D. I hope that this translation I attempted here will be easy to understand and professional enough so that you will be able to follow along and have a great time in doing so! I would like to thank @AngegaStudios for if it wasn’t for his highly professional flappy birds tutorial series I would most likely not have started my own tutorials, so thanks a bunch @AngegaStudios! Hope to see even more awesomeness from you! And guys, if you haven’t checked out his tutorial series yet, go check it out… now! I highly recommend it!

assets

All of the assets (sound effects, music, pixel art, font) come from the mentioned tutorial for Unity3D. They are free to download and use, but you do need to download Unity3D and for that reason I made them available for download so you won’t have to install Unity3D if you don’t want to. For those interested I will also go over the conversion for use in Godot (as an optional step) because we’ll be splitting the sprite sheet from Unity3D in individual tiles. I’ll explain why in the relevant section

intro Fig. 01. Finished product which you will be building with the help of this tutorial series. How awesome is that!

In this tutorial we are going to go over the steps necessary for creating a roguelike turn-based mini-game using the Godot game engine! I hope you are as excited as I am!

My goal for this tutorial series is for you to acquire a reasonable amount of practice regarding some very useful game programming patters such as observer, singleton, state & component. Some are dealt with by Godot‘s internal mechanism, while others we’ll make use of directly, but it’s still a good idea to know of their existence and how they are used in practice, trust me!

As we shall see, it actually is a bit challenging… or rather not necessarily challenging, but it does require a bit of forethought to do turn-based games when dealing with a real-time game engine. The good news is that once we get the idea and put it into practice we’ll have no problem implementing it in our own projects. It’s those initial steps that we need to get through!

OK then… let’s get started!

setting up the Godot project

In this part we will set up the project and import our assets. I’m going to use $HOME/Projects/godot/roguelike (since I’m on Linux) as the location for this project. Now open Godot and press on New Project, click on Browse and navigate to a place where you’d like to have this project saved and press Create Folder, enter a name such as roguelike then choose Open from top right and then Create at the bottom. After these steps you should have a new project in the Godot Project Manager such as this:

project-manager Fig. 02. The Project Manager window after creating the project

Before doing anything else we need to do two things:

  1. make a new scene and set it up as the main scene
  2. change the behavior for the Image Loader

1. the main scene

Each project has to define a main scene otherwise it won’t start/compile. This scene is the first one loaded when the game starts. So first thing we need to do is to create a node (of type Node in this case) because Godot forces us to have a root node in every scene: hit CTRL + A and double-click on Node. It might seem unimportant, but it helps a lot with organizing the scene tree.

Double-click on the newly created node and rename it to Game. Save the Scene by hitting CTRL + S, but before pressing the Save button, create a new folder called Scenes and finally finish saving the scene. This will help us organize our code and assets.

Now go to Scene > Project Settings and under Sections (in the left panel) select Application (if it’s not already selected) and tick main_scene and for the property select Game.tscn (residing at res://Scenes/Game.tscn):

main scene creation Fig. 03. Setting Game.tsc as the main scene of the project

main scene run Fig. 04. Game running after setting up the main scene… well, window, it isn’t much of a game just yet

This instructs Godot to load this scene automatically when we press on Play the project button (or when hitting F5).

If you did everything correctly, after closing the Project Settings window you should be able to run your project (by hitting F5 for example) and see a gray window (Fig. 04). Now let’s move on to the next step which is necessary for having clean pixel art when stretching the game window.

2. change the behavior for the Image Loader

Open up the Project Settings window once more (Scene > Project Settings) and click on Image Loader under Sections on the left. Under Properties make sure filter is ticked and it’s corresponding On property is ticked off:

project settings filter Fig. 05. Make sure the filter option is set as in this figure

Image Loader and options

The Image Loader is responsible for feeding the images to the GPU with optional pre-proecessing. The filter option is responsible for interpolating pixels when zooming in/out. This option needs to be turned off in case we want the images to have sharp defined pixels, such as in games with pixelart like this one. Check out the docs since they offer pretty good explanations. This is a somewhat important process if we want to have an easy life. If we skip it and try to copy the files directly we’ll have to go through each one manually and set the filter flag. There is another way to set these flags, through importing the images with the import wizard (under Import > Texture) but we’re not going to do that in this tutorial series.

Now we are ready to include the assets in the project folder. Create a new directory called Assets in the project folder and extract the assets there. Make sure the project folder structure looks like this:

res://
├── Assets
│   ├── Audio
│   ├── Fonts
│   └── Sprites
│       ├── Enemy01Chop
│       ├── Enemy01Idle
│       ├── Enemy02Chop
│       ├── Enemy02Idle
│       ├── PlayerChop
│       ├── PlayerHit
│       ├── PlayerIdle
│       └── TileSet
└── Scenes

Unity3D-to-Godot sprite sheet conversion

with Krita v3.0.1i-krita

If you went ahead and downloaded the assets from the source, through Unity3D then you’ll have noticed that instead of a bunch of images they have one sprite sheet for all tiles. Now, the reason why I chose to separate the sprite sheet into individual tiles is because I haven’t seen an option in Godot‘s AnimatedSprite node to use tiles from a sprite sheet as it is the case with the Sprite node for example. It instead expects an image per frame.

original sprite sheet

If you want to try this out and follow along I have the original sprite sheet for you to download (right-click & Save Link As... on the link - because it’s an image).

So to prepare the tiles for use in Godot I made use of Krita (which is a FOSS - just like Godot - program for digital painting and image manipulation, kind of like Photoshop) like so: open the s01-godot-roguelike_original-sprite sheet.png file in Krita and select Image > Image Split from the menu. Now, this is a pretty rudimentary implementation, but for what we have to do it works quite OK. Select 6 for Horizontal Lines and 7 for Vertical Lines, delete the text from Prefix (or just leave it as is, it’s not that important) and make sure to choose PNG image as File Type. After hitting Apply we’ll end up with a bunch of PNG files in our home directory (at least in Linux) named something _[number].png. Yes, it’s stupid, it doesn’t even let us choose the save location, but it works! The process goes like this:

krita image split Fig. 06. Krita Image Split operation for converting the sprite sheet into individual tiles for working in Godot with them

I’ll let you figure out which number corresponds to which location in the sprite sheet. Next you will, of course, have to recreate the Assets directory structure and add the images in the appropriate places. Yes, it can be slightly tedious, but luckily this is a mini-game and it only relies on 55 tiles in it’s entirety! tears of joy

AnimatedSprite vs. Sprite + AnimationPlayer

While the Sprite node lets us choose a location from the sprite sheet to be displayed in the Viewport it isn’t as easy to animate as the AnimatedSprite. In order to create the animation using the Sprite node we need to use the AnimationPlayer and insert key frames for changing the Frame property of the Sprite node. This is more work in my opinion, although you could argue that splitting the sprite sheet in Krita, renaming the files and moving them in the right places is as equally hard work. One other advantage AnimatedSprite has over Sprite + AnimationPlayer combo is the fact that we can set the FPS in AnimatedSprite whereas in AnimationPlayer we either have to move each individual key frame, scale the selected frames or we have to play with the less intuitive Speed property or a combination of these, all of which are less intuitive than the FPS option in AnimatedSprite. This is because AnimationPlayer works with time (in seconds) instead of FPS. In the end it’s up to each of us to decide which way is best for ourselves.

There is already an issue opened on github regarding the lack of support for sprite sheets in AnimatedSprite, an advantage of working with FOSS technology! If there’s something you don’t like or have a feature request just head over to github and open an issue on the matter!

closing remarks

I know this wasn’t especially exciting, but rest assured, in the next installment we’ll create the tiles and populate our grid with them! With this we’ll learn a bit about the singleton pattern (auto-loaded scripts) and how to use it in Godot as well as a way to procedurally generate a rectangular regular grid map for which we’ll add the ability to specify the x and y number of tiles so that it isn’t necessarily square!

Please let me know your thoughts in the comments section bellow and tell me how you found this introductory part so that I can improve it and myself! Thanks for dropping by and I hope you’ll learn something new following these tutorials! Until next time.

project files

Get the zipped finished project for this part if you had any trouble reaching the end of the tutorial or if you want to compare or just have a starting point for the next part!