tl;dr: Phaser + TypeScript is a win for rapid game development on mouse driven 2D games.

Every ludum dare I have one goal in mind: experiment with some new technology, or two. The first time it was MOAI SDK + Lua. This time it was Phaser + TypeScript.

Why Phaser?

Currently I am working on a project that may or may not end up written in JavaScript but it will definitely be playable in a web browser. For that reason I wanted to experiment with a game engine written for the web and Phaser seemed like a good place to start. Also, our idea being a 2D game with only mouse interactions provided no resistance.

Phaser is basically grouping a few libraries, among them PIXI, with a bunch of convenient methods to build a fully functioning game engine. It provides amenities for graphics, sound, animation (and tweening), input (including gamepad) and more. All in all, it looks like a complete package.

Why TypeScript?

I did a little research last week at work about JavaScript alternatives. TypeScript’s integration with my editor (Atom) and its support from the community (DefinitelyTyped.org) made it an easy choice (against Babel, Flow and CoffeeScript at least).

The whole idea behind TypeScript is to support some of the features of ECMAScript 6 (the next version of JavaScript) plus type annotations, enums and a few more little features. From my experience, coding with type annotations, and most importantly having the editor guide you through the API, speeds up development time considerably.

How did it all come together?

Phaser contains all I needed to make buttons, load spritesheets and play sounds effortlessly. I had some problems when loading fonts but that ended up being my own mistake when converting them from .ttf to .woff. TypeScript’s integration with Atom made it a breeze to explore Phaser’s API and helped me avoid a lot of mistakes. Personally, coming from the Ruby on Rails world, I felt empowered by not having to keep the API reference documentation open at all times even though I was using Phaser for the first time.

How was the code structured?

The code is available on GitHub.

  • src folder - holds all typescript files
  • lib folder - holds phaser header files
  • public folder - holds the compiled javascript files + phaser.js + assets
  • server.rb - an almost empty Sinatra server
  • tsconfig.json - setup to compile directly to public and load header files from lib
  • .gitignore - ignore *.js files in the public folder (except phaser.js)

What would I change?

Apart from code we did one very serious mistake: no paper prototypes. I have found paper prototypes to be very helpful during the initial stages of a game to facilitate clear communication among the team members. Thankfully, the tools allowed to follow an experimental approach on this project.

Publishing was cumbersome at the beginning. To publish the game to GitHub pages, I had to do the following:

tsc # compiles all code to the public folder
git checkout gh-pages
git checkout master - public # picks up any new assets from master
cp -rf public/* . # because moving recursively is a hassle
rm -rf public/
git reset . # because for some reason, anything copied over was staged on git
git add .
git commit -m “Update from master”
git push origin gh-pages
git checkout - # back to master
tsc # to re-compile what was moved

Of course I scripted it in a shell function but until I did that, which was a low-priority task, it was a PITA. If I did it again, I would like to try something like harp and deploy directly to GitHub Pages.

Even though the Atom-TypeScript integration is really good, it is not bug-free. I had to work around these bugs constantly but at least this resulted in a bunch of GitHub issues to improve it.

Conclusion

I had a lot of fun with the game we made. Paolo, the Italian of the Sentendo team, took a big load off my shoulders which allowed me to concentrate on code and code alone. The technologies I chose to use did not let me down. Close to the end of the 72 hours, the result of every line of code I wrote was what I expected.

In other words: success! ^_^

Or at least that’s my opinion, play the game and judge for yourself.