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:
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.
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
Then click "Reimport".
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)
_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.
motion_scale of each layer to modify the speed that they parallax at.
And that's it!