Postbug Technical Overview: Compiling C# to Javascript

In this post I describe some interesting aspects of the technology I used to create my Postbug game. This is a cross post from my personal blog and assumes the reader has a technical understanding of programming languages.

Compiling C# into Javascript

Postbug was developed in C# and compiled to Javascript using Erik Källén's Saltarelle Compiler. This allows for the game to be developed with a statically typed language and run in the browser on a wide range of platforms. The game uses the Pixi.js library to render GPU accelerated graphics with WebGL.

I decided to compile to Javascript for game development back in 2011 when my brother Joseph Hemingway introduced me to Nikhil Kothari’s Script# Compiler. Joseph was an early adopter of the technology and had been using it in projects since 2007. Both Joseph and I are now using the Saltarelle Compiler since it was released in 2012. Currently, Saltarelle supports most C# 5.0 language features which are listed here.

HTML5 Games

My first priority when choosing a technology in 2011 was to reach as many platforms as possible. Javascript and the HTML5 specification meet this criteria because it is supported on desktops (Windows, Mac OS, Linux), a wide range of mobile devices (iOS, Android, Amazon Kindle Fire, Windows Phone, BlackBerry, Firefox OS) and I've even had the pleasure of playing Postbug in Xbox One's browser. Running HTML5 games only requires a click of the mouse which I feel is less of a barrier and more secure than installing native applications on desktop computers.

Statically Typed Languages

My second priority was to develop in a statically typed language (such as C++, C#, or Java). An important reason is to catch as many errors as possible during compile time. The C# compilation process ensures the code is syntactically correct, type conversions are strict and function calls conform to the function’s type definition. Testing for these scenarios in Javascript during runtime is time consuming and problematic, especially if the error occurs on a rare execution path. Statically typed languages also allow for fast and robust code refactoring and Microsoft Visual Studio hosts some powerful tools such as ReSharper. Postbug was heavily refactored when prototyping features and optimising performance.

I have also extended static typing in my project to include the game's assets. I've written an asset compiler which rasterises Inkscape SVG (Scalable Vector Graphics) files into bitmap sprites, collates the sprites into a spritesheet, and generates C# static typed information for the assets. Any changes to the assets (renaming or removing) will be detected by the compiler. There's nothing new with generating static typed code and similar techniques are used in the Entity Framework and LINQ to SQL which generate code from database schemas.

The Technology 3 Years Ago

Making the decision to compile to Javascript for game development was not easy back in 2011. HTML5 game development was only just gaining traction, and the rendering performance on mobile devices was very poor. HTML5 vs. Flash vs. native was highly debated and Mark Zuckerberg revealed in 2012 that Facebook’s mobile strategy relied too much on HTML5. Another reason to add to my hesitation was C# to Javascript Compilers hadn’t been widely adopted. At the time, there were a number of compilers which were losing steam with development and support.

The Technology Today

Move forward to the end of 2014 and the scene has strengthened considerably. HTML5 games have been widely adopted by developers, leading browsers are performing just-in-time compilation (JIT) to execute lightning fast machine code, the latest version of iOS supports WebGL, and compiling to Javascript has become a big deal. An extensive list of languages that compile to Javascript can be found on Coffeescript’s Wiki and over the years, the LLVM and Emscripten toolchain which compiles c++ to asm.js has matured considerably. asm.js is a highly-optimisable subset of JavaScript which can run at near-native speed without plugins. Firefox has led the way in implementing asm.js specific optimisations and the other major browsers are following suite. Emscripten has been used to port Unreal Engine 3, SQLite and Bullet physics into the browser. More recently, the latest version of the Unity game engine uses this toolchain to export games to Javascript (currently in early access).

A beta version of Postbug is available to play on desktop computers and I plan on extending support to mobile and tablets. It's great to see this project come together and it's a prime example of what can be achieved with source-to-source compiling and HTML5 / Javascript. The following video shows Postbug in action:

Soundtrack credits: Cellofest (circa 2001) by Paul Fox (Indie Masters)