Godot infinite scrolling background example

In this how to make a godot infinite scrolling background tutorial. We will look at how we can easily and efficiently create the above scrolling background in godot. Infinite scrolling backgrounds get used in all sorts of games like endless runners and infinite runners and side scrollers, games like flappy bird use infinite background scrolling as well. So let us see how we can easily and quickly create this effect in godot 3 and newer.

There seems to be a lot of tutorials online which are pointing developers in the direction of repeating backgrounds through code. However in this tutorial we will be using godot shaders to achieve this effect. Shaders generally are more low level and make use of the gpu which will likely make this technique way more efficient than others you may have used or seen so far. If you don’t want to follow this post you can watch the video tutorial here on YouTube.

Godot infinite scrolling background: godot shaders

Shaders are quite efficient in rendering graphics effects and also shaders offer us a simple solution to hook into the texture offset of our background. So how this will work is we will take our texture. Then we will offset it with a time variable and add a scrolling speed to it so that we can control it. We will make sure to set this up so that we can control our scroll speed from a script.

Setting up our project

Let’s first start off with a new godot project.

Add a 2d scene root node and rename it to game. We just going to add this to hold some of our child nodes.

Add a child node under game and choose TextureRect

Then click create and you should have something like this.

Now we want to bring in our background. I already have one which I created in inkscape. We want to now bring this into our texturerect texture slot. By dragging it in like this.

Resize your background to make it fit. Then we can move on to creating our shader.

On the right go down to Material and collapse that and click on the empty drop down and click on new ShaderMaterial.

You should now have something like this where a material has been created.

Click on the sphere to expand to get these options.

Click on the empty drop down on the shader option.

Then create a new shader.

Coding our shader

Then click on shader again to open up the shader code editor. You should get something like this.

So if you have worked with shaders before in godot you may know about the fragment function in the shader language. For those who don’t here is a quick explanation. Fragment basically runs on every pixel in the given effected material. It only effects visible pixels for efficiency. So we will be using this to move the UV mapping of our texture on the screen. We will also be allowing for a variable which we can manipulate via script. If anyone is interested in a more in depth tutorial on godot shaders please let me know by subscribing to my youtube channel and commenting on one of the videos. Or direct message me on twitter.

Let’s get into how this shader will work. So the thing we need is to tell godot which shader type we will be using. For our shader we will be using a canvas_item shader because we are working in a 2d godot project. So to start off add this line of code to your shader.

shader_type canvas_item;

The next thing is we need to add a way to control the scroll speed. So we will be adding a uniform for our scroll speed.

uniform float scroll_speed;

So we will control our speed by assigning a decimal value preferably between 0 – 1. However we can specify other values but this will make our background scroll out of control. So assign a reasonable value something like 0.5 works quite well when you have done the next few steps. Next we need to define our fragment function and add some UV shifts. To do this add this code.

void fragment(){ vec2 shifteduv = UV; shifteduv .x += TIME * scroll_speed; vec4 color = texture(TEXTURE, shifteduv); COLOR = color; }

Just to explain this. We start off with a vector2 which will hold our current UV map. We then shift it on the x axis using the time variable multiplied by our scroll speed. Then we finally get the texture and assign our new co ordinates. Then we assign it to our COLOR so that it can be displayed. Quite simple.

Once done you might find that nothing is happening.

In our settings on the right hand side you want to make sure you change your stretch mode to tile.

This will make sure we have a repeating background when we start rendering out pixels.

Godot infinite scrolling background: background scroll speed script

So finally we now need a way to control the scroll speed so that we can programmaticaly use this in our games. For this we will put together a very basic scrolling background script which can control the speed. So go on and create a new GDScript call it ScrollingBG.gd.

In this script we will simply create a export variable. Then set our shader material param which we created as a uniform in our shader code. Then this will be able to control the scroll speed. Here is how the code will look for our scrollingbg script.

extends Node export(float) var scroll_speed = 0.4 func _ready(): self.material.set_shader_param("scroll_speed", scroll_speed) # Called every frame. 'delta' is the elapsed time since the previous frame. func _process(delta): pass

So we create a export so that we can control the speed from the godot engine interface like this.

In the read function we then just simply set the shader material param via code to our scroll_speed and walla we have a infinite scrolling background in godot. Which is efficient and can easily be controlled without any complicated scripting.

Final words

If you liked this tutorial please consider sharing it on social media. Subscribing to my youtube channel. If you are interested in godot shaders please let me know via twitter or youtube then I will try and make some more godot shader tutorials. If you are new to game development and want to learn more about godot or game development in general. Then here are a view tutorials which you can check out.