I spent some time in the last months learning more about computer game design. In the process, I designed a part of the interface for an online game and created lots of graphics for it (both 2D and 3D, using GIMP, Inkscape, and Blender). I also made a few working demos, implementing some game interface features with JavaScript and HTML5 (using the jQuery Javasript library and the Crafty JS JavaScript game engine.
I decided to post a screenshot of the interface design together with some graphics, as well as a working CraftyJS/HTML5 demo of a scrollable hexagonal map with dynamic loading and unloading of tiles. All graphics are copyrighted and cannot be distributed or reproduced in any way without permission. You may download the tile graphics together with the JavaScript file if you want to tinker with the demo, but please use your own images for any posts or projects of yours.
Game interface screenshot
Click on the image for a larger version.
Hexagonal map demo
Click here to read this whole article and view the demo. The demo was moved to a separate page because of problems with using CraftyJS in a WordPress blog post. Comments on the demo are welcome here in the blog post.
Scrolling down or right (especially right) I see white spaces where hexes aren’t drawn yet, rather than partially-drawn tiles.
Thanks for commenting on this demo. The issue you are noting is fixable by adjusting the number of tiles you draw in advance outside the visible stage. In your own projects, you may also want to adjust the scrolling speed.