Game Dev with Phaser – Part 1: Setting Up

I’ve been considering writing a series of articles about developing games for some time now. Initially I wanted to cover Unity game development, because at the time there weren’t many articles on it, and most of them took a very simplistic approach to Unity, often missing some best practices which I feel are core to Unity development. Many years have passed since, and now my writers thumb is starting to twitch again.

I currently work in a fast rising Html5 startup, and while it was a big change of direction for me, it’s opened up my eyes to the power of Html5 as a game development platform. It’s surprisingly quick to build high quality games if you have the right toolset. The problems that many assume will be there, such as browser support, aren’t nearly as bad as they used to be, and the engines available are getting so good that some app store hits have been built in them. With this knowledge and new found experience, I figured I should share some information on developing a game in Html5.

 

Step 1 – Installing the toolchain:

One great thing about Html5 dev I’ve found so far, is that the best tools work on Windows, Mac and Linux. The first prerequisite is called Nodejs, which provides a package manager called NPM. You can install Nodejs from here. Once installed, the next thing you’ll need is a development environment. Many developers use Sublime Text, and while I think Sublime is awesome, I prefer Webstorm for day-to-day development, mostly because it’s more of a fully fledged IDE than Sublime, with project management, Git integration and many features that you’d expect from an IDE such as Visual Studio. If you choose to use Webstorm, it has a builtin webserver, which you’ll need for Html5 game dev. If you don’t use Webstorm, I’d suggest setting up a webserver for your OS, whether it’s some form of Apache (such as WAMP) or anything else. You can create your project directory in here.

At this point, I’d recommend setting up your project in some kind of source control. If you’re not sure why you should use source control, there’s a fantastic Stack Overflow answer here. From here, we can start installing the toolchain. At the very least, create a project directory on your hard disk, I’ve called mine awesomegame.

Open up a terminal in Mac or Linux, or Powershell on Windows and switch to your project directory. Now type the following:

This will ask you a series of questions about setting up your project, like this:

npm_init

Go with the defaults, such as index.js as the entry point.

Next up, type into your terminal:

and when that’s done (it might take a few minutes):

There’s one last pre-requisite before we can start coding, and that’s the game engine, Phaser. Since this tutorial is based on Phaser 2.2.2, you can grab that directly from here:

https://github.com/photonstorm/phaser/releases/download/v2.2.2/phaser.js

Create a lib folder in your project directory, and download this file to the lib folder. Now the tool chain is done, we can start coding!

Step 2 – Entry points

In step 1, you will have noticed that we installed requirejs. Normally when you code in javascript, you need to include all of your files in the index.html for them to work. What requirejs does is allow you to require and define them as modules, and only have one include in the index.html. Overall this makes your code cleaner and ensures that each file only has access to the modules it needs. In your project root, you’ll want to setup an index.html file, with the following:

The magic happens in the script include on line 16, which actually includes requirejs, but passes through an entry point into the game in the data-main attribute. Requirejs takes it fom there pulling in all the other required scripts. Note here that we set the body style to have no margin or padding and be 100% of the page. This allows us to get a maximum size canvas for the game.

Now create an index.js that looks like this:

Let’s break that down. As you can see, we start by configuring requirejs. We tell it that the base path is a folder called src, where we plan to put all of our classes. We can then specify any further library paths, but since we only have Phaser, we add it here. What this allows us to do is include Phaser by just adding Phaser to the module, instead of needing a full path. We do this here on line 8, by calling

and then we start our module, passing in aliases for the above require parameters

With requirejs, the function parameters match up to the array elements in the require function call. Here in theory we could change the naming of Phaser to suit our own naming convention. For example, if we feel like the namespace Phaser should be with a lowercase, we could change line 9 to:

And that would alias the module Phaser to the local variable phaser.

After this, we go ahead and create our game object. From the phaser docs, the Game constructor is as follows:

Game(width, height, renderer, parent, state, transparent, antialias, physicsConfig)

Since we don’t specify anything for parenttransparent, antialias and physicsConfig, the default values are used. We set the renderer to Phaser.AUTO, which will dynamically choose between WebGL and Canvas, based on what the browser supports. Finally, we pass in the state, which is a simple object defining some functions that Phaser will call automatically. We specify these functions directly after the game creation.

Now let’s open it up. When you open it in the browser, you’ll need to go to a url like

http://localhost:8080/awesomegame/index.html

This is what Webstorm generates for me when right clicking on my index.html file and saying open in browser. This is because you’re running it via a webserver and not just opening an index.html file directly in the browser. This will allow you to serve files to the game, which isn’t allowed with just a direct open.

With this, we now have a basic empty slate. If you open up the dev tools (right click and Inspect in Chrome), you should see something in the console log like:

That means we’re good to move on to some game development!

Posted in Game dev, Uncategorized.