Creating a simple mobile game with Phaser and PhoneGap Part 1

Whilst playing Terraria on my phone one evening recently, I decided that I wanted to finally delve into the world of mobile game app development. I’ve always loved building little web games or interactive frontend things using what I’d learned with HTML, CSS and Javascript. I once made a pong knockoff which was immensely fun. I didn’t particularly fancy the idea of diving straight into the depths of Java or Swift to build an application and was keen to start by using technologies I’d already learned for the web and then start to learn a bit of java on the side so I could build some native apps for android.

A couple of years back a colleague mentioned a program called PhoneGap to me; PhoneGap allows you to easily create apps using familiar web technologies like HTML, CSS and Javascript. You can then package them up and launch them to multiple mobile platforms using PhoneGap’s own Cli.

Being the 90s kid that I am I decided the first game I’d aim to create was a side scrolling space shooter similar to the Space Impact game on the old Nokia phones. If you haven’t played this game it was arguably better than snake.

Space Impact, old school mobile gaming. Definitely better than candy crush.

Getting Started

After 5 years of web development I’ve become quite proficient with HTML, CSS and JQuery so I figured I’d knock a really simple game out quickly to test how well PhoneGap would work with those technologies, and how well the JQuery would perform. PhoneGap comes with a simple and concise Desktop GUI to help you create projects and run them. You then download an application from your phone which asks you for an ip and a port provided by the desktop application. You hit go and tada, you can view your current code in your project folder on your phone . . . magic!

So I set to work building my very basic game, emphasis on the basic! Within an hour I’d built a small game where at set intervals black rectangles would load in from the right hand side of the screen and animate to the left hand side. You as the player were a little blue ball and had to tap your screen to jump over these blocks. each block you jumped over racked you up one point.

The most basic game ever.

When I loaded It up on my phone however, my suspected fear was realised. JQuery Isn’t the most efficient at the best of times and on the PhoneGap app it ran incredibly poorly. Every time a block loaded in from the right hand of the screen the balls bouncing animation would stutter horribly. Upon seeing this I immediately realised that using JQuery wouldn’t be the way to go; if It couldn’t run a bounce animation smoothly then It certainly wouldn’t be able to make my side scrolling shooter work. So I sat down and had another think, I considered using canvas or GSAP and considered whether I really did need to learn Java straight off the bat. Then I realised that the same as any other problem In the programming world, if I was having it then many people before me had had the same problem too, so I turned to my old friend Google and after a few minutes came across something called phaser.

Familiarising With Phaser

I hadn’t come across Phaser before but after browsing� the website briefly I was blown away by how fit for purpose it would be. Phaser is an HTML5 game framework that uses Canvas and WebGL to render your games. It has a brilliant API that you can use with Javascript to quickly build the base of your game. It comes with 3 inbuilt types of game physics, animations, particle effects and load of other cool things. This does a lot of the ground work for you so that you can focus on making a fun game. Best of all It’s free and open source.

I’ve only had a few hours playing around with it so far but it seems very promising as of current. I’ll be building my game over the next few weeks and once I’m finished I’ll make another blog to tell you about my experience with Phaser and PhoneGap and of course I’ll post a link so you can go and play my super fun game.

Happy Coding!