I’m debating with myself whether to make my game engine pseudo-3D, using transforms and masks and whatnot to generate and texture isometric tiles.
On one hand there’s something to be said for tile-based systems to have every graphic meticulously crafted by a master designer, but on the other hand, I’m not that designer. It’d be so much easier to slap a grass texture down and transform it to match a programmatic grid. Maybe adjust the brightness to simulate lighting, then cache that sucker to achieve decent performance and move on to the next tile.
I think it’s feasible. It would allow for much easier creation of game elements such as hills and height, walls, roads, and so many more cool things. It’s also a total departure from my original idea of a traditional isometric game engine, but once it’s implemented it would make things way easier for both myself and anyone who wanted to create a map in the future because one high resolution texture could be used for countless tile combinations.
I think I’m going to give it a try, because if nothing else it’s a damn cool idea.
SVG and Canvas Transformation Matricies
Both SVG and HTML5 Canvas have basic transformations such as rotation and scaling, but they also have a more advanced “transformation matrix” mode which lets you do more complex transformations. I’m not pretending to understand it properly.
A transformation matrix has six parameters, named A—F. A lot of the documentation I found on them wasn’t particularly useful, so here’s my take on how each value works:
| Name | Description | Default Value | Explanation |
|---|---|---|---|
| a | width | 1 | 1 equals 100%. A value of -1 would mirror image the object on the left hand side. .5 would halve the width, and 2 would double it, etc. |
| b | Y axis shear | 0 | A positive value shears the object downward on the righthand edge. |
| c | X axis shear | 0 | A positive value shears the object rightward on the bottom edge. |
| d | height | 1 | Similar in operation to a, above. |
| e | x offset | 0 | Offset the object on the x axis. |
| f | y offset | 0 | Offset the object on the y axis. |
So for instance, if you wanted to create an isometric tile from an image, you could use the following transform:
matrix(1,-.5,1,.5,0,0)
This would keep the same width, shear both axis by 50% effectively rotating the image 45°, and halve the height giving us our iconic half-height isometric tile.
Some other transformations relevant to isometric game tiles might might include:
| Operation | Output |
|---|---|
matrix(1,0,0,1,0,0) |  |
matrix(1,-.5,1,.5,0,0) |  |
matrix(1,-1,1,.5,0,0) |  |
matrix(1,1,-1,.5,0,0) |  |
matrix(1,0,1,.5,0,0) |  |
matrix(1,0,-1,.5,0,0) |  |
You’ll notice that the output tiles are significantly larger than would be generated with a straight out rotate and scale. You may need to add an additional scale operation to adjust the size of these tiles to fit your game board.
Putting it Together
Once you put these tiles together, you start to get an idea of how we can use canvas (or SVG) matricies to create isometric tiles for your game.
If you wanted to play around with transforms with a visual tool, you could check out Inkscape, the best vector editor in the world. The matrix transformation sidebar is found by clicking the menus Object , Transform, then clicking the “Matrix” tab.