WEBVTT 00:00.000 --> 00:00.450 Hello guys. 00:00.450 --> 00:01.410 Welcome to the video. 00:01.410 --> 00:06.870 In this one I want to show you how to set up a level with the tile set and how to use tile set and tile 00:06.870 --> 00:09.180 palette to, you know, make levels. 00:09.180 --> 00:10.170 It's not that difficult. 00:10.170 --> 00:15.720 We just need to do a couple of steps to make it ready, and then you can just draw the level like you 00:15.720 --> 00:18.240 would use a brush or something like that. 00:18.240 --> 00:20.460 So first of all, let's delete these platforms. 00:20.460 --> 00:21.720 We're not going to need them anymore. 00:21.720 --> 00:22.890 So we're going to delete it. 00:22.890 --> 00:27.030 And let's go to window 2D tile palette. 00:27.510 --> 00:29.070 Now we have a tile palette window. 00:29.070 --> 00:31.620 We need to drag it to the hierarchy over here. 00:33.930 --> 00:34.890 Just like that. 00:34.890 --> 00:39.060 Then in the title palette we need to click Create New Tile palette. 00:44.490 --> 00:48.510 We're going to have just one tile palette, so that's why I'm going to name it as tile. 00:52.160 --> 00:54.050 And let's click create. 00:54.110 --> 00:58.640 Now this system tells can create lots of files. 00:58.640 --> 01:04.250 And if you don't take control of them, it can be very messy in the project window in the asset folder. 01:04.250 --> 01:08.420 That's why I'm going to ask you to do everything as I do so we can keep it clean. 01:08.720 --> 01:10.940 You're going to make a folder over here. 01:10.940 --> 01:14.480 I'm going to call it Tile Palette. 01:14.900 --> 01:17.840 Let's open this folder and let's select it. 01:18.170 --> 01:21.170 Now over here we're going to have tile palette created. 01:21.170 --> 01:26.030 After that we need to fill up tile palette with the tiles so we can use them. 01:26.030 --> 01:28.940 Let's go to Graphics Terrain. 01:28.940 --> 01:30.920 And over here we have two files. 01:30.920 --> 01:34.070 One of them is just like that and another one is sliced. 01:34.070 --> 01:35.900 I think they are actually the same. 01:35.900 --> 01:36.890 So we don't need this one. 01:36.890 --> 01:39.170 That is terrain with the number one. 01:39.440 --> 01:40.520 Let's delete it. 01:41.340 --> 01:43.470 And let's take this terrain sliced. 01:43.470 --> 01:45.450 Let's make sure it is sliced. 01:45.450 --> 01:46.470 Yes it is. 01:46.470 --> 01:46.950 Okay. 01:46.950 --> 01:48.120 This is good for us. 01:48.150 --> 01:52.560 Now let's choose pixel per unit 16 and hit apply. 01:53.890 --> 01:56.920 After that, we can just open this window. 01:57.010 --> 01:58.210 Something like that. 01:58.880 --> 02:04.910 And we can take the entire sprite sheet over here and just drag it to the tile palette. 02:05.540 --> 02:07.790 Now here it is very important. 02:07.790 --> 02:09.200 Go to assets. 02:09.380 --> 02:09.740 Oh yeah. 02:09.740 --> 02:10.730 Tile palette. 02:10.730 --> 02:12.500 Create a folder. 02:12.740 --> 02:15.440 Let's call it assets. 02:15.950 --> 02:16.970 Assets. 02:17.480 --> 02:24.350 And then we're going to click asset and select folder because this one will create. 02:24.350 --> 02:26.570 Let me show you tile palette assets. 02:26.570 --> 02:29.630 It will create a bunch of files that are used in the tile palette. 02:30.920 --> 02:34.910 And it's better to keep them in one folder because we're not going to use them, but they make a real 02:34.910 --> 02:37.430 mess if you put them just somewhere. 02:37.430 --> 02:38.210 Okay. 02:38.950 --> 02:39.670 Nice. 02:39.670 --> 02:45.670 So now we have a tile palette and it's time to use it to draw level, to draw the level with the tiles 02:45.670 --> 02:49.510 you've made, you actually need to make a grid that can be used to draw. 02:49.510 --> 02:54.880 Let's click right button to d l map rectangular. 02:55.880 --> 02:57.410 And we've created a grid. 02:57.440 --> 03:02.030 This one's going to be used for ground and platforms, so let's just call it ground. 03:02.330 --> 03:03.200 Very nice. 03:03.230 --> 03:05.480 Now we can go to the tile palette. 03:05.660 --> 03:08.150 And over here we have a bunch of tools. 03:08.150 --> 03:12.440 I'm not going to explain them much because if you put your mouse over them you can see what they do. 03:12.470 --> 03:14.960 This one moves selection with active brush. 03:14.960 --> 03:16.970 This one paints with a brush. 03:18.100 --> 03:20.710 This one paints with a field box. 03:20.710 --> 03:22.150 This one is a picker. 03:22.150 --> 03:24.610 So you can just, you know, try them out. 03:24.610 --> 03:27.310 You can take them and use them and see what they do. 03:27.310 --> 03:29.590 The only thing I want you to know is that. 03:30.750 --> 03:36.210 You can go to edit mode over here, and these tools will work in the edit mode as well. 03:36.210 --> 03:43.830 So you can adjust style palette here, but make sure you exit to the edit mode when you're done, because 03:43.830 --> 03:46.320 otherwise you can mess up your tile palette over here. 03:46.320 --> 03:47.910 So I'm going to select edit mode. 03:47.910 --> 03:50.610 I'm going to erase this over here. 03:50.610 --> 03:52.650 And I'm going to exit the edit mode. 03:52.650 --> 03:59.370 Now we can select one of the tiles for example this one and draw it somewhere here. 03:59.670 --> 04:01.260 Then we can select another one. 04:01.500 --> 04:03.570 Draw the platform. 04:03.690 --> 04:09.210 Then we can select the corner together with maybe these draw a platform like so. 04:09.210 --> 04:10.770 Now we need to fill up the bottom part. 04:10.770 --> 04:12.750 We can just select these two. 04:13.200 --> 04:19.710 Drag it like oh I'm sorry drag it like so and then select the corner and drag it like so. 04:19.710 --> 04:23.400 Also you can use the fill up box which is also very useful. 04:23.400 --> 04:25.200 You can select this fill up box. 04:25.200 --> 04:30.930 Then select some tile and just drag it to make anything like that okay. 04:31.740 --> 04:32.670 Yes. 04:33.000 --> 04:33.210 Uh. 04:33.210 --> 04:34.230 Something important. 04:34.230 --> 04:38.490 If you hold shift key on a keyboard, you can erase tiles. 04:39.490 --> 04:40.570 If you want. 04:40.870 --> 04:41.530 Okay. 04:42.180 --> 04:44.310 Now we're not going to draw much for now. 04:44.310 --> 04:48.300 We just want to understand how the tile palette works. 04:48.300 --> 04:50.280 And then we're going to move to the next video. 04:50.280 --> 04:52.740 So as you can see we have the tile palette. 04:52.740 --> 04:55.020 We can use tools to draw the levels. 04:55.020 --> 04:57.420 But now we have a problem. 04:57.420 --> 05:00.180 First of all, let's fix the problem we have. 05:00.180 --> 05:01.680 If I go to the play mode. 05:02.650 --> 05:05.680 My character is going to fall through the platform. 05:05.680 --> 05:06.670 Not cool. 05:06.670 --> 05:10.720 And that is happening because we don't have a collider on the ground. 05:10.720 --> 05:13.330 If you remember, colliders are very important. 05:14.600 --> 05:17.180 We need to add a Tilemap collider. 05:20.510 --> 05:24.740 Now we can go to play mode and player will stand on the ground. 05:25.220 --> 05:27.080 As you can see, we have a bug. 05:27.080 --> 05:29.240 Now he thinks he's in the air. 05:29.270 --> 05:31.070 So let's select this ground. 05:31.070 --> 05:33.320 Go to layer and choose ground. 05:33.860 --> 05:34.370 Okay. 05:34.370 --> 05:35.780 Let's try again. 05:36.860 --> 05:42.860 And we can see we are on the platform and it's working very well, although we need to do one thing 05:42.890 --> 05:43.700 to improve it. 05:43.700 --> 05:50.060 As of now, you can see it has sort of a bunch of colliders, as many tiles we have as many colliders 05:50.060 --> 05:50.870 there are. 05:50.870 --> 05:55.880 And every time we do in collision check, we do check against each collider there, which is not very 05:55.880 --> 05:56.330 cool. 05:56.330 --> 06:01.730 So we need to combine them into one collider to improve performance for the. 06:01.730 --> 06:07.580 So we're going to go to the add component and we're going to type Composite Collider. 06:07.580 --> 06:13.760 This composite collider will unite everything before we go to the Composite Collider and use it. 06:13.760 --> 06:20.060 Let me explain the body type of the rigid body because now it is important, as you remember, on the 06:20.060 --> 06:23.660 player over here, we had body type dynamic and dynamic. 06:23.660 --> 06:29.360 Rigid body means that this rigid body can move and it is affected by the physics engine. 06:29.360 --> 06:33.110 Gravity is applied to this rigid body and other physics. 06:33.110 --> 06:35.840 You know interactions can be applied to this rigid body. 06:35.870 --> 06:39.410 Kinematic says that object can move. 06:39.410 --> 06:42.080 You can move the object maybe with a script or something like that. 06:42.080 --> 06:48.470 But the physics are not applied to the kinematic rigid body, so it will not be affected by gravity, 06:48.470 --> 06:49.310 for example. 06:49.310 --> 06:53.300 And static means that rigid body cannot be moved at all. 06:53.300 --> 06:56.900 And this is what we need for the ground rigid body over here. 06:56.900 --> 06:59.180 So we're going to turn it into a static. 06:59.180 --> 07:02.570 Now it cannot be moved at any, you know, circumstances. 07:02.570 --> 07:03.560 It will be there. 07:03.560 --> 07:08.930 And because of that it will allow us to basically use this rigid body for the platforms and ground because 07:08.930 --> 07:10.730 that one not supposed to be moving. 07:10.730 --> 07:11.300 Yeah. 07:11.300 --> 07:11.990 Let's. 07:12.790 --> 07:14.770 Let's cover this up here. 07:14.770 --> 07:22.180 And now we need to go to the Tilemap Collider and choose Composite Operator Merge. 07:22.180 --> 07:28.480 And now this one was merged into one collider which is very, very useful and very, very nice. 07:28.480 --> 07:29.200 Yeah. 07:29.950 --> 07:34.540 Um, there are some things like maybe you should know about, uh, geometry type. 07:34.540 --> 07:41.620 So this one basically does the outline and polygons will divide your platforms into polygons. 07:41.620 --> 07:43.840 As of now we just have a simple platform. 07:43.840 --> 07:44.890 So it does not do that. 07:44.890 --> 07:52.600 But if we take something and draw it over here, you can see it was sort of cut into polygons. 07:52.600 --> 07:59.860 And it is usually used if you have some, you know, slopes, some uneven ground where it goes up and 07:59.860 --> 08:05.680 down or anything like that, but we're going to have only square and rectangular platforms because of 08:05.680 --> 08:05.890 that. 08:05.890 --> 08:08.320 We're not going to need the polygon geometry type. 08:08.320 --> 08:09.940 We're going to keep outlines. 08:10.120 --> 08:12.520 This will be better for the performance. 08:12.520 --> 08:17.260 Now um, I'm going to hold shift and select this to remove it. 08:17.260 --> 08:20.230 And I need to go back and fix this area over here. 08:21.180 --> 08:22.740 Let's just do it like so. 08:23.930 --> 08:24.590 Okay. 08:24.590 --> 08:27.560 I'm asking you not to rush and not to create level yet. 08:27.560 --> 08:28.760 Let me explain everything. 08:28.760 --> 08:33.920 And also in the next video I'm going to show you how to make a rule tile, which makes it a bit faster. 08:33.920 --> 08:35.510 And then you can create a level. 08:35.510 --> 08:36.050 Okay. 08:36.560 --> 08:43.790 So uh, we have a platform, we can walk on the platform, but now we don't have anything else on the 08:43.790 --> 08:44.270 level. 08:44.270 --> 08:47.510 And I think it's a good idea to have a background on the level. 08:47.870 --> 08:54.290 To make a background, we need to make another 2D, uh, tile map. 08:54.290 --> 08:55.460 Rectangular. 08:55.990 --> 08:58.300 Let's call it background. 08:59.250 --> 09:00.870 Let's go to the tile palette. 09:00.870 --> 09:03.630 And over here now it is very important. 09:03.630 --> 09:05.400 What do you choose here? 09:05.400 --> 09:08.760 If you choose ground you're going to draw on the ground layer. 09:08.760 --> 09:11.670 Basically, if you choose a background you're going to draw on a background. 09:11.670 --> 09:13.920 The difference between them is very simple. 09:13.920 --> 09:17.190 One has collider, another one does not have a collider. 09:17.190 --> 09:20.790 So we can select background, find background images. 09:20.790 --> 09:22.110 Oh they are not here. 09:22.110 --> 09:23.670 Where are they. 09:24.240 --> 09:28.590 Graphics background here are backgrounds. 09:28.740 --> 09:30.300 Let's select them all. 09:30.300 --> 09:32.490 Do a pixel per unit 16. 09:33.560 --> 09:36.950 Uh sprite mode multiple and hit apply. 09:37.460 --> 09:42.320 And for now I'm going to use only one of them because we don't really need to spend time on the entire 09:42.320 --> 09:43.520 decoration. 09:43.520 --> 09:47.630 So I'm going to take maybe this yellow and I'm going to drag it. 09:47.630 --> 09:49.400 Or actually we need to cut it first. 09:49.400 --> 09:53.990 Let's open sprite editor do slice grid by cell size. 09:53.990 --> 09:58.940 I'm going to do 16 by 16 and slice okay. 09:59.450 --> 09:59.900 Uh yeah. 09:59.900 --> 10:00.590 Save it. 10:00.590 --> 10:02.630 Now we can drag it here. 10:03.810 --> 10:10.860 And we need to go to Tile Pallet Assets select folder and we've got the background tiles. 10:10.860 --> 10:15.420 Later on I'm going to show you how to make animated background, but it's going to be later. 10:15.420 --> 10:16.830 Now it's not that important. 10:16.830 --> 10:18.630 So let's use this background. 10:18.630 --> 10:21.420 We're going to choose it choose background. 10:21.420 --> 10:25.830 Then we can go here and draw background. 10:30.980 --> 10:33.920 Now there is a neat trick that we could use. 10:35.680 --> 10:37.570 Let's select it with a color picker. 10:38.770 --> 10:39.280 Oh, yes. 10:39.280 --> 10:40.540 And now we can draw it. 10:40.540 --> 10:41.080 Okay. 10:41.080 --> 10:42.040 Just like that. 10:43.920 --> 10:46.950 And over here you may see a problem. 10:47.650 --> 10:50.140 Now we cannot see the platform. 10:50.140 --> 10:53.140 It is behind the background, which is not correct. 10:53.140 --> 10:53.530 Right? 10:53.530 --> 10:54.730 We need to fix it. 10:54.730 --> 10:57.880 We can fix it with the help of a sorting layer. 10:58.060 --> 11:06.160 Over here in the Tilemap renderer we have sorting layer and this will define what is drawn behind what. 11:06.160 --> 11:09.520 Let's go to certain layer and click Add Certain Layer. 11:09.520 --> 11:11.170 Over here we're going to click plus. 11:11.170 --> 11:16.960 And you should know that the lower the position is the higher priority it has. 11:16.960 --> 11:20.890 So we should have background then we need. 11:21.520 --> 11:29.890 Ground, then we need player and player should be below everything because player has the most, uh, 11:29.890 --> 11:33.130 like the highest priority right now. 11:33.130 --> 11:39.460 Let's go to the ground over here and choose certain player ground to the back ground. 11:39.460 --> 11:41.500 We're going to choose background. 11:41.500 --> 11:47.590 And for the player on the animator we're going to choose player just like that. 11:47.590 --> 11:52.000 Now the ground is behind the platforms and player is in front of everything. 11:52.570 --> 11:54.040 Very cool. 11:55.300 --> 11:59.620 And we basically have a like almost a level to play with. 11:59.830 --> 12:00.850 Uh, we're not done yet. 12:00.850 --> 12:06.550 While we are on this certain layers, let's add a couple of more that we're going to use in the future. 12:06.550 --> 12:11.410 We're going to add another layer and it's going to be behind the player. 12:11.830 --> 12:18.940 Then we need items and I think it can be behind the player but in front of the enemies for now. 12:18.940 --> 12:20.860 Later on we might need to fix it. 12:21.100 --> 12:27.550 This is going to be pick up items like fruits and everything, and let's add traps and let's place them 12:27.550 --> 12:28.720 behind the enemies. 12:28.720 --> 12:32.770 Okay, so these are certain layers that we might need later. 12:32.770 --> 12:37.390 There is also a order in layer for the sorting layer. 12:37.750 --> 12:40.780 And just to explain what it does. 12:41.940 --> 12:42.420 Um. 12:45.640 --> 12:49.330 We actually we don't need to use it now, so there is no point of explaining it. 12:49.330 --> 12:53.500 I'll just say that the higher order is the more priority it has. 12:53.500 --> 12:56.620 So you can have objects within the same layer. 12:56.620 --> 12:58.840 And let's say you need to place one in front of another. 12:58.840 --> 13:00.790 Then you can use order and layer. 13:01.210 --> 13:05.320 So let's say you have decorations and you want one decor to be in front of another one. 13:05.320 --> 13:09.340 So for that one you would make order in layer 1 or 2. 13:09.370 --> 13:11.710 Okay but no worries we're going to use it later on. 13:11.710 --> 13:13.630 I'm going to show you how it works for sure. 13:13.630 --> 13:16.930 So I just don't worry about it okay. 13:16.930 --> 13:19.150 So now we have background and ground. 13:19.150 --> 13:20.800 We know how to draw platforms. 13:20.800 --> 13:23.470 But again don't be in rush. 13:23.470 --> 13:29.590 Don't create level yet because I'm going to show you how to make a rule tile which makes process faster. 13:29.860 --> 13:31.870 Yeah I'll see you in the next video.