Godot 3.2 Tutorial - Autotiles (2x2 and 3x3 Minimal)

hey come on in everybody i'm slushy thank you for clicking on this video today i just want to do a quick video going over the godot engine's auto tiling feature it's a bit of a complicated feature um when you're not used to it at first and there are a lot of things involved when setting up auto tiles in godot so we're just going to get right into it this is going to be a step-by-step tutorial first of all please make sure that you download the file i linked in the description below this includes the whole project that we're going to import into godot and start working with i'm just going to go over to my computer and get started uh follow along and by the end of this tutorial you should have a fully working auto tile tile map that you can use in your games okay so on my desktop i've got the folder of that was inside the zip file that you can download from the description of this video when you unzip that zip file you'll get a folder uh called slushy auto title example and you can just extract that wherever you want to um here i have it on my desktop so now i'm going to open godot the project list opens up and i'm just going to import this new project so i'm going to go to my desktop slash the auto title example and select project dot godot then click open you'll see there's a green check mark indicating everything is ready and we'll just click import and edit to start editing this project so here's the project and the first thing we want to do is we want to add a tile map node to our scene so we're going to right click on node 2d add child node and i'm going to type in tile map so you can see here it is right here in the list i'm going to select it and choose create to create a new tile map so i've got my tile map selected and you see over here in the inspector area things started appearing these are different properties of the tile map one of the properties of the tile map is a tile set and so this there's no tile set for this tile map right now so we're going to go ahead and create one by clicking on the word empty here and then click on new tile set in this pop-up window so now nothing really changed other than now instead of saying empty it says tile set this means there's a tile set attached to this tile map and now we can configure the tile set so if we click on it this brings us to this tile set editor panel down here i'm going to make this a bit bigger just so you can see it there are three kinds of auto tile maps that godow supports it supports two by two three by three minimal and three by three we'll get into the details of those here in a little bit for now we're gonna start with the two by two tile map so what you need to do is down here at the plus click it and then choose two by two auto tiles uh from the file system these are the the images that were included with the project click open and you'll see right here is that little graphic this is the tile map the the whole graphic is 32 by 32 pixels so it's very small so we're just going to click on the plus a few times right here to zoom in on it nice and big so you can see it i'm going to drag this up a bit more here just to get a nice big view in the window okay so now with this selected and zoomed in nice and big so we can see it we're going to go ahead and add a new auto tile so first you got to make sure this is selected it already is but just if it's not click on this make sure it's selected and then click new auto tile now nothing really happened other than we have this new area here with a region button that is now selected so we have we need to define the region of this image we want to use for our tiles now we're going to use this entire image we're not going to just use a small region we're going to use the whole image so with region selected like it already is click the top left corner of the graphic and just drag a square across the entire thing to the bottom right until the entire graphic is selected with our region selected we now have a lot more options up here that we can work with so next what we want to do is we want to click bit mask the bit mask is how we define how our auto tiles are going to work before we can actually draw our bit mask we need to configure it a bit first expand the selected tile section and you'll get a long list of parameters for this tile we're only concerned with a few of them we're going to make sure our tile mode is set to auto tile it can be single tile auto tile or atlas tile we want auto tile our auto tile bit mask for this is going to be two by two it can be three by three minimal three by three or two by two so we're gonna select two by two and then the subtile size is eight inside this graphic are 16 different tiles each of them are 8 by 8 pixels in size so over here at the subtile size we need to change that to 8 x and 8 y now with that in place we can start drawing our bit mask now for uh the bit mask we're going to be mostly just concerned with the areas that are that the player is not going to be able to walk on this is a kind of an easy guideline for figuring out how the bit mask is supposed to be for this example we can consider areas that the player are not supposed to walk on uh part of the bit mask so we're going to cover our image with the bit mask accordingly like this now the way bit masks work is uh depending on if it's 2x2 or 3x3 the uh the tile map is going to take a look at the bit mask and then for each of the red squares inside of each subtile it is going to check the surrounding tiles in your tile map that you're drawing so now with our bit mask in place we have one last adjustment we need to do to our tile map we need to click back here on the tile map and then over on the right side in the inspector we need to expand the cell region within the cell region we need to change some of these numbers basically we're changing 64 to 8 because our tiles are only 8 by 8 in size not 64 by 64 in size so we'll make these all eights now with that in place we should be able to start drawing our tile map we need to zoom in a little bit because these tiles are small but you can see here this is the top left tile in our image but once we start drawing it's going to form the auto tile title map now you can see being a two by two bit mask we have a lot of shapes that are not supported like that shape just a single tile is not supported you can draw basically a single line of tiles is not going to work for a 2x2 bit mask you need to have a bit more tiles for it to work with you need at least four tiles for any given auto tile to actually work this can be fine for a lot of games if you want to have a bit more control and have a bit more detail in your auto tiles you're going to want to go with a 3x3 bit mask and so for that the steps are essentially the same as with a 2x2 bit mask but we're going to be updating the bitmask itself and we're going to be selecting a different tile image as well so i'm actually going to name this tile map two by two tiles and now i'm going to add another tile map i'm just gonna call this three by three tiles so we're not confused and back in the cell section we're going to make the same changes go 8 8 8 8 and then we're going to add a new tile set we're going to open the tile set go down here add a new tile and we're going to select the three by three minimal auto tiles file now there's a lot more tiles in this one because there's a lot more combinations that it can account for make sure you're zoomed in again so you can see the you can see the whole image and then click new auto tile like before select the region we're going to select the entire tile set again we want the whole image so we're going to drag a rectangle around the entire thing and then we're going to click bit mask [Music] and over here in the selected tile area you might need to expand it again make sure auto tile is once again selected now make sure instead of selecting two by two we want to do three by three minimal and we also want to make sure our subtitle size is set to eight by eight now with three by three minimal instead of each subtile getting divided into four squares it gets divided into nine squares and the same basic rules apply as before the nine squares and the bit mask are going to be compared to the actual tiles that are in place in the scene around it to determine what tile is going to appear there so for example this bit mask this one down here is the easiest of all it's just a single tile if when you're placing tiles and you just place a single tile it's going to use this one this one will meet all the requirements there is just the tile itself in the middle and no other tiles are around it therefore it's going to use this single tile here and the rest the same rules are going to be applied for the rest of them [Music] all right this is what the bit mask is supposed to look like for a three by three minimal tile set at least the tile set that i have provided for you in this example once you've got the bit mask looking like this you're ready to start drawing three by three to auto tile so let's hide this tile map that we've already drawn here and then select our three by three tiles and we're gonna select our only tile over here and just start drawing so we just draw one just to see what it looks like right there we only drew one so that's the single tile that we noted earlier it's just one tile it's self-contained it looks right it looks it looks correct but if i draw two next to each other it connects and i can just keep drawing single tiles and any combination i can think of the only thing that three by three minimal tile sets do not account for are diagonals that is a lot more tiles that need to be created um 256 to be exact that's a lot of work if you need diagonals in your game then that's really your only option otherwise if you can do without diagonals i would recommend just skipping that we now have working 2x2 tiles and 3x3 tiles so the last thing that i want to show you real quick i'm not going to go too in depth on it because it's going to be kind of different depending on what your game is what you're doing with it but we want to be able to add collisions to this tile map as well right now if you were to add a character to the scene and have them walk around in your tile map they would just walk right through the walls that's probably not what anyone wants uh in their games and so godot's tile map lets you define the collision area for each individual tile so we can go back into our tile map this time i'm just going to go back into the 2x2 again and i'm going to click on the tile set and click on the tile here and click this little arrow to go into the edit mode and i'm gonna click on collision so here for each individual tile you can specify the collision area that you want to have that basically you're going to be specifying the areas that you don't want the the players characters or any characters to be able to pass through um and to do that they give you a square or a rectangle uh tool and a polygon tool if you have you know oddly shaped tiles or collision areas for this one we actually are going to use both we do have square collision areas but also some non-square collision areas so this tile map is kind of an isometric looking tile map you don't want the player to you know run through the roof obviously but you still want the player to be able to walk up on top of this wall here without actually getting blocked by it because of the perspective and so we're going to use the polygon tool and i'm just going to show you a few of these tiles here how to use this so i'm going to click on this right here and it might help if i can zoom in a bit more and i'm going to define the area of this of this tile that i want uh collisions to not go through i'm also going to enable snapping so we get straight lines when we when we draw our collision shapes here and then over here on the inspector i need to change the snap options so instead of steps being 32 by 32 i'm gonna make them two by two just so there's some good snapping this will allow us to get more accurate collision areas while retaining straight lines so i'm going to click the polygon tool and click on the top left of this tile here i'm going to click again on the top right to draw a line now i'm going to go down to the bottom right and now i'm going to stop right here at the edge because this is where the collision is going to happen we still want the player to walk on the floor over here so i'm not going to draw a line over here i'm going to draw a line around the edge and also we want the player to be able to kind of walk up against this wall so i'm going to draw my i'm going to draw my line up here right at the top of that wall there and i'm going to bring that all the way over to the side and then complete the shape so now this area here cannot be traversed by any characters anyone that has a collision object on them they're going to get stopped by this area so they can still walk up to here but then get stopped right there additionally you can use the square tool some areas work fine with just a square so we can go to this area oops so we can so we can go to this area down here click the square tool and click the top left corner and it will automatically draw a complete square around it for us because this tile is completely blocked off we don't want the player ever to go across this tile and we can follow the same kind of procedure for all the rest of the tiles so i'll click this one here all right so now we've got collisions set up as well this is how you would set up collisions on your tile map so that way your characters can now run into walls run into you know run into your tiles and and get stopped without going through them as if they weren't even there and that's it that's the tutorial we just went through and learned how to create auto tiles using godot's tile map both 2x2 and 3x3 minimal tile sets there's a link below in the description you can use to download the project file that i used for this tutorial and you will be able to accomplish everything i did in this video so that's it that's all i wanted to go over i hope you have a better understanding of auto tiles and godot after this if you have any questions or comments please feel free to leave them in well the comment section below i'll try and answer any questions i can please click like on this video as well and hit that subscribe button if you haven't already and don't forget to click that notification bell so you're notified when i make more videos like this one thanks everybody i'll see you next time

Channel: SlushyGames

Views: 7,833

Keywords: indiedev, gamedev, godot

Id: ZDghWCd_1k8

Length: 16min 13sec (973 seconds)

Published: Wed Feb 17 2021