Getting Started with Phaser Part 1: Web Server

As I learn to use the Phaser framework to make simple browser-based games, I figured I would chronicle my adventures and hopefully help others out.

“Why a web web server?” As it turns out, when most browsers run a page as a local file, it locks down access to many other files, which we need for our games. To read more about this, see this article.

To properly serve these files, we can use any number of existing web server software, but we will write a simple one using the Express framework in Node.js. In the future, we can modify this simple server to receive information back from our game to do things like control hardware and *gasp* make multiplayer games.

Install Node.js

Navigate to the Node.js download page and choose the installer for your operating system. Run it, and accept all the defaults to install Node.js on your computer.

If you are using Linux, most package managers can install it for your. For Debian, try  apt-get install nodejs npm . For other distros, see this page.

If you are weird like me and enjoy the Linux command line but work in Windows, I highly recommend installing Git Bash through the Windows git installer. We’ll need to use git later, as GitHub allows us to host our projects for free. All of my command line screenshots will be from Git Bash.

Install a Text Editor

For these simple programs, we’ll use a basic text editor to write our code. If you haven’t already, install the text editor of your choice. You can use Notepad, but I’ll make a few recommendations for programming-focused editors:

Directory Structure

Create a folder named Games in a place where you like to keep your projects (e.g. My Documents/Projects). In Games, create another folder named HelloWorld.

Directory structure for our game server

The goal is to create a web server that lives in Games. Whenever we want to test a game, we run the server with Node.js and pass it the folder (as an argument) of the desired web site (e.g. “HelloWorld”).

A web site, in a practical sense, is just a collection of files on a computer that get served to a client upon request. For us, each project folder under Games will be its own site, and we just point our simple server to that folder in order to host the site.

Install Express.js

Express.js is a web application framework made for doing, well, lots of web stuff in Node.js. For our purposes, we are going to use it to make a simple web server that just serves files when asked (via HTTP requests). We could write our own server using the http module, but Express.js just makes things easier.

Open up a command prompt (e.g. Git Bash), navigate to your Games directory, and install Express.

You might notice that this creates a directory named node_modules in Games. This is where Node.js modules, like Express, are stored.

When you execute node and it attempts to load a module (i.e. through the require() instruction), Node.js first looks in the current directory for a folder named node_modules. If a module with the name in require() is not found, it begins to work its way up directories looking for node_modules. If the module is not found at all, the require() command will throw an error, and your program will fail.

Write the Server Code

Open up your text editor and copy in the code:

That’s right, in about 15 lines of actual code, we have a functioning web server. Neat. In all honesty, though, Express is doing most of the heavy lifting for us.

Save the file as SimpleServer.js in the Games directory.

Create a Simple Web Site

Our site will be a single page with a title and some text in the body. In later parts, we will add a Canvas element and begin using Phaser to create games.

Create a new text document in your editor and copy in the following:

Save it as index.html in Games/HelloWorld. At this point, your directory structure in <PATH_TO_PROJECTS>/Games should look like this:

Games directory tree


Run the Server

In your command prompt, navigate to the Games directory and run the server, specifying the HelloWorld directory as the root for your web site.

If all goes well, you should see a note appear in the console that the server is running at http://localhost:4242.

Running a simple server

Open up a web browser and navigate to http://localhost:4242. You should see your page.

My first page

If you look at the console, you’ll see that a ‘/’ has appeared.

Console showing HTTP request

This means that a client requested the website’s root directory (‘/’). The server responded by sending index.html as a result, which is the default file for most websites. In this case, the root directory is HelloWorld, as we specified when we started the server.


We did not even touch Phaser in this part. Crazy, I know, but we needed to create a basic structure for hosting our games before we can even make them. Such are the joys of browser-based games.

If you aren’t familiar with HTML, now is a good time to play with the web page, index.html. We won’t actually do too much in HTML, but it’s good to be familiar with how tags, loading files from source, and a little bit of CSS work. Geek Champ has a great getting started with HTML tutorial.

When you are ready, continue to Part 2.

Virtual Gamepad Plugin for Phaser

Virtual Gamepad Phaser Plugin

I am currently working on a simple arcade game intended for smartphones, and after some research, I decided to develop it using JavaScript and Phaser. Getting an arcade-style controller on a mobile app requires a specialized “joystick” (the accompanying buttons are fairly straightforward). The basic concept is to have an area where a player can touch that determines the direction and distance of the joystick. The “joystick” should also be limited in how far it moves. The main game loop polls the joystick for information like angle and distance.

I found a few existing options in Phaser. The first is the beautiful and well-designed Virtual Joystick Plugin, but it costs $16. The next is an implementation of a Virtual Gamecontroller that creates a d-pad using buttons, which is useful, but lacks the analog nature of a true joystick. Finally, I found Eugenio Fage’s Touch Control Plugin.

The Touch Control Plugin worked almost exactly how I expected a virtual joystick to function, but instead of being in a static location on the screen, the user had to touch somewhere in the canvas to make the “joystick” appear. By examining how Eugenio performed the joystick calculations, I was able to make a static joystick overlay. The main difference is that Eugenio’s code uses events to determine presses on the joystick, and I found it to be sluggish when paired with a button. Like a bad JavaScript programmer, I changed it to polling (which Phaser does anyway in its update loop).

VirtualGamepad in action

To use the joystick, press down with your finger/thumb/mouse over the joystick area, and the “pad” should follow your pointer (out to a certain distance from the joystick’s center). The direction, rectangular, and polar properties should update accordingly. The button on the right should be fairly self-explanatory. A game using the Virtual Gamepad plugin just needs to poll the joystick and button’s properties on every update.

The most recent source code for the Virtual Gamepad plugin can be found on GitHub:

A playable demo of the Virtual Gamepad in action can also be found on GitHub: