Let's Learn Godot 3.2! Tile Maps and The Autotile Tool

hey guys this is mitch with five point cgi and today we're gonna go ahead and continue our basic tutorial series by talking about the 2d engine inside of godot so this time we're going to talk about the tile map so we're going to go over what a tile map is what a tile set is we're going to talk about how to add tiles to your tile set and how to create a new single tile and a new auto tile which is an awesome feature inside of godot so with that being said let's go ahead and get started okay so i'm sitting here in godot and first thing we're going to need to do is we're going to need to click create a root node so we're going to need to create a 2dc we're going to right click here add a child node and type in tile map and you'll see that that will go ahead and add a tile map node now what is a tile map node well basically what it is it is the grid system that godot uses to define what your 2d level is going to be [Music] so over here on the right you have this tile map resources or tile set resources here and this is all the resources used for you to draw out your tile map now if you look over here there's different types of modes here you have square isometric and custom well if you generally speaking you're just going to use square or isometric but square is your standard square grid and isometric is a square grid that's offset by 45 degrees [Music] down here we have tile set and if we click on new tile set you'll see that it creates a new object here and we'll get there in about a few seconds compatibility mode is if you want compatibility mode with an earlier version of godot center texture will actually center the texture so it'll be in the middle of each tile versus um like on the upper right hand corner or anything like that it's useful if you have like a flickering tile edges uh center a cell clip uv it'll actually um clip the uvs on the tiles so that they have less flickering [Music] cell this is the size of the quadrant of your cell and i will show you guys this in a few seconds you have your guys custom transforms you guys have offset the tile origin which is where its origin is so you see how when i put my hand or my hand my mouse over here you'll see that the tile origin is the top left so it'll be in this section when you paint that tile that'll be the origin of where it puts that tile versus if you were to change this to center or bottom left it would be center or bottom left respectively collision it determines if it has collision if this tile map actually has collision and we'll get there in a little bit as well so now that we've created our new tile set let's go ahead and click on it you'll see that it says that we need to add a texture well first that means we need to get a texture so what we're going to do is we will go ahead and open up our web browser and go to google and we're going to type in free pixel arts pack there we go and we're going to look around and see what we can find i like to find the itch dot io free game assets i believe they have a pixel art assets if i click on it yeah so you can see here we have all these free game assets that we can use for our projects now some of them say you can't use them for commercial purposes and some of them you can use them for commercial purposes so i would make sure that i read them so that way you're not um you know like if you look at the skeleton pack um you'll see if it tells you if you're allowed to use this you see you can you can use this art for personal or commercial use so you just want to make sure that um when you uh do your when you download these kinds of art assets you don't want to use um you don't want to use them if they're uh used for only personal use if you're going to be selling this game because that's highly illegal so if we go back to our skel or back to our pixel art and we kind of scroll down we're gonna look and i particularly like uh let's see there was one that i liked this one right here so peaceful night field is the one that i'm gonna be going with so if i click on that you can see that it says here this tile set is eight by eight pixels they tell you that right here it contains these different things and uh they're saying hey i hope someone can get a use out of this is made by trixie if you look up here so go ahead and follow her out on twitter um but if you just click download now you will see that it will ask you to donate i've already paid for this so i'm gonna say no thanks uh and then click download and you can see it's gonna pop you up a download so you can hit ok and once you have that and you extract it it will look like this so you'll see that you get a preview a little note from the person a coin and what looks like the tile map itself and their little um color palette that they used to create this so what we're going to do is we're going to grab this we are going to open up godot and re-bring up that thing and we're going to drag that in so you'll see it gets dragged in right here so now what we're going to do is we're going to go ahead and drag this over to the tile set dot or to the open area here and we're going to let go and you'll notice that the tile sets are really blurry and that's a big problem so what we're going to need to do is we're going to change our import settings in godot to make it more of a pixel art style so what we'll do is we'll make sure we have this selected and we'll come up here to the import and we will change our preset to 2d pixels and we will re-import that you'll notice that suddenly this looks way better now if you remember from our instructions from the person who made this tile set this needs to be on an 8 by 8 grid so what does that mean well when we start chopping this up we need to chop these up in 8 pixels by 8 pixels or else it doesn't make sense so first let's talk about what all this is so if if you look at this we have new single tile new auto tile and new atlas now i'm going to talk pretty much about new single tile and new auto tile in this specific tutorial and maybe we'll talk about atlas later but if you go ahead and click on new single tile you'll see that some options come up right here you have this little click and drag and you have this little grid here so if i just click and drag you'll notice that i can click and drag and select things to turn into an asset so if i actually click on that and i click back on my tile map you'll see that i now have this big block here if i click with the left mouse button you'll see that it starts placing those down now if i click with the right mouse button you'll see that i am deleting them but you'll also notice that that's not very great that's not a good way of handling things right so if i were to go back in here um you'll notice that it's not perfect you see how that doesn't quite match up perfectly it's kind of off a little bit this one's perfect but this side's not and and then overall dragging like this is not a good way of handling things so if i were to drag over here like that's just not a good way of handling things so instead if i go ahead and i click on this and i hit the trash can and i click on this and i hit the trash can if i click new single tile and i click on this little button here it enables snapping to upgrade so you'll see if i click on that you'll see that i have a grid here and what you'll need to do is you'll need to click like this and you can actually select a grid now in my case i already have it set up to have my offset as eight by eight here so and my step by eight by eight so if i were to change this back to what the defaults are which i believe they're 64. you'll see that it looks something like this so when i select this it's one giant area whereas if i change this to eight by eight now it's the correct size for me to be able to use you can see how when i zoom in you can see how that matches up pretty well perfect so if i select this i have all these other options up here now that i've selected what my pixels are going to look like so i have collision which allows me to have collision inside of my game occlusion which allows me to occlude foreground and background objects and navigation which allows me to use ai to navigate these mesh these uh tiles so if i click on collision and you can see here that there are different options here so i can actually click on like rectangle and i can select and you'll see that it actually makes that into a collision object and same thing with occlusion if i were to select rectangle and i were to drag this you'll see that it also selects that now you don't necessarily need collision and occlusion together remember the idea is and i'll put a graphic up to kind of explain what collision and occlusion is but you just want to know that if you have collision you don't necessarily need occlusion it just depends on how you're trying to operate this so now that i've selected one let's go back to our region and let's go ahead and select another one here and we'll add in collision as well and then same thing with this one and we're going to add in collision as well and that should oh whoops i actually need it to a new single tile whoopsies so you click that add in collision select that new single tile click collision click okay and now let's do another one i'm gonna do all of these in this little grid here okay so now that i have all of these done what we can do is we can click on tile map and you'll see that i have all of these really cool tiles here so now i can draw these tiles out and actually draw out what i want to to create right so if i want to create a cool little uh running path but you'll notice that these are really far apart well that's where the cell size here comes in handy so if i set this to eight by eight you'll notice that suddenly which is what what she said on her um on her uh project page right she said that this was a eight by eight pixel so if we set it to what she says you'll see that everything matches up perfectly so if we go ahead and draw some you know some uh pathways here let's do something like this and then something like this let's get rid of that and let's put in [Music] see that you'll notice that this doesn't quite match up very well so what if we try to find a way for it to match up so you'll see that i went ahead and added a few tiles here just to kind of give me some more break up so you can see that we can actually use these to help break up how are things going to look so if you see i click here you'll see now it kind of gives that nice little um l shape i guess you could say to this so if we go ahead and um put this down like this and then we grab our rotation one like this and then we go ahead and drag this out then let's go ahead and do this you can see that we can get a pretty cool result here right and we need to fill in this little gap here we got a really cool little uh corner piece here but it doesn't quite match so what we can do is we can hit x and that flips all of them if we hit s that rotates it you see if i rotate it and i click you'll see now it looks pretty decent so we're also going to do is we're going to go ahead and draw out a little tiny center piece and actually i want this i want that i would like to have that that and that and you can see now i got this nice little level here but if we go back to our tile set then we click here and let's say we want to add some trees right so new single tile right we select this little region we don't want collision because we don't want the user to hit it so let's go new single tile and then do the same thing and we don't want collision because again we don't want the user to hit it and finally last one now if we go back to our tile map you'll see that once again we have our trees so we can click here and we can click here just like that and now we need to go ahead and do the same thing for this section but this is kind of a pain in the butt right it's it's not a lot of fun to have to draw out all these tiles to handle all the stuff so the good old creators designed a thing called auto tile so if we go ahead and click on auto tile and you can see once again we have our little region selected here we can select this section here and you'll see that now we have all of these same features here but also bitmap bit mask and if we click on bit mask it allows us to draw these red rec these red squares and you'll see that how it operates is it uses this to hook up to other red squares to determine where it should be placing these tiles so if you go ahead and put it like this you'll notice what i mean in a second so if i click on tile map and i scroll down until i find the tiles that i'm looking for which is this one when i draw this out godot is going to try to do some math to figure out what i'm trying to build so you'll see that if i do that that doesn't look really cool but if i connect them you'll notice that it's starting to try to figure out what i want it to do so if i draw this out like so you'll see how it's attempting to build what i want now it's not always perfect so let's go ahead and take a look at our tile set and see what's going on okay so after a little bit of a struggle here i finally got it working a little bit but what you have to do is you have to set up your bit mask like this so the idea is how it's going to connect to each other right so in this case like these three are going to connect together so when these three are in a row it'll figure itself out when these three are in a row it'll figure out how to connect these together same thing with these ones if that makes sense so if i now go ahead i can kind of drag this out like this and fill it in and you'll see that it continues building out this complex shape for me so i don't have to actually go through the work of building it i can just draw it out and it designs it so that's the basis or the basics of um the auto tiler system now some other things that you could do is you could also try to auto tile this as well and and a good exercise for you is to go ahead and auto tile this and see if you can get it to operate as you would expect right so you could you could uh do a if you click on these and you you trash them right if we click on region and trash these out you'll see that it goes goes ahead and deletes what you previously created but you can come in here and and trash all of these like so and then go ahead and make it auto tile so if i select a auto tile and i drag these out and i include these as well actually actually you know what let me include all of this so if we actually just include all of this and we scroll in a little bit and then we go ahead and add in bitmask and then draw out our quick little bit mask here and then let's say this this this this and then fill these in as well now when we come in here and we go find that auto tile set you'll notice that it is an absolute mess but this is a good opportunity for you guys to go ahead and figure it out so i want you guys to pause the video take a look at this and see if you can figure out what is possibly broken so do you end up figuring it out well this is what you would need to do so you can see here this is where these would connect this is where these would connect and this is where these connect and you can see here this is where these would connect to determine which ones i guess show up right so for instance you can see here this connects like this and you can see here this one is right here you can see that it's looking for an adjacent tile here and it's looking for adjacent tiles above it to determine that this is the proper location all right so now that we have that we can actually go ahead and draw all this out so you can see here i've been kind of playing around with it and showing it off and and playing with it so if you click on tile map you can see as i draw these out it'll figure it out by itself so let's continue drawing a little bit here like this you can see this is an easy way to go ahead and create some pretty cool little levels now if i go into my tile set and i go ahead and choose a new auto tile and i select this little section here you can actually auto tile these pretty simple just by adding in your bitmask and at this point you pretty much know what to do right so you just kinda drag these in like this and it should providing i'm not crazy not work now one of the hardest things to learn about auto tiling and godot and things like that is is you need to know what's best for an auto tower so you can see i tried to make this into an auto tile but it actually didn't work very well and knowing what can be auto tiled and what can't be auto titles one of the things that you really need to learn as a aspiring game developer so if i go ahead and drag these out and i add in a pillar like that and let's go ahead and add in a nice little ladder you can see this is the basics of the godot tiling system and if i hit remember x to flip this there you go you have yourself a nice little environment that you can build and play inside of [Music] all thanks to uh this free nice free tile set so that's all i have for you guys today we covered auto tiling we covered tile sets we covered what a tile map is and some of the some of the knobs and and dials that are on each of those options we also talked about you know building a small level and we honestly built a pretty cool little level here so i want to thank you guys for watching and you know if you like this video hit that like button and you know if you dislike this video go ahead and hit that dislike button because again i'm here to make content for you guys and i want to build stuff that you guys are interested in so let me know if you have any suggestions or anything in the comments below and i'll see you all next time thanks [Music] again you

Channel: FinePointCGI

Views: 516

Keywords: godot 3.2, godot, godot 3.2 tutorial, godot engine, godot autotile, godot game engine, godot tutorial, autotile, godot tilemap, godot tilemap tutorial, godot tileset, godot 3, godot autotile tutorial, godot beginner tutorial, godot autotile 3.2, godot auto tiles, godot tileset tutorial, godot tilemap editor tutorial, tutorial godot, godot 3 autotile, tutorial godot 2d, godot 2d, how to learn godot, godot autotiles, Let's Learn Godot 3.2! Tile Maps and The Autotile Tool

Id: p3Y0Knrenys

Length: 21min 34sec (1294 seconds)

Published: Fri Jan 15 2021