Since I had a little free time over the holiday period, I wanted to sink my teeth into a fun new project. I’d heard about Phaser a while ago and Thomas Palef’s 12 games in 12 weeks challenge which did interest me, but building games for mobile (or games in general for that matter) was something I never really planned on getting into.
I came up with a simple idea for a game though and thought alright let’s just do it. What surprised me the most was just how easy it was, the game isn’t overly complex but it only took me about 5 days to finish it. I will be releasing the game soon enough on iOS and Android, but since it’s not available just yet the gist of it is:
- You are a ninja (original, I know) running across rooftops on a tightrope
- There’s a mechanic for “focusing” which you need to execute to make it to the next rooftop
- You can collect shurikens along the way by jumping
I wanted to create a Flappy Bird style game – one that is frustratingly difficult, quick and addicting.
Learning Phaser
Aside from Phaser’s own getting started guide one of the most helpful tutorials I found was by Thomas Palef on how to build a Flappy Bird clone. These tutorials, coupled with a few google searches and poking around the Phaser documentation was just about all I needed to learn enough to build my game.
I have a reasonably strong background in JavaScript and JavaScript frameworks like Sencha Touch so I had a bit of a leg up, but I was pleasantly surprised at the speed of which I could develop this game.
I know there are a ton of other game frameworks out there that could be used in place of Phaser, and I’m not sure what the pro’s and con’s of some of the most popular ones are since I just dived in.
Phaser certainly seems to be the cool one right now though – it’s popular among developers, has a strong community and is being actively developed so I doubt it’s going to be a bad choice. As always though I’d encourage you to do some research for your specific needs, different frameworks are going to be better for different things.
My initial impressions of Phaser though: very impressed.
Graphic and Sound Assets
Naturally games will feel a whole lot better with nice graphics and suitable sounds. Here’s where I got my resources from:
- Sprite, graphics and backgrounds: http://graphicriver.net/
- Sound Effects: http://www.bfxr.net/
- More sound effects and music: http://www.soundsnap.com/
Bfxr is free but I only paid a total of about $20 for everything else. Purchasing these saved a ton of time that I would’ve spent creating all the graphics, and they probably would have ended up looking awful.
Getting it on Mobile
As I do with my Sencha Touch projects, I used PhoneGap Build to build the game for mobile – it’s as simple as referencing the phonegap.js file in your index.html, creating a config.xml file, zipping up your project and uploading it on PhoneGap Build. There’s some additional hoops involving provisioning profiles and such to get it installed on iOS though. I’ve written a tutorial on how to use PhoneGap Build with a Sencha Touch project which, although written specifically for Sencha, you may find helpful if you’ve never used PhoneGap Build before.
I did a bit of research and it seems that PhoneGap isn’t the best option for packaging HTML5 games. PhoneGap renders the app through a UI Web View which isn’t ideal for the Phaser framework which can make use of WebGL. There are however options available specifically for packaging HTML5 games like: Cocoon JS (iOS and Android and Ejecta (iOS only).
The game seems to run fine on iOS when built with PhoneGap though so I’m happy just using that for now. If the game were more complex perhaps it might start struggling a bit.
So keep a look out for when I release my very first game (I’ll make another post about it when I do) and let me know in the comments if you’d like to see more tutorials and content on developing HTML5 games.