Creating 2D Infinite Scrolling Background

Hey they're welcome this is Rajel from childhood games and I'm making a video up a lot of this. So sorry for that. So in this video we're going to learn how to create also in finite scrolling backgrounds for your games that you can use for your run or games for your platform or games. I think it is mainly for you to run your games or scrolling games where you will scroll in finally and Uniden in final scrolling background. And as you can see here we have two different things that are moving in different speeds. So that gives a parallax effect. It though it is 2D it gives us a 3D or deft effect of depth so that it looks like this is the foreground in the background because both of them are moving in different speed. So we get to learn how to do that in this video. So let's get started now. I created a video on this topic. I think there was three years ago. So I simply wanted to create an updated version of this. So I'm going to go ahead and create a new scene for all and I will see the scene inside in my here and I'm going to name it scrolling. Now I will use some of the assets that I have downloaded from the website. I guess all of you know about any DOT NL That is the best website to get any of your to the game artworks and also 3D as well. Most of them are free. So these are the assets that I'm going to use and as apps that I have downloaded them from. Kenny taught in a web site and I have actually purchased them as a back door they are available as free as well. So now I'm going to use some of the tiles I will use this one. And I think this one and this one you can use any one you want and drag and drop it inside my assets folder here. Now if you don't want to use this styled small images you can definitely use FULDE backgrounds of big sites. That's going to work the same way. So as you can see we have three of these things. Now we're going to see how we can use them in our game. Now if we drag and drop these things in our game as you can see we are here and they are important as is Sprite to the end. Why. Because this is a duty game but it was a 3D game. Then it would it would have been important as a texture. Now when we use sprites we cannot define it. We cannot generally use them as a texture of on any of or 3D objects. So if we cannot use it as a texture then we will not be able to actually school or background the efficient way that we want to do in this case. So what I want to do is I want to select all of my sprites and from the text type I'm going to make them default and when I make them before that pretty much means that that will be important as a texture. So I can click on apply and they will be imported as section. So now what we do is I'm going to go ahead and create a new 3D object and quite. And as you can see here I have my code. I will. Right click and reset its position to 0 0 0 and I'm going to go ahead and delete the Mischka lighter because it's to the game and don't need it through D-Mich. Collider. Now one thing you will see is that let me go in and disable the icon of the camera because that's not looking good. So one thing you see that if I go ahead and drag and drop my brick texture over this one you will see that now the brick has become a fixture over our sprite. You can probably see that in the game view but because we don't have a new light it is looking fairly dark. So to fix that what we can do is we can select our texture we can select a quad. And as you can see here we have already got a texture already got a shader so we can expand that and go to this shaded option. And from here you can go to a lot and texture. So when you select this texture it pretty much means that your texture or your Shito will not be affected by any of the lights in the scene. So no matter if it is dark no matter if we have light it will always stay the same like this because because we have set it to only texture. OK. Now when we are doing all these things it's better to create new material ourselves and do these things manually. So so instead of dragging instead sort of simply dragging the texture over it I'm going to create a new material for it so I'll right click Create and I'm going to create a new material and I will limit my background and I'm going to select the material. And as you can see here we have an option called Elzbieta of the material in the Elby do. I will drag and drop this brick gry texture. OK so now this material uses this texture as its own texture as you can see here and now again I'm gonna go ahead and the --. And from the left I will select texture. So now this is going to be like this. And now I'm going to drag this material into the texture to this brick right here. And if you select the brick as it can see now we have the background material on the brick. Now one thing you will see that our background is very pretty small and is definitely not what we want. So I'm going to select my quad and from the scale I will change the scale to 10 x and 10 on the Y. I think I need to make it bigger. So I'm going to make 20 on X and 20 on y. So now you can see out what is big enough but one single tile has scale up to feel the whole texture fills the whole quad. But we definitely don't want that we want as we had done before. Just like this when we had one single Oh when we had a quad of one unit. As you can see the texture was looking fine. So what I want to do is I want to make this texture repeat one by one by one to wow the whole squad. So let's go to here and make it 20 if we want to make it repeat throughout the whole quad then we need to go back to our texture settings and from here as you can see wrap mode is set to glam. We're going to select that and set it to repeat. So and then click on apply. So when we have said the wrap to repeat now we'll be able to make it repeat. So select our code. And if you go to the background material you will see here we have something called dialing. That means how many of these tires will stay throughout the squad. So as you can see for what we have been 20 on the X and 21 the Y. So here in the tilers we'll be going to give to you on the X and 20 on the Y. And let's see now it looks really awesome because it has dialed throughout the whole background. Now here is again see you we have another option called opposite. So this opposite means home which the dial is obsoleting from its current position. So if I go ahead and change the offset of the tile as you can see it seems that tide is moving. So just by changing the upset on the negative and the positive side we can simply make the time moving. We can also make the time moving by simply changing the Y upset on the up and down direction. So these are the two ways by which we can sit and move to die. So now we're going to go ahead and write a script to do this from a script. So I would right click and create and you see Shaf script and I will limit background scroll and I'm going to open it in mono Dervla not mono. We are using studio now so we're going to open it in Visual Studio. So now here what we need is first of all as you can see here we need to we need to change this thing. Man Well we need this Obstat volume manually. And this is part of the material that is have attached to the quad. So what you do is first of all we need to get access to the material that is attached to the quad. And after getting access to the material we need to change this up set of the quad Gosset of the material. OK. So first of all here I will create a new material material very evil. So this is a variable of type material which can store any material type of object inside this material will store the reference to the material of our game object material that is attached to our Beckenham optic. So here I Bluecoat I would avoid a wake function and inside a week I would say material equals good component render render dot Michiel. So what we'll do is this will give me access to the render component and from that we need a component we will be able to access the material. And then finally it stores the reference inside this material variable. So now we have access to the material of that is attached to this object inside this material variable. So just by using this material available now we'll be able to change anything we want on our game object on our texture. So now what we do is as you can see in order to set the opposite what it will tell it how much we want to do the opposite. As you can see currently it is zero. So we want to change it and we want to give options so that we can change it in X and Y both directions. So that is why we will create a vector to variable will create a vector to offset variable. So this is the vector to opposite variable inside which we will store how much we want the opposite in x and y direction. And here we will create two public for your books and this one will be public and velocity and y velocity. So these are the two variables inside which want to store by how much speed we want to move the background and depending on that speed we will create our opposite and depending on the opposite we will change the opposite of the material. So in the start I would say offset equals new vector to x velocity y velocity. So using the velocity variables we will create the OP said vector to him variable. Now comes the most important part inside the update. We need to modify this offset value with this opposite effect offset vector to variable that we have created here. So we already have access to the material from the material we need to get access to the opposite. And in order to get access to the offset here we need to simply write material dot main texture upset. So when we'd like that upset it gives us access to the opposite of that texture. So as you can see this meant that your opposite is a property because a get and set accessor. So just by writing equal sign we can set this fixture to. We can set the structure opposite to any value that we give. So here what we want to do is we want to do plus equals upset. So and we can multiply it by time door delta time. So here we are adding the offset value multiplied by time to time. Well we're meant the opposite. And then we are initializing all then we are actually assigning value to the mendicant offset again. So this plus equals pretty much means first of all we are doing plus and then we are assigning it the new value. Okay. So as you can see we are multiplying the offset by time the delta time time and pretty much means time taken to update the last frame. So this is pretty much all we need to move our background. So let's go to our unity and I'm going to drag and drop this back down script on our quad. So I'm like the quad and drag and drop this back chrome script and in the background as you can see we have explosive the end and the wives those that we know we can give them values depending on how much we want to move the texture in x and y direction. Let's get the x value to do and nullify Ronit know you'll see our background pretty much is moving. And if you go here and from the to the more if you select treatment if you click on the study and by clicking by right clicking all button on your keyboard you can drag it and rotate it in as you can see that we are not actually moving the background. We're simply wrapping the background around the texture and we are also doing it again and again and again. And because the background is repeatable and tie level it looks like we are actually moving and it constantly gets rotated and wrapped around the texture wrapped around the through the quad. For how much time we actually keep it. So this is how it actually works. The one thing you will notice is that if I want to when I run the game if I want to change the value of the X from here as it goes what do I change the value. It doesn't give effect on this background. That's because we are setting it only once in the start if we want to give this you want to change this value and make it effect to the background. I can go to my start function in this code and put it inside of Dade and simply go ahead and common this one out. So now every time we give a new value that will be updated inside the update function to our offset value. So now if I go to unity if I run it now you will see here we are moving with two speed. If I change it to something bigger like five can it moves faster and then it moves faster. And now I can make it zero and it doesn't move. Now I can give a velocity to y. Let's get to four. And as you can see it moves faster. Now I can give both of them velocities. And as you can see it moves something like this. It moves diagonally and I can give negative values to this one as well so that it moves on this direction and it moves on distraction as well. So this is how we can manipulate these values to give them any effect that we want. Now this is the basic of how we can move the background. Now what if we want to create a battleaxe effect and put another foreground in front of that where we want to move it with to move the texture with it. I'm what can you see with a fasters value faster speed value. So let's see how we can do that. For that I'm going to go ahead and create a new truly object and quad. And as you can see here we have our quad and I'm gonna go ahead and reset it's position and now as you can see we can not see it because the z value 0 and z value is zero here as well. So what I can do is for the second quad I'm going to make the z value negative 1 so that it comes closer to the camera. Now I will go and position each somewhere like this somewhere like this. So here we have our quad and now we need to use another texture on the squad. And for that I'm going to use this texture. So now let's go ahead and create our second material so I'm going to right click and create in new material. I will leave it fold round. And by selecting 8 inside it's a needle that will drag and drop this gem stone or whatever it is named and from here I will set the shader to let texture so that it becomes a little bit lighter. Then I'm going to drag and drop it on or quad. And as you can see now it looks pretty good. It looks something like this. Now one thing I've noticed in the newer versions of unity I think I've noticed in the 2018 itself I'm not sure when this version when this thing was available. I can see that even if I make it a sprite to you why I still have a repeat diction mode from here. So I am not sure why. From when they have used or introduced this feature so what I can say is that in 2018 and newer versions even if you set it right to the things you write even then you can set it to repeat mode set it's wrapped more to repeat so you don't need to make it a texture or default one. So glad Bly as you can see this is still the same because these things work the same way. So now the next thing when you do we need to select the quad set it's X and Y values that expelled at zero. And when it does set it's scale to iting 20. So previously you have seen that we were setting the x and y both of the skills 20:20. But this time we want to scale the we want to make the X scale only 20 and we do said the Y skill to one it self. And this time we will do the dialing in a different way so if you select second quad go to the foreground material. Now we will set the styling to 20 and we will keep the white dialing to 1 because we don't want to die in the y direction because we only have one quad in the Y. But but but in the X we have a lot of Kwan's. OK. So as you can see now it looks good. Only think of one thing that has to do is we need to simply go ahead and create another material which we can put down here. So I'm going to go ahead and create new material and I want to name it for ground too. And in the foreground too I will drag and drop this one and I will set let texture and here I'm going to duplicate this. I think I think I'm going to duplicate the squad so duplicate it. And now I'm going to put it right below it here. And this time instead of using this material I will drag and drop the new foreground material that we have created so foreground through drag and drop over it. And as you can see here as well we need to dilate because it is tiled you're only going to go to the material and mix the styling to any and keep the white darling to one because we don't need that. And as you can see here we have some problem in the seam is that because we have not said Wrap more to repeat so let's select this image go to here and select our wrap mode to repeat we can apply. And now as you can see it will be repeated. Now as you can see there we have a little bit of gap between both of these. So let's select the second one. Click the Viki or we need to say this when I think and then press the Viki will down and we'll be able to easily manipulate and move it to any other vertex just by using feek. So let me show it to one more time. Brenda VECCHI it's like this one and simply dragged to glam bit here so I can select both of these squads and simply move them down a little bit just like this. Now the only thing really to do is to select both of the squads and drag and drop or background scrolls script to both of them and previously in our first squad we had the explosive digit did too. So in both of the squads we're going to said velocity to 4 so that it looks like it moves faster. So now if I go ahead and run it and you will see that we have both of these things and of these things are moving faster and it gives us a parallax effect. It looks like this one was faster this one slower. So it gives us the look of a 3D like game. So one last thing I want to do is this. So here I have the sprites. You can use any sprites you want. I'm going to select all the sprites and I must select all the sprites and I will simply drag and drop it in our scene and he will see it will automatically create an animation. So I'm going to go to him and save it as I run any mission. Now as you can see our player will run whenever we put it here. So I'm going to put it right about here and now if I run it you will see our player is right though it's running very slow so it looks like it's not actually running correctly. So to fix that I can go to window and any mission I have any mission set here. So I think secretly the sample size is 12 that is because that is why the animation is running so slow. So let's go ahead and make the sample size from 12 to 30. And if I played now is going to Adrianne's faster. So when you write 30 update to make enter otherwise it will not be saved. So this time if I go to my game view and click on play now as you can see it looks like the player is running and I think I need to change the speed of foreground a little bit. Someone to select them and make the velocity I think eight. And this looks pretty good. I'm going to select the background and I think for the background I want to make it for I think to is good two or three I think three is good. So let's keep it at this position it looks like our player is running. And it is ready to create a new 3D game. So I have oh I think this is all for this video so I hope you really enjoyed this video and learned a lot. So thank you very much for watching. This is Roger from Charger games. And thanks for watching. We'll see you in the next videos.