Unity Parallax Tutorial - How to infinite scrolling background

hi in this tutorial I want to show you how to make a parallax effect that looks a little something like this it's a very simple effect so let's just get right into it so here's a little background I made in Photoshop the most important thing here when you make your background is that you put each of the different parts of the background on different layers so as you can tell I have a separate layer for each part of my background the other important thing is that your background should end and start at almost exactly the same height if it doesn't it's going to look a bit weird so just make sure that this is in place if you want to download this background and follow along this tutorial or do whatever you want to with the background I don't really care you can go ahead and join my discord and then go to the tutorials section and you can download the background and also the script for this tutorial also if you want to give the background a bit more depth you can go ahead and add blur to the different parts of the background so you'll have a little something like this which makes it look a bit better and more focused on the foreground I guess but now that we have our background let's jump into unity okay so I have my empty project here in unity and the first thing I'm gonna do is go ahead and make a new folder call it background and in this background folder I am going to drop in all of my background parts once they're done importing what you want to do is go to your main camera add a new empty object and call it background the reason we're doing this is because we want to move the background relative to the camera okay so once you've made your background game object you want to go ahead and drag every single one of your background parts onto the background game objects you can't really drag them all at the same time because it's gonna try and make an animation which is not what we want and you can tell things don't really look like they're in order and that's because we have to sort the layers so in the order we are going to set our 0 which is the part we want in front we're gonna put that at 5 and then the part which we want behind that again we're gonna put on 4 and then 3 2 & 1 which will put everything in the right order okay so now that this is done we have to extend the background because currently we can't really move it without it going outside of the screen which is a problem so we're gonna select all of our background parts hit ctrl D twice and then we're gonna extend them to the right and also to the left so you want to try and match it like this but I know that my size is 20 so I can just put that in and I made these backgrounds in 2000 by 1000 pixels so if your background is in that size too then this should work for you so I'm gonna do plus 20 and minus 20 and we now have our extended background so if you go ahead and move our background all together we can see it's much longer and we have some more room for actually implementing the parallax effect so let's get right to it I'm gonna go back to my asset folder create a new C sharp script and we're gonna call it parallax and go ahead and open it up okay I've got my new C sharp script here and what I'm gonna do is make some variables first so we're gonna need to know the length and the start position of our sprites we're also going to need the camera and finally we're going to need a public floats that will tell us how much parallax effect we're gonna apply so let's do something like that and basically this variable we're going to be able to set in our editors so we can select how much parallax effect we want to apply now the first thing we need to do is we need to find the start position and the length start position should be relatively easy simple as that but for the length we need to get the sprite renderer and then find the length from there so we're gonna do length equals gets component and we're gonna get the sprite renderer we're gonna do bounced out size star X which will give us the size in X or the length of the sprites now we need to make the background actually move so we're gonna go into our updates let's just make it a fixed update and we are going to make a temporary value called distance which is how far we have moved from our start point so let's do float distance equals cannot transform the opposition dot x times the parallax effect and this will be how far we have moved in world space then we're going to need to actually move the camera so let's do transform the position equals new vector3 we're going to do start pause plus the distance which is how far we've traveled and we're going to do transform the opposition of Y transform the position dot C and now if we go into unity oh and we also need to move these to their corresponding layers so 0 goes to 0 1 goes to 1 and you get the idea okay so with that done we're gonna go ahead and apply the parallax effects to all of them and drag the camera onto the cam and now we can go ahead and set the parallax effect so for the parts all the way in the front we're gonna have a parallax effect of 0 which means it's going to move as if we're moving the camera past the foreground the second part is gonna have a bit more parallax effect so maybe 10.3 then we can do a 0.5 and zero point seven and then for the final background which is just basically whites and a bit yellow we're gonna put 1 which means it's going to follow the camera and look as if it stands completely still so if we try and play this now it's going to look a little something like this so we move the camera and you can tell that it looks really good and the different parts are moving at different speeds but if we move outside of bounds you're gonna see the background stops because we haven't made it so the background repeats itself yet so we need to go back into c-sharp and fix this luckily for us this is a pretty simple fix so let's do floats temp this is going to be how far we've moved relative to the camera so let's do camp the transform the opposition about x times 1 minus the parallax effects the reason we need 1 minus parallel effect is because again it's relative to the camera now all we need to do is make a simple if statement so if temp is larger than the start pause plus length we're going to do start pause plus equals length else if temp is less then start plus minus length we're going to do star pause minus equals length and that concludes the script if you go back into unity now and we try and play and we go ahead and move our camera you're gonna see that the background will keep repeating itself no matter how far you move so if we go ahead and look in the editor window you can see that when we reach the end it's going to repeat itself and it just continues repeating infinitely so that concludes this tutorial I hope you guys found this helpful you can make some really cool effects with this and if you did find it helpful make sure to hit the like button possibly subscribe if you're feeling funky and I will hopefully see you guys in the next video

Channel: Dani

Views: 509,689

Keywords: Unity, Unity game dev, Unity game devlog, Gamedev, indie gamedev, indie game devlog, game devblog, Unity tutorial, unity brackeys, Unity infinite background tutorial, uniti scrolling background tutorial, Unity parallax effect tutorial, unity parallax tutorial, unity3d parallax scrolling effect, unity parallex tutorial, easy parallax script download, unity game dev tutorial, unity how to parallax

Id: zit45k6CUMk

Length: 7min 58sec (478 seconds)

Published: Mon Feb 25 2019