Master the GODOT TileMap tool in 15 Minutes!

hello and welcome to another exciting godot video tutorial i'm andrew hoffman i'm a software engineer a security researcher and a technical author based out of the pacific northwest usually i produce videos on cyber security and programming if you are a new video watcher on youtube welcome consider clicking the subscribe button if you haven't already if you enjoyed this video otherwise if you're a returning subscriber i'm really glad to have you back today i want to talk about the tile map tool inside of the godot engine so the tile map right here and today i'm going to be using the same base game that i produced for the tutorial i released last week that was called build a top down 2d rpg in godot in 20 minutes if you haven't seen that search through the videos on my youtube profile and find that video and maybe consider watching it if you're not already familiar with godot it covers collision basic tile maps player movement player controls camera etc so we're in this little game right here where you have the ability to move the player now you won't be able to see the player moving because there's not actually anything in the background for it to contrast against but we have player movement we have this player avatar right here and what we're gonna do is we're gonna look into the tile map tool in a little bit more depth so click the root node of the main scene in this case i'll actually open it up for you it's the main dot tscn and go to the tile map at the bottom so we're going to create a new tile map and for starters i want to talk a little bit about what is a tile map well tile map is a built-in tool inside of the godot game engine that allows you to take tiles which are basically just images and tile out a 2d map within a node 2d and i think it'll make more sense as we get a little bit further in so we start off with the tile set so on the right here we're going to say new tile set and then we're going to click the icon to the left of the tile set and we're going to have a panel open up at the bottom within this panel we can drag and drop art assets pngs jpegs etc so i'll start by dragging and dropping the grass so this is a grass tile set that i procured for free thanks to a generous user on it i o in the last video tutorial so if you look at that video tutorial you'll learn how to get that also consider donating to the user who produced these tiles so i'm going to click new single tile i'm going to click on this grass tile what this is going to do is it's going to take this 32 by 32 pixel segment of this large png file called tile set grass and it's going to add it to your available tiles in the tile set over here what i'm going to do is i'm going to tile out the bottom to the center of the camera viewport which is annotated by the pink line that's the camera 2d right here and you'll notice there's something funky about these tiles the tiles only take up one quarter of the tile that they've been placed in well why is that the reason why is because these are 32 by 32 pixel tiles but the default for a tile map for cell size is 6464. so the first thing you want to know about a tile map is depending on the size of the art asset you're using you need to change the default cell size inside of the tile map so i'm going to go back here and i'm going to wrap around where the border for the camera is once again there we go it's a decent job and now we're going to dig into some of the tools that are available for the tile map so at the top here you'll notice that when the tile map is selected you have a couple extra tools that appear on the top bar one of them is this fill tool it does exactly what you'd expect fills an area with tiles but wait if we click play now we'll notice that our player goes underneath the tiles this is an important part in a tile map so every tile within a tile map in godot is bound to the z index indicated right here so we're going to change that to a minus 99 and now if we click play the player will move on top of the tiles so that's important now the downside to this is you can't individually determine the z index of a tile inside a goodell so if we want to add tiles on top and let's add some more tiles to this tile set over here let's add some from the props and let's consider adding perhaps this treasure chest and we'll also add some flowers so we can put some flowers here and because the flowers mesh nicely they all have the same background color it'll appear as if they're appearing on top of the grass they're not they're just replacing the grass but if we wanted to put for example this treasure chest on the grass if we zoom in you'll notice that there's space behind the treasure chest where there's no grass and that's because godot is just overriding that tile with the new treasure chest tile the only way to get around this is to actually create another tile map and inside of this tile map we could call it level two or layer two so let's actually do that let's say this is the layer one and this is the layer two tile map and then we go to the z index of the second tile map and we change it to negative ninety because the first one was something like 99 so let's actually change it to 98 for consistency now from within this layer 2 tile map if we create a new tile set and we pull in the props and we add in this treasure chest we can put this wherever we'd like provided the cell size is correct we can put it wherever we'd like and you'll notice that it will actually appear on top of the grass below it allowing us to layer together multiple tiles now there's a couple other tools up here that i didn't mention so far so we looked at the bucket tool right now if we're on layer one the default tile is this grass tile now what if we had so many tiles here that we had to search for them well i mean unless they're named very accurately it's going to take a while to find the correct tile so we can use this dropper tool and we can click on a flower and it will change the pencil tool to the flower likewise we can click on the grass we can change this to grass so that's pretty useful right so that allows you to kind of rapidly construct and deconstruct tiles now what about this right here so if we click on the two squares that's a selection tool allows us to select tiles so we can do something like control copy and now we can control and paste an identical set of tiles at the top you'll notice that the grass pattern is identical so that's the bulk of the functionality that's in this top pane so now we've kind of talked about the tools up here and we've also talked about the fact that if you want to layer tiles on top of each other you need to create multiple tile maps with multiple z indexes now what if you want to do something like for example produce an animated tile well the tile map tool allows you to produce animated tiles but it's a little bit non-intuitive and in fact a lot of the functionality of this tilemap tool is not documented which is really the hardest part about it so if i want to create an animated tile what i have to do is i have to click this plus button and the inspector while the tile map is selected and type new animated texture at the top set the number of frames you want and then on frame one and two you can choose a number of different types of internal objects to represent your frame in this case i'm going to load in the godot logo or the godot logo and i'm going to assets and i'm going to also pull in this white box you can include you can change the frame rate and there's two buttons right here there's a pause which simply pauses on a particular frame and then there's one shot which makes it so the animated texture will loop through once and then not continue looping so the default functionality here is for it to loop you're gonna click save or save as in this case you're gonna go to assets and you're just going to call it an animated texture now we go back into let's say layer two we have this new animated texture over here once we open up this tile set we can drag and drop it right here and we can say new single tile we can pull that in right there now you'll notice that the shape of the white box is very large whereas the shape of the godot logo is very small that's why you have all the complexities in importing and it's actually going to be imported as a 6464 rather than a 3232 which will be fine given the fact that we're using 3232 for everything else so we go back here and we can put this guy wherever we want put one right there for example and let's make sure let's see let's see the index 99 98 we should be able to put one right here there we go so now we have this flashing godot logo we can walk over to it and there's no collision yet so we can walk through it so what have we covered so far we've covered the fact that there's layering we can add animated tiles but it's a little bit non-intuitive there's a number of tools that we're provided with well what if you have a game and you want to produce an asset and you want to display that asset at multiple orientations let's say for example this treasure chest well by default the treasure chest will always appear in the orientation that it was produced however there's a couple other buttons up here that you can use to place assets you can rotate left and right as you can see right there this does the opposite and you can also flip assets on the horizontal and on the vertical so here's an example of an upside down treasure chest so that's how you go about using for example one symmetrical asset to produce a number of tiles in different orientations okay cool but when we play the game we can still walk through these tiles so in the last tutorial i showed how to do collision with these tiles it's very simple but i'm going to show it again so we click on the tile set within the tile map we click over here and what we're going to do is we're going to click on the tile that we created click collision we're gonna create a square collider so that's a very basic type of collider and with this collider our player because he has a collider cannot walk through however you may have objects that are not perfectly square in that case the square collider won't do you much good for example if we look over here we have this object let's choose a good one perhaps we could choose the base so we'll we'll turn this vase into an object and we'll put it we'll flip it over right here we'll put it right by the player you notice that the vase has doesn't take up the entire tile so if we were to collide with it we'd want to collide with it very accurately on the side versus simply colliding with the grass that's right by the base and so what godot gives us the power to do is we can click here and then we can zoom in quite a few times get some magnification maybe even a little bit more magnification and find the vase we can click on the vase and we can add a collider that's a polygon collider right here new polygon collider we click off of the tile snapping we're going to click a few points one two three four five and you know keep going keep going and the more points that you put the more accurate you can draw this but essentially the godot engine is going to allow us to draw our collider and by drawing our collider we can get a very accurate collision shape that we wouldn't otherwise be able to obtain so now if we boot up the game you'll notice that we're colliding almost perfectly with the edge of this base so that's how you add a polygon collider if you want to have more accurate collisions then the collisions you would get over here using a rectangle collider and that's about the bulk of what i think you need to know if you want to produce really beautiful maps using the godot tile map tool i don't think you need to use a tool like tiled although you could i think the tile map tool has a lot of power inside of it i think the biggest issue with the tile map tool is the fact that the tile map tool is not well documented so i hope you all go on to produce beautiful tile maps and beautiful 2d maps in the godot game engine thank you for watching this short little tutorial i hope it was helpful to you and if you have any questions or comments in regards to the tile map tool in godot leave them in the comments section below the video thanks for watching

Channel: Andrew Hoffman

Views: 37,685

Keywords: tutorial, video tutorial, andrew hoffman, godot tilemap, tilemap godot, godot tilemap tutorial, godot tileset, godot tileset tutorial, tilemaps in godot, tilemap tutorial in godot, tileset in godot, tileset tutorial in godot, godot 2d map tutorial, godot 2d map layers, godot tiles tutorial, godot collision tutorial, godot tilemap tool tutorial, learn godot tilemap tool, animated tiles godot, make animated tiles in godot, how to make animated tiles godot, godot tile animation

Id: d5IyWAyk3T8

Length: 13min 23sec (803 seconds)

Published: Wed Dec 29 2021