Godot Parallax Background
Creating a moving (panning left/right/up/down) or scrolling background with multiple layers is easily done by using the
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.
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:
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.
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):
How the viewport wraps around the mirrored background images as it is scrolled:
In-game view of the scrolled 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_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.
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.
- Godot Keyboard and Mouse Button Input Programming
- Godot Event Handling
- Signals in Godot
- How to Save and Load Godot Game Data
- Godot Timing Tutorial
- Using Anchor Positioning in Godot
- UI Layout using Containers in Godot
- Shaders in Godot
- Godot State Machine
- Godot Behaviour Tree
- Godot Popups
- Parsing XML Data
- How to Make a Godot Plugin
- Godot Regex - Regular Expressions
- Random Numbers
- Coroutines and Yield
- GraphNode and GraphEdit Tutorial