Twobuttons Controls: A Postmortem

2 January 2015

This past Ludum Dare, a friend and I spent the weekend creating a game entitled Twobuttons Controls. If you know anything about Ludum Dare, then you probably know that each event has a theme. In this case, the theme(s) were "two button controls" and "growing." This was the first time more than one theme was chosen, to my knowledge. Jack and I decided we wanted to make a game about growing an empire and to incorporate a screen with "yes" and "no" buttons. Along with those seemingly literal interpretations of the themes, the backstory's main character was named "Twobuttons," for his famous double buttons on his coat. Of course, Twobuttons' only desire is to control the world. Because of time restrictions, Twobuttons' world was downscaled to Europe. Anyway, that's where the title came from. You can play the game here, which might make this post a little clearer.


What went right

The graphics basically turned out perfect, thanks to Jack. In terms of programming, one of the major worries for me was the conversion of Dart to JavaScript. My understanding was that the converter (dart2js) is imperfect and can have bugs. For whatever reason, I didn't encounter any and was able to create release versions of the code at will. Beyond the somewhat lowlevel success of code conversion, the major features Jack and I wanted to implement did end up in the game and turned out pretty bug free. The recruitment screen also turned out pretty well, complete with randomized characters to choose from, which added the literal "two button controls" aspect of the themes.

What went wrong

I think the biggest issue in the game is the unexpected food shortages. I didn't have time to add a counter for how much food was being used each week and also didn't have a chance to test out the numbers. I've been told that the reward for winning the game is a black screen. Not sure how that happened. I had also intended to write some music for the game but didn't end up having time.


The first challenge in making the game was the map. We started with a map of Europe found on Google Images:

Europe map

I started out with no idea how to detect which country the user was mousing over. After a bit of discussion, we decided to color code a map much like the previous image. Jack drew his own version of the outlines of each country and I colored them in and wrote down the hex value for each color, which were converted to RGB. We ended up with this:

Color coded map

I kept track of which color belonged to which country in this fashion:

Map countryCodes = {
  "241,185,214": "NORWAY",
  "191,211,160": "FINLAND",
  "179,177,216": "SWEDEN",
  "235,207,204": "DENMARK",

This color coded map is basically drawn "under" the map visible to the player. The country is obtained by detecting the color of the pixel the mouse is over, and referencing the map of color values. Beyond the hovering of mice, the next major challenge was the slider that shows up to indicate how many units are being transferred. Because I used only the Canvas API, I had to write a slider GUI element from scratch. At this point, I'm not even sure how I got it to work. Essentially, the value of the slider is converted to a percentage of the maximum value and then converted to a pixel position for the slider handle. The slider turned out like this, two images and some calls to context.fillText:


While seemingly simple, to get it to work without bugs took some time. Of course, time is precisely what competitors in Ludum Dare lack.

Of course, there were quite a few more less major challenges which aren't really noteworthy. Predictably, somewhere around 75% of time programming was spent making the map work correctly. The game seems to have turned out pretty well, at least for one made in 72 hours. Once again, you can play it here. If you participated in the competition, you can rate it here.