Unity Dev: Moving Backgrounds
I’ve been feeling like our game environment has been a bit stale lately, which is why I switched up the background in my last article. It worked for me for maybe a day but it was still missing something. That something was movement. Motion creates emotion, as they say. So let’s get moving.
After knocking my head around on the idea of taking this repeatable nebula image I’d found, duplicating it, and then moving each one after the other as they move across the camera… well, it seemed like a whole bunch of moving parts, so to speak. The less moving parts there are, the fewer issues we’re eventually going to run into when we have to start debugging.
At this point, it occurred to me that I could use my NebulaBG sprite as a texture. Textures, by default, repeat which is exactly what we’re going for.
That still begs the question, “How do I make it MOVE?”
Setup
Sprite -> Texture:
Click on your background sprite in the Project view so that you can see its properties in the Inspector. Change the Texture Type to “Default”. Double-check that the Wrap Mode is set to “Repeat” and that’s it!
Background Camera
After a bit of research, I came across a tip that I found to be quite handy. You can create a secondary camera whose sole responsibility is to capture the things happening in the background of your game. This way, those objects aren’t cluttering up your Scene view when you’re trying to work with the more prominent objects. So long as your second camera has the same “Target Source” as your main camera, you’ll see both sets of objects in the same screen in your Game view.
Since this is a 2D game, we’re going to set our secondary camera’s projection as “Orthographic”, same as our Main Camera. Set the Depth of the secondary camera to be lower than your Main Camera or you’ll cover up your other game objects. Set the position of the secondary camera to (0,0,-10) and then arbitrarily move it up on the y-axis so that it’s out of the way.
Quad Creation
Create a new 3D Object > Quad in your Scene as a child of your secondary camera. It’ll look like a flat square at first. You’ll want to tweak the scale so that it covers the viewable area of the camera.
Once this is done, your Game scene will look like your Player object and UI floating on top of white nothingness. This is your Quad. Find the sprite you converted to a texture earlier, and simply drag and drop it onto the Quad in the scene. Boom! You’ve got yourself a nice background again.
Texture Motion
Create a new C# script to attach to the Quad. I called mine “ScrollingBG”.
There’s only a couple steps to this script.
We define a _speed variable so that the speed of the background scroll can be tweaked. This will also allow us to have multiple backgrounds that move at different speeds to create a parallax effect provided we’re using sprites with transparency in them.
Then we create a variable for the Renderer component of our object so that we can affect its material. GetComponent<>() as normal with a sensible null check for safety.
Moving into the void Update() we set the material’s mainTextureOffset to use our Time.time that has elapsed in the game to increase the offset as more time goes on. Our _speed variable lets us increase or decrease the effect as needed.
It’s honestly stunning how much of an improvement this simple addition makes. With the background moving, I’m immediately more engaged and immersed in the experience as a player.
