Unity tutorial: Parallax backgrounds with infinite scrolling

Name: Infinite Parallax Scrolling Background - Unity 2D Complete Tutorial
Uploaded: 2024-04-12T13:00:09+00:00
Duration: 7 min 24 s
Channel: Game Code Library
Description: Summary and key takeaways on Unity tutorial: Parallax backgrounds with infinite scrolling, covering Setup and Preparation Begin by importing your pixel‑art

Game Code Library

Apr 12, 2024

•

7 min video

•

2 min read

YouTube video ID: AoRBZh6HvIk

Source: YouTube video by Game Code Library — Watch original video

PDF

Begin by importing your pixel‑art assets and the player character into Unity. Configure the Cinemachine 2D virtual camera to follow the player smoothly. For each background sprite, set the Sprite Renderer filter mode to “Point (no filter)” and compression to “None.” Assign Pixels Per Unit a value of 16 to keep the pixel art crisp. Create sorting layers in the order Sky → Cloud → Background → Foreground → Player, and place the player on a layer between the background and foreground so it renders correctly.

Implementing Parallax

Add a new C# script called BackgroundController to the parent background object. Inside the script, expose a float ParallaxEffect variable. This value controls speed: 0 makes the layer move exactly with the camera (static), while 1 prevents any movement. The background’s position is calculated each frame as

startPosition + (cameraPosition * ParallaxEffect)

To avoid jitter, place the calculation in FixedUpdate rather than Update. This smooths the motion because FixedUpdate runs at a consistent physics timestep.

Adding Infinite Scrolling

Duplicate each background sprite and position the copies at the left and right edges of the original (for example, at ‑36 and +36 units). Parent the duplicates to the original background object; only the parent should hold the BackgroundController script. In the script, obtain the image length with

float length = GetComponent<SpriteRenderer>().bounds.size.x;

During each FixedUpdate, check whether the camera’s X position has moved beyond startPosition ± length. If it has, adjust startPosition by adding or subtracting the length, effectively “teleporting” the background back to the center while preserving the illusion of an endless world.

Key Settings and Values

ParallaxEffect values: 0 (static), 0.3 (fast), 0.5 (half‑speed), 0.6 (slower), 0.8 (slow), 1 (no movement).
Sorting layers: Sky, Cloud, Background, Foreground, Player.
Important script notes:
“If your Parallax effect is set to zero it’ll move with our camera; if it’s set to one it won’t move at all.”
“Instead of using Update we want to use FixedUpdate; this will smooth out our Parallax movement.”
“We don’t want them to have this background controller; only the parent has the background controller on it.”

Takeaways

Set Sprite Renderer filter mode to Point (no filter), compression to None, and Pixels Per Unit to 16 for crisp pixel‑art backgrounds.
Use a ParallaxEffect float where 0 makes a layer move with the camera and 1 keeps it stationary, applying the formula startPosition + (cameraPosition ParallaxEffect).
Place the parallax calculation in FixedUpdate to eliminate jitter and ensure smooth motion.
Duplicate background sprites at the edges, parent them to the original, and adjust startPosition by the image length when the camera passes the bounds to create an infinite loop.
Organize depth with sorting layers in the order Sky, Cloud, Background, Foreground, Player, ensuring the player renders between background and foreground.

Frequently Asked Questions

How does the ParallaxEffect value affect background movement?

ParallaxEffect multiplies the camera’s X position to determine how fast a background layer moves. A value of 0 makes the layer follow the camera exactly, while 1 stops the layer from moving at all, creating depth through relative speed.

Why use FixedUpdate instead of Update for parallax motion?

FixedUpdate runs at a consistent physics timestep, preventing the frame‑rate‑dependent jitter that can occur with Update. Using FixedUpdate smooths the parallax calculation, resulting in steady background movement regardless of frame variations.

Who is Game Code Library on YouTube?

Game Code Library is a YouTube channel that publishes videos on a range of topics. Browse more summaries from this channel below.

Does this page include the full transcript of the video?

Yes, the full transcript for this video is available on this page. Click 'Show transcript' in the sidebar to read it.

Helpful resources related to this video

If you want to practice or explore the concepts discussed in the video, these commonly used tools may help.

Mechanical Gaming Keyboard For Programming Recommended

A tactile mechanical keyboard provides precise feedback and comfort during long C# scripting sessions in Unity.

Amazon →

Large Ergonomic Desk Mat For Gaming

A large desk mat provides a consistent surface for mouse movement, which is essential for precise sprite placement and scene layout in Unity.

Amazon →

Dual Monitor Stand For Desk

A dual monitor setup allows the user to keep the Unity scene view on one screen and the C# code editor on the other.

Amazon →

Unity Game Development C# Book

A comprehensive book on Unity and C# provides foundational knowledge for implementing complex systems like parallax and infinite scrolling.

Amazon →

Links may be affiliate links. We only include resources that are genuinely relevant to the topic.

Summarize another video

Full Transcript YouTube

