In depth TILEMAPS Guide for Godot 4.2

hello everyone this video we're going to have an in-depth look at style Maps Okay so let's get started I'm going to go to my node Tod and add a new child node I'm going to select a tile map and click create and a tile map in order to work needs a tile set now what is a tile set a tile set is basically a collection of things that the tile Maps can draw so let's just move over to this sty set setting and click on empty and after we click here I'm going going to select new tile set if I click again you will see that here we have a tile size now this tile size property is basically telling the tile set how big a single tile is in our tile map now I'm using a tile map from Kenny assets and each of these tiles have 18 pixels uh X and 18 pixels y so I'm going to write here 18 by 18 and now I can move move over to this tile set Tab and add my tile map how do I do it well you see here we have a plus and if I click on atlass I can select whichever tile map I want and I'm going to select this one click open it asks me if I want to automatically create the tiles in the atas and I click yes and now as you can see the tile set is created now you might notice that these tiles are maybe not perfectly aligned with our tile set and why why is is that well because if we zoom in we can see that there is one pixel of separation between each of these tiles so we can go to the settings here and simply add one pixel Separation on X and one pixel Separation on Y and now you can see that each tile is perfectly aligned with the image okay now if we want to move to our tile map we see that we have everything that we had in our tile set but here since we are with the ti map we can actually use it to draw some stuff so let's just say that we want to draw a small platform we could take this and put it on the screen we could also take this dra like that take something else and if we want we can draw something below as well so maybe something like that and you see we already have a bunch of usability from this now this is nice and all but TI maps are much more powerful in this to begin with for example we can draw in more ways so if I click on the crayon here I can simply paint as I did before but if I want I can click on the line or I can hold shift while clicking and draw a straight line additionally if I want I can click on the rectangle or hold control and shift and draw a rectangle imagine if we had to draw all these typ by hand would have been quite a lot of wasted time now if we wanted for example to replace these styles with maybe something else we can always use the paint bucket tool and this paint bucket tool what is going to do well for example if we select this mushroom we can click on our tiles and replaces everything with the mushroom now you see that when we selected the paint bucket tool a continuous option appeared if I deselect this maybe let me just undo this if I deselect this continuous then it is going to take all the tiles in the whole tile map that are the same and replace them so you see that I clicked here and also replaced everything that was inside as well okay now other than drawing tools there are also utility tools here for example the Color Picker let me just select the crayon again let's say the Color Picker maybe we have a huge tile set and we do not want to look at all the tiles and find our tile we can look inside what we have already drawn and with a Color Picker selected we can pick this thing for example and you see that this style here is now selected if we want to for example instead of draw we want to erase something then with the crayon selected and with the Eraser selected I can simply go here and erase and obviously it works the same way with lines and with rectangles as long as there eraser is selected it is going to erase instead of draw if we want to draw again we simply deselect this eraser and see we can draw stuff on top of this there are transform features so as you can see this tile is with the grass at the top but if I click on this rotation button you see it rotated my tile to have the grass to the right I can click again on the rotation and now it's at the bottom I can even flip it so maybe I want to flip it vertically and you see that it's at the top again and I could flip it horizontally and you can see that these Brown grains here are opposite to this ones now maybe this is not obvious enough but the tile map also allows us to draw multiple Tiles at once so if we wanted to demonstrate this horizontal flip we could select let's say these two hearts and we see that the half heart is to the right and now if we click on the flip button you see that the half heart is now to the left now the last drw drawing tool that I'm going to show you is this place random Tile tool which helps us scatter some tiles in an area now let's see how this works let's for example take all these plants and maybe we want to place those plants on top of the grass now if I click here with all these plants selected you see that it scatters them it simply puts a random tile at one spot but if for example I don't want to place them manually again I can use the L line tool with the scatter selected and you see that a bunch of random flowers here have been added now maybe there are too many of them right but there's nothing to worry about because we can select this scatter tool and increase the scattering basically modifies the chance of painting nothing instead of randomly selected tile so let's just say that the scattering is one and with the scattering one let's draw a line here and you see that only a few of these Styles have been drawn maybe draw another line here again a few have been drawn if we set the scatter to let's say three then even fewer will be drawn so see just just a few saplings here and there great now you know the basics of T Maps let's go more in detail with additional features that the tile maps have for example to start with we can always make patterns let's say that we have this pretty little ground block and we want to draw it again obviously we could go over these Styles and draw it again manually but what we can do is to use the selection tool and select everything that's here and go to patterns okay let's select it again sorry and go to patterns and we can either copy and paste so control c contrl v or we can drag and drop this to this space here now if I click on this pattern and I click the crayon see that I can repeat this pattern anywhere anytime again I'm just going to show you an example with crl c and contrl V let me just select this window contrl V you see that we have also added this pattern here and if we want we can draw the saplings just the way they they were here before now if you're not impressed yet with the power of tile Maps then let's move on to the next step and learn how to do auto tiling Auto tiling basically allows us to automatically draw some tiles depending on their position so we don't even have to select each tile individually let's see how we do that let's move back to our tile set and in the tile set properties here we have the Rin sets if I click here I can add a new element and these terrain sets are basically specifying what kind of terrain I want to draw and making a collection of a certain type of terrain so if I click here on terrains I can add the new element and let's call this terrain grass okay I'm going to call call it grass and I want to draw all these kinds of grass blocks I am going to select a different color from these grass blocks and you will see soon why let's just select some kind of purple now if I go to this paint section I can select a property here what do I want to paint well I'm going to click on this and I want to paint some terrains on our grass block box how am I going to do this well I'm going to select the terrain set zero and here I'm going to select grass okay now what do we want to consider as grass I would say this this these whole elements and maybe this base elements here as well now that we have finally selected what makes a Terrain we need to tell G do somehow where the terrain should be placed and in which cases and for that we can simply update the peering bit of a tile to basically tell the tile which are its neighbors but let's see that in practice because it is more clear first of all you see that when I select a single tile I have this little square around it now this could be a square or if you selected match Corners It could only be matching the corners or if you only selected match size as you can see it only matches the side but I'm going to go with the most complex one and and you can continue from there with corners or whatever else you want but the main idea is that in each of these peering bits the center one represents the current tile so when do we want to draw this tile which has borders around it at any time well we would probably want to draw this so this thing in the center only when there's nothing around it so if there's nothing around it we draw this okay when do we want to draw this one well we would like to draw this one when it's connected to something on the left and when it's connected to something on the right okay that's great now when do we want to draw this one as you can see it has a border to the left so it means that it basically has nothing to the left but it has no border to the right so it must have something to the right we are going to do the same for this one I'm going to click on the center and to the left and to the right we not not going to click because it has a border okay let's move on what about this one well it's obviously a point in the center as before and Below there is no border and it's going to probably be connected to something else so I'm going to draw something here as well okay now what about these ones well first of all they look very similar to what's on the top so this is going to be similar as well and additionally we see that they have no border at the bottom so I'm going to add one bit here at the bottom another one here and another one here if I were to move to the others again it's the same process this one has nothing at the top nothing at the bottom so I'm adding it there this one looks like it has nothing at the nothing at the top sorry and we are finished with this as well and let's look at these other ones following the same process we kind of got the gist of it and we can draw everything so let's look at an example this one had nothing at the left nothing at the right and nothing at the top so we basically Drew something in each of these spots and finally this one has something at the top something at the left something at the bottom and something at its right okay now that we drew this let's see the actual magic of tile Maps I'm going to click on TI map the rins select the grass terrain and select this connect mode I'm going to show what all these modes mean in a second and let's just draw a single tile if I draw a single tile you can see that it drew the borders around it I didn't select any kind of tile it automatically knew that it should draw this okay but what if we drew a line you see we drew a line and it knew automatically to draw the borders around it perfectly with no borders in between or anything like that if we want to draw a square for example you see it's a perfect square with the perfect tiles set and if we want to draw maybe a more complex form so maybe something like this then we can draw it freely with no problem now what is the difference between this mode of connect mode and this Pat mode well the main difference is that connect mode connects any tile we draw with any tile around it so if for example here I I want to draw four more tiles you see it connects them with what is already on the screen but if for example I draw this again and I go with the path mode now this path mode connects everything in the current stroke so you see that I'm drawing something and everything is connected but if I draw near this thing you see that they are no longer connected to each other now finally if we have any kind of problems maybe we are missing some tiles and uh this generation is not doing things properly what we can do is to select an individual tile and replace something that doesn't look right with this individual tile so for example maybe I want to replace this corner for some reason with uh whole tile block then we can do this at any time and you can see that it is no longer automatically connecting tiles it is simply drawing the same tile again if we want to maybe fix this and draw again connected tiles we can draw something like this and have this uh cute pattern looking like some kind of Castle or something yeah but there's a bunch of things that you can do with auto tiling let's for example move on and create auto tiling for these trees okay how would we do that well first of all we go to the tile set and we want to add some new kind of terrain right and what terrain do we want well we want to add terrain for the leaves and for these branches so let's just say here that this is going to be leaves and this is going to be branches maybe let's not have it green oh yeah I said that we are going to use this purple color why do we use it because if we use something let's say brown here it would have been pretty hard to notice where we drew our peering bits okay but let's move on to the leaves the leaves are going to be very similar to what we did already on uh maybe let's make this bigger uh to what we already did on our grass Styles why because we're going to select all these leaves I'm going to select the leaves terrain and I'm going to draw on it and how do we draw it well it's very similar to what we already did here in our grass terrain so I'm just simply going to draw here no peering bit because this piece of leave has nothing around here I'm going to draw the bits like this because for example this beit only has something below it and nothing else around and I'm going to repeat the process in the same manner I know I have been repeating this technique a bunch of times already but it is very important to understand this properly oh and by the way way you saw I made a mistake here if you want to remove the mistake you can click right click and it deletes basically those pits from there okay and we are simply doing the same pattern that we did here now the branches are going to be more interesting why because we are going to start combining terrains and how do we do that well first of all let's select again everything that is going to be branches okay these are going to be branches and let's figure out how we are going to do this well first of all let's take the simple ones this has something at the top and something at the bottom this again is just another variation of this has something at the top and something at the bottom this one has something at the top something at the bottom and something to the left of it again we're measuring things relative to this whole Sprite we know that this Sprite is going to have another Sprite somewhere on the left don't let yourself Get Fooled by this branch that is at the top left corner and put a bit here it's not here it's going to be on the left because we are going to have an image to the left that is going to continue this Branch okay this one has something to the left and something to the right this one has only something to the right and this one has something to the left something to the right we repeat the same process here vertical here right and like this okay but there are two special types of branches and why are these special well this one looks like has leaves around it right so it for sure has some wood at the bottom because this is the tree trunk so it has some wood at the bottom but it looks like it has leaves to the left to the right and to the top okay so how do we specify that it has leaves well we can simply select here the leaves and put some Le leaves beats here and now our tile set knows that there are leaves to the left right and top what about this one well this is again branches that have branches to the top and at the bottom what is at the bottom well since this is the root of our tree it must be in the ground so I'm going to put some grass below the root okay the process as you can see is mostly the same but we specified what kind of terrain we have around this tree okay and now if we were to go to our tile map after we save let's select terrains and sometimes maybe it uh does not get updated just make sure to deselect it and then select it again and you can see that it gets updated afterwards okay if I were to draw some grass let's maybe cut everything this here sorry let's uh cut everything not not draw everything okay and now let's uh simply draw some grass here okay now if I want to go here to branches or maybe to leaves let's draw all the leaves first because they're more simple let's make a square three something like this make it a bit taller and we see that the leaves are drawn perfectly if we draw a vertical line it's also drawn perfectly if we draw a single tile it's perfectly drawn and now we can draw the branches well how do the branches go well we start from inside the leaves and we move to the bottom here at the ground and as you can see the branches have been drawn and they have been perfectly connected to our leaves and to our ground so at the top here we have these leaves which uh cover our trunk and here we have this root of the tree which is very close to the ground now obviously we can draw more here let's maybe select the crayon and see we can make these branches longer and we can draw a bunch of stuff on it now you might have noticed that if I keep pressing on the same thing it shows me the variation of this branch and sometimes it changes it sometimes it doesn't why does this happen well each tile has a probability set to it if I go here instead of terrain I go to probability you see that each tile has a probability of one if for example maybe I do not want this uh to have the probability of one maybe I want our trees to not have so many leaves I would I could have probability of 0.25 and I can apply it to this one and now since I have updated this probability we are going to see branches with leaves much rarer you see I press a lot and most of the times it is only it only has branches without leaves now this happens only for tiles that have the same layout in the terrain set so you can see that this vertical tile is represented exactly the same way as this one that's why whenever we draw something on the trunk it's going to put either this one or that one but now it's going to put the leafless trunk more often than this other one good now what if we wanted to make this scene look even more complex let's say for example that we want to have some big bushes here on our branches we can go to the leaves and simply draw some leaves here yeah but there is a problem the problem is that our branches get totally destroyed by this leaf that we added well why because we are basically drawing on the same layer and whatever is drawn replaces everything else in the same place so how do we add multiple layers well if we go here Below in the settings we see that we have layers now let's call this layer base yeah why not let's call it base and you see that we are on the base layer and let's add another layer and let's call this one U I don't know the details maybe and this details layer can have bunch of other things so if I select the leaves again I'm on the base layer if I click you see that it replaces the branch but if I go to details now you see that everything is grayed out because it is not on the same layer but if I place something you see that it's placed on another layer on top of those details and if I go back to base you see that those little bushes have been added even without destroying this whole branch and this can be used in many other ways so for example maybe I want this tree to be more complex maybe more three-dimensional why not and let's say we want it to have something like this maybe it has another kind of bush here that makes the tree look a bit a bit more interesting so when we are going to run the game we're going to see everything looking like this you see I pressed this highlighted style map layer you can highlight it or hide it back and yeah we have a pretty interesting abstract three here okay but now that we have this whole area let's try to add a character in our scene so I just got this uh let let me select the character I just got this little character it has some movement and a little animation to it and let's introduce it to our scene let's save and let's press F5 and see what happens well there's a problem obviously there's a problem because we don't have any kind of collision well the character body is already set is on layer one player and it can collide with anything that is on the ground layer but the tile map does not have any kind of physics layer attached to it so what we can do is go to the physics layer and add a new element and where do we want our ground to be well it's going to be on the ground layer as you remember here I have this ground being the second one and we want it to collide with the player so it's going to be all right if we set it to one now we have to go back to our tile set and specify which part of our terrain is going to collide with it and again if I go here I can select physics layer you see this new tab appeared here and you see here that I have a bunch of uh dots which I can move to define the area which is going to collide with the player now what I can do is Select every single tile that I want to collide with the player and you see that this whole Collision area is being added here so maybe I also want to collide with the leaves why not let's collide with them as well I selected everything and now if I save I can press F5 and you see that the player no longer Falls to into Oblivion and it also collides with the leaves as you can see it uh it doesn't let me jump through it okay what if we want it to collide with the tree trunk let's maybe see a better application of uh this again I'm going to the tile map at the ti set and let's select this Tre trunk now this Tre trunk would be pretty weird if it had a whole Collision around it so we can move these dots and only select the region maybe maybe something like this only select the region of the trunk and not also the air around the trunk and yeah after we did it like this we can select the rest and as you can see it repeats this Collision so we don't have to draw it every time and here we have a branch which we do not want to collide with so we can add new points on this and we can draw these points anywhere I'm going to add a point here and another Point here which I'm going to draw like this in another Point here and you see that I have sorry I uh I zoomed out a little so you can see that I have some Collision here it doesn't have to be very precise now I can move to the next one and here to add the same collisions as well like this yeah it doesn't matter too much at the moment and here as well maybe I remove this with right click I do not want them anymore I just want here to draw this base and see I got the rough shape of everything now I'm not going to go over all of them I think you got the idea but now if I press F5 you can see that our character can move exactly near the tree trunk and then it collides with it and no longer moves now there are not only physics layer there are many more things there are navigation layers which help you with path finding there are custom data layers which help you basically set any kind of custom data you can say here let's say uh some property and this property is going to be anything so you can set a Boolean so you can give a single tile some Boolean and maybe when the player steps on it it can send the that Boolean to our code and send a true Boolean or a false Boolean or anything like that and finally there is rendering which has occlusion layers so basically to cast any kind of Shadows okay but one final and very useful thing that I want to show you is that tile sets do not work only with images and what do I mean by that well I can go to a tile set and not only add a tile map but I can add a whole scene so if for example I had some scene pre-programmed with some particles or with a sign that tells us a message I can click on plus and scenes collection and here I can add my scene I have created previously a sign scene and this sign scene is basically showing a message and doing some functionality but what's really cool is that I can select it maybe let's go on the tile map to the scene collection I can select it come here and I immediately placed a scene in uh my game and if I press F5 you see that it is not a single tile but it is a scene that does something it shows a little message bubble and what's very very interesting is that this scene is optimized inside the tile map it does not show up in the scene three and if I want I can add not only one but I can add multiple of these SC okay but this is pretty much it hope it helped you and hope you learn something if you learn something or if you want to learn more things please let me know in the comments and I'm getting very very close to having a th000 sub okay sorry I'm getting very close to having a thousand subscribers and I would highly appreciate it if you wanted to help me reach that Milestone so thanks a lot again for watching uh hope I helped you and see you in the next one bye-bye

Channel: Cashew OldDew

Views: 3,037

Keywords: godot, tutorial, video games, game development, development, godot engine, godot 4, Learning Godot, Game Design, Programming, Coding, Indie, godot 4.2, GDScript, follow, avoid, bugfix, bug, error, issue, how to, godot bug, fix, Tilemaps, Tilemap, Tileset, Tilesets, In depth, Guide, Godot tilemaps, godot tileset

Id: AUVsX-mtuNs

Length: 30min 32sec (1832 seconds)

Published: Mon May 06 2024