Postmortem: Chillennium 2016 48-Hour Game Jam - Tardigrade's Dangerous Day

The Llama and I participated in the Chillennium 2016 Game Jam a couple of weekends ago and made our first video game: Tardigrade's Dangerous Day. The game jam was a 48-hour competition to make a game with the theme "foofaraw" (which means a big fuss about a minor matter). If you're interested in the technical details, read on; otherwise, you can check it out on itch.io here and play it on HyperDev here - please note that the audio only seems to be working in Google Chrome.

Since tardigrades had been in the science news recently and tardigrades are all around pretty bonkers, we decided to make the game about a (not to scale) tardigrade.

Our stalwart tardigrade protagonist

We wanted the game to be browser-based so that it would be portable and allow users to quickly try the game. JavaScript or using something like Emscripten to port C++ to JavaScript are the only good options I know of for writing browser-based games. While we aren't that familiar with JavaScript, we chose to write the game in it because we didn't want to deal with the additional complexity of Emscripten.

Our experience with JavaScript is limited, but it does seem to be a powerful language. Projects like node.js let you write both your server-side and client-side code in JavaScript, so one language can be used for the full stack. While we didn't have much (or anything, really) in the way of server-side code, node.js was used server-side to serve up the game page.

We used HyperDev as a collaborative IDE for web application development. It updates your application in real time as you write code (and also uses node.js for serving), and it functions mostly like Google Docs in terms of multiple people being able to concurrently write in a document. HyperDev is still in beta, but it worked well for the most part (though it didn't play nicely with an intermittent internet connection).

 

With respect to game engines, there are a handful of good JavaScript engines out there, and we chose to use Phaser. It handles asset loading and display, user input, has a basic physics engine, good tutorials, an active community; overall, it worked very well. It doesn't seem to have any dedicated functionality for multi-player games that would run the physics simulation server-side and update the clients, but everything was single-player and client-side in our game so that wasn't a problem. The only issue we ran into was that the audio only seemed to work on Google Chrome browsers; Mozilla Firefox and Internet Explorer didn't seem to want to play the .ogg audio files, but I'm not sure if that's a Phaser issue or something else.

UV rays are no joke, safety crab

The artwork was done in Inkscape and entirely by the Llama. Using SVG assets was great for size-scaling purposes, and I much preferred them to pixel-based sprites both from an artistic and technical perspective. The Llama's artistic ability is top-notch, and the artwork is definitely the best thing about the game.

The music was recorded using Audacity by setting up a microphone in front of a speaker hooked up to my electric guitar. This wasn't ideal, and the sound quality suffered (it definitely did not capture the full awesome of my sick guitar skillzzzz). Buying a cable that connects the guitar straight to the computer for recording would probably have been much better. 

Get ready for 60 seconds of fun and laughter

The game only lasts about 60 seconds, but overall we're happy with how it turned out. We went into the jam with a simple goal since we had never made a game before: make a program that draws assets on the screen and responds to user input. We succeeded in meeting that goal, and we made something that gives us a laugh when we play it.

Now for what worked and what didn't.

What worked

• Free software and hosting platforms - HyperDev as a web app development platform, Phaser for the game engine, Inkscape for art assets, Audacity for music assets, and itch.io for hosting; they were all great. I saw a lot of folks using Unity and Unreal Engine, but I'm quite happy with how our toolchain worked.
• The Llama's artwork - If we fail to make it as scientists, I'm pretty sure the Llama could make it as a graphic designer or artist.
• Chillennium, its organizers, and its volunteers - They put together a great game jam with good food and attentive staff, and they stayed on schedule.
• Not gorging on candy and Red Bull, and getting some sleep - I'm pretty sure there were enough chips, candies, Slim Jims, sodas, and Red Bulls around such that we could have subsisted exclusively on that, and I almost did in my initial excitement at their availability. Fortunately, better judgement won out, and we didn't destroy ourselves. We probably only spent a total of 18 hours working (so about 36 people-hours); we stuck with a regular sleep schedule and ran regular weekend errands like grocery shopping. Maybe a lack of putting in the hours contributed to not winning any awards, but I'm happy that we didn't have to spend any time "recovering" from the jam.

What didn't:

• My limited understanding of JavaScript - I think this hurt production the most. I spent valuable time trying to figure out the scope of variables in callbacks, and I still don't really understand it. I also didn't really grok how to instantiate member variables in a class, or even define a class; it seemed like you could just write this.memberVariable and poof, now your object has memberVariable. I need to spend some more time learning the basics since JavaScript is definitely not like the C family of languages.
• Cross-Origin Resource Sharing - I spent a silly amount of time trying to figure out how to deal with a Cross Origin error: "Cross-origin image load denied by Cross-Origin Resource Sharing policy". Since the assets were loaded from HyperDev and I didn't control the server with the assets, I couldn't enable CORS on it to serve up the images. Setting the Phaser loader to anonymous by this.load.crossOrigin = "anonymous"; worked, but I still need to learn more about what CORS is.
• Audio works only in Google Chrome - Still haven't gotten to the bottom of this one. Other browers show the audio icon as though something should be playing, and I'm using .ogg audio files that should be compatible, but don't seem to get output. 
• Too much text - We watched a few of our labmates play our game, and it was evident that we did not consider our audience. As casual gamers ourselves, we now realize that we don't often read text in games. However, we lacked the time (or maybe the will) to create more graphical content to tell our story; instead we just wrote it out in text. Our players clicked right through it without reading, and then were confused later. We needed to make the whole experience more intuitive with less text.