in this video we're going to take a look
at Parallax backgrounds and not only
Parallax we're going to look at infinite
scrolling if you're only interested in
Parallax I'm going to show how to do
that just on its own first of all and
then we'll look at adding infinite
scrolling it's very pretty and very
exciting so let's take a look for our
background asset I'm going to be using
the nature Landscapes free pixel art
which is made by Mr free game assets on
hiio I'll link that Below in the
description I'm going to be using nature
set number five so I'm going to start
off with a brand new 2D project first of
all we're going to want a player
character for our camera to follow to
tell outy our background effect I'm
creating one here that I'm going to link
in my patreon for free down below so if
you don't have one yourself and import
it into your project so you're welcome
using my previous script to make this
easy I have a lot of free scripts on my
patreon so check them out cool so now we
have a player that moves left and right
in our scene now we want a camera to be
able to follow our player the easiest
way to do this is ADD cin machine so
let's go window package manager and in
packages go to Unity registry search for
cin machine and click install wait for
this to install and once it's done and
close this off right click in our higher
and go cin machine 2D camera just going
to call this CM Cam and on our cin
machine you can see there's a follow
slot what we have to do is drag our
player inside this and now when we move
our camera follows with our player cool
now we're all set up I'm going to drag
in the four images for our parallx
background you just have to drag this
over from the folder into your assets
then I'm going to click on our first one
hold down shift and click on our last
one to select them all I'm going to set
filter node to point no filter
compression to none and I'm going to set
the pixels per unit to be 16 now
individually select each layer of our
our parallx background and drag it into
our hierarchy you can see some of these
layers aren't showing to fix this we
need to set up our sorting layers we
select on number one in additional
settings on the Sprite renderer you can
see we have a sorting layer if we click
add sorting layer and click the plus I'm
going to call this one sky add another
one call this two Cloud add another one
free background and our last one I'll
call for foreground for foreground now
select on number one again an inserting
layer select one sky number two read two
Cloud number three three background
number number four or foreground now our
player is hidden cuz he's stuck on the
default for sorting layer so let's go
back to add sorting layer and add a new
one which I'll call player I'm going to
want my player between my foreground and
my background you can drag and rearrange
these layers holding the little toggle
on the side so now if I click back on
player sorting layer player we can now
see our player again right now when we
press play nothing happens with Parallax
not very interesting so let's write a
script to handle our Parallax movement
of our backgrounds in our assets I'm
going to right click and go create C
script I'm going to call this background
controller going to double click on this
to open up first of all let's add our
variables at the top we're going to want
a private float called start PA which
will store the initial position of our
background next we want a public game
object for our camera and then finally a
public float that we'll call Parallax
effect which we'll use to determine the
speed at which the background should
move relative to the camera now in start
we're going to set our start pause which
we want to be the initial position of
our background image say transform
position X as our background's only
going to be moving horizontally you can
set this to Y if your your Parallax
background is moving in a vertical way
next we want to calculate the distance
our background should move based on the
camera's movement so we're going to say
float distance equals cam do transform.
position dox times a parallx effect so
the lower our parallx effect the faster
it will move with our camera if our
Parallax effect is set to zero it'll
move with our camera if it's set to one
it won't move at all so we could use
that like for our sky in the background
so if we set it to something like 0.5
it'll move at half the speed you get it
now we need to update the position of
our background so let's go transform.
position equals new Vector free and pass
in our start position plus our distance
and we also need to pass in a y and a
zed so we're just going to go transform
position doy transform position Z since
these won't change cool so this is how
you get a parallax effect working if we
go back to Unity if we select all our
backgrounds and drag on our background
controller script then drag in main
camera into your camera slot make sure
this isn't your cin machine camera but
actual main camera and then go on to
each one of your backgrounds and decide
The Parallax effect you'd like for our
Sky I'm going to make this one so it
does not move the clouds I'll do
something high like 0.8 so they move
slowly our background a little bit less
0.6 and our foreground I'll make move
much faster like 0.3 we can now press
play and test these out so when I move
you can see our imag is moving at
different times you can see the clouds
there are jittering in the background we
can do a fix for that so if we jump back
to our script and instead of using
update we want to use fixed update this
will smooth out our Parallax movement if
we go back and test that now when I move
it's much smother cool now this looks
very nice but to make this really cool
let's look at infinite scrolling so for
that what we're going to want to do is
for each of our images we're going to
need to copy them and put one either
side of our main starting image first of
all let's do our Sky I'm going to hold
down crl D and our first image we're
going to want to the left of our main
background image if we drag this to the
side you can see it's around - 36 so I'm
going to set our transform X position to
be - 36 I'm going to dotr D and take
another one and instead of - 36 just
going to be 36 so our main background
image is wrapped around two duplicate
images if you highlight these two
duplicates and drag them onto the
original background image that become
the child of this main image in the
middle to speed up this process I'm
going to select all of my layers go
contrl D and do the same thing so minus
36 for the first one you can hold down
control to select just these three
duplicate and we want just 36 cool now
we just parent these to the original
backgrounds that they belong to so one
last thing if you hold down control and
select every one of these duplicate
children we don't want them to have this
background controller only the parent
has the background controller on it so
check your parent background still has
the controller and none of the children
do cool so if we jump back to our script
now we can set up infinite scrolling as
well as rning the start position we're
also going to want the length of our
background image so in start we're going
to want to go length equals get
component Sprite renderer dot bounds do
size dox now in fixed update we're going
to want another float which I'm going to
call movement so so for this we want our
cam transform positionx again and this
time we're going to times it by Open
brackets one take away our Parallax
effect we're going to use this next to
calculate our infinite scrolling so
after we set the transform. position
we're going to say if our movement is
greater than our start position plus
length then our start position should
plus equal the length else if our
movement is less than our start position
minus our length our start Position will
minus equals our length so if our
background has reached the end of its
length we'll adjust the position of our
start position so that it's always
wedged between infinite scrolling
backgrounds this will make sense when
you see it in the scene view so if we
jump back to Unity now when we Press
Play If I walk all the way to the edge
it's going to happen first on the
foreground cuz that's the one moving
fastest with our camera you'll see when
it hits the very end it's about to do it
get ready get ready it snaps our
background back to the middle oh clouds
and background went now in your games
you can have a Parallax effect which
will also infinitely Scroll of course
you can do one or the other depending on
what kind of thing you want in your game
but cool as always you can grab this
whole package on my patreon as well as
any other script I've ever written be
sure to like And subscribe if you
enjoyed it see you in the next one
[Music]
bye