December 18, 2014
Featured on Gamasutra
In this post I describe some interesting aspects of the technology I used to create my Postbug game.
Please note that this post assumes the reader has a technical understanding of programming languages.
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.
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.
My first priority when choosing a technology in 2011 was to reach as many platforms as possible.
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.
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
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.
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 over the years, the LLVM and Emscripten toolchain which compiles c++ to asm.js has matured considerably.
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.
A beta version of Postbug is available to play on desktop computers and I plan on extending support to mobile and tablets.
The following video shows Postbug in action:
- More details about the game can be found in Postbug is Alive!
Love this comment from nphekt on /r/csharp:
It's a million-to-one chance they'll ever get it to work properly to begin with. Exactly million-to-one, as a matter of fact. So it just might work."