Sunday, August 19, 2012


I have started working on a new game! HTML5 canvas! Network multiplayer! Turn-based strategy! Metaballs!

The name of the game will be Metamoku. A combination of metaball and moku (which is territory in Go).

I have been putting together various demos to experiment with rendering metaballs. It is actually a difficult problem to render them fast+smooth+accurate. I have tried three approaches:

Approach Speed Smoothness Accuracy
pair-wise B├ęzier curves Fast Good Bad
pixel rendering Variable Bad Good
border following Slow Good Good

Pixel rendering is the most common rendering approach. However, it can get very slow on large displays. Also, making the edges smooth is difficult. dllu made a two color demo.

Here are a couple demos I made with the pair-wise approach. These are just an approximation to the actual metaball function and are therefore not "accurate".

I found a great article about the border following approach here. This is the most complex of the three approaches. I implemented a demo here. Here is another demo where you can see some of the path-finding internals (red is border misses, blue is border hits). These demos don't have real-time rendering or drag-and-drop because it is too slow. However, this approach might be feasible for a turn-based game with one frame per turn.