Background Parallax Scrolling in Godot 3.0

D parallax effects are a staple in video games. Here we discuss how to create a parallax effect in Godot, a FOSS game engine. We also create a parallax background using GIMP, a FOSS image editer.

Creating an image

We're going to start off with a free image from open game art that looks cool, but does not work well for a parallax background. Download the image and open it up in GIMP. In the top toolbar, go to Layer > Transform > Offset. Click the 'chain' icon (if it's present) to make it a broken chain, and then set x offset to 600.

Do whatever you got to do to smooth it out. I'm not an artist, but I used a combination of copy+pasting nearby regions and the smudge tool to get the following image:

Image that tiles a little better — Image that tiles a litle better

Now do the same thing, except for with a y offset. Thankfully this image already tiles well in a Y direction, so it's not needed. When you're done, run the same offsets in the opposite direction (negative values) to get your original image back.

Milky Way Image — The original image, but tileable

Parallax Scrolling in Godot

Create a new scene tree with a ParallaxBackground > ParallaxLayer > Sprite hierarchy. Set the texture of the Sprite to your image.

Setup texture import settings

Click on the Texture and click on the "Import" tab in the top right.

Set the "Repeat" flag to Enabled or Mirrored. Then click "Reimport".

Setup parallax

Now all you need to do is set the motion_mirroring property on the ParallaxLayer to your image's size. Here's a line of code to do it for you if you like:

1
$ParallaxBackground/ParallaxLayer.motion_mirroring = $ParallaxBackground/ParallaxLayer/Sprite.texture.get_size().rotated(sprite.global_rotation)

In the _process function, scroll the ParallaxBackground. You can also modify it by the player's velocity. Supposedly, if you have a Camera2D node it will auto-scroll the background.

1
2
3
4
var scroll = Vector2(0,3) #Some default scrolling so there's always movement.
if player != null:
    scroll += player.velocity / 200
$ParallaxBackground.scroll_offset += scroll

Now, you can create a few more layers on top of this made up of stars. Change the motion_scale of each layer to modify the speed that they parallax at.

And that's it!