Godot Tilemap | Atlas Tiles & Auto Tiles Godot Tutorial 3.2

hey guys and welcome to another tutorial on ice traumatic town maps in Godot now in the previous two tutorials we've been making use of a asset pack from Candela now it has a different sprite for every town sometimes they are also faced with towels sheets a little bit like this one now that works a little bit differently and at the same time it opens up the opportunity for Auto tiling and Atlas tiles so let's have a look at that how we can make a tell sheet into a town map make it look great and make use of those features well let's get started now for this tutorial I'll be making use of this grasslands town sheet for clean belanger uploaded to open game art calm you can use this even commercially in your projects if you'd so desire as long as you give the proper attribution to the artist according to the license now this is a towel set that makes you 64 by 32 based on a symmetric grid so that's important for our settings in goda when you scroll down here you got the grasslands tiles dot PNG right there and if you download that you get something like this now make sure you drag this into your go to project folder so you can access that in the code of editor now when we are in the godel editor let's have a look at how we set that up right here I got a tell sheet example it's a no 2d that's what we will be making a town should example and I've added a child to it a tile map I've already set in the mode to isometric and I've already set up the cell size to 64 by 32 just like clean Belanger is set in his description now when we actually want to create this tile map artists make use of this tile sheet we're gonna go to the town set and we're gonna go to new town set and when we click on that the tile set editor will open it may not pop open bake like this for you that can be done with the button on the right hand corner and down here with the two arrows so it might open up like this you make it bigger like this and you probably want to push some work space in this style set editor is kind of convenient now in the file system right here you can see that I've dragged my grasslands tiles dot PNG into this folder location and I can drag this to this area right here when I do that it will import a PNG file as its house' now as you can see I got a little bit of our grid here but that grit doesn't really match up with the town so we're gonna set up the snapping options first so we can select the different regions from this now so we can do that by first creating a new single town and just selecting pretty much anything doesn't matter what the moment you do that this snap options pops open if it doesn't just click this snap up a snap option right here and we can set the step with which it should snap now of course this town set being 64 by 32 grid when we do that you can see that we can actually exactly start selecting the tiles that we want to so now when I select this towel and I would just bar single new single towel and press another one press another one we've now created two towels or if now selected two regions to be determined as taos within our towel set now let me go back to the town map you'll see that those free grass tiles are now available for us to select and to draw and just as always you can use the bucket fill on the top and the pencil to draw individual towns now you probably don't want to use this like this because when you have this tile map you can make or sell I should say you can make use of auto tiling so let's continue with all the tiling next do you want to learn how to make games or do you want to learn more about go to subscribe to this channel and don't forget to hit that little bell icon to make sure you don't miss out on any videos also if you're curious about the game development that I do myself wooden go to I live stream my game development sessions every Tuesday and Thursday on Twitch the link the description the details all in that description box below and now let's continue now to start all the tiling we're first going to be deleting this grass I mean this is very repetitive and we're going to make an auto tile system to make sure that repetition is out of here so with the bucket pane I'm going to right-click it to delete tiles you right-click and all is gone now we're going to go back into the towel set editor gonna select a towel sheet and we'll be deleting these regions with the trash icon here because we no longer need these now we're going to set up a new auto town and we're gonna select a couple of these grass towels I'm not gonna use all of them is just an example you can expand on this yourself if you'd like to now with Auto tile we got four extra tabs right here and we'll be using a couple of these for demonstration first of all let's start with I can open is basically a towel which is going to be the icon in the editor when you're painting so if you want a a certain towel it's very recognizable for you you can use that for priority this is going to be determining what the priority is for each town normally this is just set to be entirely equal but if you feel like one towel is standing out a little bit more than the others and you feel like that should be used as often as the others you can set the priority right here and thereby you can change how the auto tiling system is gonna deviate between the percentage of towels which is using and then lastly we have the bitmaps the business master determines which tiles can be connected together so basically a bit mask can be set up in a 2x2 grid or a 3x3 grid and basically what you're gonna be doing is you're gonna be painting them so when we're painting these and we find symmetric you gotta imagine that a 45 degrees rotated of course so basically what we're doing now is that this tau will be underneath here basically it will be drawn in this area right here and by doing so you can see that this red piece will be connecting this red piece right there so rip and red connect and then the Auto tile system knows okay I can connect these two together so with that done we can go back into the tile map you can see we only have one grass tau image right here now because that's what's the odds how that's what the older tile I can that we selected now if we without bucket filled with a pencil we paint in a couple of these tiles and we bucket fill them up you can see that now it has used different graph styles every now and now the grass doesn't look as repetitive as it used to just a moment ago especially if we add vegetation and stuff like that to this tower with all this grass it will look considerably better now for demonstration I'm gonna make a little bit of a bigger piece this is not for demonstrating this Christ how system but it's going to be for what we'll be doing next because we'll be making a nice Pont so I'll bucket fill it all up and that looks pretty good now with that done let's add some vegetation do this and when we're adding the vegetation I can demonstrate to you how the Atlas star is working so let's get into that to get Auto tiling we're first going to go back to the town set we're gonna select the tile sheet and as you can see right here we got a couple of vegetation tiles I'm at least vegetation tiles they're bigger than 64 by 32 they're actually 64 by 64 but that's no problem when we first gonna go to new Atlas and with that we're gonna select a region of town so we're not selecting individual tiles we're selecting a regional towns and of course this is now a 64 by 32 snap that's still okay as long as we set the soft our size here so we're gonna set that the 64 by 64 so that the Atlas style knows how to draw or cut out different towels from this region that we have selected now we can also just like with you all the tile we could select an icon that we want to use for example these flowers and what we can also do we can also set the name we could have done that with the auto styling system as well for example call that grasslands auto but for this time we're gonna go with let's just go with that to be sent these are these are the veggies of the world so with that renamed to Vantage we can go back to town map and now you can see we got a category veggies that is Whitney oinking and when I click that it pop up here opens up then I can select all the individual towels that the Atlas tile has cut out from that region we selected now if I were to add these to the world you can see that we are now removing something from the world we're removing a tower because we're still working on the same concept so I'm going to undo that with controls out we're going to rename this to grass or maybe to ground that's even better and then we'll be adding another towel map to this at that time up we'll rename two veggies and that the veggies Thomas of course we got to set it up isometric 6012 at 32 and with the ground towel selected we're going to go to the towel set editor because we have to save that resource because we want to reuse it between at our set editor you got a little save button up there so we're gonna save this as I'm gonna save it in my folder resources I'm gonna save it as the example sheet top sheet example that's rightly so with that we can go back to the veggies node and now with a towel set where we in the first one create a new towel set now we can load that towel set that we just saved on the resources towel sheet example dot tres now with that opening up you can merely see I got my altered grasslands and my veggies and when I got my values selected I can now draw things on the map but you can see that we got a little bit of an offset because the veggie is drawn just below the towel sounds really weird right veggie it's okay we'll just call this vegetation then so you can see that the vegetation is drawn one table below so let's fix that now any town set editor we are selecting our region and we can now say that a texture offset is in minus 32 that's the entire height of one town now with that set you can now see that we are now drawing exactly in the towel that we are having our mouse over and you can see that the higher towns are now drawn over it instead of under it so with that we can make our world richer but what would make our world more mature then a little bit of a pound that would be nice so let's start working on that part then we can also take another look at the auto tiling system we can do that again we can also have a look how we can add cliffs which sort of kind of faked the depth of of this map and I can show you how I'm also ordering my map notes in order to draw both the vegetation next to the pond this was in the pond so let's do that now to start off with the water we're gonna go to the tile sheet editor again because we have to find the water first and no water towns are now right here these are the water tiles so I'm gonna create a new auto town then I select a couple of these water tiles don't need too many don't have to set the icon I do have to set the bitmap so we're gonna be drawing the bitmask all these water tiles can touch each other that's all no problem and we said the subside tile is already set to the right size and we're gonna rename these to water on this corner auto with that we can go back to the ground because we can replace the grass with the water and we're gonna be drawing up a little bit of a pond here and you can see that the grass immediately changes as we are drawing these these water towels as the auto tiling existing is determining like what can I put next to each other and what can I put next to each other so a little bit of a pond here let's not make it too complex and now we need to add some cliffs to that some sort of science some sort of slope and this house set also has dos within it these are right here and they've given us eight sprites for both straight in a corner and outer corners two variations for each kind so we give it a little bit of variation and we don't get a lot of of repetition so to get these in I'm gonna make use of Atlas towels again to demonstrate that again so we'll be selecting these these sprites we're making sure that we set the sub tile size again to 64 by 64 so the you knows how to cut these images out and we'll give this a name that will be nice so we're gonna call these water cliffs and we call these the straight ones these are or they are straight don't make jokes don't make jokes guys then we're going to create another Atlas we'll be selecting these will again say this is 64 / 64 and you are going to be our water clips and you body inner corners and then we'll create another Atlas will select DS will again say you're 64 by 64 soft out size and you are going to be water clips outer corners now with those selected we're going to go back to the map but we need we need something else we need something another tile map to get this all drawn in the way that we want to draw it so we're gonna rename this I'm gonna call these our water clips and in water cliffs again we're gonna set up isometric we set itself is 64 by 32 we again load that resource that we have right there and as you can see we got now free extra atlases you want a corner inner outer and the straight ones now what I'll be doing I'll be dragging this out to exactly 4 by 4 so I have these nice underneath each other and then I usually start with the inner corners when I have to draw around something I usually start when I draw this all out I usually start with the top 4 if I'm giving a variation in in a towel sheet and then I'll add the variation using the bottom 4 so I'll be using only with the top 4 first so first we'll be doing the the outer corner so we got an outer corner so with these outer corners you can see that we sort of have the same problem as we have with our vegetation is that we are drawing this town but this towel is touching the ground like one towel below the extra tile that we're drawing or the time that we have our mousing so let's first fix the offset of our water clips and giving them all just like the vegetation an offset so little minus 32 so with that done we should be able to try you can see these are jumping up now but now we should be able to draw these corners out exactly on the towels that they should be touching so that's the out of then we're gonna do the inner corners we don't need that one now we got this one and then we'll be doing the straight box and again with shift set that before in another tutorial you can draw straight lines if you're worried about you know what sometimes you accidentally shift one out over here mouse button just hold shift and you can't do that you can only draw straight lines and you can just release your mouse so that makes things a little bit faster so there we go we draw on that part we draw this part this one there Oh actually take the wrong one and this one there so now that we got that in I'm gonna drop a little bit of variation using the other corner so every time I'm using something double I like to use a different version for example D this one and this one are exactly the same so I'm draw this one in here and also we got two corners exactly the same on this side so I'll use one of these to replace the other for the outer corners we actually don't have a lot of doubling for the straight pieces of course we have quite a lot so I'm gonna be drawing a couple of these things over with our variation that way we don't have the amount of repetition that we currently have with me water clips so with that done it looks a little bit better we now can use the grasslands house and we can draw right on the side here to get us a little bit get us rid of the dark spot however as you can see these are already taken if I do a draw up here I'm drawing over the actual cliffs that we have already drawn so we've got to make sure we put that in a different note to make sure that that all comes together as one whole piece so I'm gonna be adding another channel not a town map and basically we'll make again isometric cell 32 we'll be loading that up in the resources that I'll shoot example and then we can use the grass yes the grass to then draw up the edges here to make it all look neat now I mean veggies is sort of the same story like if we draw for example this piece here into the veggies that's all possible it looks good it's behind it however if we were to draw this up here you can see that the cliff is cutting off the head of the vegetation because the water cliff is lower than the vegetation note so what we got to do is we've got a pretty much well yeah just add another water to town map we can actually not copy because it's already towels in here so I would not suggest your copy or duplicate that note and just add a new one we also load the atashi example and this can be called the rename the water cliffs and I usually call these the grass sites or the ground sites there's a common thing that I do and then for the other one I'll call these the veggies and these are going to be the veggies in the front and these will be renamed the veggies behind and of course it's only behind in the case that you're drawing them specifically in the next two cliffs isn't always behind for example these veggies right here they're not behind up in front of anything but they are there so where these veggies in front we can now draw in the veggies in front we can draw this sort of art up here make that look nice and then when we are on this side we can take the veggies behind and make sure that these water plans are hidden behind the cliffs as we would want them to be looking so with that our pond comes together in the front side let's put these in there as well so now we've got a little bit of a pond that we can we can sort of have fun with we can also extend this much further or you can maybe this a good idea for this tutorial when you're following this you can always go back into the tile sheet and maybe also make use of these cliffs here you can see there's a water on it up on the bottom there's a clip on the side and there you can add a little bit of a sort of walkway over the water can add a boat to it as well you can do a lot of things I suggest you you just experiment a little bit with the styles that actually has a lot of options you can add fences you can also connect those together tents campfires if you're working on tile set learning how to work with Towson specifically a towel sheet or also if all the towels and address tiles definitely take this towel set and use it to your to your best capabilities to make something that looks really amazing for the finish of this tutorial let's go back to the towel sheet and what I actually want to do is I want to put a character in here because I want to demonstrate what we're gonna be doing in the next episode we can take scene you're gonna take the player scene I'm gonna put the player in here and I think if I'm not mistaken I think we should be able to play that yeah we gotta save it I'm not going to save it in resources but in scenes gonna save it there and I believe we should be able to walk around yeah we don't have animation yet so what we're gonna be doing in the next episode is we're gonna be taking this character and right now I can just walk into an over the water it's like it's like a little Jesus that can walk on water or most of not Jesus I'm not sure what we're gonna be doing in the next episode is we're going to be adding coalition shapes using that Talmud editor to this to make sure that we are not walking into this water and that we actually are feeling like okay we we can't walk further here and we're just being blocked in our in our path that's what we're going to be doing in the next episode I'll see you then that's it for today guys hope you liked it if you did smash that like button hit subscribe don't forget that little bell I can to make sure you don't miss out on the next video like I said we'll be working on collision shapes in the next video I hope to see you then and until then keep on going keep on gaming see you later guys

