1 00:00:03,090 --> 00:00:07,560 In this lecture, we're starting to play around with sprite shapes, make a little bit of a level layout, 2 00:00:07,560 --> 00:00:12,180 and to play around with the nodes in sprite shapes to make some jump. 3 00:00:12,180 --> 00:00:13,530 So let's get started. 4 00:00:13,530 --> 00:00:16,800 Let's start this process by making ourselves a new project. 5 00:00:16,800 --> 00:00:22,170 So Open Up Unity Hub, click on the new button will make a 2D project. 6 00:00:22,200 --> 00:00:27,960 I'm going to name mine Snowboard Dir and I'll save it in my repos unity 2D folder. 7 00:00:27,960 --> 00:00:31,530 Click on create and wait a moment for it to work its magic just there. 8 00:00:31,530 --> 00:00:37,080 While you are waiting for it to fire up, you can go to the resources against this lecture and download 9 00:00:37,080 --> 00:00:42,090 the snowboarder sprite assets will be needing those in a moment, so that'll either be to the right 10 00:00:42,090 --> 00:00:48,660 of this video or underneath this video you'll find the the resources and grab the download of the snowboarder 11 00:00:48,660 --> 00:00:49,830 sprite assets. 12 00:00:49,830 --> 00:00:51,750 Okay, that'll bring us to our new project. 13 00:00:51,750 --> 00:00:57,120 I'm going to grab my game window and just dock it next to my scene window so I can see these two side 14 00:00:57,120 --> 00:00:57,750 by side. 15 00:00:57,750 --> 00:01:00,000 Sometimes I'll pop that and say, I don't need you as much. 16 00:01:00,000 --> 00:01:02,340 Sometimes I'll drag it over and say, I need you more. 17 00:01:02,340 --> 00:01:06,690 But generally I like to be able to see them both because here I can see what I'm creating in my scene 18 00:01:06,690 --> 00:01:10,110 and over here in the game window I can see how it's going to look in the game camera. 19 00:01:10,110 --> 00:01:15,090 Now that file that I suggested you download, we're going to go and find that will unzip that because 20 00:01:15,090 --> 00:01:16,510 it's a zip file on windows. 21 00:01:16,510 --> 00:01:19,560 You can do that by right clicking, extract all and extract. 22 00:01:19,560 --> 00:01:23,130 I believe on Mac there's a similar process where you can easily unzip that. 23 00:01:23,160 --> 00:01:25,710 You can see now we've got our snowboarder sprite assets. 24 00:01:25,710 --> 00:01:32,580 I'm going to drag that down into my project just over the assets area that should work just fine release 25 00:01:32,580 --> 00:01:38,850 and then it will bring this import unity package window is going to click on import that will bring 26 00:01:38,850 --> 00:01:43,800 that into our game and it's probably in a folder called Sprites and in here it'd just give it a moment 27 00:01:43,800 --> 00:01:45,000 to think about things. 28 00:01:45,000 --> 00:01:46,140 It's going to go pop. 29 00:01:46,140 --> 00:01:46,470 There we go. 30 00:01:46,470 --> 00:01:47,100 It goes pop. 31 00:01:47,100 --> 00:01:49,500 You can see I've got the top and bottom part of my snowboarder. 32 00:01:49,500 --> 00:01:53,130 I've got a couple of trees, I've got a snow tile, low rez. 33 00:01:53,130 --> 00:01:55,710 That's an important one for this lecture and then some clouds as well. 34 00:01:55,710 --> 00:01:56,730 A couple of things in there. 35 00:01:56,760 --> 00:01:56,940 Okay. 36 00:01:56,940 --> 00:01:57,990 So now we've got our assets. 37 00:01:57,990 --> 00:02:01,110 What we want to do is create ourselves a sprite shape. 38 00:02:01,110 --> 00:02:06,840 So I'm going to hop into the hierarchy, right click, find 2D object, and then you'll see Sprite Shape 39 00:02:06,840 --> 00:02:10,110 and we're going to create ourselves a closed shape. 40 00:02:10,110 --> 00:02:13,260 So we want it to make a complete loop the whole way around. 41 00:02:13,260 --> 00:02:18,060 If we went for an open shape, that would be something if we just wanted, say, a wall that didn't 42 00:02:18,060 --> 00:02:19,260 make a complete circle. 43 00:02:19,260 --> 00:02:21,600 But for us, we want to be able to fill the inside of it. 44 00:02:21,600 --> 00:02:23,460 So we'll be using a closed shape. 45 00:02:23,460 --> 00:02:25,770 You see in here we've got this white thing. 46 00:02:25,830 --> 00:02:28,950 It looks a bit odd, looks like a tank track actually from the side. 47 00:02:28,950 --> 00:02:31,800 And we've got some handles we can move around. 48 00:02:31,800 --> 00:02:32,730 So, so far good. 49 00:02:32,730 --> 00:02:33,960 We've got something in our scene. 50 00:02:33,960 --> 00:02:39,090 If you hop over onto the right hand side in the inspector, you'll see the sprite shape controller has 51 00:02:39,090 --> 00:02:44,220 been added and it's automatically got a sprite shape profile as defaulted. 52 00:02:44,220 --> 00:02:49,770 That's the default one that's hidden somewhere in our packages, somewhere we could find it if we clicked 53 00:02:49,770 --> 00:02:50,250 on that. 54 00:02:50,250 --> 00:02:52,950 But that's a default, one that comes with our sprite shape. 55 00:02:52,950 --> 00:02:54,570 So I don't want to go and modify that one. 56 00:02:54,570 --> 00:02:56,070 I don't want to modify what's in the package. 57 00:02:56,070 --> 00:03:02,970 So I'm going to click in my assets directory here, jump into the sprites folder because I find there's 58 00:03:02,970 --> 00:03:10,860 a jump into the sprites folder and within here right click and create and we'll find ourselves up in 59 00:03:10,860 --> 00:03:11,610 2D. 60 00:03:11,610 --> 00:03:18,180 You'll see that there is a Sprite shape profile and I'm going to click on it and there's some information 61 00:03:18,180 --> 00:03:20,250 coming up in the inspector, but I just want to rename it. 62 00:03:20,250 --> 00:03:25,470 So hit F2 on your keyboard or you can slowly click twice on the words that gets there as well. 63 00:03:25,470 --> 00:03:31,170 And I'm going to rename this to B Snow Profile just so it's very clear, we've differentiated it from 64 00:03:31,170 --> 00:03:33,330 the default one that's hidden down in the packages. 65 00:03:33,330 --> 00:03:39,570 Now if I click back over on my closed sprite shape, you can see here within my Sprite shape controller 66 00:03:39,570 --> 00:03:43,560 profile, I'm going to drag my snow profile over to that box. 67 00:03:43,560 --> 00:03:45,960 And now we're using the snow profile. 68 00:03:45,960 --> 00:03:48,870 So we're using the one that we've created ourselves. 69 00:03:48,870 --> 00:03:50,970 Well, I'm here instead of closed sprite shape. 70 00:03:50,970 --> 00:03:55,590 I'm going to rename this to B level Sprite Shape. 71 00:03:55,590 --> 00:03:58,830 Now, the first thing we want to play around with is our snow profile. 72 00:03:58,830 --> 00:04:01,650 So if you have a look in here, there's a bunch of information going on. 73 00:04:01,650 --> 00:04:05,040 First of all, you can grab this little blue thingy and swing it around. 74 00:04:05,040 --> 00:04:08,940 We're not going to be doing much of that or if any of that in this project. 75 00:04:08,940 --> 00:04:14,520 But what it's showing here is what's the orientation as you move around in the world? 76 00:04:14,520 --> 00:04:18,930 So you can see we've got our sprite shape here, we've got the top, we've got the side and we've got 77 00:04:18,930 --> 00:04:19,649 the bottom. 78 00:04:19,649 --> 00:04:22,590 And if we look in closely, this will become a lot clearer in a moment. 79 00:04:22,590 --> 00:04:24,150 But we've got an edge. 80 00:04:24,150 --> 00:04:27,180 You can see where that line is and then it's filled in the middle. 81 00:04:27,180 --> 00:04:28,770 So we've got edge and fill. 82 00:04:28,770 --> 00:04:33,360 And if I click back on my snow profile here, it's saying, How should the top edge look and how should 83 00:04:33,360 --> 00:04:36,210 the right hand edge and the bottom edge and the left edge? 84 00:04:36,210 --> 00:04:38,430 We're going to have them all exactly the same for us. 85 00:04:38,430 --> 00:04:39,330 That's not going to matter. 86 00:04:39,330 --> 00:04:43,410 But in the future, you might want to say, well, the top of my world looks different to the bottom 87 00:04:43,410 --> 00:04:44,130 of my world. 88 00:04:44,130 --> 00:04:48,960 And if that's the case, what you can do is go down and fill in all this particular information in terms 89 00:04:48,960 --> 00:04:53,670 of what happens in the outer top left, the outer top right there in the bottom left, what happens 90 00:04:53,670 --> 00:04:54,720 in all of those corners. 91 00:04:54,720 --> 00:04:56,760 But for now, we're not going to dive into that too much. 92 00:04:56,760 --> 00:05:00,330 But I'm pointing it out so you can see it and it's demystified a little bit. 93 00:05:00,330 --> 00:05:02,580 And if you wanted to make those changes, you absolutely could. 94 00:05:02,770 --> 00:05:08,050 For us, we're going to have one overall shape that we're using for our edge. 95 00:05:08,050 --> 00:05:09,840 It's defaulting to this white thing here. 96 00:05:09,850 --> 00:05:12,460 We're going to use our snow tile low res. 97 00:05:12,460 --> 00:05:15,970 So just grab that and drag that over the top of where it says sprites. 98 00:05:15,970 --> 00:05:20,830 And we've currently got the sprite shape edge, drag it in there and bam, you can see that all of a 99 00:05:20,830 --> 00:05:26,830 sudden the whole way around the outside of our shape has that snow tile. 100 00:05:26,830 --> 00:05:29,980 Now we've got this kind of white blob in the middle instead of the white blob. 101 00:05:29,980 --> 00:05:31,450 I want this blue to continue. 102 00:05:31,450 --> 00:05:35,710 So you see the texture for the sprite shape fill because we're using a closed shape. 103 00:05:35,710 --> 00:05:38,860 I'm going to grab the blue fill and drag that over to the sprite shape fill. 104 00:05:38,860 --> 00:05:41,200 And now it looks like it's nice and closed. 105 00:05:41,200 --> 00:05:41,620 Excellent. 106 00:05:41,620 --> 00:05:43,180 So this is a good starting point. 107 00:05:43,180 --> 00:05:48,340 And you can see if we zoom out a little bit, this is where our camera currently thinks we want to look. 108 00:05:48,340 --> 00:05:51,700 So we get a little bit of a perspective of the size of our world. 109 00:05:51,700 --> 00:05:53,200 This is not the entire world here. 110 00:05:53,200 --> 00:05:55,180 This is just a little one aspect of it. 111 00:05:55,180 --> 00:05:57,220 So we want to make our Sprite shape bigger. 112 00:05:57,220 --> 00:06:01,450 I'm going to click on the Sprite shape within my scene window. 113 00:06:01,510 --> 00:06:04,690 We get some information over on the Sprite Shape controller. 114 00:06:04,690 --> 00:06:08,740 I can click on edit spline and now you can see there's four dots just here. 115 00:06:08,740 --> 00:06:10,960 This is where the magic happens, my friend. 116 00:06:10,960 --> 00:06:17,500 If you click on one of those dots and move it, we can move our shape organically and our texture updates, 117 00:06:17,500 --> 00:06:19,600 which is really super cool. 118 00:06:19,690 --> 00:06:20,950 Move it and updates. 119 00:06:20,950 --> 00:06:21,340 Move it. 120 00:06:21,340 --> 00:06:21,850 Updates. 121 00:06:21,880 --> 00:06:23,230 Nice, wonderful. 122 00:06:23,230 --> 00:06:27,400 You might say, but I want more than four dots in my world for four points. 123 00:06:27,400 --> 00:06:28,780 So just click anywhere. 124 00:06:28,780 --> 00:06:31,150 It'll create a new node or a new point. 125 00:06:31,150 --> 00:06:34,120 So click, click, click, and I can drag this out to the side. 126 00:06:34,120 --> 00:06:37,150 Drag, drag, drag doesn't really matter what happens down the bottom. 127 00:06:37,150 --> 00:06:38,320 The play is not going to be seeing it. 128 00:06:38,320 --> 00:06:40,030 We're not going to be cruising along there. 129 00:06:40,030 --> 00:06:45,670 But I'm just going to drag this out to make a bigger world, a bigger kind of playing level, if you 130 00:06:45,670 --> 00:06:45,850 will. 131 00:06:45,850 --> 00:06:49,360 Remember, this is the size of one window where our camera is. 132 00:06:49,360 --> 00:06:53,590 And you can see over here, this is one size and I'm going to move this one node all the way over to 133 00:06:53,590 --> 00:06:53,800 here. 134 00:06:53,800 --> 00:06:56,920 That seems fine for a start of a level, this one all the way over there. 135 00:06:56,920 --> 00:06:58,510 That seems fine for the end of the level. 136 00:06:58,510 --> 00:07:03,610 For now, we can tune this and I'm going to move this one over there just to make a big shape so the 137 00:07:03,610 --> 00:07:05,170 player's never seen the bottom. 138 00:07:05,170 --> 00:07:06,700 I'm going to do another click just here. 139 00:07:06,700 --> 00:07:10,600 Move that down below and move this one over to the left a little bit. 140 00:07:10,600 --> 00:07:11,140 There we go. 141 00:07:11,140 --> 00:07:14,290 So I've just kind of got a big old boxy kind of thing. 142 00:07:14,650 --> 00:07:16,240 Now let me show you how the handles work. 143 00:07:16,240 --> 00:07:19,360 If you've done any sort of vector manipulation, you'll be familiar with this. 144 00:07:19,360 --> 00:07:23,980 But if I make a new node clunk, you can see there's a yellow handle on either side. 145 00:07:23,980 --> 00:07:29,740 If I grab those that allows me to change how this curve takes place, I can move them in and out and 146 00:07:29,740 --> 00:07:33,970 you can see it changes the where the center point of the curve is happening. 147 00:07:33,970 --> 00:07:38,980 If it's very close to this node, then the angle is very close to the node as well. 148 00:07:38,980 --> 00:07:46,690 If I move the handle out further than it pushes where that curve central point is taking place. 149 00:07:46,690 --> 00:07:49,840 Okay, so I'm just going to move things around a little bit here. 150 00:07:49,840 --> 00:07:50,470 Actually, you know what? 151 00:07:50,470 --> 00:07:51,400 It's time for challenge. 152 00:07:51,400 --> 00:07:57,040 Let's make ourselves a little bit of a very basic level by adding in new nodes and by moving these handles, 153 00:07:57,040 --> 00:07:58,600 we'll make some jumps and stuff. 154 00:07:58,600 --> 00:08:02,170 Just one thing I'll show you first is if you go and add a node and you're like, Oh, I didn't want 155 00:08:02,170 --> 00:08:03,190 that node, just hit delete. 156 00:08:03,190 --> 00:08:04,810 So select a node by clicking on it. 157 00:08:04,810 --> 00:08:05,530 Hit delete. 158 00:08:05,560 --> 00:08:09,820 If you click somewhere else in your world, or if you click on, say, a different game object, you 159 00:08:09,820 --> 00:08:15,070 might lose all of your information as clicked back on your sprite shape and then click back on edit 160 00:08:15,070 --> 00:08:15,730 spline. 161 00:08:15,730 --> 00:08:16,570 That's important. 162 00:08:16,570 --> 00:08:19,150 That will bring up all of these particular nodes. 163 00:08:19,150 --> 00:08:24,100 So a quick challenge make a simple level, modify your sprite shape to create a simple layout that might 164 00:08:24,100 --> 00:08:26,290 be good for snowboarding and doing jumps and stuff. 165 00:08:26,290 --> 00:08:28,030 Don't spend too much time on it just yet. 166 00:08:28,030 --> 00:08:31,930 Just something to test our gameplay so that we can get a feel for sizes and shapes. 167 00:08:31,930 --> 00:08:37,090 We absolutely will be changing this again in the future, so just pause the video and play around with 168 00:08:37,090 --> 00:08:39,159 your sprite shape to make a little bit of a level. 169 00:08:41,169 --> 00:08:41,590 Okay. 170 00:08:41,590 --> 00:08:42,190 Welcome back. 171 00:08:42,190 --> 00:08:43,600 Let me show you what I'm going to do. 172 00:08:43,600 --> 00:08:48,550 I'm going to have a little bit of a start that is slightly flat, I think. 173 00:08:48,550 --> 00:08:52,090 And then we'll get into the jumps, we'll stretch out our nodes. 174 00:08:52,090 --> 00:08:52,690 I'll do this quickly. 175 00:08:52,690 --> 00:08:57,010 I might even speed up the video so that you don't have to watch me place every single one of these, 176 00:08:57,010 --> 00:09:02,440 but basically getting enough nodes so I can have some jumpy type things in there and then playing around 177 00:09:02,440 --> 00:09:03,130 with the handle. 178 00:09:03,130 --> 00:09:06,790 So you can see that's got a nice whoop up and then spin, spin and land. 179 00:09:06,790 --> 00:09:08,110 I like that shape to it. 180 00:09:08,110 --> 00:09:10,180 Maybe a little bit of a jump over a gap. 181 00:09:10,180 --> 00:09:15,370 So you get enough speed and then enough speed and then hopefully you jump over that gap and then land 182 00:09:15,370 --> 00:09:17,620 there smoothly, a little bit of a downhill. 183 00:09:17,620 --> 00:09:21,580 And then yeah, I'm just going to go and Chuck in a few more jumps and bumps and stuff. 184 00:09:21,580 --> 00:09:27,040 Like I said before, nothing to fancy, just going through the process nice and swiftly at the moment. 185 00:09:27,040 --> 00:09:27,730 So there we go. 186 00:09:27,730 --> 00:09:29,980 You can see the general shape of my level. 187 00:09:29,980 --> 00:09:34,930 This technique using sprite shapes is really, really powerful for making platformers as well. 188 00:09:34,930 --> 00:09:36,970 So I know we're making a bit of a snowboarding game. 189 00:09:36,970 --> 00:09:38,830 Could also be a cycling game. 190 00:09:38,950 --> 00:09:44,740 If you remember the old Cyclo Maniacs game, it's a classic, but this is a technique using sprite shapes 191 00:09:44,740 --> 00:09:49,480 that's really, really handy for a lot of side scrolling platformer type games in Unity. 192 00:09:49,480 --> 00:09:50,230 So there we go. 193 00:09:50,230 --> 00:09:51,310 Great work in this lecture. 194 00:09:51,310 --> 00:09:52,750 I will see you in the next one.