Build-Build-Revolution for Starcraft 2

Categories: Fun Code, Website

Ever since the first version of Command & Conquer came out, real-time strategy (RTS) games have been my (not-so) secret vice. I was never able to get interested in chess or go, they were just too structured. But RTS games are like a cross between boxing and chess. You have to make a plan, execute the plan, while trying not get punched in the face. And Starcraft 2 is one of the longest-lived (and maddeningly difficult) RTS games out there.

While there is a lot of variability in a RTS game, the beginning of most games is pretty well understood. Called a “build order”, there are many well-known recipes for starting each game to give yourself the best chance to destroy your opponent. At the highest level, executing these build orders with sub-second precision is critical. But even lower-level players can gain a big advantage by executing a build order accurately and quickly. For example, here is a vary aggressive build order to attack your opponent with Voidrays (flying warships):

Zest Proxy Voidray Cheese

  • :08 12 Pylon
  • :26 13 Gate
  • :40 15 Gas
  • :49 16 Gas -> Go Proxy
  • 1:14 18 Cyber (17 workers)
  • 1:15 18 Zealot
  • 1:30 21 Pylon (Proxy) (18 workers)
  • 1:50 21 Stargate
  • 1:53 21 Stalker
  • 2:03 24 Warp Gate
  • 2:14 24 Stalker
  • 2:33 26 Voidray
  • 2:45 30 Pylon
  • 3:03 30 Voidray

To someone who doesn’t play Starcraft, this will look like a bunch of gibberish. But if you play the game, it gives you the instructions you need to build the right things at the right time to (hopefully) pwn your opponent. And while these lists are nice, when you’re trying to learn a new build it’s tough to translate that “recipe” to all of the actions needed to execute it.

While I was pondering how to make the learning process easier, it occurred to me that it would really help if I could see the upcoming build instructions scrolling across the screen, like arrows in Dance Dance Revolution. So, I set out to code it, and the result is something I call build-build-revolution. At the site you can upload a Starcraft 2 replay file, and it will let you play it back with icons being displayed for each build action on a zoomable timeline.

The way I use the tool is to start bbr on my second monitor, load a custom game on my main monitor, start the custom and play the first few seconds. Then I pause the custom, start bbr, then resume the game.

If you want to run a copy of bbr yourself, you can check out the Build-Build-Revolution repo on Github. It’s open source, under the MIT License. In my next post, I’ll dig into how I implemented the playback control as a custom HTML control, using my Plain HTML Components Library. If you’re into web development, you might want to check it out when it goes live!