Isometric Tiling (Super Mario RPG style)

Hello, I’ve been looking for material to help me understand generating isometric maps from isometric tiles. It seems there was a guide here, but the picture links have since failed :frowning:

Given a render of an isometric game’s scene, such as the one pictured in this wiki link:


What steps are required to get started? As a new comer, I would expect the need to specify the angles of the tiles I’m working with before I’m able to start drawing them correctly. When I do start randomly drawing content, it looks really odd to me with unexpected overlaps of tiles, making me think that the angles need to be configured correctly. I can see that the gridlines of the image don’t match up with the gridlines of the tile map.

Oh, here’s a screenshot of my current progress and what I’m seeing and all that (I compiled from source on OSX, great work maintaining a functional compile procedure btw!):


It seems images have disappeared from old posts, which is really unfortunate. Maybe I should contact Discourse support about this.

In Tiled, the angle of the isometric map is derived from the tile width and height. In your map, you have created a map with an equal tile width and height, from which a 45-degree angle is derived. In most isometric pixel-art games, the tile height is half that of the tile width. The map tile size is independent of the tile size you choose when setting up the tileset.

An additional problem I’m seeing in your screenshot, is that the tiles are not separated. At the moment, the tiles in a tileset need to be layed out like in this tileset, which you also find in the examples maps:

Tiled right now can’t cut isometric tiles out of a screenshot, though that would certainly be a nice feature to add.