Using the Tileset Editor in Godot 3.1 (tutorial)

in this tutorial we're going to see how to use godot's new tileset editor a tool to conveniently edit tile sets set them up and then use them with the tar map note there have been some pretty good improvements in this version we're going to see how to set up o totals but also how to use tiles that span over multiple cells and the Atlas feature as well which allows you to group multiple textures in a single tile entry in the tile map editor let's get started so we're going to create a new 2d scene for that and add a tile map inside of it once you have your tile map node selected you want to click on the tile set property and create a new tile set as you click over the tile set resource you're going to see the tile set editor bottom panel expand any time you can press shift f12 to toggle the bottom panel fullscreen or to make it take as much space as it can we're going to start at the bottom left of the interface here with the add texture button this is the button you use to load textures to load tile set images into the talsad editor I have one here that you can find in the video description from but this is a project that we are leaving on github for you to try and I'm going to open that one we're going to use it to set up some auto tiles here as it has some nice textures so by default you want to first create a tall and you have to click that button to first see the snap to grid option appear but then you want to create a tall really quickly so that you can toggle snapping on and see these snap options appear in the inspector for this style set you want to set the snapping step to sixteen by sixteen by default should be 32 by 32 which is a bit big all this one we're going to work with 16 by 16 and then with the tunnel selected I'm going to click the dustbin icon to delete it let's talk about single tiles to start with you can use the new single tile button to create one it meets up right of the interface then click and drag to create a single tile this is a child that's going to take one cell in your tile map but the texture itself can be as big as you'd like so I'm going to click and drag over the tree to create a big tile and once you've done that once you've selected that tile you're going to see four sub tabs the first one allows you to set the texture region that the town you're on that you're going to draw when you use the towel then you can draw collision shapes of light occlusion shapes and navigation shapes and the three tabs here work more or less the same way have two new icons in the toolbar that will allow you to respectively create a square or a rectangle that fills the shape or to manually create a polygon we're going to select the first one just to show you that once you click inside the region it's going to automatically create a full sized square this is something you will use pretty often for navigation but also collision so it's a useful addition here notice that you can now create concave shapes this was not supported in the previous version if you draw a polygon that has a gap inside of it or a notch you can click make concave to make the collision shape work you have to toggle the option manually let's select the mate polygon and button and deactivate snapping to the grid to create a small collision shape that's going to only span over the base of the tree to create the collision shape you want to click to add points you can right click to cancel the process and then you want to click back on the starting point to confirm the shape from there with the Select tool selected can click and drag over any vertex to move it in the view and fine-tune your shape note that you can also use grid snapping and you can lower the step value to create more detail shapes you could go down to 8x8 for example here or even 4x4 and zoom in with the buttons in the top right of the interface to then move your dots and snap them automatically to the grid this is really convenient when your art is fairly squarey or when you want to have horizontal and vertical lines only in your collisions or to have precise pixel perfect collisions in your game the occlusion and navigation shapes work the exact same way so we're going to now talk about one thing it's that if you go back to your tar map so it's going to exit the tile set editor I have to set myself size on the time I've no to sixteen by sixteen to match detail set resource so look at how these single tiles work you're only going to draw on one cell at a time and that's one thing I don't like about the system abound the way it works it's that even though my tree is taking four by four cells in my view it's only going to be drawn it's only going to be mapped on the one cell and it's our map and it's going to be the top left cell which is not always convenient which means that I can't sample one bit of the tree and replace for example use a variation tool on one of the parts at the same time because the drawing order works pretty well here it's going to draw the bottom textures and and this makes it fairly easy to overlay tiles on top of one another let's now look at Auto tiles hotels are channels that are going to automatically change texture based on how you draw them they can be pretty smart the amount of variations or the flexibility that you get from them depends entirely on how many textures you prepare but you can see the result on screen that's what we are going to create right now I'll go back to the scene I was working on go back to my tile set select the texture we were working on and create a new auto top it's the second button in the top right of the screen you want to make sure first to have a rectangular area where you have all the textures you need for the ill total to work and to not have any other tiles overlap with it let me explain why so when you create a note Hotel you're going to sample all the textures you're going to create a region that spans over all of the texture variations that you need and the problem is if you make that region too big then you will have a hard time when you create new tools you will have a hard time selecting them you can see how I just inadvertently reset the region on my o total because there were two tiles overlapping one another so I'm going to create an auto town that's going to span over the first six columns in my towel set from there you can see a few extra buttons compared to single tiles bitmask priority icon and z-index we are most interested in bit masking icon to start with the icon is going to be the main tile that you draw when you select the tool and the icon you will see in the term of editor here you can see for now it's that grass corner which is not what we want we want to select the grass in the middle here and once I've done so I go back to my towel map I'm going to draw the bay grass color then we want to use the bit mask to set up Oh totals and the bit mask how to explain it's a representation of how the tools are connected to one another let me give you an example having two bit masks on the right as I have here means that the system is going to pick this left edge if we have the full towel to the right of it and the corner tiles above and below it guru is going to sample the textures trying to create a nice full shape a nice path based on the red dots that you drew you have a few options for the bit mask you have 2 by 2 this kind of corresponds to the terrain feature in the solve map editor then you have 2 3 by 3 bit masks which are a bit more complex this is going to give us a 3x3 grid to draw the the graph the connections between our tiles I'm going to show you how to use them in a second but you have the minimal and the 4 option minimal is roughly what you can see here with maybe a few extra tools this is going to allow you to draw single paths single cell paths and to draw grids here to draw rectangles with your tools and the 4 3x3 adds quite a bit of variations to have all the connections you can imagine with crosses and all those kinds of things we're going to start with 3 by 3 minimal because this is the only one we need here even though we can explain how to draw bit masks with words it's a lot more intuitive to test than to explain or to think about with words and the rule of thumb I can give you is that you want to draw the bit mask where you have the full texture here the for grass or where the player can walk yeah I want to have a one cell empty border around the main area we can already test this by the way I'm going to draw rectangular areas or square areas you will see that good places the corners properly going back to the tile set you want to draw a single tile here you can see it corresponds quite well to the area where we have the four grass we want to draw something similar to our borders here but reversed for what I typically call the inner corners or the inner edges of our tile map then we have a one cell white path we want to reflect that by having only one a one cell white bitmask and we're going to complete it with the extra tiles that much provided here which are also one cell white paths but with some cross and endings here and the last ones we have here are four when you draw a square or a rectangular grass area and you want to have a one cell wide path branching off of it with this setup here if you go back to the tall map you will be able to draw one cell paths and to have crosses or even to have loops in your path but you will also be able to have the path connect to the main square or rectangular area now there are a few tiles that are missing from these tile set to have full flexibility so you can see a very rare set up I should say but with what but provided you already have quite a lot of flexibility to be honest the only limitation here is that the one sound perhaps cannot branch from the corners they have to come from the center of the shape or you can have these two cells whites paths that branch off a larger rectangular area I'll briefly talk about the priority here the priority is here to add random variations when you draw the Oh totals and z-index to control the Z order the rendering of your town going back to meet our map note one limitation of the Oh totals in gudule it's that there again you can't sample a single cell like this corner and draw it somewhere else Godot is always going to take over and draw the Oh total for you there again in my opinion it provides simplicity over full flexibility at the moment and go to three point one and might change in the future but for now that's how it is the last elements I want to talk about are naming your tiles and tall atlases so anytime you can select a given tall and in the inspector you can change its name for example grass for the first one for the second one it's the tree I'm going to call it tree let's hide the names and from there I'm going to create a new atlas and atlases span over several tiles several textures you're only going to draw one of them at a time it's just a way to group tools together we need to name this one crops for instance and with that once I go back to my tile map I can select the props and select any of them in the split area again it's a convenient tool to group textures together at times I've found some small limitations with the tool and some small bugs when you control and click on a tile you can sample the tile that you are using the thing is with the Atlas it always only samples the first texture and not the one that you drew on the map then note that when you want to draw props or to draw transparent elements in your tile set you can't draw them directly on your tile map just like with any tile set system you have to create new layers and in Godot your layers are going to be individual tile map notes you want to go back to the scene here to the right note going to create a new tile map node and I want to copy the properties of the first layer so I'm going to select the first layer go to the wrench icon in the inspector click it copy the parameters go to my second layer and paste the parameters it's going to share the tile set resolves with it it's going to set the cell size the same as my towel map here from there I can select my props and draw individual props to my heart's content I'm going to draw over the first tile map same thing can now play with the trees note one thing another limitation of the multi cell tiles it's that the draw order for beetles is based on the cell that you drew in the cell position if I draw my tree here it's going to be behind the rock because the cell of the rock is lower than that of the tree so if you want to add trees and make use of the nice system that allows them to overlap smartly and go to if you want to draw large elements like these you will have to create yet again another tall map layer that you will put above your props that should stay on the ground with that we can finish by saying that if you have multiple tall map layers and are using a tall set a resource it's going by default to be shared in your scene go to shares the resources and anytime you can select your tile set go into it and click the floppy disk icon in the inspector to save your resource on the disk you can save your butt dance and I think that's how you write his nickname but dulcet dotty res from there you can reuse that sunset resource from the file system down there you'll be able to reuse it across your project and across your levels that's a quick overview of the new tileset editor you will certainly find some rough edges sometimes I'm not able to scroll before I change the zoom level it's a minor bug that we have in the first 3.1 release notes that who scroll it's middle mouse click by the way if you want to scroll over the texture just like with any texture region editor or these areas in the bottom panel and note that you can change the subtitle size for the individual cells in an atlas as well in the inspector so you can make the textures that you are going to draw bigger or smaller than other tools in your tool set you can finally attach a script to your tile sets and to run some code to interact with your tile map that's a topic for another video for now I want to thank you kindly for watching and let's see one another in the next one bye bye

Channel: GDQuest

Views: 156,401

Keywords: godot tileset, godot tileset tutorial, godot tilemap tutorial, godot tilemap 3.1, godot tileset editor, godot game engine, godot engine, godot 3.1, godot tilemap, godot engine 2d, game creation tutorial, godot tutorial for beginners, tileset, tileset tutorial, godot level design

Id: V9OoaOlXc_4

Length: 19min 33sec (1173 seconds)

Published: Wed Apr 17 2019