Skip to content

Flappy Birds tutorial using Phaser and Typescript

May 8, 2014

Recently I’m looking at writing some simple games for mobiles. After extensive research I’ve settled on using a framework called Phaser – it is actively supported and it uses HTML5’s webgl / canvas – i.e. it falls back to canvas if webgl is not supported on the device. This is great especially given that Windows Phone have just announced support for these elements, with iOS and Android already having them.

 

My biggest concern is working on a larger project that uses javascript – you don’t get any of the cool features of Visual Studio. Actually most people recommend simple text editors for javascript. This means no F12, no Find all References, not to mention that object oriented programming in javascript is horrible. So – Typescript to the rescue! If you don’t know what Typescript is I highly recommend watching a presentation by Anders Hejlsberg, the creator of C#. It is a superset of javascript that looks a bit more like C# (you get classes, inheritance, visibility modifiers and even generics and C#-style lambdas, plus an inbuilt module manager that looks like namespaces). It compiles to javascript and you package and send the javascript directly to the users.

 

I am not going to post the actual tutorial – I followed the excellent Flappy Birds with Phaser tutorial by Jeremy Dowell – a great way to learn Phaser and 2D game programming concepts. I then rewritten the game with Typescript (with a few minor changes). Note that I do not own any of the images, sounds etc., this is sample code and this is a personal project. I’d also like to praise the Phaser team who have accepted all the bugs I’ve logged (minor typescript mapping issues) and fixed them in a matter of hours (wow!).

 

You will need Visual Studio 2013 Update2 to run this game. Currently Update2 is not released, but you can download the RC (release candidate). Update2 includes Typescript so you don’t need to download any other extension. I am using IIS and have also configured Browser Link to speedup development. I find the code very easy to read (especially if you know C# / Java) and the static typing saved me countless times, not to mention that IntelliSense works. Sadly the sample does not work on IE (bummer, I really like their javascript debugging tool – F12) because IE does not support playing .wav sound files. I tested everything using Chrome. I also recommend you start by following the short “getting started” Phaser tutorial using Typescript that explains how to use Visual Studio.

 

So what do you get?

– Typescript (all the advantages of a strongly typed language invented by the creator of C#). This does not absolve you from having to read javascript, as you will still have to debug it.

– Visual Studio editor support (including IntelliSense, F12, Find all References etc.).

– some Visual Studio debugging (you can debug Typescript from VS as well as from the browsers but to be honest game frameworks are highly event driven and debugging screws up the timings so you’ll have to learn to rely on logging)

 

What’s not great ?

– The typescript mapping are not documented so if you hover over a method you do not get its documentation like you do in C#. I understand this is a hard problem and the Phaser team are looking into it but no progress so far. To workaround this you still have to consult the docs or to manually search into the phaser.js file;

– Slightly longer code – browser cycle because of the extra compilation step and occasional sync issues between VS and the browser

– IIS also introduces some small problems, chief among them security restrictions on certain file formats. The fix is trivial (add a line in your web.config) but

– my implementation still has a few bugs 🙂

 

 

 

The solution is shared via my OneDrive.

 

Advertisements
No comments yet

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: