Tiled Map Editor Tutorial Part One: The Basics

hi this is Mike again from scratch and as you can guess from what's up on screen today we're going to be covering tile titled is a 2d open-source game editor it's capable of doing both orthographic in isometric game editing it's obviously tiled based thus the name probably the de-facto editor out there the ultimate output of a tiled editing is a TMX file and almost every single 2d game engine that exists support loading TMX files to a certain degree so that's actually why I'm covering and today I've covered it a few times in the past this part of the individual series and frankly that's pretty stupid use of my time so might as well do one small series covering tiled itself and then just refer to it in future tutorials so working on an SF ml tutorial right now that's going to load table maps and it's about to go through and create yet another tile tutorial and that just seemed kind of done so what I'm going to do right now is a bit of a small series on using tiled itself completely free just go ahead and download it I just put this up over a couple parts today we're going to cover the basics of tiled which for many of us is actually going to be enough so we're going to look at making a 2d orthographic map from tiles today and then in the future we're going to cover a couple few other topics such as terrain editing which allows you to really quickly put down a train for your game and auto tiling which sort of works the same way but unless you have set a bunch of rules it's more advanced but let's just set rules for how your world is composed it automatically does substitutions for you don't worry we'll get to that one when we see it and then finally we will also cover isometric tiles isometric is from a bit of a skewed angle if you're from the past games like Ultima 7 Crusader no more secure a seat or no regret baldur's gate if you can tell what kind of games I like it might be giving away in this hint those are all isometric titles a very common format more recently been used in wasteland to divine divinity etc although some of those might actually be 3d pretending to be isometric but regardless we will cover that eventually so that's what we're going to do we're going jumping for all the various aspects of tiled hopefully you find this useful now to start right off you're gonna have to go ahead and download tiled it's easy enough just come over here and click here tab is available for pretty much Linux Mac and PC so you're pretty much covered here regardless to which version you want I'm using Windows version here just because that's what I've got installed now here is tiled up and running doesn't look like much but it is a very impressive program and when you're basically doing is you're creating your map out of a series of tiles that's the name itami thought of as just a segment of pixels so 16 by 16 32 by 32 64 by 64 pixels that you then paste and draw together let me just show you an example ahead will create a map so here's where it comes in we got um orthogonal or isometric or hexagonal Maps now we'll cover isometric later we're gonna go with Augen orthogonal basically means straight on it's not it's not skewed the perspective is a straight side view so let's say sonic the hedghog would be considered an orthogonal game so would super meatboy or zelda so any of those types of titles those are orthogonal projection and what you do is you you should set your initial size you can change this after the fact when you set the size of your map 50 by 50 sounds reasonable to me and then you set the size of your tile tile is going to be term and generally by your title sheet a tile sheet is a source of graphics it's where you draw your tiles from 32 by 32 is a very common amount so we'll go over that and now we have a map right here but we don't have any tiles to work with yet we also got a set of layers over here but now we need to load in a couple piles to go with so down here you'll see you've got the strains and tile sets tab just which one for the tile sets and click this button to create a new one and really a tile set is generally in either one image or multiple images so we're just going to use a simple one a single image make this simple go ahead and browse and select it got one in my downloads this is from the there was a pack just recently as part of the Humble Bundle tiles alright so here's a bunch of different tile maps we can use you can see there's we'll come back to a couple tees later on we'll go with a basic one for now this is your underlying landscapes so we'll just use this guy then you have to define it if there's a transparent color in the tile we'll turn that off for now because these tiles are going to be a hundred cent opaque so there is no transparent color but if you have a transparent color like you have it is not a ping image within coated transparencies and you've used a color key such as like fuchsia or something as the coat it's going to be substituted oh you set that there otherwise you tell it how big each tile is and if there's any spacing or margins between them in this case there isn't so I'm just gonna click okay so it's 32 by 32 tiles oh crap I did that wrong it did have spacing setup let me try that one more time here which one I loaded it was this one I don't know why am i spacing a set to one I don't actually want spacing so I'll go with that I can name it whatever you want over the landscapes so and there you see it's created a grid of the tiles that were in that image and these are now basically what the brushes that we paint our canvas with and it's very common so over here you just bring in the tile you want to draw this we're going to start with a basic grass like so you can just left-click paint like so and it will draw it on the screen even more quick for your base layer you can use this flood fill and just click and fill spaces rapidly so there is our map started out completely build with grass and if we scroll scroll wheel left and right I'll hold it down or your left and right as you see it's just grassy now you'll notice when you notice because you can't tell that I'm also using the arrow keys at the moment to pan around so you can zoom around your map using your mouse up and down with the scroll wheel here left and right or using your arrow keys so that was really kind of it you just pick the kind of image you want to draw with Oh sort of watch the one fill you pick the stamp to draw a single one or you do flood-fill to draw multiple and then you just sort of paste it in now what we're actually doing is we're pasting on top of our layer here so we're superimposing over what we've already got but as you can see we can quickly create variances in our you know just grassy land here by just drawing over over top of the layer now what you saw here was a little time-consuming I grabbed each one and drew it accordingly but you can also grab one and hold down your mouse button and multi select so I've got all four li selected so now I can actually paint a bunch of tiles at the same time and once again here I'll show it with this stone here and you can paint multiple at once so very handy when you've got you know a slightly more complex shape now if you want to you can then come back any race now you'll notice something here is I raised both houses because when I'm using these tiles in this setup I'm actually overwriting the underlying tiles and this is an important thing to get is because tiled is a layer based system so if you want to drop a tile on top of another tile you actually have to create a multiple layer own or another layer to work on and there's a bunch of different layers to work with we'll look at those in a second so let me just fill in that blank first taste alright so we got it back so now let me show you drawing a layer on top and for this we're going to actually create a new tile sheet we shall double the trees and let's bring in a tree graphics like so okay so now we have another set of Tojo those a new tab here at the top so I click over here to grow trees now and here is a tree so it's got you can see it's got shadowing in it to have transparencies and all that that we need so we can just grab this guy right here and now if we pasted it here you're going to see something unfortunate so I pasted that and now you see is the grass in the background it's not being shown it's because lives are said earlier they're all on the same tile layer right here and that's not what you want you want to actually layer things on top so you do get that transparency so let's just go ahead and undo that work which by the way there is undo control-z just undid what we just did and now what we need to do is create a new layer so click here and we can add one of three kinds of layers an image layer is sort of like one big graphic that composable layer if you're not using tiles for that particular area there's it's not composed of tiles for example you may have a one big solid image and your very very bottom layer that's your clouds in the background in that case you could use an image layer with a single image that is the entire layer tile layer is what we were dealing with right now that an object layer is entities in your game so if you've got play tables like say coins or power-ups or starting points or physics triggers etc things that are going to interact with your game engine they go in the object layer we'll cover that in a future tutorial when I show sort of like integration back into the game engine itself so we'll come back to that one so ignore it for now but what we want to deal with now is a tiled layer so just create another tile layer and then we'll just call this top layer you can create multiple layers so now that we're at it let's go back in here and don't click that guy and we'll kill him bottom they're like so now what you could also have done here is you could create one more layer in the middle an object later called middle layer and this is where you say put your player object etc so that then it will be shown in front of the bottom but below the top that makes sense so now we got these two layers let me go ahead now so we've got the top layer is active you can tell by it being drawn in blue we just come back in here we'll grab our tree again so we want this tree and now we'll paste it over the rope and you see now you're getting depth and there's where layers come in so now the tree gets drawn in from the background and it's the order here that's important so if you want to reorder you can use these up and down arrows but you'll see now the background cuz there's no transparency so 107 opaque layer is writing over top of our tree so let's move our tree back to the front and you can see the end result so if we had one more object layer here so we'll call this even more top layer which is an incredibly stupid name and then we put whatever in there so let's put a piece of grass you'll now see that that grass is drawn in from that tree but the tree is still drawn in front of the tiled background so that's an important thing to understand if I move this down one see it's gone and this would have been more it's not gone it's just being entirely obscured by the tree itself now what I could have easily done is I could have drawn it here instead this illustrates it a little bit better so top-level layer it's being shown now look it's still shown over top of the bottom layer but now this is the this tree here the topmost layer and it's obscuring it and now let's move the even more to the top to the top again and let's just get rid of see this trashcan icon right here you can use that to kill out a layer um so really that was the guts of creating them out that's how simple it is you can create a 2d map in tile in minutes obviously this isn't the previous tiled you've seen in to be honest or a lot of people that's all you need if you're only doing a kind of simple levels you're not doing a bunch of them you don't really need to get into trains you don't need to get into the auto tiled functionality there are a few other things you may want to get into I'll give you a small preview here but we'll get back to it later there are concepts such as animation which is iffy I'll actually cover animation today but animation support was added somewhat recently so a lot of game engines don't technically support that functionality yet and there's also collisions and collisions come in very handy when you start integrating tiled maps into physics engine such as box 2d and using the collision editor will bring this up we'll probably talk we'll talk about this a little bit later on with your tile slept it's like whatever selected here is what shows up in the collision editor over here all right so I've got this piece of grass for this tile selected and you see over here I can now define the collisions for it I can zoom this guy in a bits make it a little bit easier to work with and you can set basically collision polygons for them that will be used in your mouth now when I integrate back into a game engine in the later tutorial you'll see how this all works together but this is actually the process of creating your bounding volumes so you can create a rectangle and ellipse or polygon or polyline we'll go ahead and create a polygon you just come in and basically define the areas that are considered occlusion now granted this is grass you could probably actually have no pollution but there you go and then right-click and then done so now you have this polygon definition that goes along with your tile just say you know where you can go and where you can't and this example is actually pretty bad because you can just walk it but everything I've got here is so oh yeah I could have done it for the tree a little bit more involved but I would had to do the each tile within the tree but that is how you actually define the collision volumes for the shape now you can use this guy over here and then edit the points within your shape so I could move that vertex in and out and around but that is all that's involved in creating collision volumes or a handy little feature and again I'll cover it in a specific tutorial a little bit down when I show how to integrate that back into your game engine now the other thing you had here was animation editor and my current polish sheet is not set up well to show this so let me bring one in that does now this is a simple tile sheet I downloaded you're from open game art and let me just go ahead and say that the desk all right so you'll see there's there's multiple sprites comprised that compose an animation the nice thing is this is a 32 by 32 bit tile sheet as well so I'm going to come on back in here I'm going to import that tile G let's go ahead and grab it on my desktop right there okay so now we got a new set of tile sheets now I can show you how to go ahead and create animation which is kind of cool so let's say we've got this whirlpool we want to go ahead and turn the top layer we'll add a whirlpool right here not that impressive so far but it's selected now I'll go back over here and go to your animation editor this guy and double-click and now the next frame the next frame the next frame the next frame the next frame and done so what you see now is that set of tiles that sequence of images is now cycling through creating the illusion of animation and you can do this with many many tops let me just go ahead I'll show you with a different one so now you'll see with the animation additi it's got this little film strip and beside it show that it's an animated tile so this is how you can be easily implement your water your waterfalls at such as to here's a waterfall example and let's let's click there and it's a a double set of tiles but we'll just use the left hand side of this waterfall I'll show you with it so Waterfall selected so animation editor double click double click next sequence make sequence and there you have the animations required to create a waterfall so animated tiles are very very very simply created inside of the tiled editor however um as I said it's a fairly new feature and the number of game engines that directly support animated tiles is a bit iffy but the process is very simple so more or less if you draw each frame of animation in your tile you create them together in the editor here and you are done now the one thing you'll notice here so this is this number beside each and that's pretty much the the length of time in I believe that would be milliseconds to display that so you'll see the animation it's every tenth of a second it's cycling to the next animation so let's just show the effect of changing that to one second so one frame one second so let me just do them all to one second okay so so now much slower animation so tenth of a second per frame one second per frame but your process is again very very simple you'd select the tile you want over here places in your world go over to the tile editor select it there and pick all the frames of animation and set how long to display each one for and done you now have animated tiles in your scene so placing tiles moving things about very very very very simple defining physics shapes from each tile again very very very simple not really much else to cover here we've got your tiles here and all of these settings are pretty straightforward tiles here settings are pretty straightforward there's a bit more involved again you can set properties and other tile we'll cover that again a bit later on you've got your mini-map for quickly navigating around the world that you're creating you've got your layers description right here so you can move letters up and down create new ones you can copy an existing layer or delete it and you can also hide the visibility of layers so when you're editing them your Todd's top sheet creators right over here you can set some properties of your pal all your properties are over here in the property window but most part these are actually set unload for example and unfortunately this is my opinion a bit of a bug retired or a missing feature anyways you can't change the tile height after loaded so if you if you use a tile and you got the wrong file size on it you'll have to actually delete the tile sheet from here and then create a new one and when you're in the new dialog just set the sizes accordingly right here you can't change that after the fact it's grayed out which is kind of an annoyance but again the process is super super super simple um I think that's kind of all I want to cover for this initial one the next one again we're going to come back in I'm going to look at the Train which is a little preview that's what this little button here is and train allows you to do things much much quicker for putting down smart titles rapidly so having save roads with a transitional edge or something that you want to put your map that's where the train could come in very handy so that's what we're going to cover next up so this was the basics of tiled completely free open-source tile editor the export TMX file so it can be used in just about every game engine out there as you saw from today the process of actually creating your game is super super simple now we're going to get into slightly more advanced stuff in the next couple tutorials but as you can see the basics creating your map extremely simple and then when you're done here all you have to do is save as and then dump out your file or you can do a file and an export as and pick the specific subversion you want so there's a lot of these aren't really that relevant anymore but you can dump out to a CSV file Jason or Lua script files if the TMX format isn't supported on the other end so very very very easy process now one of the nice things to let me just go ahead and actually save this guy save this to my desktop so it's ok new as not it that is it this is our output it file and let me just go ahead and open this guy the text editor and you'll see something here a team mix mileage it's just XML so you can debug the process very very simply so that part is definitely definitely nice another thing you'll notice is the file pathing is all done relative so it does make things moving it to a different location easier in the future so that's it that's all we're going to cover for now I hope you enjoyed that stay tuned we're going to have the next part up very very shortly thanks very much bye

Channel: Gamefromscratch

Views: 233,346

Keywords: Tiled, 2D, Map, Mapping, Gamedev, Gamefromscratch, isometric, orthographic, orthogonal, game development, tutorial, Level Editor (Video Game Genre)

Id: ZwaomOYGuYo

Length: 21min 4sec (1264 seconds)

Published: Wed Oct 14 2015