Hey there, glad you found this. In this series of tutorials, I’m going to show you how to create a game in Godot from start to finish. That means we’re going to start with an empty project and finish by building apps for iOS and Android.
The game we’re going to make is an endless runner in the vein of Flappy Bird. Similar to Flappy Bird, you need to flap to stay in the air and avoid obstacles. However, unlike Flappy Bird, in this game you poop on people to rack up points.
This game is actually already available to download! It’s called Porta Penguin, and you can check it out for free on either the Apple App Store or the Google Play Store. If you want to build the game from source, you can do that too! I’m going to include the source code along with these tutorials; every tutorial will be accompanied by a new branch containing new material.
The goal of this series is to show you everything that goes into making a simple game in Godot. We’ll cover the basics, like creating animations and wiring up signals. And we’ll also get into more nitty gritty stuff, like programmatically changing textures, looping audio, and debugging performance issues on mobile. Hopefully this will serve as a helpful resource to anyone else out there who’s getting started with Godot.
And now, let’s get started!
The source code for this tutorial can be found here.
Hey! I’m making a YouTube video to accompany each of these posts. Check them out if you’d rather watch than read.
Let’s start at the very beginning. In order to make a game in Godot, we need to download Godot. In order to do that, we can head on over to https://godotengine.org/download/ and download Godot 3.2 Standard Version. We want to use the Standard Version because at the time of writing, the Mono Version doesn’t support exporting to iOS. The main difference between the Standard Version and the Mono Version is that the Mono Version allows you to use C# in addition to GDScript. Here are some important things to know if you do want to use C# for your own projects:
- C# support is relatively new to Godot, so there are still issues being ironed out. For example, as stated above, exporting to iOS isn’t supported. A full list is here. In general, GDScript will probably always have better support than C#, as it’s the native language (but who knows, look what happened to Unity and UnityScript).
- The performance of C# in Godot is ~4x better than GDScript in some naive cases.
- If you use C#, you get to use C#! E.g. if you’re familiar with the language, or like statically typed languages, it might be a good choice.
- GDScript is very easy to get started with, and I would recommend it for all newcomers unless there is a compelling reason not to use it.
Download Resources and Code
If you want to follow along with these tutorials, it’ll be helpful to have all the resources and code at hand. You can find those here: https://github.com/arcticmatt/porta_penguin_godot_tutorials.
tutorial1 branch contains the resources and code used for this specific tutorial, and the repository will be updated as more tutorials come out.
Creating a New Project
The main decision that needs to be made here is: what renderer should we use? We can reference Juan Linietsky’s post to help us with this decision:
OpenGL ES 3.0 works, nowadays, in all versions of iOS. On Android, it is supported in most of the mobile devices in the market. Still, there seems to be a large chunk of them (36% at the time of this writing) that only support OpenGL ES 2.0. This segment is not decreasing fast enough and it seems it will be many years until all devices are fully 3.0 compliant.
As it seems clear that we will be moving to Vulkan on desktop and OpenGL ES 2.0 on mobile and web, further work on the current OpenGL ES 3.0 rendering backend is pointless as it will be rewritten.
The answer? We can use OpenGL 2.0, since we’re making a mobile game and don’t need the features of OpenGL 3.0 anyways.
Making a Scrolling Background
First, we’re going to make the scrolling background of our infinite scroller. Here’s the basic approach we’re going to follow: we’re going to have two scrolling
Sprites, and when a
Sprite goes completely off the left side of the screen, we’ll reposition it so that it’s off the right side of the screen. We need two
Sprites so that when one gets repositioned, there’s still something on the screen. In order to do this, we’re going to create a scene that looks like this:
As you can see, we have a
Node2D as the root node, and two
Sprites as children. You can name them something more distinctive; I’m showing you these names for clarity. Note that
Sprite nodes are meant to display textures, which makes them perfect for our goal of displaying a couple of backgrounds.
The next thing we’ll do is drag the
PinkBackground.png file onto the
Texture field of each
Sprite. Make sure to reimport the texture with the
Filter flag unchecked if you notice blurriness.
Then, we’ll uncheck the
Centered field and adjust the
Scale to 10 for each
Sprite. Finally, we’ll move the second
Sprite’s x position to 1600. This sets us up to use a screen size of 1600 x 900. Why are we using this screen size? Well, when I originally made this game, this was the scale some of the assets were at (e.g. in Aesprite I would 8 x 8 pixel brushes, or something like that). I now realize this was a mistake, and that I should’ve scaled everything based on assets that were made at the scale of 1 pixel. If you make a pixel art game, your screen size should probably be smaller, unless you’re making some really detailed pixel art.
In order to actually use that a screen size of 1600 x 900, go to Project > Project Settings > Display > Window, and change the Width and Height settings.
At this point, you should be able to use the
Cmd B hotkey and see… a static background that’s not cut off or pixelated. When you use
Cmd B, you should be prompted to select a “Main Scene” if you haven’t set this setting already. This is the scene that runs when the game starts, which is the same scene that runs when
Cmd B is used. For now, we can set it to the scrolling background scene, which I’ve called
Main.tscn. Eventually we’ll change this setting to something else (you can change it by going to Project > Project Setings > Application > Run > Main Scene), but this works for now. Alright, so far, so good. Time to make things move.
In order to make things move, we’ll attach a simple script to our two background
Sprites. This script will take advantage of the
Node._process() callback which is called every frame. Inside of this callback, we will do two things:
- Move the
Spritea little to the left.
- Check to see if the
Sprite’s texture has gone off the left side of the screen. If so, reposition the
Spriteto the right of the other
Sprite, which should still be onscreen.
Note: The code in this tutorial will be statically typed whenever possible. I highly recommend you statically type your GDScript code as well; it makes it much safer and easier to follow.
That’s it for this tutorial! By this point, you should have a working scrolling background. In the next tutorial, we’ll add in the star of the show, the penguin! This means we’ll get introduced to animations and collisions; we’ll add a flapping animation to the penguin and make it collide with our game’s boundaries. Feel free to ask me questions or leave feedback here or @pencilflip. Till next time :)