Triskell Interactive » Building a rectangular isometric world

Building a rectangular isometric world

14 May 2018
by Sinsem

Hello everyone! Today we’re going to leave the world of pretty graphics and enter the one of maths beneath it.

Isometric 2D is a weird thing. It’s 2D pretending to be 3D, but it is still very much 2D. Also no one really uses it nowadays except strange people like us.
There is no standard way to do isometric 2D (as we know) so every time we encounter a problem, we kind of have to tinker with code and in this specific case we had to think of a new way to organize our tiles.

When we started working on Lethis – Path of Progress II, we wanted to have maps that were of rectangular shape instead of the diamond shaped maps in the first game.
Looking back on the city building series, we wanted to go from there in Caesar III to there in Pharaoh. See all that scary empty black space? It’s over now.

Now, that’s a bit of a problem because of how we organize the tiles on the map. See, usually each tile is the cell of a table, and to simplify the process for all you non-programmers out there, we do something like this.

(That’s a big oversimplification, but you get the idea)
But we don’t want a diamond shape. We want a rectangular shape and this particular method doesn’t cut it.
It took a little bit of time to find the right trick eventually, the idea was to offset every other line by half a tile like this.

Once we have that, we need to have a simple way to find the neighbors of each tile since most of our gameplay revolves around that.
On a diamond shaped map it’s pretty easy. A tile will have up to 8 neighbors and getting to them is pretty straightforward. You just add or subtract 1 to the X and/or Y values.

Except this doesn’t work at all with our new method. Not only the values are different because of how we set up our table but we also have two possibilities: when Y is even, and when Y is odd for any tile[x,y].

By using cardinal direction, we get something like this:

Direction if Y is even if Y is odd
North 0 ; -2 0 ; -2
North East 0 ; -1 +1 ; -1
East +1 ; 0 +1 ; 0
South East 0 ; +1 +1 ; +1
South 0 ; +2 0 ; +2
South West -1 ;  +1 0 ; +1
West -1 ; 0 -1 ; 0
North West -1 ; -1 0 ; -1

And that’s it, with nothing more than basic maths we have our rectangular map and we’re able to access each tile’s neighbors. We have everything we need to start making a game!
Even if it doesn’t look like much in the editor yet…

Thank you for reading! Now is the time to tell me what I did wrong and how there is a way simpler method to achieve these weird rectangular maps. On a more serious note, if you have questions about other isometric stuff, I’ll might be able to answer them in a future devblog post. For now, I’ll just go back to C#.



  • Momo on May 16, 2018 at 3:03 pm Reply

    Un des plus grands MMORPG français, dofus, est un jeu exclusivement en 3D Isométrique ^^ (et le travail graphique des map/bâtiments/animations pourrait inspirer l’école des beaux arts, pourtant il tourne encore en flash)
    Ne vous en faîtes pas, tant que le jeu est beau, agréable et a un gameplay rafraîchissant et peu répétitif, il trouvera son public !

    (et j’attends beaucoup de ce nouvel opus, étant dans les 2 dernières missions du 1 ! :D)

  • Gan on May 14, 2018 at 10:31 pm Reply

    “Also no one really uses it nowadays except strange people like us.” -> Well I’m as strange as you then.

    I was thinking about making rectangular maps for Stormland too and thought of the same solution, so I’d say it’s great 🙂

Leave a Comment:

* - required fields

Triskell Interactive © 2024