Godot Parallax Background

Creating a moving (panning left/right/up/down) or scrolling background with multiple layers is easily done by using the ParallaxBackground node. ParallaxLayer child nodes are used to contain Sprites that may be set to scroll at different relative speeds to give an illusion of distant objects in a 2D game. Each child node is layered as in a normal scene tree order.

The ParallaxBackground node inherits the CanvasLayer node, so its child nodes will be drawn on its layer which serves to ensure that they remain in the background with a layer offset value of -100 (by default).

Example scene tree:

Parallax Background Scene Tree

The background is moved by adjusting the value of the scroll_offset via script code, or automatically when a moving Camera2D node (set as the primary camera) is placed as a child of the background.

Top-down Scrolling Terrain

For a top-down scrolling terrain, we could use a Camera2D as a child of a CanvasLayer node, but for a view of clouds, rolling hills, and background buildings, we would have several ParallaxLayer nodes, each with an individual Sprite for their content. The relative scrolling speeds of these nodes is set by adjusting the motion_scale to give a pseudo 3D depth effect where distant things move more slowly than near things.

To place a static sprite behind the parallax layers we may add it as a first child of the ParallaxBackground node. In this example, the sprite for the ground is displayed below the other items.

Parallax Background Scene

The image used for a ParallaxLayer sprite may be any size. For continuous scrolling, we set the motion_mirroring property of the ParallaxLayer node. This determines the point at which the image starts to repeat and wraps around.

Layers set to the same value of x for the motion_mirroring property (the Trees image is not as wide as the other images):

Mirrored Layers

How the viewport wraps around the mirrored background images as it is scrolled:

Mirrored Background

In-game view of the scrolled content:

Game Content

Fixed Area Scrolling

For a game where we explore a fixed-sized area, we may want to limit the scrolling so that we don’t go past the edges of the area. In this case we set the top-left and bottom-right limit values (scroll_limit_begin and scroll_limit_end). This is easier than limiting the movement in code. But returning to the play area may take an unnatural time as the camera is moved back into the permitted area where scrolling resumes.

Scroll Area

For example, scrolling right (view moves left) is like bringing into view negative coordinates of the background image, and scrolling left is like bringing into view coordinates greater than the viewport size. If the values are incorrectly set, then the image may not be displayed. Limit values of zero, causes the limit to be ignored.

So hopefully this Godot tutorial has you covered for understanding of using Parallax Background.

More solutions