Hex Tile Improvements

As mentioned in my last post, the new HTML5 canvas-based graphics system had a few issues that still needed to be resolved. In particular, the seams between hex tiles were sloppy, as you can see below.

Before:

I have spent the last couple of days tightening up the tiling system, and the tiles now render seamlessly down to the pixel:

After:

In making these improvements, I have also resolved most of the tile "artifacts" that would show up as the tiles were re-drawn when you moved your mouse around the screen.

For those who are curious, the problem was due to the fact that a hexagon has a height-to-width ratio of 1.1547... (many decimal places, maybe going on forever). This means that you can't generally have a true hexagon with both an integer height and an integer width, which is a problem when you want your hexagonal tiles to line up perfectly pixel-by-pixel. I solved the problem by displaying near-hexagons that are ever so slightly squished, and taking this squish into proper account when calculating all pixel coordinates.