We need to make our parallax effect.
So let's do that.
So we're going to create a script for it.
So let's head over to this project tab then assets and then script folder.
Let's right click there create and then Monobehaviour script and name that script to something like
parallax.
And I already have created a parallax script over here as you can see.
So we need to attach this script to our background.
So we're going to select all of our background in the hierarchy.
So let's go to hierarchy then select this background.
And we have BG one and BG two and BG three.
So we're going to select all of the background by holding down shift.
And let's drag this parallax script to this add component section in the Inspector.
But make sure you don't attach the this script which is parallax one to the child one.
So we just attach only this parent of BG as you can see.
So this is the first background and this is the child one.
And we haven't attached the script to the child one.
So make sure you just attach the script to the parent backgrounds, so make sure you just do that.
And let's open up our script by double clicking on it.
So let's open that up.
So what we're going to do now we're going to remove this comment.
We don't need and we need a reference of our main camera.
So we need a reference uh of our main camera.
Then we're going to make a we're going to able to make our parallax effect.
So what we basically want to do logically, we're going to move this background a little bit to the
right side.
So it's gonna seem that parallax are basically having.
So we're going to move the first background a little a little bit uh, fast.
You can simply say, uh, and which will be far from our main camera, we're going to make a, we're
going to move that background a little bit slowly as compared to the first one.
So it's going to seem like, uh, there is a parallax effect.
So basically that is the logic.
So let's open up our parallax effect by double clicking on it.
And what we need, we need a reference of our main camera first.
So let's create a variable for our main camera.
And let's make it public so we can adjust underneath our inspector.
So the component we're looking for or the GameObject we're looking for is a camera.
So we're going to type camera I guess we need to type camera yes camera.
And we can call it something like main camera.
So let's call it main camera.
Or we can simply call it camera as well.
And also we can we need some uh some or other things like the start position, all of these, uh, all
of this background start position or the current position.
So we're gonna grab the start position of all of this background, basically the first one and which
one is far away, as well as the middle one.
And also we need a length of this, uh, background, all of this background, uh, for the first one,
as well as the last one as well as the middle one.
So we're gonna grab the start pose of all of this background as well as the length of it.
So let's go to script now.
And we just getting in green underline.
And we able to see that basically what we have to do.
We need to type this new over here and that's it.
So you need to type this new.
Basically there is a already called variable camera.
So that's why it's just conflicting the error.
So we just need to type this new and it's uh okay.
And the some and we also need two more things, which is the start pose of each of those backgrounds
as well as the length of those background.
And it doesn't need to be public so we can make it private instead.
So we're going to make it private and that will be float.
And we can simply call this one to something like Start Pose.
Or you can simply say start pose or background.
And the second thing we need or need is the length of each background.
So we're gonna grab it.
So we're going to make this one as well a private that will be float.
And we can call this one something like length.
I guess this should be the correct spelling.
I'm really apologize if it's not let and we're gonna move over to this start function by now.
In the start of the game, we're just gonna grab the length as well as the start position of those backgrounds.
So what we're going to do, we're going to type this start post equal to transform dot position and
then x.
So we're going to take the x axis.
So basically what we're doing we're basically going to each of these background this transform then
accessing this x position.
And we storing this x position of all each of this background into this start pose variable.
As you can see we created.
So we're just taking the x axis of each of each of those background.
And we just storing the position in the x axis to this start pose.
And also we need to grab the length of our background.
So let's do that.
So we're going to do length equal.
So we're going to use this this dot get component this dot can component.
And the component we're going to look for is a sprite renderer.
So we will move over to sprite renderer component then make first bracket.
And then we need to use this bounds to get the size.
And then we're going to use dot.
And then we're going to type size.
And then we're going to take the x size or x length in the x or x axis length.
You can simply call it.
And we're going to put and make sure you just uh close that up with some colon.
So what we basically doing.
We just get we using this dot get component.
Basically it's just referencing itself.
And we're just going over to this sprite renderer component, each of this background sprite renderer.
And then this reference of this sprite renderer which is getting the size of each of this background
in the x axis.
So basically we're just getting the size of each of this background in the x axis.
And we're storing that size into this length variable as you can see.
So we're just going to spriterenderer then bounce and then size, and we're just getting the x size
in the x axis size.
And we're taking the size each of those background.
And we're storing in this length as you can see.
So now we can see we have start position of each of those background as well as the length.
And we are ready to make the parallax.
So firstly we're going to create we're gonna create the illusion.
Basically we're just gonna make a main camera.
Just uh, basically uh, you can simply say, uh, we're just gonna take, we're gonna take our main
camera and we're going to move it a little bit further away, or we're going to take all of this background
and we're going to multiply with some number, uh, to just move it, uh, all of this background to
the right side a little bit, and we're going to multiply with different speed, uh, or different numbers.
So it's going to make the parallax effect.
So let's do that.
So I'm going to move over to script.
And instead of grabbing the main camera as you can see we're going to grab the this camera parent game
Object.
So basically we need a reference of this camera parent game object instead of the main camera.
You can take the main camera reference as well.
It's not gonna uh it's it's basically not much difference.
But I'm going to take this camera parent game object reference.
Basically we need a reference of this game object.
Then we can make that happen.
So let's go to script one more time.
And instead of grabbing the main camera reference I'm going to grab the camera parent game Object reference.
So we're going to make it public so we can access it underneath our inspector.
Uh, and that is a game object we're looking for basically that camera parent game object.
It's all itself or a whole game object.
So that's why we need to type this, which is game object.
And we have to name it what we want to call.
So I'm going to call it something like camera something like that.
And we're going to close that up with semicolon.
So we as you can see we're just getting a problem.
Or we can simply call it cam instead.
So it's just going to be go on.
Or you can just put it in front of this new and it's gonna go and we're going to press down control
S in order to save our script.
And let's move over to unity by now, basically, we just want to grab the reference first and then
we're going to do that.
So just wait for it to compile and you will see uh, underneath our, uh.
Sorry, we have done a mistake, I guess.
No, no no, sorry, sorry.
Uh, basically we can see a follow script, and we do know we just attach the script to this background.
I'm really apologize.
So we're going to select all of this background by holding down shift in the hierarchy.
And let's go to Inspector Sprite Renderer then play parallax script.
As you can see underneath our parallax script we can see GAM and it says none GameObject basically empty.
So we're going to take our camera parent game object or the main camera.
You can simply say we're going to take that sorry.
We're going to take that and we're going to drag it into the slot.
And now as you can see we have a reference of this camera parent game object.
Or you can simply say that we have camera reference and now we are ready to do that.
So let's open up our players parallax script script by double clicking on it.
And let's move over to this update function.
So in the update function we're going to do.
So we're going to uh what we will do.
We will take our camera position of the camera position.
And we're going to multiply with something.
So it's gonna so it's gonna to the right side basically.
So it seems like main camera just going to the right side.
Or we're going to create the illusion in order to make the parallax effect.
So what we will do, we will move over to script.
And over here we're going to go to Camera Cam Game Object.
Sorry cam.
And we have the reference.
As you can see underneath our parallax script we have the camera parent reference game object.
So we will go to that.
And then we're going to access the transform.
Then we're going to access the position and we will access the x axis.
And we're going to multiply with uh some unit.
So let's create another parameter in order to make the parallax.
Basically, we will move over to top of our class and we're going to make another variable for our parallax
or how much parallax we basically want to uh, we basically want.
So let's create a public float and we can call this one to something like parallax, uh, parallax.
And uh, I'm going to close that up with semicolon.
And with this parallax, we can, uh, adjust this one underneath our script as well.
So I'm not going to give a default value.
I'm going to adjust underneath my parallax script.
And now what we're going to do, we're going to multiply x position of our main camera with this parallax.
So let's multiply that and we're going to close that up semicolon.
And now we're going to store this result basically.
Firstly we're just taking our main camera in the x position.
And then we just multiplying with this parallax.
So the result we're going to store into another float parameter.
So let's create a float and we can call this one to something like distance.
Or you can simply call it parallax effect.
So as you can see.
So firstly we're just going over to camera.
And then basically we're just going over to this camera parent game object and then accessing this transform
then accessing this x position.
And we just multiply.
Multiplying this x position some unit basically as a parallax as you seen.
So it's going to make or just going to create the illusion of parallax.
So let's go to script now.
And then we just taking that result and storing in this float distance parameter as you can see.
And after that we also need to move our background as well.
So we just multiply it.
So we also need to move our background as well.
So what we're going to do we're going to set transform dot position.
So transform dot basically transform dot position means the current position each of this background.
And we're going to set the set the position current position of each of those background are what we
will do.
We will set equal to a new vector three.
Why are we using this vector three?
Because this vector three is going to have x axis, y axis and the z axis.
And we do know this transform dot position also has x axis y axis and the z axis.
So that's why we need to set same variable type.
So this vector three is just going to have x axis y axis and the z axis.
So we don't want our parallax effect in this z axis.
So what we can simply do we can just put zero f in the z axis.
Or we can simply pass a transform dot position.
Dot z basically means current position of each of those background in this z axis itself.
So we not doing at all anything in this z axis.
And we're going to do the same thing in the y axis.
And we only want that parallax effect having two in the x axis.
We don't want in the y as well as in the Z.
But if you have a platformer game, then you can just do.
Or you can play with y axis as well.
It's basically totally up to you.
So let's go to a script now.
And what we're going to do in the Y, we're going to set transform dot position.
Dot y basically means current position in the y axis of each of each of those background itself.
And in the x axis we do know we just want our parallax effect to happen.
So what we will do we will type transform transform dot position sorry not transform dot position.
Basically we do know we we just grabbed the start position of each of this background in the x axis
as you can see.
So we're going to pass as a first argument in the x axis.
Firstly we're going to pass start.
First means the start position of each of this background.
And top of this top of this we're going to add the illusion.
So we're going to use this plus icon.
And then we're going to add this distance.
Basically we just move it a little bit away.
So we're going to take this distance.
So start pose means our start position of each of this background.
And top of this we're going to add the illusion or distance parameter that we created for illusion.
So we're going to add top of this distance.
As you can see now it's fine.
Start pose basically means the start position of each of those background.
And top of that we just added this distance parameter.
And basically we're just taking our main camera.
And we multiplying means the main camera will go to the right direction a little bit away.
And we're taking that change and then adding top top of our start position as you can see.
So I'm going to press Ctrl S in order to save our script.
And I'm going to move this one here.
And this one should be here.
And we're going to press Ctrl S in order to save our script.
Let's go to unity by now.
And also we need to basically, uh, make, uh, our backgrounds endless.
But before we do, let's have a look on this.
What we have done so far.
We're going to check that out.
So just wait.
And now what we're going to do we're going to select all of this background.
So this is our BG one or the first background.
And it's pretty much close to our main camera.
So that's why we want this background move to a little bit uh fast as compared to which is far away
from our main camera.
So this is the big one.
So I'm going to make the parallax effect something like, uh, 0.1.
Or we can simply do something around 0.5, and we're going to select the middle one.
And this middle one should, uh, go, uh, a little bit slow as compared to the close one.
So I'm going to make it something like so this is 1.5.
So I'm going to make it something point three and the which one is further away from our main camera.
And we want that background to move slowly as compared to boot of this, which is close to our main
camera.
So we're going to select our BG three and we're going to make the parallax something like 0.1.
And now we are ready to play our game.
But before we do let's select our parent game object.
So in our case background and make sure you go to Inspector Overrides and then click on Apply All.
So the change is going to be saved into prefab as well.
And now we can play our game.
And let's have a look on our parallax effect.
So let's click on this play button in the top.
And let's have a look on this.
So as you can see as soon as we started our game parallax does happening.
But the problem is that parallax just going in the opposite direction.
It.
So it should move to the left.
So we're going to get out of play mode.
So what we can basically do, we can just put minus uh to this point five.
So we can simply put minus -0.5 or -0.5.
So the parallax is just going to happen in the left side or behind.
So we're going to take this one.
And we're going to put minus.
And we're going to select our third.
And we're going to make this one minus as well.
And now let's go to backgrounds.
Let's go to overrides.
Click on Apply All and let's click on this play button in the top.
And you will see the parallax right away.
Right away the game start.
And now we can see the parallax just happening.
But the problem is that it seems like too much fast.
So we can make a little bit less.
So let's get out of play mode.
And I'm going to select my first background.
And I'm going to do it something like uh .08.
So let's do .08.
And I'm going to select this one.
And I'm going to make -0.05.
And I'm going to select the further one.
And I'm going to make it -0 -0.0 something like uh one I guess one.
And this is five, this is eight.
And now it seems good.
So let's click on this play button in the top to play our game.
And let's have a look on this.
But uh, play around with those values and you can get a perfect number.
And now we can see the parallax is now totally fine because our player is speed a little bit fast.
So that's why it's just looking a little bit weird and that's it.
So let's get out of play mode.
And let me show you one thing that we have forgot to do that.
So let's click on this play button to play our game.
And let's take a look on this.
Now let's play our game and we are jumping.
As you can see.
And we just jumping a lot.
So I'm gonna pause my game.
As you can see the background just getting end over here.
And we don't want that.
And we want our backgrounds to loop forever.
It's gonna seem like, uh, backgrounds just never ending.
So what we have to do, we need to skip that.
So let's get out of play mode and let's do it.
So we're gonna open up our script.
And firstly, we need to grab the actual position of each of this background.
Then we can do that.
So we're going to open up our parallax effect.
And let's do it over here.
So what we will do we will go to cam or camera.
You can simply say we just moving over to this camera parent game object.
And we're going to access the X position.
So we're going to firstly we will go to transform then position and then X.
And we're going to multiply this one minus parallax effect.
So we just made the parallax effect sorry one.
So we need to we're going to do inside this bracket.
So make first bracket and we're going to minus.
So we need to use this one minus the parallax effect that you included.
So we're going to type our parallax.
And let's close that up with semicolon.
So basically we're just going over to main camera then position.
And we accessing the x position.
And we just multiplying whatever one minus parallax effect.
So it's going to give our actual position.
And we're going to store it into a temp variable.
So let's store the result.
So we're going to use float.
And we can call this temp or short for temporary.
And let's set equal to this.
So this is going to be the actual position.
And now we're going to use if condition in order to just grab it.
So we're going to use this if and make first bracket packet and some curly brackets.
So what we want to check over here.
We're going to check.
So we will check if ten if ten is greater than start post.
So start post basically means our start position of each of those program.
And top of that we're going to add the length.
So temp if it's greater than start post plus Len and temp basically means the actual position and length.
And if it's greater than start post plus length.
So basically over here somewhere over here we can have.
So what we want we just want to attach one background over here top of this one.
So that's why if the temp is greater than a if that is the case then we're gonna take our start post
our background.
And top of that we're going to add one more background.
So we're going to add top of plus equal the length.
So we're going to add length.
And let's close that up with semicolon.
So temp basically means the actual position and the length.
And we're checking if it's greater than start post plus length and how we can just get it tame.
Basically, we're just taking our main camera and then multiplying one minus parallax effect.
Basically the parallax that we included.
So we're just subtracting and then and we don't know subtracting.
We're just getting the actual temp or actual length of background and the and the start position of
our background.
And we're checking if that is greater than start post plus length basically means the length of our
background.
And the top of we're just adding the start post start post plus length.
So if it's greater than greater than.
As you can see.
So we just taking our start position of each of those background.
And top of that we just adding one more background as you can see.
So at start post plus equal length as you can see.
And now we're going to press down Ctrl S in order to save our skip.
And if you uh, if you just little bit uh, something like confuse Then I'm gonna have a video in the
resources about parallax deeply.
If you want to check that out, you can go and check it.
So you're gonna get I'm gonna give two videos, link in the resources about parallax effect and the
camera following like that.
You can go and check that out if you just want to more want to just get it more deeply if you just want
to do that.
So for now let's click on this play button and let's have a look.
If the parallax effect and the background just never getting ending A working perfectly or not.
So we're going to take a look on that.
So as soon as the game started we are running and we can see the parallax effect as well.
Sorry I'm really sorry.
And this should as you can see, as soon as the camera is over here or the camera button, we can see
one more background just getting on top of this one previous one As you can see.
And pretty much let's get out of play mode and we're going to test with our player.
So I'm going to take my player.
So let's select the player GameObject in the hierarchy.
And we're going to press down F in order to focus on it.
And I'm going to move this up player somewhere around here.
And let's click on this play button in the top to play our game.
And we can see this is pretty much fine by now.
I guess it's gonna work perfectly, but it's not working.
So we basically need to adjust our background perfectly.
So let's get out of play mode.
And we're going to select our background.
And let's select the child one.
And let's take a look if it's just perfectly fitting or not.
So for now I'm going to select my BG three or background three, and let's select the duplicate one.
And we're going to take a closer look by scrolling our mouse.
And we need to feed it perfectly.
So I'm gonna take my duplicate and I'm going to move a little bit okay.
So we need to move this.
So we're going to make it something like two five so we can move it
(353) 538-3939.
Or we can simply do four.
Basically we need to adjust that
51405.
So I guess four seems perfect number.
So 100 is a 102.4.
So we're going to do the same thing with this BG pg2.
Let's put it 100, uh, 2.4.
And we're going to do the same thing with this one, this background, and we're going to put 102.4.
And it should be perfect by now.
But let's take a look before we do.
So we're going to go to overrides in the inspector.
Let's click on this apply all.
And we can just focus that by hitting F keyword.
And let's click on this play button in the top to play our game.
And it should be fine.
Sorry.
So let's take a look like this.
It should be fine.
So we're still getting a little bit weird.
So we need to adjust that.
Basically we need to adjust our background.
So make sure you just adjust your background perfectly and it's going to be perfect.