WEBVTT 00:00.040 --> 00:02.440 Right now we need to drag our background. 00:02.440 --> 00:03.600 So let's do that. 00:03.640 --> 00:08.040 We're going to move over to project tab, then assets and then sprites folder. 00:08.280 --> 00:12.680 And we have an environment folder over there I have background. 00:12.920 --> 00:16.200 As you can see we have BG one two and three. 00:16.360 --> 00:18.920 So we're going to drag our background one by one. 00:19.160 --> 00:20.520 So I'm going to select this one. 00:20.520 --> 00:24.920 So let's select that and drag it over to this scene view or in this hierarchy. 00:24.920 --> 00:27.280 So I'm going to drag it into this scene view. 00:27.680 --> 00:32.520 As you can see over here the background looks too much small. 00:32.520 --> 00:34.960 So we need to make it a little bit bigger. 00:34.960 --> 00:39.360 So what we can simply do we can select the sprite then go over to Inspector. 00:39.400 --> 00:42.600 Then we're going to make this pixel per unit a less number. 00:42.600 --> 00:45.440 And we do know that less pixel size means this. 00:45.480 --> 00:48.080 This sprite is going to be big in size. 00:48.080 --> 00:50.400 So I'm going to make it something around 16. 00:50.560 --> 00:54.680 And make sure you go just move over to this filter mode and choose No Filter. 00:54.680 --> 00:57.200 To just get rid of blurry and scroll down. 00:57.200 --> 01:04.540 Then click on this apply button and as soon as we clicked apply, we can see by now the sprite is too 01:04.540 --> 01:05.340 much big. 01:05.340 --> 01:09.980 And we're going to select all of those background and let's drag them as well one by one. 01:09.980 --> 01:12.580 So we're going to select both of these by holding down shift. 01:12.580 --> 01:14.820 And I'm going to select all of my backgrounds. 01:14.820 --> 01:19.940 Let's go to Inspector Pixel per unit I'm going to choose 16 filter mode to point no filter. 01:19.940 --> 01:22.580 And after doing that click on this apply button. 01:22.580 --> 01:24.260 And we're going to select one by one. 01:24.260 --> 01:25.460 And we're going to drag it. 01:25.460 --> 01:28.500 So I'm going to select this one and this one. 01:28.500 --> 01:34.460 But the problem is that this one should be behind of our this ground tiles. 01:34.460 --> 01:38.060 It seems like our backgrounds in front of our ground tiles. 01:38.060 --> 01:41.740 So what we need to do we need to assign some sorting layer. 01:41.780 --> 01:47.140 But before we do, let's uh, let's call this one to something like background one. 01:47.180 --> 01:52.820 Or we can simply call it BG one instead of saying like BG underscore one, underscore zero. 01:52.820 --> 01:56.700 So I'm going to call it BG one or simply for background one. 01:56.700 --> 02:00.720 And we're going to choose the second one and we're going to call this one VG two. 02:01.120 --> 02:04.400 Let's select the third one and we're going to call it VG three. 02:05.240 --> 02:06.040 Uh BG three. 02:06.040 --> 02:07.280 And now it's fine. 02:07.320 --> 02:09.520 Let's assign with some sorting layer. 02:09.520 --> 02:11.240 So we're going to select our first one. 02:11.240 --> 02:15.880 Let's go to Inspector Sprite Renderer then Sorting Layer and click there. 02:15.880 --> 02:18.000 And then click on Add Sorting Layer. 02:18.000 --> 02:24.400 And we're going to create uh three sorting layer, one for this background, one for our uh this one 02:24.400 --> 02:25.840 and one for this one. 02:25.840 --> 02:28.120 So we're going to create three sorting layer. 02:28.120 --> 02:30.640 So just click on this plus icon in the inspector. 02:30.640 --> 02:34.560 And we're going to name this to something like BG BG one. 02:35.200 --> 02:37.360 Sorry I'm going to call it BG one. 02:37.720 --> 02:39.480 And this will be BG two. 02:39.520 --> 02:44.080 So just click on that plus icon in order to add one more sorting layer. 02:44.080 --> 02:47.240 So we're going to click one more time and this will be BG three. 02:47.440 --> 02:50.040 And we're going to drag the BG three all the way behind. 02:50.040 --> 02:53.920 So it should be behind of our all of background. 02:53.920 --> 02:59.620 So that's why we're going to take our BG three and we're gonna drag it top up to make it, uh, to basically, 02:59.740 --> 03:01.140 uh, put it behind. 03:01.140 --> 03:05.460 And then we're going to select our BG two, and we're going to drag it on top of this BG three. 03:05.460 --> 03:08.020 So it's going to be in the middle somewhere like that. 03:08.020 --> 03:10.340 And now we're going to drag our BG one. 03:10.700 --> 03:13.660 And this is seems pretty much cool as you can see. 03:13.700 --> 03:18.020 And now what we have to do we need to assign this background with our sorting layer. 03:18.020 --> 03:20.300 So let's select the BG one in the hierarchy. 03:20.500 --> 03:26.420 Let's add then move over to Inspector Sprite Renderer and then click over here additional Settings and 03:26.420 --> 03:28.580 sorting layer for this BG one. 03:28.580 --> 03:31.140 So I'm going to choose uh this will be the front one. 03:31.140 --> 03:35.420 So I'm going to call it something like uh let's let's leave it to BG one. 03:35.420 --> 03:37.660 So we're gonna click over here Sorting Layer. 03:37.660 --> 03:39.980 And we're going to assign it with BG one. 03:40.260 --> 03:45.220 And now we're going to take the last one or which going to be behind all of our background. 03:45.260 --> 03:46.300 We're going to select that. 03:46.300 --> 03:48.340 And we're going to assign it with Bg3. 03:48.380 --> 03:49.860 As soon as we assign it. 03:49.860 --> 03:53.420 As you can see that background, just set it up in the back. 03:53.620 --> 03:55.400 It just move it over to back. 03:55.400 --> 03:58.040 And now we're going to select the middle one which is Bg2. 03:58.200 --> 04:00.680 And we're going to assign sorting layer to Bg2. 04:00.840 --> 04:05.000 Now as you can see it's uh seems pretty much fine. 04:05.000 --> 04:08.480 And we're going to select all of our background one more time in the hierarchy. 04:08.480 --> 04:10.320 Then go over to Inspector Transform. 04:10.320 --> 04:12.360 Right click and then click on this reset. 04:12.360 --> 04:14.120 So it's going to reset the position. 04:14.440 --> 04:17.600 And what I'm going to do I'm going to make the camera a little bit. 04:17.600 --> 04:20.760 Zoom out zoom out something like that. 04:20.760 --> 04:21.880 So we're going to make it. 04:21.880 --> 04:24.400 So let's select the camera pattern underneath. 04:24.400 --> 04:26.640 We have main camera as you can see. 04:26.680 --> 04:32.240 And we're going to make the size basically the zoom in something like I guess this much seems pretty 04:32.240 --> 04:34.600 much cool as you can see. 04:35.040 --> 04:37.080 And I'm going to drag my main camera. 04:37.360 --> 04:42.680 So let's select this camera pattern, select the move tool from in the scene view, and we're going 04:42.680 --> 04:44.960 to move it somewhere something like this much. 04:44.960 --> 04:50.800 And I'm going to drag it a little bit a little bit up in the y axis something like this. 04:51.360 --> 04:58.460 And what we can simply do, we can make this, uh, backgrounds a little bit small to just, uh, to 04:58.500 --> 05:03.500 just, uh, see all of this background perfectly in our main camera. 05:03.580 --> 05:06.020 So I'm going to select our background sprite. 05:06.020 --> 05:07.740 So we're going to select from that folder. 05:07.740 --> 05:10.540 So we have all of the backgrounds over here. 05:10.540 --> 05:14.140 As you can see we're going to select all of them by holding down shift. 05:14.180 --> 05:15.780 Then move over to Inspector. 05:15.780 --> 05:18.860 And we're going to make this pixel per unit a less number. 05:18.860 --> 05:20.620 And we do know less pixels. 05:20.780 --> 05:21.620 Uh sorry. 05:21.660 --> 05:23.180 We're not going to make it less. 05:23.180 --> 05:29.540 Instead we're gonna make it high, something like 20 to just make this, uh, sprite a little bit small. 05:29.540 --> 05:32.620 So we're going to do with some at something like 20. 05:32.660 --> 05:34.820 And now let's click on this apply button. 05:35.100 --> 05:41.860 And as soon as we clicked apply we can see this background just gets a little bit a little bit small. 05:41.860 --> 05:45.020 And what we're going to do now we're going to select one one more time. 05:45.020 --> 05:47.980 All of this background underneath uh in the hierarchy. 05:48.260 --> 05:52.350 And we're going to move it a little bit up to just capture this area. 05:52.350 --> 05:54.270 So we don't want any gap. 05:54.270 --> 05:57.070 So we're going to make it a we're going to drag it a little bit. 05:57.310 --> 05:58.830 I think it's fine. 05:58.870 --> 06:00.030 As you can see. 06:00.070 --> 06:02.470 And it looks pretty much good by now. 06:03.270 --> 06:06.070 And let's click on this play button in the top. 06:06.070 --> 06:08.150 We should hope it's gonna work fine. 06:08.270 --> 06:16.670 So what we need to do, we need to make parallax effect as well as we need to basically endlessly. 06:16.910 --> 06:19.550 This background should add up in front. 06:19.870 --> 06:24.950 So if we select our player game object in the hierarchy and make the speed a little bit fast, something 06:24.950 --> 06:25.750 like five. 06:25.790 --> 06:30.390 As you can see, we're moving a little bit faster and this seems pretty much cool. 06:30.390 --> 06:34.390 So the background just gets over and over here as you can see. 06:34.390 --> 06:37.990 So what we're gonna do we're gonna duplicate our background a little bit. 06:37.990 --> 06:38.870 So let's do that. 06:38.870 --> 06:43.750 So let's get out of play mode and we're gonna duplicate our background. 06:43.750 --> 06:45.710 So let's select all of this background. 06:46.190 --> 06:49.310 Uh, but before we do let's create an empty game object. 06:49.310 --> 06:51.570 And we're going to call it something like background. 06:51.610 --> 06:57.530 Basically, we're going to create that game object in order to make our our hierarchy a little bit clean. 06:57.530 --> 06:59.530 So let's right click in our hierarchy. 06:59.530 --> 07:01.410 Let's create an empty game object. 07:01.410 --> 07:04.890 And we're going to call this game object to something like background holder. 07:04.890 --> 07:07.810 Or we can simply call it backgrounds instead. 07:08.250 --> 07:09.890 So I'm going to call it backgrounds. 07:09.890 --> 07:12.410 And make sure you just go to Inspector Transform. 07:12.410 --> 07:14.010 Right click and reset it. 07:14.010 --> 07:18.690 And if you just want to choose an icon, you can click over here in the Inspector and you can choose. 07:18.690 --> 07:21.490 So I'm going to select this yellow one. 07:21.490 --> 07:26.490 And now I'm going to take all of this background this BG one B2 and B3. 07:26.490 --> 07:29.410 And I'm going to drag it on top of this background game object. 07:29.410 --> 07:34.970 In order to make this background is a child of this background background game object. 07:34.970 --> 07:38.530 And now we can just click over here to just collapse it at once. 07:38.530 --> 07:42.570 And we can see this is now much, much more clean. 07:43.050 --> 07:46.890 Uh, by now our hierarchy a little bit clean as you can see. 07:47.130 --> 07:49.790 And we're going to make this background a prefab as well. 07:49.790 --> 07:51.190 So we're gonna have the copy. 07:51.190 --> 07:55.750 So let's select the background game objects backgrounds GameObject in the hierarchy. 07:55.750 --> 07:59.550 And let's drag it over to this prefab folder in this project tab. 07:59.790 --> 08:02.030 And now we just turn it into a prefab. 08:02.070 --> 08:05.670 And we are ready to duplicate our background by now. 08:05.670 --> 08:06.710 So let's do that. 08:06.710 --> 08:08.190 So we're gonna select our background. 08:08.190 --> 08:10.710 Let's click over here to in order to expand. 08:10.710 --> 08:13.950 And we're gonna select all of this background by holding down shift. 08:13.950 --> 08:17.390 And we're going to press down Ctrl D in order to duplicate. 08:17.390 --> 08:20.590 And then we're going to select the move tool from in this in view. 08:20.590 --> 08:24.390 And we're going to move it to the right side to just fit this area. 08:24.910 --> 08:27.470 And you need to just give it a perfect number. 08:27.470 --> 08:31.550 So make sure there is no there shouldn't be any gap. 08:31.830 --> 08:34.470 So I guess 100 is pretty fine number. 08:34.670 --> 08:36.670 Or we can just play around with this. 08:37.630 --> 08:42.110 So 100 and 102 five just gonna be a perfect number. 08:42.110 --> 08:44.950 So we're going to put 102.5. 08:45.350 --> 08:51.130 But it doesn't seem So we can just go with the zero five, I guess. 08:51.850 --> 08:53.330 No, two. 08:53.490 --> 08:56.130 And I guess so two seems perfect. 08:56.130 --> 09:02.690 As you can see, we are not able to see any gap between this background and now what we have to do. 09:02.690 --> 09:05.890 We need to select the duplicate one or we just duplicate it. 09:05.890 --> 09:10.370 So in our case this BG one and we're going to drag it on top of this the first one. 09:10.370 --> 09:13.930 So basically make the duplicate one is a child of the first one. 09:13.930 --> 09:15.530 So we're going to select our BG two. 09:15.530 --> 09:20.210 And we're going to drag it top of this BG two game object in order to make it child. 09:20.210 --> 09:22.810 And we're going to select our third background. 09:22.810 --> 09:26.930 And I'm going to drag it on top of this BG three in order to make it child. 09:27.090 --> 09:32.170 And now what we have to do, we need to select our background and make sure go to overrides and then 09:32.170 --> 09:34.410 click on Apple Apply all. 09:34.410 --> 09:39.610 So the changes you made in this hierarchy of this background game object, it's going to be saved into 09:39.610 --> 09:43.530 that prefab of this background game object as well. 09:43.570 --> 09:45.890 And now we can see it's pretty much fine. 09:45.890 --> 09:50.910 And I'm going to make my player speed a little bit fast in order to see that. 09:50.910 --> 09:53.510 So I'm going to select our player GameObject in the hierarchy. 09:53.830 --> 09:55.190 Let's go to Inspector. 09:55.350 --> 10:01.910 And I'm going to make the speed something like uh five point or let's make it something around seven. 10:02.230 --> 10:05.870 And let's click on this play button in order to play our game. 10:05.870 --> 10:08.390 And let's have a look on this. 10:14.190 --> 10:15.590 So just wait. 10:16.350 --> 10:18.950 And we can see this is now pretty much fine. 10:19.310 --> 10:24.710 And we can see the background is also becoming red. 10:24.990 --> 10:29.550 And this seems pretty much fun to play as you can see. 10:29.710 --> 10:37.230 So I hope you get the idea that how you can make this one work and the background just gets end over 10:37.230 --> 10:37.510 there. 10:37.510 --> 10:38.870 So we need to fix that. 10:38.870 --> 10:43.190 So we're going to fix it in the next chapter or next lecture. 10:43.190 --> 10:44.190 We're going to do that. 10:44.190 --> 10:45.790 So let's get out of play mode.