Isometric in tiled , where to begin?

Hello all
i like to build small isometric map something like this done in inkspace:

Im beginner with tiled and searching for tutorials for isometric all i found is orthogonal tutorials
opening new view with Isometric(Staggered) , or Isometric gives me very wired tiled view :

why they are placed with constant high One behind the other ?
how do i setup tiled for Isometric work ?

i found out the “isometric_grass_and_water.tmx” and if i place the tiled i created it seams that it looks right :

so 2 questions

  1. what im doing wrong ? in my example i set the block image width and height
  2. also i noticed i cant place blocks one on each other , why ?


The grid looks like you set it up so that the image’s height becomes the height of the grid. However you have “3d-ish” isometric tiles, so you have to consider only the floor plane of the iso tile. In this mockup it’s the red lines that define your iso grid:

This also explains why you can’t place the blocks on top of each other, because the next grid coordinate is where the topmost part of the block ends (the block’s topmost edge).

To properly place 3d-ish tiles on top of one another you may also need to resort to using multiple tile layers as well as using the layer offset (in TIled 0.14). But first fix your grid and then we’ll see what else is left to do. :wink:

Thank you very much It worked !

before i go into collision detection and such … do i need to know something ? when working with isometric mode ?

1 Like

Well, since it is not clear from your image, I think you need to know that if you’re not using a negative “vertical offset” on your layers to make them appear stacked, it may look alright in the editor if the layer height offset equals your tile height, but it will not make sense logically. So if you want to make a game where the player can for example jump on these blocks, then you’ll want to make sure the tile placement makes sense in 3D space by using the vertical offset property.

Thanks bjorn for your answer ,
well as begginer im not sure i understand what you just wrote …
i do what that the controlled avatar could jump on some block and also clash on others .
how do i work with " layer height offset " or “vertical offset property” ?
is there any example or tutorial ?

There is no example or tutorial currently, the feature was just added in Tiled 0.14 and I still mean to get around to writing a manual once we get to Tiled 1.0. In the meantime, just play around with the “Vertical Offset” property that you’ll see in the Properties view after clicking a layer in the Layers view. If you put for example -32 in there, that means that the layer is 32 pixels higher (since positive Y-axis is downwards in Tiled) than layers with 0 offset.

Hey visiting this thread again , as i back to the subject of isometric tiled .
Still lack of tutorials about the subject .
do you know any tutorial about collision detection using isometric tiles ?

I think what you’ll want to do is to treat the “isometric” as only a graphical representation. Keep it away from your logic code and your collision code. Then, collision works the same way it does for orthogonal maps.