How to Make an Isometric Tilemap Godot Tutorial 3.2

hey guys and welcome to this tutorial on tile sets and tile maps in Godot let's get started on getting you that awesome map for your game in this tutorial I'll be making use of assets from Canada now there are free downloadable assets so you can get them too I specifically chosen for the isometric dungeon tiles and the isometric library tiles as they fit together very neatly you can easily find us by searching for isometric in the search bar when you click one of these and press the download button on the right side that will give you a zip folder that looks a little bit like this or exactly like this in case you're downloading the dungeon bullet in the folder isometric you'll find all the images that form the town set or the assets for the tile sets I've copied over all these assets all these images over to my project folder I've created a folder assets and then a folder dungeon set where you can see all the assets are present now that you know where to get these these images from these style sets from let's go over to goda to make it a real tile set resource which will then use to make a telma do you want to learn how to design and make games or maybe just want to learn more about goed up subscribe to this channel and don't forget to hit that little bell I can to make sure you don't miss out on anything also if you're curious about the game development projects that I do myself you can find me on my twitch stream I stream every Tuesday and Thursday it links the schedule description the details all in that description box below now let's continue now when you start go doubt or a specific project you have loaded your your images to you'll see the first you'll get a bar a progress bar that is going to import all those images into gota have a little bit of patience get a cup of coffee or it takes very long if you put a lot of towels out there and continue afterwards first we're gonna be making a new to date to DC and in this 2d scene we're gonna open our assets our dungeon set and I'm gonna take all these images I'm gonna drag them in here now that will create all these sprites as child's of note d now with no to deselected I'm gonna go to scene I'm gonna go to convert and convert to a towel cell that gives me this pop-up and I have to save it as a resource I'm gonna create a new folder I'm gonna call these resources and I'll call this dungeon tres4 resource I'll be saving now with that done we can now go to a new scene new TV see we can add a child we can add a town map you can create it and up here under the town set we can load that resource in now you'll see that I'll have all these images right here and with these images I can draw however you can see that the cells it's not first of all it's it's forward angled is not isometric and the cells don't match the size so I'm gonna mold here we can set the square to isometric that's making our thumb up or our map isometric and then under sound a cell we can set the size of each of these cells of the town map so we're gonna go for 256 by 128 size as that is the size that fits with a towel set that Kenny made however this can be different for different tile sets that you can find over the Internet or that you might be making yourself now with this you can see that we can create different towels and we can put different things together however the towel set is very big and there's a lot of different things in here and in the end what we would want is that even if we would have a little bit of a patch we would want to put a wall on there now that wall will be rank'd written over the dirt that you have laid down earlier in other words if you want to create something like an internal environment with walls and candles and maybe crates and barrels and cakes then you need to layer towel maps on top of each other now for that purpose we're going to be making a layer towel map and every different layer can have different assets as I like to have my assets split in for example a towel mat for floors a talent for walls a towel map for other stuffs like cats and barrels is also handy to have all those different towels separated into different towel set resources so what I'm gonna do in the background is I'm gonna revert this big towel set and I'm gonna split that big towel set in two three four maybe five different towel sets separately that I can look up or hook up to each of the Tama players that we'll be making and this is basically just reproducing the work we just did with making a towel set so I'm not gonna do that on camera you can do that perfectly yourself you just jack you just drag the right images into the node to D so here when we have all these points I said up adding adding all of them I'll be selecting the ones that I want to add from this list and then I'll make a resource out of that specific selection I'm doing a couple of times and then I'll be back with you with the end result that you can easily reproduce yourself okay there we are again as you can see we got the dungeon tile set that we made ourselves together and now I've created four more tile sets the floor tiles the library tiles which has like bookcases and stuff like that stuffs which is basically a lot of stuff ready maybe some chests some barrels stuff like that we can play with and the walls so I've got four tile sets now I won't be using this dungeon tile set anymore and that is the total package which is very hard to navigate due to the amount of stuff that is in there so we saved those four and you might be wondering what can I do with there's no 2d with all these images inside you can just throw it away you don't need it anymore we made a wreath for sources don't have to save that we can delete that so here I got that no two deed that we had earlier as well only I have emptied the couple's house that we had put down it's still nice symmetric retail got still got 256 by 128 now what I'm gonna do first isn't gonna copy this or duplicate actually by using ctrl D a couple of times it doesn't matter these are called fluor we can rename them later but this way whenever we start a new layer we don't have to reset isometric and reset the cell size that will be remembered in all these duplicates if we got too many we can always delete them later that's no problem so under the first one on the floor which is gonna be the real floor I'm gonna load up the town set from the resource and I'm gonna load the floor now this is gonna give me the floor pieces that I've selected I didn't include every single one for this tutorial so you may have a couple more so when we select one of these towels we can place them down you can also hold your mouse button and place a couple of them now if you'll hold your shift key before you press your mouse button you can actually make lines and that makes it really easy to make straight lines and that's especially easy once we start putting the walls in as it will make it very easy to make long sections of wall without basically doing a boo-boo so once you got this square here you might be wondering like oh I've got to fill up everything that's takes so long to draw this everything up oh there's actually a tool here it's called the bucket tool or bucket fill and manat be up here in your toolbar it might be here on the town map you have to see for yourself where yours is and when you press this big thing if you have closed that correctly by making the lines then you can see that I don't now I have to fill each and every one of these because I was too enthusiastic of demonstrating how handy it is to to paint one by one anyway so now we got a little bit more floor but it still looks very flat it looks unimaginative so we probably better put a couple of walls on here so for those walls are simply gonna be in renaming this two walls and these walls I'm gonna go to the tenth I'll set the resource I'm gonna be loading up our walls now that's gonna give me my walls that I selected for this tutorial and we can put down a couple of walls so again I'm gonna use shift two to make this a little bit easier so we can put a wall here we could put a cornerstone on the top there you have to look for this is the north this is the south side so we need to sell one this time as the north one will not be lining up exactly they'll be just behind this you can see if you ever want to remove a towel by the way if you are hovering over exactly why the towel is you can see that this square turns from orange to blue when you click that your right mouse button you remove the towel so with shift I'm gonna be making a little bit of a sort of little bit of a map nothing I'm not gonna make anything special nothing super fancy but as you can see now this doesn't line up because we need to use this wall in this case or maybe this wall yeah me to use this one and as you can see we're just making something something very easy nothing fancy that's not necessary and you know what you can you can probably figure it out for yourself we might want to put a door in here in here not that door we need this door so there's a door and there and maybe we put in some some some arches it's not the right horn I need to have this one so there that you can walk through that now you can see by this isometric art you can already sort of see that you're gonna get a sort of an illusion of 3d but it's not 3d everything is just flat it's just the illusion of 3d that a 2-d game in isometric style can can range now as you can see I've got the walls as the second one you can switch these layers but over in between like I would drag this the walls would now be drawn behind the force which is not what we want and this layering is very important because if next we're gonna put some some stuffs in there not trying to make up any fancy names in this tutorial and I'm gonna put my stuffs resource in there I'm gonna for example get some of these these cats that I can place down next to the side and maybe we'll put and a couple of you there and maybe we'll have some extra support and actually you know what for that support we can put it down here you see when I put it behind this wall it will draw it in front of the wall because this stuff's is below the walls in the order in no border if I would turn around these studs I'm going to be floor and wall you would see that it is now behind the wall but if I were to do that the tacks are now behind the wall as well which is not what we want so when you're layering in isometric it actually makes a lot of sense let me remove that too and let me take another one I'm gonna call this stuff's behind and we'll rename this to stuffs in front and we'll reposition this behind between floor and walls and we'll be adding that resource stuffs to it and now with that we can draw a couple of support beams right behind those walls there if we feel like it or if you want you could draw a couple of barrels like for example where a couple of barrels there you can see now the wall is properly covering the barrels creating that illusion of free D now with that let's have a look at how we can make this wool or a sorry this floor a little bit less you know what copied you can clearly see there just copy at the same time well let's fix that next so for the floor as you probably saw I got a lot of a lot of different options here so what I usually want to do is like to say okay that's let's get a couple of dirt patches in here let's say the floor is broken we're gonna make some sort of an old library you know forgotten in time typical little bit Diablo 2 stylish sort of thing so we'll just be usually what I do is I first make the big pieces I lay those out and you know let's go there and then we can find a piece which fits on there and we're just gonna make it like this Flores is broken a little bit we can take four example and there's a nice hatch of broken stones here maybe we can copy that over and there's maybe a couple of loose towels as well on this map there you go we don't want to copy that over too much into different areas so we're gonna change that make that open change it a little bit there maybe there's a few holes here I believe we have one there and let's turn it around maybe there's a couple of broken ones over there you know you can just you just turn this around and make it look however you want it to look now maybe take this one and let's take this one here you know now it feels like okay you got a little bit of a patch here that is that sort of broken tiles are broken out you can see by simply replacing on the floor map you can replace with Kenny Seth especially the different sort of floor styles that you want and you can make something that looks pretty reasonably good in a very short amount of time so with that let's have a look at more advanced assets and how you can add more assets especially in the middle room so for this library let's take the next layer we need rename it to the library and we'll be adding our tile set resource of library to it now there's library got a couple of things like mostly it got bookcases but these bookcases they got a shadow and because of that they don't look that great next to the wall as the shell just looks very weird on top of this so I prefer to use this set in in a case like this in the middle of the room where it looks really nice now what will be noise if we could turn this around and maybe put these these bookcases back-to-back but as you can see that is not really possible because this bookcases don't take a full floor tile and because of that it's impossible to put them next to each other in the current cells settings we can change that we could say that well this cell you're going to be a hundred by 64 so we divide it by two now my closets are suddenly gone because they jumped somewhere else as they are well they are somewhere else now because we changed that cell size but we can just remove them there and then she already saw they were standing back-to-back there now with a half cell size we cannot put these back to back to watch each other we could do exactly the same for example this the Swart case we can now put these back to back and that to sort cases next to each other now you could continue this on and on and on and you will make a beautiful map so maybe let's go over a moment at the end of this video what is the positives and the negatives of using this this layered system and what other possibilities you have may be possibilities first if you were to use and as possible with this starts behind the wall for example another way to get these items in front of the wall or behind the wall or get the wall behind you know what let's start it again if we change these steps and these stuffs are in front of the wall and you want to have them behind the wall you can also change the z-index here on the B set index of the node to D you could also change this you could say it's okay you're gonna be plus one as you can see that immediately pops our our stuffs behind and from the wall however by changing the entire walls index section we have now broken the other side of the room where stuffs in front are still being drawn behind even though they are in a different loading order now even of course then say ok this stuff's in front we can just gonna increase that index as well to one and yes you can but now you suddenly got two layers that hasn't in that have an index and now for example in the library you say okay I want to want to draw another thing there now your CAC's are gonna be drawn on top of the library so you'd have to change the setting next to the library long story short I advise you to not touch the zet index in your tile maps it is totally possible with the lay system by just layering and positioning these layers and loading them in the right order to get the map that you want it may be in a very small amount of circumstances you need to set index but as soon as you start using that Z index on the regular you're just creating a huge spaghetti Max mix because before you know it you're changing like oh now I need to fix this I need to change it index two and then the next item breaks and like all I need is that in this three and four and five and six before you know it you're at that index 16 and you want to add another layer and you have no idea what that index you need to give it and probably you'll be breaking something somewhere on your map so my advice is to please use the layering system simply reposition these as you see fit so stuffs behind is behind doesn't need a z-index the walls simply set index one stops in front in the index 1 and immediately you can see that our library our book closet is fixed again simply because we make use of layering and no loading order so take that away as a lesson now what's the pros and what's the cons of this system well the pros are its it's very easy it's very quick you can make very easy use you have like a quick snapping stuff it's just fast the downside when you want to implement this system in an action-rpg kind of style game you're gonna run into problems reason being is that once you've got projectiles arrows ice spheres fireballs flying over this map and who knows maybe you're flying off liable exactly in-between here it would have to be drawn the fireball in front of the closest of the library but behind maybe if this were to be a total bookcase behind the bookcase there will be there let's let's just quickly put a bookcase there I would have to imagine your your gut that something like this and you want to fire a fireball or you wanted to draw it in front of these bookcases but behind this bookcase and that'sthat's quite hard to do because these are not assets these are part of a towel set and towel set is the asset so what you want to do if you want to have projectiles flying around on my map you would have all these sprites as their own asset with their own coalition layers and you'll be able to make use of why sorting that's another method in goda to make sure everything draws in the right order and that's probably what I'll be discussing in another tutorial with an example of how you can implement that in in the case use case scenario for an action RPG that was 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 tutorial in the next tutorial well I still got a couple of ideas also said in the last tutorial on the enemy logic series we might be returning back to the enemy logic series for melee combat of our enemies or we might be continuing with this y sorting if you're curious let me know and down a comment section that below what you want to see next and I'll be here next Monday with the next video see them

Channel: Game Development Center

Views: 57,202

Keywords: Godot Tutorial, Godot isometric, Godot Tilemap Tutorial, Godot Tileset Tutorial, Tilemap, Tileset, Isometric, How to make a tilemap, How to make a tileset, import tiles, tilesheet, map, kenney, layer tilemaps, How to make a map, how to make a level, map design, 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: SteMRdOYrds

Length: 20min 53sec (1253 seconds)

Published: Mon Mar 09 2020

Reddit Comments

[u/Stefan_GameDev]

[Godot Tutorial] Another tutorial from The Game Development Center. This one on Isometric TileSets and Maps. How to make them, how to use them, how to layer them, and tips :)

Making use of Kenney.nl asset packs (free download, not affiliated, they are simply awesome)