Igor Kromin |   Consultant. Coder. Blogger. Tinkerer. Gamer.

NOTE: This article is 3 years or older so its information may no longer be relevant. Read on at your own discretion! Comments for this article have automatically been locked, refer to the FAQ for more details.
I've been going through my options in picking a new graphics library to use for my HTML5 game that would be fast enough to draw at 60FPS and one that could provide robust functionality, not many of the existing APIs do this and I was almost ready to give up until I found CAAT. In a matter of hours I was able to get this demo up and running that draws a hexagonal grid, which is scrollable (by dragging it) and maps clicks on the canvas to grid cells.

For the hexagonal grid maths I used this article: Coordinates in Hexagon-Based Tile Maps, which is an easy read and explains things quite well, although I did have to correct some of the code because the pseudo-code was incorrect.

This is what the demo looks like:

I won't be showing the code here because it is a direct implementation of the pseudo-code described in the article I've linked above. There are some optimisations like pre-calculating sin(30deg) and cos(30deg). There is still quite a lot of room for improvement in terms of performance, for example r*2 and h+s are calculated several times when they don't need to be.

So without further delay, here's the demo...


Skip down to comments...
Hope you found this post useful...

...so please read on! I love writing articles that provide beneficial information, tips and examples to my readers. All information on my blog is provided free of charge and I encourage you to share it as you wish. There is a small favour I ask in return however - engage in comments below, provide feedback, and if you see mistakes let me know.

If you want to show additional support and help me pay for web hosting and domain name registration, donations, no matter how small, are always welcome!

Use of any information contained in this blog post/article is subject to this disclaimer.
comments powered by Disqus
Other posts you may like...