Today I would like to show you how to make a very basic isometric game map. It’s not really optimized and there are still plenty of things to do. But well, it’s a good start I think.

1. Introduction

First… I will assume you’re using jQuery, because I do and I used it to write the isometric map. After this article you will have a fully working jQuery plugin that can create a isometric map out of a array and some other options. The styling is completly done by a small stylesheet and spritesheet. You can easily enhance it and also make use of the very basic objects that can be added.

Also the array that you give to the plugin doesn’t need to start with “array[0][0]” so you can easily load content with ajax from the current location. This might be useful because you could have a array beginning with 2545 as y value or something like this.

This image displays how coordinates are arranged on the game map. on the left corner there is the lowest value, in our case there is 0,0. The x-value gets enhanced to the bottom right and the y-values enhance to the top right.

6. Final Words

Thanks for your time. I hope you like it, even that it is very simple and basic. But it should give you a good start for your own isometric map. Especially objects and tiles / objects selection should be taken care of. This can be done with a mouseover check to see if the mouse is above a transparent pixel or not. As JavaScript doesn’t have functionality to do this itself, you could use canvas to generate some kind of transparency-arrays.