Tiled is an awesome map editor and I use it often in my tutorial series on GameFromScratch.com. I decided since I use it so often in tutorials that I should just go ahead and do one master Tiled tutorial series and refer to it when dealing with a specific game engine. So, that’s what I’ve done.
Hey Serapth, I watched your first tutorial and really enjoyed it! You’re doing a good job on explaining the basics. I’ll definitely also watch the other two when I got some time.
I’d like to link to your tutorial from the “in progress” manual if you don’t mind. The manual at the moment does not contain anything yet about the basics, so I think it would be a very good addition.
If there’s anything else lacking a good demonstration then I think it’s the rather recent additions of image collection tilesets (0.10) plus the ability to place, rotate and resize images freely (0.12). These allow you to use Tiled for non-tile-based graphics, though granted there is still a lot to be improved about it (for example selection handling, snapping and options like “repeat texture”). I’ll leave it up to you to decide if you already want to cover it, but if you do please tell me then I’ll try to write down a short list of possibly noteworthy features in this area.
Many thanks for including Tiled in your tutorials in general and demonstrating how to use it effectively!
Link away! And thanks for creating such a great tool. How about I do another tutorial titled “Beyond Tiles” where I discuss the features that transcend the tile format. I was intending to cover image layers and polygons at some point, so this would make sense as a location. Can you think of other things I should cover?
Added another tutorial, this one on using Object Layer then integrating it into your games code, in this case using a Phaser example. For a direct video link, go here instead.
@serapth I’ve finally gotten around to adding a short introduction about Tiled to the manual, and this page now also links to your tutorial series.
While watching your latest tutorial, I was a little surprised when you said the interface was wonky and that you couldn’t size an object manually. Actually you can immediately size a rectangle object when placing it by click-and-drag (in down-right direction only for the moment). In addition, since you want to make it align to the grid, you probably want to hold Control to snap the position and size. Anyway, it’s another nice tutorial overall.
A “Beyond Tiles” tutorial sounds good. I don’t have further suggestions for tutorials at the moment. Just make sure to cover the available editing operations on tile objects, like resize, rotate and manually controlling their drawing order.
Awesome, thanks for the link! Would it be possible to put a link in the existing Wiki as well, at least in the interm until the manual is done?
I should have another tutorial up shortly covering non-tiled maps. Will also probably do one on Hex/Iso in the future as well. Dont really see much point in splitting that into two different tutorials.
The forum automatically flagged you as a spammer because you are a new user that posted links to the same domain in three posts. I’ve disagreed with the forum and added www.youtube.com to the white listed spam host domains.
Sure, you can add it yourself there. Though Tiled already links directly to the documentation site and I will do the same thing on the website. I think the main things I wanted to still port over are the automapping page and the shortcuts page.
I just watched your latest tutorial and I think it turned out quite good, but I think it was missing several important pieces of information:
The rendering order of objects can also be controlled manually for objects on the same layer, if you select “Manual” for the “Drawing Order” property of the object layer. The actions for this are then in the context menu, where you can also see the shortcuts.
You can zoom out the tileset view, which would make your three large images much easier to work with.
The Alt modifier has nothing to do with the resize handles. It forces a move for the currently selected items. You use this when you want or need to avoid hitting other overlapping objects, because if that happened you would start moving those instead.
The rotation handles appeared somehow by accident in your video and then you showed how to use them. Users should know that you can toggle between resize and rotate mode by clicking any of the selected objects.
You can select and manipulate multiple objects at the same time.
Gosh, I hope I’m not coming over too much as a nitpick! Overall I got a good impression of the tutorial, and I should keep in mind to clearly document all these things once I get to that.
The Isometric maps in Tiled tutorial is now live. Unless people have suggestions on anything else to cover, I think I might be done. The only other thing I can think of is hex maps and frankly there really isn’t a ton that people shouldn’t be able to figure out on their own.
Hey @serapth, thanks for going into isometric as well! I really liked how you explained the logic behind the map tile size and the tileset tile size.
There’s two things to point out though:
You spent a long time explaining the “Tile Render Order”, but unfortunately this setting actually does nothing for isometric maps. Even if it did, it would not work the way you described. The setting is currently only effective for orthogonal maps, where sometimes people do use different rendering orders (see this issue on GitHub). In contrast, I’ve so far never seen an isometric game that would require changing the rendering order (you’d have to be looking at the map from the bottom or something). An isometric map is rendered left-to-right top-to-bottom, but not in the directions you painted. Instead, the rows are visually horizontal (so in terms of map coordinates, they are diagonals).
In your example you stacked one layer on top of another. In this scenario, it would have been very nice to demonstrate the “layer offset” feature added in Tiled 0.14. See the short video I had uploaded as part of the release notes there. The idea is that this makes matching wall tiles stacked on top of each other easier to work with logically, since their locations are not shifted for the appearance of depth. And to make editing less confusing the “highlight current layer” (H) feature can be used.
Ah crap, you know the worst part… I based the render order logic on this post in my research and never once did it dawn on my dim brain that the actual map shown in that post was orthographic. Ooops.
I will fix that with an annotation, and I will mention layer offset with a link in the comments and in an annotation.
One result of the isometric map tutorial was a ton of requests for where to get isometric tilesets. Sadly there aren’t a ton of them out there. So instead I started looking at the process in Blender and put together this tutorial as a result. It’s actually remarkably easy to create tilemaps in Blender as you will see.
I followed up the isometric tutorial with one on using Blender to create orthographic tiles instead. Nice thing about this approach is it should make autotile friendly tiles exceptionally easy to produce.