Channel: Game Development Center

Views: 18,226

Keywords: Godot Tutorial, Godot tilemap, Godot auto tiles, Godot atlas tiles, Godot tilesheet, Godot tilemap editor, Godot tileset, Godot map, Godot Isometric, Godot create maps, Godot auto tiles tutorial, Godot atlas tiles tutorial, Godot tilesheet tutorial, Godot tilemap editor tutorial, Tutorial Godot, Tutorial Godot 2d, Godot beginner tutorial, Godot engine, Godot game engine, Godot 3.1, Godot 3.2, Godot 3.2 tutorial, Godot 2d, GDC, Godot, Beginner, Tutorial, Game development

Id: 1mFozZQ_Sas

Length: 21min 31sec (1291 seconds)

Published: Fri Mar 20 2020

Reddit Comments

[u/Stefan_GameDev]

To continue the TileMap series! In this tutorial, you will learn how to set up Auto Tiles, Atlas Tiles, and we import a TileSheet into Godot :)

[u/asheraryam]

Great tutorial! I'm always amazed by how much tweaking options there are for the tilemaps :b

[u/golddotasksquestions]

Thanks!

I thought I'd mention priority (the thing responsible for picking a random tile) unfortunately is broken right now. You can clearly see it when you paint just a line of Tiles, as well as at the outmost edge of a larger area of painted Tiles (They are all the same tile)

Issue in depth explanation this here: https://github.com/godotengine/godot/issues/36972

You can use Autotiles for the cliffs as well, you don't have to set them by hand. Variations are done with priority (current limitations see issue above)

The sorting of the plants on top or behind the cliff is what you would usually do with Ysort.

The covering up job you do with laying grass tiles on top of the cliffs is a great quick and dirty solution, but you maybe should have mentioned that this is due the the texture showing rendered backfaces. The proper way to fix this is to erase those backfaces from the texture and be done with it once and for all. You don't need the original 3D files for that, an eraser in any 2D graphic editor would do just fine.

[u/ZirGrizzlyAdams]

Hey sorry if you said this in the video but I’m at work and couldn’t turn the volume way up, but where did you get this tile set from? And if you made it I would like to ask you some further questions in a dm. Thanks! Your tutorials are great!