Tutorial 3.3: Tiled map editor - Multiple layers

[DP News-Robot]

You expect me to explain how it works, and how it can help you? Well I don’t know! Allow me to play with the editor for some minutes first please…


Right. That wasn’t too hard. So Tiled allows to make multiple layers:
· Tile layer - like the one we just made
· Object layer - put barrels, furniture, rocks, trees, et cetera.
· Image layer - Put a single back (or foreground, like clouds rolling over) image


Hey! Seems the hybrid I was talking about earlier on, is still an option! You could draw a complex map(floor), and put walls / solid objects on top. But, I actually wanted to talk more about mixing multiple tile layers.


The last 3 problems in the previous article, were mainly about mixing in shadows, thinner walls, curves, and transitions. The main problem is the almost endless variation. Shadows on grass. Shadows on sand. Shadows on pavement, on snow, on lava, on pig shit, and so on. But what if we just made second “shadow” layer?

Here I made 6 different shadow tiles (forgot 1 case in the picture above, the inner corner). Ignore the green background, that’s just for testing. The thing is, it is half transparent. So when drawing this on a second layer that uses (opacity or multiply) blending with the layer beneath, the shadow will work on any underground. So that’s a pretty deal, only needing 6 shade images.

It doesn’t make Unreal graphics, but the shadow helps determining what is a wall and what’s not. I mean, those brown blocks could be chocolate pavement as well, right?


The same trick with transparency can also be used for other surfaces. The curvy path for instance. Or a flowerbed. Or “decals” in general. Compare decals to stickers. But instead of “Anarchy!”, it would be a crack, manhole cover, scattered junk, road signs, and so on. Anything to spice up your map, giving it more “random” details. And if you can paste cracks and turds on your grass, you can paste (thinner or non-straight) walls as well. Check this out:

Various brush tiles to make a “thin wall” – including their own shadows. Thanks to the use of transparency, it will blend with both grass and pavement in this case, so that saves a bunch of images. And as you can see, this allows more arbitrary shapes as well.


But there is an issue with this green fence. Assuming this bush can block enemies (while throwing them around the room), it should act as a solid collision object. But unlike the big bad brown block we made early on, this bush doesn’t block the entire cell. Only the middle lines. And thinking about billiards again, the diagonal wall should bounce off objects differently due its shape. Well, how to achieve that?

I was positively surprised to learn that Tiled also allows to make a collision shape for each tile. So you are not restricted to simplistic square shaped blockers. Also glad that I gave the LibGDX map component a try. Otherwise we should have been making editors and more advanced features like this, all ourselves. We wanted some quick results, remember?


Didn’t learn about all the Tiled features, just scratching the surface here. But a few more cool things to mention are animated tiles. So you can make water waves, a campfire, boiling lava, smoke, and even ambient effects like smoke or fog. With some creativity, you can get pretty far. Even with a good old "simplistic" 2D engine.


Weiterlesen...