Battlecode Match Viewer

Project Summary

• Language: Flex, AS3
• Date: 2009 - present
• Source: https://github.com/trun/battlecode-webclient

Background

The match viewer is a port of our 2D Java game client to Flex.  Previously, in order to watch a match, you had to download and install the Battlecode application stack. This isn't always the easiest thing to do if you're just trying to show your parents what you've been working on for all of IAP.

The app itself is shows you an accurate round-by-round replay of the match including movement, attack, broadcast and other action animations.  This also means that it can sometimes push Flash Player to its limits.

Implementation

There are several particularly interesting aspects of the implementation.  First is the actual match file format itself.  Matches primarily consist of signals which represent individual actions such as movement or attacking.  A single Battlecode match consists of about half a million of these signals.  This means that the file format had to be 1) compressable and 2) easy to parse.  The original Battlecode file format was a stream of serialized Java objects, which didn't really fit the requirements because you can't read it with ActionScript.  After playing with a few other formats I opted for XML.  I'm not the biggest fan of XML, but in this case it was the only thing that was even remotely usable.  Flash's XML parser is lazy which is extremely important because it allows you to break the parsing process into discrete chunks that don't bring the UI to a halt.  Other libraries (such as the as3corelib JSON decoder) suck in this respect.

The other big implementation hurdle was rendering.  It turns out that the key here was heavily abusing Flash's cacheAsBitmap functionality.  You can also do a lot of other caching tricks to reuse text fields (these are pretty slow to instantiate) and drawing objects.  Doing this can get you a pretty decent framerate (up to 30 - 40 fps on my machine).  However, some features are notably absent from the renderer, at least until Flash gets real threading support.  For example, if you try to rewind or step backwards during a match, you'll notice that there are no keyframes so it must recompute the entire game state from the beginning of the match.  Ouch!  You can actually turn keyframing on by pressing the 'K' key, but you'll see a very noticeable stutter every 50 frames or so while Flash tries to clone every aspect of the game state. 

Demo

Go ahead and try it out. The links below will take you to some of my favorite matches from 2009 and 2010. If you're wondering what the heck is actually happening, head over to the Battlecode project page to get brief run down of the gameplay and rules.

• 2010 Qualifying Tournament (You Must Construct Additional Pylons vs Little)
• 2009 Final Tournament (gtg ice skating lessons vs JIT In My Pants)
• 2009 Final Tournament (My Other Language is English vs We'll do it Live)

Hotkeys:

• B - toggle rendering of broadcasts (off by default)
• D - toggle discrete movement (off by default)
• X - toggle rendering of explosions (on by default)
• E - toggle rendering of energy bars (on by default)
• H - toggle rendering of unit heights (all, ground, air, none)
• G - toggle rendering of grid lines (off by default)
• K - toggle keyframe processing (slow)
• Spacebar - toggle play / pause