Keep On Scrollin’: Simple Scrolling Background

Ever wanted to feel like you’re going places without moving an actual inch? Well you’ve come to the right place, learn how to create a simple vertical scrolling background for your game be it endless runner, shoot ’em up, or whatever your heart desires. This differs from parallax backgrounds as this doesn’t simulate a foreground and back ground but this would be useful for creating one.

First up create (or open) a Unity project. In my example I have Atomic Shooter, a minimalist shoot ’em up open. It would be helpful to have a background texture you want to import into your project. I have a simple star texture for my background scrolling.

Start by creating Canvas object in the Hierarchy, leave it named Canvas and a Event System should been created like so. If not add one as well.

Next create an Empty Game Object under Canvas and name it “Background” this will hold your background images. Create a new script named “Parallax” and attach it to the Background. Here’s the full script so you can follow along.

Let’s break down the script. First we’ll set up out GameObject array that holds our background images/sprites. We’ll also create a speed variable for the scroll speed and then a Vector3 to hold our Screen Position in world units.

In Start() we’ll set up the screenPos variable using Camera.main.ScreenToWorldPoint (you can read on it here) which basically turns the visible screenspace into world space units.

The BackgroundScroll() will run continuously in Update() but you could easily gate it to the player being alive, the level completing, or some other modifier.

BackgroundScroll() is the real workhorse of the script it starts with a for loop that iterates over the backgrounds array that we’ll set up in the inspector shortly.

It starts by checking the current background’s Y position and then adds the length of the image sprite’s bounds’ extent on the Y (which is always half of the size of the image) and then doubles it slightly less than the total length so that it essentially overlaps with the next image in the line.

If it doesn’t meet that condition then it scrolls down by the speed setting we set in the inspector until does meet that condition and that’s it. Now let’s set it up in the hierarchy.

So underneath the Background Object you’ll want to set up the Background images that it will use and organize them so they essentially follow one another the length of the back of the camera like so.

What this does is essentially create a seamless wrap as they move downward. Then you’ll want to drop them in order in the GameObject array though that isn’t necessary as long as they lock in next to each other on the background in the scene. You will have to tweak your settings with the canvas object, here is how I have my Background container canvas set up.

Here are the anchors for each of the background images.

It is important to note that you will have to tweak the textures to match your aspect ratios of choice. No one size fits all, much of UI work is trial and error and this is no different so don’t get discourage if it doesn’t line up. Just keep tweaking it until it looks good to you.

Here’s my background running in a 9:16 aspect ratio.

There you have it, a simple but effective scrolling background. You can do the same with a horizontal background with a few tweaks to the provided code above but hopefully this gave you a clue on how to implement it yourself. Until next time, happy coding.