1 00:00:03,980 --> 00:00:08,630 In this lecture, we're going to make the player feel like they're flowing through space by adding a 2 00:00:08,630 --> 00:00:10,490 parallax scrolling background. 3 00:00:11,090 --> 00:00:13,610 So what is a parallax scrolling background? 4 00:00:13,640 --> 00:00:18,920 Well, if you've ever played any 2D games before, then you've almost certainly encountered this effect 5 00:00:18,920 --> 00:00:20,810 and it's this effect here. 6 00:00:20,960 --> 00:00:22,850 So what's going on here? 7 00:00:22,880 --> 00:00:29,240 Well, we have multiple different layers making up this image, and they're scrolling at different speeds. 8 00:00:29,360 --> 00:00:34,880 And by adding these additional scrolling layers, we can give an artificial sense of depth. 9 00:00:35,000 --> 00:00:39,850 This particular example and the one we're going to use only has two layers. 10 00:00:39,860 --> 00:00:43,480 But if you add more layers, then this will give you even more depth. 11 00:00:43,490 --> 00:00:48,830 And it's quite common to have maybe three or four layers making up the background and foreground for 12 00:00:48,830 --> 00:00:49,520 your game. 13 00:00:49,970 --> 00:00:54,530 Now how do we get from what we've got now to what we want with our parallax scrolling? 14 00:00:54,740 --> 00:00:59,360 Well, first of all, we're going to have to break up our image because we've currently got this whole 15 00:00:59,360 --> 00:01:03,740 thing as a single image, and we're going to want to split this into two layers. 16 00:01:04,099 --> 00:01:09,650 Then once we've got our two layers, we can move one of the images quite slow in the background and 17 00:01:09,650 --> 00:01:13,430 then add the other one on top, moving at a slightly faster speed. 18 00:01:13,850 --> 00:01:19,670 And notice here that the layers higher up in our order have to have some transparent areas to them or 19 00:01:19,670 --> 00:01:23,920 an overall transparency so that we can still see some of the layers beneath. 20 00:01:23,930 --> 00:01:29,210 If the top layers are fully opaque, then they're just going to obscure the bottom layers and the effect 21 00:01:29,210 --> 00:01:30,470 isn't going to work. 22 00:01:30,680 --> 00:01:34,700 So let's jump into unity and see how we can do this in practice. 23 00:01:34,880 --> 00:01:40,370 Well, the first thing we're going to need is our two background images, and you can find these attached 24 00:01:40,370 --> 00:01:42,240 to the resources for this lecture. 25 00:01:42,260 --> 00:01:49,310 So if we head into our asset packs, I've already imported our stars zero and our stars one image. 26 00:01:49,340 --> 00:01:53,740 Now, later on, we will need to change some of the import settings here. 27 00:01:53,750 --> 00:01:58,940 But for now, the only one we really need to worry about is that the alpha is transparent. 28 00:01:59,240 --> 00:02:03,620 The reason I'm not going to change the other options that we definitely need to change in here is because 29 00:02:03,620 --> 00:02:08,870 I want to show you what happens when we forget so that we know how to troubleshoot it later on. 30 00:02:09,259 --> 00:02:12,830 So with our images in, let's drag them into our hierarchy. 31 00:02:12,830 --> 00:02:18,860 So let's take our stars zero and drag it under our background and then drag our stars one onto the background 32 00:02:18,860 --> 00:02:19,610 as well. 33 00:02:19,820 --> 00:02:23,840 Then we can go ahead and delete our star field because we don't need that anymore. 34 00:02:23,870 --> 00:02:29,480 And if all is well, then you should see the stars zero on the back and stars one on the front. 35 00:02:29,480 --> 00:02:34,640 But you may be having some sort order in layer issues with the background and your ship and everything 36 00:02:34,640 --> 00:02:35,110 else. 37 00:02:35,120 --> 00:02:39,440 So let's go ahead and just set the order in layer for these up as well. 38 00:02:39,680 --> 00:02:41,120 Now we've got two options here. 39 00:02:41,120 --> 00:02:46,370 We could set the background onto its own sorting layer so it never interferes with anything else. 40 00:02:46,380 --> 00:02:49,670 But for now, I think we'll just change the order in layer. 41 00:02:49,760 --> 00:02:55,340 And remember, we've got projectiles on layer zero, ships on layer one, and our explosions now on 42 00:02:55,340 --> 00:02:56,120 layer two. 43 00:02:56,150 --> 00:03:02,960 So let's set our stars zero to be order negative two and our stars one to be negative one. 44 00:03:03,110 --> 00:03:07,250 And that should make sure that everything in our game appears on top of our background. 45 00:03:07,670 --> 00:03:12,680 Next, we're going to need to apply a brand new material to these two objects, because this is what's 46 00:03:12,680 --> 00:03:16,370 going to allow us to start scrolling the image on top of that material. 47 00:03:16,640 --> 00:03:22,760 So rather than using the sprites default material, let's right click in our assets folder, create 48 00:03:22,760 --> 00:03:26,990 a new material and let's call this M Underscore background. 49 00:03:28,070 --> 00:03:36,620 In here we need to change our shader from standard and if we head down to unlit and then transparent 50 00:03:37,100 --> 00:03:41,120 with that set up, let's drag that material over to our two objects. 51 00:03:41,120 --> 00:03:44,660 So our stars zero and our stars one in the hierarchy. 52 00:03:45,020 --> 00:03:50,210 And before we start to code, let me just show you how this is going to work and the problem that I 53 00:03:50,210 --> 00:03:51,920 left intentionally before. 54 00:03:52,160 --> 00:03:58,700 So the idea is that in code we're going to take our texture from our sprite and then over time we're 55 00:03:58,700 --> 00:04:00,890 going to change the offset value. 56 00:04:00,890 --> 00:04:05,300 And if we change the Y offset, we'll see that the texture starts to scroll. 57 00:04:05,450 --> 00:04:11,230 But we do have a bit of a problem at the moment and we can see that the texture is being stretched out 58 00:04:11,240 --> 00:04:11,630 now. 59 00:04:11,630 --> 00:04:17,930 To fix this problem, we need to head in to our images and if we look at the import settings right near 60 00:04:17,930 --> 00:04:22,550 the bottom, we've got this wrap mode and this by default is set to clamp. 61 00:04:22,970 --> 00:04:28,400 And what clamp does is as the texture moves, it will just take our top line of pixels in this case 62 00:04:28,400 --> 00:04:30,050 and extend them down. 63 00:04:30,050 --> 00:04:36,170 This wrap mode does have its uses, but for our case we want to go ahead and change it from clamp to 64 00:04:36,170 --> 00:04:36,980 repeat. 65 00:04:37,220 --> 00:04:39,470 If we then go down and hit, apply. 66 00:04:40,530 --> 00:04:46,710 We'll say that our texture is now appearing correctly, and if we click back on our material and continue 67 00:04:46,710 --> 00:04:51,900 to change the Y offset, we'll see that the texture now scrolls nicely. 68 00:04:52,320 --> 00:04:54,170 That's roughly what we want to do. 69 00:04:54,180 --> 00:04:57,750 So let's zero out our y offset to put that back to zero. 70 00:04:57,750 --> 00:05:00,300 And now let's look how to do this in code. 71 00:05:00,630 --> 00:05:02,490 For this, we're going to need a new script. 72 00:05:02,490 --> 00:05:04,290 So let's go into our script folder. 73 00:05:04,530 --> 00:05:09,390 Right click create a new C-sharp script called Sprite Scroller. 74 00:05:11,080 --> 00:05:17,950 Then let's take our stars zero and our stars one in our hierarchy and add that sprite scroller component. 75 00:05:18,310 --> 00:05:20,890 And now let's go ahead and open up that script. 76 00:05:21,910 --> 00:05:22,390 In here. 77 00:05:22,390 --> 00:05:28,390 We want to clean up our comments above, start and update, but we do want both of these methods for 78 00:05:28,390 --> 00:05:29,160 our variables. 79 00:05:29,170 --> 00:05:32,680 First of all, we're going to want a serialized field for our move speed. 80 00:05:32,680 --> 00:05:38,860 So this is going to be a vector to, to give us control over both the X and Y components of our texture. 81 00:05:39,040 --> 00:05:41,170 And we'll call this the move speed. 82 00:05:42,100 --> 00:05:48,250 Then to make life easy when we're coding, we're going to need a vector to to store the offset to the 83 00:05:48,250 --> 00:05:51,250 amount of movement that we're going to do each frame for our texture. 84 00:05:51,370 --> 00:05:54,730 And we're also going to grab a reference to the material itself. 85 00:05:54,730 --> 00:05:57,130 So let's call that material now. 86 00:05:57,130 --> 00:05:58,360 I told you a lie before. 87 00:05:58,360 --> 00:06:00,760 We don't actually need our start method. 88 00:06:00,760 --> 00:06:06,040 What we need instead is our awake method because the first thing we want to do in this script is grab 89 00:06:06,040 --> 00:06:12,100 a reference to the material we're going to be changing, and we can grab this material by saying material 90 00:06:12,520 --> 00:06:19,300 equals get component of type sprite renderer because we're interested in the Sprite Renderers material 91 00:06:19,450 --> 00:06:21,100 DOT material. 92 00:06:21,700 --> 00:06:25,600 Now in our update loop, this is where the magic is going to happen. 93 00:06:25,600 --> 00:06:28,750 And writing this is going to be a challenge for you. 94 00:06:29,170 --> 00:06:32,590 I want you to make our materials start to scroll. 95 00:06:32,740 --> 00:06:37,360 And as a hint, because this is quite a tricky challenge and we've not encountered all of the parts 96 00:06:37,360 --> 00:06:38,290 of it before. 97 00:06:38,320 --> 00:06:42,790 The general logic is that we're going to calculate the offset for this frame. 98 00:06:42,790 --> 00:06:47,380 So think about how we can use the move speed to create the offset for a given frame. 99 00:06:47,380 --> 00:06:52,450 And then I want you to modify the material main texture offset. 100 00:06:52,540 --> 00:06:56,230 So pause the video now and give that one your best shot. 101 00:07:01,650 --> 00:07:02,100 Okay. 102 00:07:02,120 --> 00:07:03,000 Welcome back. 103 00:07:03,020 --> 00:07:05,690 So the logic here is just two lines of code. 104 00:07:05,690 --> 00:07:08,000 So I'm not going to create a new method for this. 105 00:07:08,000 --> 00:07:10,310 I'm just going to put it straight in the update. 106 00:07:10,310 --> 00:07:13,190 And the first step is to create our offset. 107 00:07:13,610 --> 00:07:19,520 And this offset is just going to be our move, speed multiplied by time, delta time. 108 00:07:19,520 --> 00:07:22,610 So we're making the move speed frame rate independent. 109 00:07:22,970 --> 00:07:30,020 Then to apply this to our main texture offset, we're going to say material dot main texture offset 110 00:07:30,110 --> 00:07:32,600 plus equals the offset. 111 00:07:33,170 --> 00:07:35,960 So that is really all there is to this effect. 112 00:07:35,960 --> 00:07:42,590 If we save up our script and jump back into unity, we can now go ahead and look at our stars zero. 113 00:07:42,830 --> 00:07:47,150 We close up our material because we don't really need to change that directly in here. 114 00:07:47,180 --> 00:07:49,910 What we're more interested in is our sprite scroller. 115 00:07:49,940 --> 00:07:55,640 So by having a vector two for our move speed, we have control over both the X and the Y. 116 00:07:55,640 --> 00:08:02,840 But for my particular game, I'm only interested in the Y and I'm going to move this around 0.1 so fairly 117 00:08:02,840 --> 00:08:03,560 slowly. 118 00:08:03,740 --> 00:08:09,050 Then to create some parallax, we can move over to our stars one head down to our sprite scroller, 119 00:08:09,050 --> 00:08:13,910 move speed and we're going to set the Y component to around 0.2. 120 00:08:13,910 --> 00:08:15,650 So it's moving twice as fast. 121 00:08:16,160 --> 00:08:22,310 If we then go ahead and hit play, we'll see that we now get this nice parallax scrolling background. 122 00:08:23,150 --> 00:08:31,850 If we click on our styles one and reduce the Y component down to 0.1, we get a static scrolling background 123 00:08:32,390 --> 00:08:36,650 and we can also do some strange things like add some X direction as well. 124 00:08:37,010 --> 00:08:43,520 So with this setup we can add multiple layers and we also have very fine grained control over the direction 125 00:08:43,520 --> 00:08:46,280 and speed that this texture is going to be scrolling. 126 00:08:46,850 --> 00:08:51,000 And with that, I think our game visually is now looking pretty good. 127 00:08:51,020 --> 00:08:55,880 We have a nice scrolling background to make us feel like we're flying through space rather than just 128 00:08:55,880 --> 00:08:57,450 hovering in position. 129 00:08:57,470 --> 00:09:03,200 We have explosions on our enemies and on our player, and when we get hit, we have a nice bit of screen 130 00:09:03,200 --> 00:09:03,800 shake. 131 00:09:04,100 --> 00:09:08,570 With our visual improvements now, pretty much there in the next lecture, we're going to start looking 132 00:09:08,570 --> 00:09:10,060 at adding some audio. 133 00:09:10,070 --> 00:09:11,540 So I'll see you there.