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.

--

--

Matt E.

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