Algorithm to render isometric maps

Matt E.
7 min readFeb 18, 2022

I’m currently developing a small game as a learning project.

One of my best multiplayer gaming experiences when I was younger was Dofus (I know, I know 😅).

So when I had to choose a design style for my game, I chose them as an inspiration and decided to go with an isometric tiled world.

In RPG & simulation games, isometric worlds with a tiled system are a very simple and common approach. There are two main ways to implement it. The diamond approach which looks like the picture on the left, and the ZigZag approach which looks like the right one.

Diamond vs ZigZag

I wanted to play a little bit with both before choosing one. So I implemented them and I decided to share that with you. Let’s see how we can implement both with only a few lines of code.

For my prototype, I used Kenney’s Isometric Prototype Tiles.

Diamond vs ZigZag

Both methods have their pros and cons that need to be considered before choosing one over the other.

Basically, the Diamond method is easier to implement. Whether it’s for rendering or pathfinding, the code is pretty straightforward. I also find the mind mapping between the map as an array and the final rendering to be pretty logical.

The cons of this approach is that it will require more useless data to fill the entire screen.

Diamond method

The ZigZag methods will fit the screen better but will require a little bit more work, especially for pathfinding implementations.

Depending on the tiles you’re using, the mapping between the array and the rendering can require a little more thought or be simpler than the diamond one. I guess it depends how your brain works 😅 For me, I think it gives a better result but I need to put more thought into my map definition.

ZigZag method

The basics

--

--

Matt E.

Software engineer at Achiev & Jounco. Passionate about programming and entrepreneurship