In this lecture, we're going to make the player feel like they're flowing through space by adding a
parallax scrolling background.
So what is a parallax scrolling background?
Well, if you've ever played any 2D games before, then you've almost certainly encountered this effect
and it's this effect here.
So what's going on here?
Well, we have multiple different layers making up this image, and they're scrolling at different speeds.
And by adding these additional scrolling layers, we can give an artificial sense of depth.
This particular example and the one we're going to use only has two layers.
But if you add more layers, then this will give you even more depth.
And it's quite common to have maybe three or four layers making up the background and foreground for
your game.
Now how do we get from what we've got now to what we want with our parallax scrolling?
Well, first of all, we're going to have to break up our image because we've currently got this whole
thing as a single image, and we're going to want to split this into two layers.
Then once we've got our two layers, we can move one of the images quite slow in the background and
then add the other one on top, moving at a slightly faster speed.
And notice here that the layers higher up in our order have to have some transparent areas to them or
an overall transparency so that we can still see some of the layers beneath.
If the top layers are fully opaque, then they're just going to obscure the bottom layers and the effect
isn't going to work.
So let's jump into unity and see how we can do this in practice.
Well, the first thing we're going to need is our two background images, and you can find these attached
to the resources for this lecture.
So if we head into our asset packs, I've already imported our stars zero and our stars one image.
Now, later on, we will need to change some of the import settings here.
But for now, the only one we really need to worry about is that the alpha is transparent.
The reason I'm not going to change the other options that we definitely need to change in here is because
I want to show you what happens when we forget so that we know how to troubleshoot it later on.
So with our images in, let's drag them into our hierarchy.
So let's take our stars zero and drag it under our background and then drag our stars one onto the background
as well.
Then we can go ahead and delete our star field because we don't need that anymore.
And if all is well, then you should see the stars zero on the back and stars one on the front.
But you may be having some sort order in layer issues with the background and your ship and everything
else.
So let's go ahead and just set the order in layer for these up as well.
Now we've got two options here.
We could set the background onto its own sorting layer so it never interferes with anything else.
But for now, I think we'll just change the order in layer.
And remember, we've got projectiles on layer zero, ships on layer one, and our explosions now on
layer two.
So let's set our stars zero to be order negative two and our stars one to be negative one.
And that should make sure that everything in our game appears on top of our background.
Next, we're going to need to apply a brand new material to these two objects, because this is what's
going to allow us to start scrolling the image on top of that material.
So rather than using the sprites default material, let's right click in our assets folder, create
a new material and let's call this M Underscore background.
In here we need to change our shader from standard and if we head down to unlit and then transparent
with that set up, let's drag that material over to our two objects.
So our stars zero and our stars one in the hierarchy.
And before we start to code, let me just show you how this is going to work and the problem that I
left intentionally before.
So the idea is that in code we're going to take our texture from our sprite and then over time we're
going to change the offset value.
And if we change the Y offset, we'll see that the texture starts to scroll.
But we do have a bit of a problem at the moment and we can see that the texture is being stretched out
now.
To fix this problem, we need to head in to our images and if we look at the import settings right near
the bottom, we've got this wrap mode and this by default is set to clamp.
And what clamp does is as the texture moves, it will just take our top line of pixels in this case
and extend them down.
This wrap mode does have its uses, but for our case we want to go ahead and change it from clamp to
repeat.
If we then go down and hit, apply.
We'll say that our texture is now appearing correctly, and if we click back on our material and continue
to change the Y offset, we'll see that the texture now scrolls nicely.
That's roughly what we want to do.
So let's zero out our y offset to put that back to zero.
And now let's look how to do this in code.
For this, we're going to need a new script.
So let's go into our script folder.
Right click create a new C-sharp script called Sprite Scroller.
Then let's take our stars zero and our stars one in our hierarchy and add that sprite scroller component.
And now let's go ahead and open up that script.
In here.
We want to clean up our comments above, start and update, but we do want both of these methods for
our variables.
First of all, we're going to want a serialized field for our move speed.
So this is going to be a vector to, to give us control over both the X and Y components of our texture.
And we'll call this the move speed.
Then to make life easy when we're coding, we're going to need a vector to to store the offset to the
amount of movement that we're going to do each frame for our texture.
And we're also going to grab a reference to the material itself.
So let's call that material now.
I told you a lie before.
We don't actually need our start method.
What we need instead is our awake method because the first thing we want to do in this script is grab
a reference to the material we're going to be changing, and we can grab this material by saying material
equals get component of type sprite renderer because we're interested in the Sprite Renderers material
DOT material.
Now in our update loop, this is where the magic is going to happen.
And writing this is going to be a challenge for you.
I want you to make our materials start to scroll.
And as a hint, because this is quite a tricky challenge and we've not encountered all of the parts
of it before.
The general logic is that we're going to calculate the offset for this frame.
So think about how we can use the move speed to create the offset for a given frame.
And then I want you to modify the material main texture offset.
So pause the video now and give that one your best shot.
Okay.
Welcome back.
So the logic here is just two lines of code.
So I'm not going to create a new method for this.
I'm just going to put it straight in the update.
And the first step is to create our offset.
And this offset is just going to be our move, speed multiplied by time, delta time.
So we're making the move speed frame rate independent.
Then to apply this to our main texture offset, we're going to say material dot main texture offset
plus equals the offset.
So that is really all there is to this effect.
If we save up our script and jump back into unity, we can now go ahead and look at our stars zero.
We close up our material because we don't really need to change that directly in here.
What we're more interested in is our sprite scroller.
So by having a vector two for our move speed, we have control over both the X and the Y.
But for my particular game, I'm only interested in the Y and I'm going to move this around 0.1 so fairly
slowly.
Then to create some parallax, we can move over to our stars one head down to our sprite scroller,
move speed and we're going to set the Y component to around 0.2.
So it's moving twice as fast.
If we then go ahead and hit play, we'll see that we now get this nice parallax scrolling background.
If we click on our styles one and reduce the Y component down to 0.1, we get a static scrolling background
and we can also do some strange things like add some X direction as well.
So with this setup we can add multiple layers and we also have very fine grained control over the direction
and speed that this texture is going to be scrolling.
And with that, I think our game visually is now looking pretty good.
We have a nice scrolling background to make us feel like we're flying through space rather than just
hovering in position.
We have explosions on our enemies and on our player, and when we get hit, we have a nice bit of screen
shake.
With our visual improvements now, pretty much there in the next lecture, we're going to start looking
at adding some audio.
So I'll see you there.