1 00:00:03,120 --> 00:00:03,900 Hello and welcome. 2 00:00:03,900 --> 00:00:05,450 In this lecture we're talking about tall map. 3 00:00:05,460 --> 00:00:10,560 We're going to be setting up a palette and then creating just a really simple, basic platformer for 4 00:00:10,560 --> 00:00:11,340 our game. 5 00:00:11,340 --> 00:00:12,630 So let's get started. 6 00:00:12,660 --> 00:00:15,450 Let's start with a little bit of terminology about the tall map pipeline. 7 00:00:15,450 --> 00:00:20,760 We've already chopped up our sprite sheet to create individual sprites that we can use to turn into 8 00:00:20,760 --> 00:00:23,160 tile assets, which we'll be doing in a moment. 9 00:00:23,160 --> 00:00:27,830 Those tile assets, we can add to a tile palette which is kind of like an artist palette, you know, 10 00:00:27,840 --> 00:00:30,840 the blue that allows you to paint here and the red that allows you paint there. 11 00:00:30,870 --> 00:00:32,340 This is our tile map palette. 12 00:00:32,340 --> 00:00:37,200 And then we're going to add those onto a tile map that will allow us to create our scene with platforms 13 00:00:37,200 --> 00:00:38,850 and background and all that good stuff. 14 00:00:38,850 --> 00:00:43,080 We'll be going through this flow, which is also our challenge for this lecture, creating a simple 15 00:00:43,080 --> 00:00:43,740 platform. 16 00:00:43,770 --> 00:00:46,110 And first of all, we need to create a platforms tile map. 17 00:00:46,110 --> 00:00:50,670 What I mean by platforms is the things that the player runs around and jumps on the actual platforms. 18 00:00:50,670 --> 00:00:56,310 And then we need to be creating a tile palette to paint onto the tile map. 19 00:00:56,310 --> 00:01:02,100 We need to format our tile palette, rearrange things a little bit if we need to, particularly to flip 20 00:01:02,100 --> 00:01:05,730 the things that we've only got, say, a left side of in our assets. 21 00:01:05,730 --> 00:01:06,960 We need a right side as well. 22 00:01:06,960 --> 00:01:09,570 And then we'll paint just a very simple platform, a layout. 23 00:01:09,570 --> 00:01:14,280 So in Unity, let's right click in our hierarchy and create ourselves a 2D object. 24 00:01:14,280 --> 00:01:16,650 This will be tile map and rectangular. 25 00:01:16,680 --> 00:01:19,080 Rectangular gives us all these lovely grids. 26 00:01:19,080 --> 00:01:20,760 This is our tile map. 27 00:01:20,760 --> 00:01:25,080 So basically it's saying in all these particular grids, you can put a thing in here, you can put a 28 00:01:25,080 --> 00:01:26,520 piece of information. 29 00:01:26,520 --> 00:01:32,310 And from tile map, I'm going to rename that to B, let's see, platforms, tile map. 30 00:01:32,310 --> 00:01:33,720 Just so we know it's for the platforms. 31 00:01:33,720 --> 00:01:37,860 Later on we're doing background, we might be doing pickups, etc. and instead of Grid, I'm going to 32 00:01:37,860 --> 00:01:42,720 rename this to be called Tile Map Grid. 33 00:01:42,720 --> 00:01:46,000 Just so it's really clear in the future, I'm not saying what is grid. 34 00:01:46,020 --> 00:01:48,180 I'm like, oh, sorry, tile map easy now. 35 00:01:48,180 --> 00:01:50,160 Next step over in the assets folder. 36 00:01:50,160 --> 00:01:54,810 We want to right click create a folder which I will call tiles. 37 00:01:54,810 --> 00:01:58,650 That's where we'll be saving all these tile related things that need to be assets, but we don't need 38 00:01:58,650 --> 00:01:59,670 to be playing around with them. 39 00:01:59,670 --> 00:02:02,040 So I don't want them to get into way in the way of my sprites. 40 00:02:02,040 --> 00:02:10,320 So in the Sprite folder and also we're going to click on window and bring in from 2D the tile palette. 41 00:02:10,320 --> 00:02:16,740 I'm going to dock my tile palette just to the left next to my scene, give myself a little bit of space 42 00:02:16,740 --> 00:02:16,860 here. 43 00:02:16,860 --> 00:02:19,230 So I've got the palette on the left and the scene on the right. 44 00:02:19,230 --> 00:02:20,370 I think we're ready to go. 45 00:02:20,370 --> 00:02:22,830 So next step is we want to create a new palette. 46 00:02:22,830 --> 00:02:24,270 So click on Create New Palette. 47 00:02:24,270 --> 00:02:29,040 I'll call this Platforms Palette and then click on Create. 48 00:02:29,040 --> 00:02:30,150 Where do we want to save that? 49 00:02:30,150 --> 00:02:34,920 Well, I'm going to find assets and then tiles the folder we just created a moment ago. 50 00:02:34,920 --> 00:02:37,500 Select that folder that'll be saved if we click in tiles. 51 00:02:37,500 --> 00:02:40,650 You see that as a platform palette prefab. 52 00:02:40,650 --> 00:02:43,440 So this is a prefab that we're using as our palette. 53 00:02:43,440 --> 00:02:49,410 Our palette is the arrangement of our sprites, of our tiles that we can then go and scatter it around 54 00:02:49,410 --> 00:02:51,270 our world as our heart desires. 55 00:02:51,270 --> 00:02:55,320 So clicking back on sprites, I'm going to find my rock, grass, water. 56 00:02:55,320 --> 00:03:02,970 So in other words, your platforms, sprite sheet and open that up and click on the first of those highlight. 57 00:03:02,970 --> 00:03:06,570 So scroll all the way down shift click to highlight all of these. 58 00:03:06,570 --> 00:03:11,490 So all of these different elements of the sprite sheet, I'm going to drag that over into my tile palette 59 00:03:11,490 --> 00:03:17,310 and bump it will ask us why we want to save that once again, assets, tiles and that folder. 60 00:03:17,310 --> 00:03:18,300 Yes, select folder. 61 00:03:18,330 --> 00:03:22,140 It'll convert them into assets which I'll just pop over to the tiles directory. 62 00:03:22,140 --> 00:03:29,550 You can see all these little assets now these are individual tile palette assets asset and we have in 63 00:03:29,550 --> 00:03:32,040 our tile palette our particular tiles. 64 00:03:32,040 --> 00:03:35,760 Now let's do a little bit of painting over in our window over here. 65 00:03:35,760 --> 00:03:41,160 You can see if I click on say the top left and place that down, we get a top left tile. 66 00:03:41,160 --> 00:03:45,570 If I click on a tile next to that and place it down, I get the next one and next one and so on. 67 00:03:45,570 --> 00:03:50,100 If I want the green ones, maybe on all of these I can click and drag across all these and place all 68 00:03:50,100 --> 00:03:52,350 of the green ones down and place some place, some place. 69 00:03:52,350 --> 00:03:57,060 However, I want to do it so you could highlight all of these and plop them down to your heart's content. 70 00:03:57,090 --> 00:04:00,240 Not that you would do that because it looks a bit odd, but I just want to show you that if you do that, 71 00:04:00,240 --> 00:04:03,240 it will overwrite exactly those particular squares. 72 00:04:03,240 --> 00:04:04,470 So this is not going on top. 73 00:04:04,470 --> 00:04:05,130 On top, on top. 74 00:04:05,130 --> 00:04:10,440 It's just saying in that particular square, if I click on this left hand green thingy and I'll say 75 00:04:10,440 --> 00:04:17,399 this square, that is what is in that particular square on our particular tile map in this particular 76 00:04:17,430 --> 00:04:18,029 occasion. 77 00:04:18,029 --> 00:04:19,350 Lots of particulars in there. 78 00:04:19,350 --> 00:04:26,280 Now, we can also in here use the erase so you can see up top right second from the right there is the 79 00:04:26,280 --> 00:04:27,150 erase brush. 80 00:04:27,150 --> 00:04:30,330 Click on that and I can erase certain things in there very handy. 81 00:04:30,330 --> 00:04:34,320 I can also move by clicking on the Move tool and then click on Move. 82 00:04:34,320 --> 00:04:35,790 This is a little bit trickier, right? 83 00:04:35,790 --> 00:04:38,670 You'd think I'll click on Move and then grab and move. 84 00:04:38,670 --> 00:04:40,140 You have to do it the other way around. 85 00:04:40,140 --> 00:04:45,150 Thank you, Tom, that you click on the selection and then you select a particular thing and then you 86 00:04:45,150 --> 00:04:49,170 click on Move and now we can move that particular thing where we want to. 87 00:04:49,170 --> 00:04:54,210 So that's a little bit clunky in my opinion, but that is how we click and select and move things. 88 00:04:54,540 --> 00:04:59,280 Now if you have a look, we've got our top left and our tile palette that's come from our sprite sheet. 89 00:04:59,280 --> 00:05:02,430 If I go and pop that in the world and then grab the next to put. 90 00:05:02,540 --> 00:05:02,810 That. 91 00:05:02,810 --> 00:05:04,070 Put that, put that, like, cool. 92 00:05:04,070 --> 00:05:09,260 Now I want to round this off and have the right hand side, but we don't have the right hand side in 93 00:05:09,260 --> 00:05:09,500 here. 94 00:05:09,500 --> 00:05:15,530 So what I could do a couple of ways I could click on this top left, pop that in the world and then 95 00:05:15,530 --> 00:05:19,670 click on my selection tool, top left in the tile palette. 96 00:05:19,670 --> 00:05:23,990 Click back on the tile in my scene. 97 00:05:23,990 --> 00:05:28,880 Now we get all of the information in the inspector about that tile, what's it called and where is it? 98 00:05:28,880 --> 00:05:34,760 And I can in the scale I can select that and turn that to minus one. 99 00:05:34,760 --> 00:05:38,870 So that's a way of flipping this particular tile on the x axis. 100 00:05:38,870 --> 00:05:42,770 However, you don't really want to do that for this tile and that tile and that tile in your world, 101 00:05:42,770 --> 00:05:46,070 you want to have this particular tile you can place anywhere. 102 00:05:46,070 --> 00:05:49,760 And we don't have it in our asset pack because the artist is saying, Well, I don't need to create 103 00:05:49,760 --> 00:05:50,870 this a bazillion times. 104 00:05:50,870 --> 00:05:52,010 You've got that one asset there. 105 00:05:52,010 --> 00:05:53,210 It's exactly the same. 106 00:05:53,210 --> 00:05:54,350 You just flip it. 107 00:05:54,350 --> 00:05:57,290 I'll only put one on there, so it'll save space on the sprite sheet. 108 00:05:57,290 --> 00:06:01,700 But it means we need to do something to create that at the tile palette level. 109 00:06:01,700 --> 00:06:05,780 And I just remembered something that I've taken care of because we've gone through this process. 110 00:06:05,780 --> 00:06:11,510 But you might be importing stuff that is from a different asset pack or is from the original asset pack. 111 00:06:11,540 --> 00:06:16,370 If you click on the Sprite, go to the original sprite sheet on the rocks here, we've got to change 112 00:06:16,370 --> 00:06:18,650 the pixels per unit to 32. 113 00:06:18,650 --> 00:06:23,810 So that means that this particular thing on the sprite sheet, this thing here we've already created 114 00:06:23,810 --> 00:06:25,520 is a 32 by 32. 115 00:06:25,520 --> 00:06:29,810 That's the size that it literally is from our sprite sheet, 32 by 32. 116 00:06:29,810 --> 00:06:33,080 And that means that when we place it down in the world, it's the right size. 117 00:06:33,110 --> 00:06:40,850 If I just click on my Sprite sheet and change this to say 64 now and hit apply now, all of my tiles 118 00:06:40,850 --> 00:06:42,500 are going to appear to small. 119 00:06:42,500 --> 00:06:47,600 And usually when you bring things into unity, it starts off at 100 pixels per unit clicking apply. 120 00:06:47,630 --> 00:06:48,950 So everything is way too small. 121 00:06:48,950 --> 00:06:53,540 So we've had to make ours 32 because that's the actual size in pixels they are. 122 00:06:53,540 --> 00:06:59,090 But if you are working on something, say the original asset pack that I took this from is 16 pixels. 123 00:06:59,090 --> 00:07:01,910 So if you use the original, you need to set this to 16. 124 00:07:01,910 --> 00:07:04,760 I increase the size of these to get a bit more fidelity. 125 00:07:04,760 --> 00:07:08,390 I made them 32 by 32 when I did my modifications to them. 126 00:07:08,420 --> 00:07:10,700 A quick message from Rick from the future here. 127 00:07:10,700 --> 00:07:16,010 If you find that you've got a white line that's appearing between your tiles, when you paste them into 128 00:07:16,010 --> 00:07:21,710 the world, then sometimes that's fixed by changing pixels per unit to 31, which makes the tiles just 129 00:07:21,710 --> 00:07:25,640 a tiny bit bigger, and they snap together more nicely and you don't get that issue. 130 00:07:25,640 --> 00:07:26,960 So something to play around with. 131 00:07:26,960 --> 00:07:30,110 You might want to put pixels per unit to 31 later on. 132 00:07:30,110 --> 00:07:34,250 Many videos down the track, I'll be doing that myself to fix the problem I see on my screen. 133 00:07:34,250 --> 00:07:37,880 But you might want to just know about that now and be doing that from this point on. 134 00:07:37,880 --> 00:07:41,750 Let's come back to what we were doing, which was flipping our assets. 135 00:07:41,750 --> 00:07:43,460 That was a random Rick Segway. 136 00:07:43,460 --> 00:07:47,180 Now I'm going to show you the quicker way to flip things so that you flip them once and you can paint 137 00:07:47,180 --> 00:07:49,010 them a gazillion times. 138 00:07:49,010 --> 00:07:50,210 I want to make a little bit of space. 139 00:07:50,210 --> 00:07:51,920 I want to rearrange my tile palette here. 140 00:07:51,920 --> 00:07:55,850 So I'm going to let's see, show you how to edit in the tile palette. 141 00:07:55,850 --> 00:07:56,270 Let's do that. 142 00:07:56,270 --> 00:08:00,950 If I highlight these three, say four, I want to move them all over to here. 143 00:08:00,950 --> 00:08:01,520 How do we do that? 144 00:08:01,520 --> 00:08:06,080 Well, first of all, we click the edit button, so select them first, click on edit. 145 00:08:06,080 --> 00:08:07,940 Now we click the Move tool. 146 00:08:07,940 --> 00:08:10,250 Now I can drag that selection over to here. 147 00:08:10,250 --> 00:08:15,890 To start rearranging, I'm going to click back on the selector tool, grab these top to click on the 148 00:08:15,890 --> 00:08:19,580 move tool, drag them over, select the tool. 149 00:08:19,580 --> 00:08:22,610 These bottom two just there that I know are the bottom elements. 150 00:08:22,640 --> 00:08:25,700 Click on the move tool, drag them on over as well. 151 00:08:25,700 --> 00:08:26,540 Now that's great. 152 00:08:26,540 --> 00:08:28,280 I want to do the right hand side. 153 00:08:28,280 --> 00:08:29,750 So we've got click on the selector. 154 00:08:29,750 --> 00:08:31,880 We've got this left, top left just here. 155 00:08:31,880 --> 00:08:35,090 I could paint that and flip it, then paint that and flip it, paint that and flip it. 156 00:08:35,090 --> 00:08:40,460 But I'm going to select all four of these white I'm going to do that is by clicking on the Eyedropper 157 00:08:40,460 --> 00:08:43,220 Tool, Selecting all four. 158 00:08:43,220 --> 00:08:47,870 And now this is what I am using as my brush from my tile palette. 159 00:08:47,870 --> 00:08:51,320 I click in the spot I want just there to drop it into place. 160 00:08:51,320 --> 00:08:56,270 Now I'm going to click on the selector again, select all of these and then over on the right hand side 161 00:08:56,270 --> 00:09:01,100 you see that we've got the grid selection properties under scale, we've got X and we'll change that 162 00:09:01,100 --> 00:09:07,610 to minus one that flips them all and has it a nice rounded outside edge on it, which is cool. 163 00:09:07,820 --> 00:09:09,920 Next up, I'm going to just pop in the middle here. 164 00:09:09,920 --> 00:09:12,650 The two elements that I've got that belong in the middle. 165 00:09:12,650 --> 00:09:18,200 I'm going to once again click on them, click on the move tool, drag on over, click on the Eyedropper 166 00:09:18,200 --> 00:09:20,900 Tool, and now I can paint them straight down. 167 00:09:20,900 --> 00:09:25,340 So the paintbrush is what we're using to paint that's on usually automatically by default. 168 00:09:25,340 --> 00:09:31,310 But sometimes when you click on the eyedropper, then you select the thing and then it'll switch over 169 00:09:31,310 --> 00:09:32,810 to the paintbrush tools you see here. 170 00:09:32,840 --> 00:09:37,040 Now, if you go back over into your world, it will let you paint things down even when you're in edit 171 00:09:37,040 --> 00:09:37,520 mode. 172 00:09:37,520 --> 00:09:41,630 But if you come back over here in an edit mode and click again, it'll also be painting things down. 173 00:09:41,630 --> 00:09:43,370 So I'm going to undo all those things I just did. 174 00:09:43,370 --> 00:09:44,930 Click out of edit mode. 175 00:09:44,930 --> 00:09:48,710 Now if you were to paint over in here, you're not going to be out of paint over here, over on the 176 00:09:48,710 --> 00:09:49,310 palette. 177 00:09:49,310 --> 00:09:53,180 The palette is going to be how you select things once again instead of painting. 178 00:09:53,180 --> 00:09:57,590 And then if you jump back over into your scene, then you can paint these things down into the world. 179 00:09:57,590 --> 00:10:02,180 So what I'll do is just delete all of my nonsense that I've created just here by clicking on. 180 00:10:02,250 --> 00:10:06,620 The Eraser tool, and I'm still selected on this area that I'd selected on. 181 00:10:06,630 --> 00:10:08,520 So you see, I get this nice big four. 182 00:10:08,520 --> 00:10:09,720 What is it, five by five? 183 00:10:09,720 --> 00:10:12,960 Nope, four by four grid that allows me to erase nice and quickly. 184 00:10:12,960 --> 00:10:17,790 Next up, what we're going to do is just our very quick paint down, a little platforming type thing. 185 00:10:17,790 --> 00:10:19,920 That's the last part of our process here. 186 00:10:19,920 --> 00:10:24,330 So I want you to go through do that now as a challenge, pause a video and take that on. 187 00:10:24,330 --> 00:10:30,000 Don't overinvest in this because it's definitely going to change as we put more effort into our gameplay 188 00:10:30,000 --> 00:10:30,540 mechanics. 189 00:10:30,540 --> 00:10:32,850 But for now, just create a little bit of a level layout. 190 00:10:32,850 --> 00:10:33,720 I'm going to do that. 191 00:10:33,720 --> 00:10:35,160 You're welcome to watch along. 192 00:10:35,160 --> 00:10:38,220 I'm going to speed up the video so you don't have to watch it in slow time. 193 00:10:38,220 --> 00:10:40,500 So let's make our platform. 194 00:10:48,810 --> 00:10:49,250 Okay. 195 00:10:49,260 --> 00:10:49,860 There we go. 196 00:10:49,890 --> 00:10:55,710 You can see if I scroll in here, I've used these nice little curvy roundy bits to make a curvy roundy 197 00:10:55,720 --> 00:10:56,280 bit around there. 198 00:10:56,280 --> 00:11:01,590 So that corresponds this one here is corresponding to that bit there just makes it look nice and curved. 199 00:11:01,590 --> 00:11:05,580 But there we go, just a little level, just to do some basic platformer stuff. 200 00:11:05,580 --> 00:11:06,630 So good stuff. 201 00:11:06,630 --> 00:11:08,070 I will see you in the next lecture.