1 00:00:03,150 --> 00:00:03,960 Hello and welcome. 2 00:00:03,960 --> 00:00:08,430 In this lecture, we're going to be adding some extra layers of tile maps. 3 00:00:08,430 --> 00:00:10,350 We're going to be adding the background and the water. 4 00:00:10,350 --> 00:00:13,290 So let's get in and talk about toe map and layers. 5 00:00:13,290 --> 00:00:13,680 Okay. 6 00:00:13,680 --> 00:00:15,960 Let's see if you're paying attention in the last lecture. 7 00:00:15,960 --> 00:00:17,700 I'm going to ask you if you remember. 8 00:00:17,700 --> 00:00:19,280 So this is the challenge for you. 9 00:00:19,290 --> 00:00:22,530 Create a new tile map, call it background tile map. 10 00:00:22,530 --> 00:00:25,290 Add our background tiles into the palette. 11 00:00:25,290 --> 00:00:26,700 Let me just show you which one those are. 12 00:00:26,700 --> 00:00:30,570 That for me, it's the spa background with the brown tint, although they're kind of green, so maybe 13 00:00:30,570 --> 00:00:31,410 I should rename that. 14 00:00:31,410 --> 00:00:32,580 But it's cool for now. 15 00:00:32,580 --> 00:00:34,410 Don't worry about Rick on with the challenge. 16 00:00:34,680 --> 00:00:38,910 So add the background tiles into the palette and then paint some of those background tiles. 17 00:00:38,910 --> 00:00:43,770 And just a note, don't worry if the sorting order or the order sorting is wrong, we'll be going through 18 00:00:43,770 --> 00:00:44,280 that together. 19 00:00:44,280 --> 00:00:48,720 So if you're finding that your background is on top of the platforms or you can't see it, that's cool. 20 00:00:48,720 --> 00:00:53,970 Just find somewhere in your scene and paint down some of the background tiles. 21 00:00:53,990 --> 00:00:54,750 There's a challenge. 22 00:00:54,750 --> 00:00:56,040 I'll see you back here when you're done. 23 00:00:58,100 --> 00:01:03,980 So first thing I'm going to do on the toll map grid, I'm going to right click to DX Object and tile 24 00:01:03,980 --> 00:01:05,480 map and rectangular. 25 00:01:05,510 --> 00:01:12,460 I want to make sure it's a child underneath our tile map grid and I will name this background tile map. 26 00:01:12,470 --> 00:01:17,480 So if I click on background tile map now, I will be creating to that tile map. 27 00:01:17,480 --> 00:01:21,020 If I click on the foreground or the platform's tile map, I'll be creating to that. 28 00:01:21,020 --> 00:01:25,550 I can also change it here under active tile map, depending which one I want to select. 29 00:01:25,550 --> 00:01:28,670 And you see a little bit going over there to let us know that we change something. 30 00:01:28,670 --> 00:01:33,650 And so it's really important to get into the frame of mind that if you're doing something on one particular 31 00:01:33,650 --> 00:01:37,340 tile map, you've got to switch it or else before you know it, you've gone and painted a whole bunch 32 00:01:37,340 --> 00:01:41,270 of background right over the top of the layer, which is your platform. 33 00:01:41,270 --> 00:01:42,760 So just a note on that. 34 00:01:42,770 --> 00:01:43,850 Now what's next on our list? 35 00:01:43,850 --> 00:01:45,650 Add our background tiles into the palette. 36 00:01:45,650 --> 00:01:46,190 Okay, good. 37 00:01:46,190 --> 00:01:48,560 We'll find a little bit of space down below here. 38 00:01:48,560 --> 00:01:55,520 We will open up or I will open up the background, highlight all of these, drag them into our palette, 39 00:01:55,520 --> 00:01:56,660 pop them just there. 40 00:01:56,660 --> 00:01:57,340 Looks good. 41 00:01:57,350 --> 00:02:02,600 It'll ask me where I want to put these tile folder perfect select folder pink bonk pink brings them 42 00:02:02,600 --> 00:02:05,180 all in and can see that it doesn't look so good on the screen here. 43 00:02:05,180 --> 00:02:11,060 But these are all different tiles, a little bit of random structure to them so that it looks like some 44 00:02:11,060 --> 00:02:11,750 background. 45 00:02:11,750 --> 00:02:12,710 We've got all that there. 46 00:02:12,710 --> 00:02:17,420 Now I need to make sure I'm selected on the background tile map, highlight all of these and I'm just 47 00:02:17,420 --> 00:02:18,890 going to go blank, blank. 48 00:02:18,890 --> 00:02:23,120 And as I mentioned before, that doesn't look too good because I'm just painting right over the top 49 00:02:23,120 --> 00:02:24,440 of my platforms. 50 00:02:24,470 --> 00:02:25,430 I'll pop all these in here. 51 00:02:25,430 --> 00:02:29,060 Now, you don't need to worry for the moment how much space you're taking up. 52 00:02:29,060 --> 00:02:30,260 It's just all of the background. 53 00:02:30,260 --> 00:02:32,810 You can see where our camera is here with the white part. 54 00:02:32,810 --> 00:02:36,650 And if you wanted, incidentally, to make your camera so that you see more you like. 55 00:02:36,650 --> 00:02:39,650 But that's not enough space to fit in all I want to fit in there. 56 00:02:39,650 --> 00:02:44,060 Considering that the tile map is this particular size of the tiles of this particular size, you just 57 00:02:44,060 --> 00:02:47,090 go click on camera and you could change the size to bring it in. 58 00:02:47,120 --> 00:02:52,490 That'll have a lot less tiles on the on the screen at once or move it all the way out. 59 00:02:52,490 --> 00:02:54,950 And then maybe it makes the tiles really tiny. 60 00:02:54,950 --> 00:02:59,510 So I'm going to leave it five for now because I'm not sure how big I want it until I get my character 61 00:02:59,510 --> 00:03:01,340 in there and have the character running around. 62 00:03:01,340 --> 00:03:03,710 But we've found ourselves a bit of a problem. 63 00:03:03,710 --> 00:03:10,100 Now let's click on the background tile map and as we've done before, you can find the sorting order 64 00:03:10,100 --> 00:03:13,730 or the order in layer and I can make the background over in here minus one. 65 00:03:13,970 --> 00:03:14,510 There we go. 66 00:03:14,510 --> 00:03:16,670 And now it's behind the platforms. 67 00:03:16,670 --> 00:03:19,460 And the platforms is going to be at zero four. 68 00:03:19,460 --> 00:03:21,050 Click on that platform is at zero. 69 00:03:21,080 --> 00:03:24,500 I'm not going to do it that way because I don't know how many of these layers I want. 70 00:03:24,500 --> 00:03:27,410 I'm going to do it a slightly different way just to show you an alternative way. 71 00:03:27,410 --> 00:03:33,620 So I'll put that back to zero and I'm going to jump up to in my inspector, you see layer and then default. 72 00:03:33,620 --> 00:03:35,840 We will jump into there and we'll click on add layer. 73 00:03:35,840 --> 00:03:40,190 Now it's super confusing because we've got sorting layers and then we've got layers. 74 00:03:40,190 --> 00:03:42,740 So it's like there's so many layers going on here. 75 00:03:42,740 --> 00:03:48,800 I'm going to click on plus on the sorting layers and I'll add a new layer which I will call platforms 76 00:03:49,190 --> 00:03:55,940 and then hit Enter and I'll click plus again and another layer which I'll call background and hit enter 77 00:03:55,940 --> 00:03:56,450 again. 78 00:03:56,450 --> 00:04:03,260 Now jump back out, click on background tile map, scroll down to where we have our sorting layer and 79 00:04:03,260 --> 00:04:09,530 change this to be background and I'll jump over to my platform's tile map and change this to be platforms. 80 00:04:09,530 --> 00:04:10,940 So why did we do that? 81 00:04:10,940 --> 00:04:17,149 Well, if we jump back into where we scroll up, look at the layer here, click on the default area, 82 00:04:17,360 --> 00:04:20,180 go to add layer, go back to sorting layers. 83 00:04:20,180 --> 00:04:21,230 You can see in here. 84 00:04:21,230 --> 00:04:24,980 So I know a little bit of a journey you can see here, if you grab one of these layers, you can move 85 00:04:24,980 --> 00:04:31,610 them up or move them down so we can easily change what is above other things on the screen in a very 86 00:04:31,610 --> 00:04:37,100 easy way because we've got all this layer, so whatever in this list is on the bottom. 87 00:04:37,100 --> 00:04:40,730 You will see on top of the screen, I know those words don't make sense. 88 00:04:40,730 --> 00:04:42,980 So layer one and then layer two. 89 00:04:42,980 --> 00:04:47,210 Layer one is background for me, and that is underneath layer two, which is platform. 90 00:04:47,210 --> 00:04:51,620 So if we add a layer three, four, five, six, seven, we can easily just change what appears over 91 00:04:51,620 --> 00:04:52,910 the top of what. 92 00:04:53,030 --> 00:04:54,410 Now we can see the result here. 93 00:04:54,410 --> 00:04:58,070 I went and made my background very green, so it really pops out and you can see it. 94 00:04:58,070 --> 00:04:59,700 But it might be too green. 95 00:04:59,700 --> 00:05:00,530 It might be looking at this thing. 96 00:05:00,630 --> 00:05:01,430 I don't know about that. 97 00:05:01,430 --> 00:05:02,210 What we can do. 98 00:05:02,210 --> 00:05:03,470 I've just got to play around with this. 99 00:05:03,470 --> 00:05:05,930 That's why my screen looks a little different. 100 00:05:05,930 --> 00:05:08,690 If you go into your tiles, find the asset file. 101 00:05:08,690 --> 00:05:14,090 So the assets that we've gone and created for our tile palette highlight all of those for the background. 102 00:05:14,090 --> 00:05:15,020 Now we've got color. 103 00:05:15,020 --> 00:05:16,520 We can do a little bit of tinting on this. 104 00:05:16,520 --> 00:05:20,570 So if I click on the color, I might want to have them a little bit darker, a little bit brighter, 105 00:05:20,570 --> 00:05:23,390 a little bit more red, a little bit more green, for example. 106 00:05:23,390 --> 00:05:25,070 So you can do a little bit of tinting. 107 00:05:25,070 --> 00:05:30,080 There's a limitation to this, but if you do find that they're popping out a little bit too much with 108 00:05:30,080 --> 00:05:32,450 the graininess, then you can go and change that. 109 00:05:32,450 --> 00:05:38,150 You can do that for any of the tiles that your heart desires, make them maybe a little bit bluer because 110 00:05:38,150 --> 00:05:39,290 they're starting off at green. 111 00:05:39,290 --> 00:05:43,190 We're pretty much limited to just making them a little bit darker, which is fine. 112 00:05:43,190 --> 00:05:45,500 I think that might be enough for us. 113 00:05:45,500 --> 00:05:46,160 And you know what? 114 00:05:46,190 --> 00:05:52,400 While we're here just for fun, let's make ourselves a water layer so we can pop some water around in 115 00:05:52,400 --> 00:05:52,820 our map. 116 00:05:52,820 --> 00:05:56,630 So the water would probably be on top of the back. 117 00:05:56,690 --> 00:05:59,630 Brown but underneath the platforms. 118 00:05:59,630 --> 00:06:03,740 So go ahead, pause the video and make yourself a water layer. 119 00:06:07,060 --> 00:06:07,450 Okay. 120 00:06:07,450 --> 00:06:13,390 So once again, toll map, right click to the object tile map, rectangular. 121 00:06:13,390 --> 00:06:19,600 We will make this water tile map and then that gives us that extra option on water tile map. 122 00:06:19,600 --> 00:06:20,200 Great. 123 00:06:20,200 --> 00:06:21,430 I'm going to. 124 00:06:21,430 --> 00:06:24,430 I've already brought this in, so we already have the assets in there. 125 00:06:24,430 --> 00:06:24,670 Okay. 126 00:06:24,670 --> 00:06:28,630 Now we need to over in the top right on layer, we need to add a layer. 127 00:06:28,630 --> 00:06:34,360 We will add in under sorting layers, click plus we'll add ourselves water. 128 00:06:34,420 --> 00:06:40,390 I know it's going to need to sit in between these two layers and then jump back clicking on water tile 129 00:06:40,390 --> 00:06:45,850 map, scroll down and find sorting layer to be water perfect. 130 00:06:45,850 --> 00:06:47,140 Now click on some of the water. 131 00:06:47,140 --> 00:06:48,190 See if I can paint that down. 132 00:06:48,190 --> 00:06:49,210 Yes, I can. 133 00:06:49,210 --> 00:06:50,830 And where can I paint it? 134 00:06:50,830 --> 00:06:51,490 So it makes sense. 135 00:06:51,490 --> 00:06:53,590 Not just the air it'd be floating in the air. 136 00:06:53,590 --> 00:06:57,910 I'm going to click on the top little bit of the water actually while I'm here, I'm just going to separate 137 00:06:57,910 --> 00:06:58,150 this. 138 00:06:58,150 --> 00:07:05,890 So click on selection, select those to click on edit, click on move, edit them down, just so they're 139 00:07:05,890 --> 00:07:08,080 not sitting right on top of it. 140 00:07:08,080 --> 00:07:11,500 Actually, I just grab that bottom bit and put that underneath. 141 00:07:11,500 --> 00:07:11,890 There we go. 142 00:07:11,890 --> 00:07:12,880 That's how they go. 143 00:07:12,910 --> 00:07:16,480 You know, while I'm here, I'm going to click on the Eyedropper, highlight two of these, and then 144 00:07:16,480 --> 00:07:18,250 just paint a couple of things side by side. 145 00:07:18,250 --> 00:07:19,810 So I've I wanted to paint it down more quickly. 146 00:07:19,810 --> 00:07:24,700 I could so click on the eyedropper, select all four of these things, jump back over into the world 147 00:07:24,700 --> 00:07:25,660 and then pop that in. 148 00:07:25,660 --> 00:07:27,100 And then we go, We've got some water. 149 00:07:27,100 --> 00:07:29,920 It doesn't look that good because I think I need to move this up a little bit. 150 00:07:29,920 --> 00:07:33,520 So I'm just going to very, very quickly finesse that or else it's going to bug me. 151 00:07:39,360 --> 00:07:40,050 There we go. 152 00:07:40,050 --> 00:07:45,240 Now that we have our little pond in the middle of our platform level with our various layers. 153 00:07:45,240 --> 00:07:45,900 So good stuff. 154 00:07:45,900 --> 00:07:47,040 I'll see you in the next lecture.