Isometric Grid Generator based on HTML5 canvas

Sunday, April 10, 2011 Posted by Ruslan Matveev

The other day, I was busy with jGen Map Editor, web - based isometric map editor for my own JavaScript game engine, called jGen. I had to draw an adsjustable (so the user can change it's width and height) isometric grid in web - browser. My first idea was to find some different size isometric background images (most commonly used format is 64x32) and make some UI element to switch between them. But the problem is that when you're looking for something like this in the Google Image Search, it seems that there are many people who has quite different opinions on what isometric background should look like. So at the end I had to create my own drawing mechanism.

Following demo (works only in Safari, Google Chrome, Opera and Firefox) called Isometric Grid Generator, allows you to generate isometric grid background using two simple sliders (controls cell width and height) and then download it as png image (done using data:uri protocol, so might not work everywhere). You can also check the source code yourself and see how it's done.


Post a Comment