Making an Endless Runner in Godot, Part 1 — Scrolling Background

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.

Accompanying YouTube video.

Download Godot

Godot’s download page.

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.

The 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.

Which renderer should you pick?

Making a Scrolling Background

Scrolling background demo.

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:

The nodes in our main scene.

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.

Pixel art shouldn’t have the Filter flag checked.

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 Sprite a 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 Sprite to the right of the other Sprite, which should still be onscreen.

Here’s the scrolling background code. Pretty simple!

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.

Wrapping Up

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 :)