Creating Isometric Maps with Tiled and Kenney.nl Tiles

he's my carrot cake from scratch and if I was to go through my top 20 games of all time I wouldn't be surprised if half of them were isometrics about games such classic games such as Ultima 7 Baldur's Gate 1 Balder gates - ball - gates throne of Baal can you tell I like Baldur's Gate then we've got XCOM Diablo 1 and 2 so many great games were made in the isometric style and that's exactly what we were going to look at today we're going to look at using the great open source map tool called tiled and a set of open source tiles on from Kenny and L to basically illustrate how you can create an isometric map so let's look at the resources we are using and then we will step directly into it so first off we're using the tiled map editor it is available at map editor org I will throw that link down below it's a cross-platform open-source it's a really great project actually I've covered it a couple of times and I'll show you some more resources at the very end of this video and then on top of that we are using Kenny and Elle's isometric pack Ken ENL is available at Kenny with an e there the NL and then you basically just go to his assets isometric and we are using resources from here and here what I've done is basically it downloaded both of those packs and I've copied the files that I'm going to be using into different categories broken down by the type of tiles they are so you see we've got a folder here for carpets floors props and then walls pillars etc so inside is a whole bunch of tiles of about the same size and of course you're going to need the tiled map editor which I have already downloaded and you can see when you first run it you get this unexcited screen so what we're gonna do first is create the tile sets that is just a collection of tiles to use and then we'll go ahead and create a map so start off by creating a new tile set like so and we're gonna do one for one for each one of these things so we've got carpets floors props and then walls and such so we'll do carpets first all you do is that and we're gonna select based on a tile set on a collection of images instead of just a single collection a single image with a bunch of tiles in it we're gonna have a bunch of individuals we'll save this guy as and I will put this in the same folder as everything else which is temp map demo alright so we'll call this one carpets tsx you'll notice tile sets are in the tsx now that you've created that we're just gonna go ahead and go to tile set add tiles and we go into our tiles folder pick carpets select them all and then pick okay so there we've created our first tile set we can just go ahead and save that sucker up here so file save and now we're gonna want to do the same thing again so create file new tile set so that was carpets what else do we got floors so floors pick the floors oh I'm I'm doing that wrong so I've got to save it first so let's go back up a folder so here we'll save that as floors now we'll go with tiles add tiles go into the floors category select them all and click OK and we'll save that guy do it again file new tile set and this time we were doing props and call this guy props once again it's still a collection of images save as say if that has props guess what we're gonna do next yes we're gonna add the tiles from props like so and then finally floors walls and everything else and we'll call that one foundation so we'll save that create a new one new tile set foundations save as save that go here tiles add tiles and here all right so there we have all of our tile sets now done you can scroll through them here you can do control middle mouse button to zoom in and out but now we have our tiles that we can paint with it it is time to go ahead and create a map now the key is you have to match the resolution your tiles were made for and what we've got here is a two to one ratio which is very very common in tile sets that means the tiles are but basically they make up a diamond where is twice as wide as it is high and then you slot these all together to create your isometric map so let's go ahead create a new map new map and what we want to choose is orientation as isometric right there CSV file should be fine or you can do a compressed or uncompressed base64 binary encoding now the choice there ultimately comes down to the game engine you are using but you can also change these after the fact and then you've got a choice you can either do fixed map size of a set number of tiles or you can actually make it infinite and height in this case I'm just gonna do a really small map so sixteen by sixteen and then the key thing is setting your tile and what we want to do here is 256 and 128 now that is going to be determined by the graphics you used but that should be a good size and then we'll go ahead and save this map as isometric map all right so there you go so you see now we have this drawing grid in which to create our level if you go over here we've got templates I'm not sure what's going on there see our tiles are all available right here so let's just scroll that down a little bit okay where is it there it is all right so we've got floors carpets and so on so we got our carpet heroes they're all zoomed in for some reason foundational our props and what you're gonna want to do is basically start working on layers it's all about building on top of each other so the bottom most layer will be obscured by the layer above it and above it so let's go ahead and create our layers so we've got our first layer we will call that foundations and then on top of the foundations we will have our carpet so we'll create a new layer it's a tile layer and we'll call that carpets above that we have our tile layer of oops actually one want floors I'll show you how you can change the order in a second cuz floors obviously would be below the carpet so just drag that so that they're in the proper order so obviously this is the bottom most of your options and then finally we will do one last tile layer called props now another thing that's very common is to want to mark off trigger zones etc so we'll do that as well so I'll also go in here and go new object layer I'll show you how that works in a second and we'll just call that one triggers now you can put this below or above props it doesn't really matter in fact it doesn't matter at all where that one's positioned but I will show you how that works in a second so first off we have our foundation so we're gonna start with a foundation select that layer over here select your foundations props and what we're gonna do is we're gonna just start with a simple flood fill we're gonna fill the entire map with one kind of floor so go in here locate the Oaks actually no you know what I'm doing this in the wrong order we want foundations to be we got floors to be the bottom most so we'll start with our floor layer pick here and we'll pick our base floor tile so this guy looks pretty good we'll come up here to the flood fill and then boom our base map now has that tile as its source and you can start layer you could change them out so if you want to have a couple these like with cracked or peeling you can switch back over here to stamp mode away from that and now we can edit an individual tile and change it out so you notice we're getting slight differences in it you can also rotate tiles so you can have it at different orientations or directions so if we want to do one on that corner as well we could like so you can zoom in and out of the map easily enough like this go ahead and I'm actually fairly content we're not doing much here so let's do a couple of wood floors here just because this is not going to be the greatest looking map you ever saw but we are going to get at least the principles down so we've created our base layer so now let's add some foundation so these are things like your walls and pillars and columns and so on so what we're gonna do is we're gonna go ahead and do a just a standard wall so here's a wall right there as you can see it will layer towards the back of our map millimoles but I can pan and we can just start painting them and paint down the whole edge and there we go so now we have a walls on that end and then we could do one for the other direction so so this is gonna overwrite that one corner so we're gonna need a corner tile out of here and there is one here where did you go it's that I want the opposite there we go so we want that corner to paint that corner right there so there we've got the outlines of a level now we can do a couple of in fills so if we want we can do an inner arc inside of our house like this oops that was a unfortunate you can also click shift and do a line all at once like that and then kind of it's just more and more and more of this so if you want we get out couple of pillars throughout our house and now it's time to add a little bit of life OOP was accidentally deleted my floor they're not sure why let's put a little wood floor in underneath oh um I got to see you guys make sure you switch to the right layer though so squishing to the floor layer now I'm going to go on to the foundation layer but back to the foundation and let's put our pillar on top of that floor so you see how the layers build on top of each other that's the most important thing to really grasp here and then you can kind of keep going so if you want to add a couple of carpets to our world we can come in here to the carpets grab one that goes in the right direction and drag it across now let's actually do a shift click to create hold down shift and straight line that guy so we got we got our carpet in the world we can do another one that goes this way now I don't have a tile for handing between the two now you'll notice one thing I just did there as I painted a bunch that I don't want to have and you can get rid of them just go up here grab the eraser and then delete the tiles keep in mind it's all about the layer that you're currently working on and then finally we can get into some props so let's go ahead and create some props so we could add a couple barrels along this wall on that wall on that all these people drink a lot and add a couple of wardrobes along the walls like that and you just kind of keep going until you have your map as you like it very straightforward very simple for the most part now the final thing I'm gonna get into is the triggers and this is where you would probably put in a lot of your game related logic you can put in things and you can give them properties so for example I could have it let's say I want to have a door I'll put a door in there so let's go back to the foundations let's go over to foundations let's find us a door actually I think my doors are actually in props nope must be in foundations yeah there we go all right so I'm gonna put a door in right here so there we go oh it's offset I need one that's at the back or I need to do the door over here all right there we go so we got a door over here I'm gonna zoom in on this guy and what we could want is when the player gets to this range where you might want some code to trigger or some logic or hotspot to happen so what we can do is you can come in here and we can switch over to our triggers layer right here that member we created this as a object layer and when we switched over to that you'll notice our commands over here changed so now what we can do is to find polygons or fixed shapes and then we can just basically draw them on the map so come on oh wait we go I need to add a new one so right click new object layer okay one second I'm doing this wrong oh yeah I'm doing edit as opposed to insert so the inserts is triangle looking guy right here and now you can sort of define the shape that is gonna be your collision volume for when people get close to the door like so and you'll notice over here we've got properties for us we could say call this guy door approach trigger and we could actually go ahead and give it some custom properties if you want to come on down here hit the plus button and then you can access this stuff in your code so we can have it go to a file to a color to a pool to a string so we'll just do a string we'll say door one approached and that that value is file one dot level or whatever so you your data is available there you can attach data in the the tiled side of things and then you can handle it and or extract it in your code so you do now have this closure in volume there now the one last thing I should probably talk about that I didn't is with these tiles we can actually set up collision volumes on them so for example if in your game you did not want your character to be able to walk through pillars you could come back here to foundations where we this is the foundation tile map the tsx file and then we can do is click over here and we can hit the collision editor and then you can pick the tile that you want to deal with so for example this particular column or pillar and then we can either define a rectangle or a polygon to the same basic shaped stuff we had before and we can do a collision volume around that polygon so then in your game code you can know okay if the person hits this there will be a collision and it can't continue and you can do other things in tiled as well so for example I could create spline paths that define where a character can walk or where the a I should go and then there's all kinds of advanced functionality that I'm not even gonna get into things like automatic train generation you can have it so that each edge kind of they all work together so that you know if you've got water and it goes into sand it will create the transition for you there's Wang tiles for doing a random automatic level generation and much more so we're only really covering the surface of what tiled can do but I think in that that 14 minutes time you saw it just how much of your 3d game or your sort of your 2d game you can create and use retiled and the amazing thing about tiled is the level format is pretty much ubiquitous in almost every single 2-d game engine will support loading of tiled maps either through a plug-in or natively directly inside of that engine itself and if you're interested in learning more about actually integrating tiled within your game well I've got you covered there I've actually done a in depth tutorial series I will link this down below but we go through these are all videos on using tiled itself there's even another tutorial there on isometric Maps but then if you're interested in how the actual coding side of things work I show you this is an example from libgdx which is Java based but the code should be immediately understandable to just about anybody it's very very readable but this code will walk you through the process of first loading your map and then you'll see we get on to the second part we do some things a little bit more advanced like adding a player character in and then showing how that player character can be integrated with the world so you see that here we're drawing on top of the tiled layer and then in this particular case we show how you can actually set it so that your character sprite is interacting with the layers as it was supposed to be and then finally we get into actually showing you how to create an animated sprite and deal with it in your code so if you want to have animated water you can so this should be as you can see now it's animated frame-by-frame so if you're interested in seeing how to actually use tiled in code I have this example I also have one for typescript and phaser so they're both linked off of if you go back to this page itself both of those code examples are available right here and I do highly recommend if you have not tried tiled yet do check it out it is probably the best 2d map editor out there it's better than what is integrated into most game engines like for example if you've done tiles in Godot you'll find the process of create tiles in collision maps is a bit painful and you'll probably find that using tiled itself it's actually a bit quicker to work with let me know if you're interested in seeing tiles used with specific game edges if there's some specific tools or tutorial you'd like to see covered I love giving tiled as much exposure as I can because it is a great open source project and it has been the lifeblood of many a 2d games and as I mentioned very much to start this video this video I loved programs like or applications like Baldur's Gate and Ultima 7 and Diablo and those were like the key games to my life so the isometric format has very near and dear to my heart and it's cool to see that it's continuing a lot of times now it's full isometric it's just a 3d game with that camera set but if you're looking at creating true 2d isometric games tiled is your boy alright that's it for now hopefully you some guys found that interesting or useful and I will talk to you all later goodbye

Channel: Gamefromscratch

Views: 29,092

Keywords: Isometric, Tutorial, GameDev, Tiled, MapEditor, Kenney.nl, 2D, Graphics, Tile, Game Development, Open Source, Map

Id: pVBlwO4wM_w

Length: 16min 29sec (989 seconds)

Published: Sat Feb 16 2019