Phaser Game Framework

Canvas and WebGL based games


pixi.js library for rendering

Part 1

Setup

Get Phaser 2.6.1 library (download js and min.js)

phaser.js will be used for development and phaser.min.js will be used for production

Place both of these files in your Phaser project’s root folder

To run/test the game locally

Using a light-weight local web server: http-server (a module of Node.js)

Download and install Node.js 6.3.1 (comes with npm — package manager)

Next open command line:

npm install http-server -g

This will install and make the http-server command available globally (-g)

To uninstall http-server module:

npm -g uninstall http-server --save

Test

Download the hellophaser.zip file containing test game from the Phaser getting started page

Extract file to the Phaser folder. Find index.html in hellophaser folder

Test setup only

Currently hellophaser game is using an online repository to fetch phaser library script. For now, change it to use the local phaser.min.js file instead.

Open index.html (entry point for game) using an text editor and change:

<script src=”//cdn.jsdelivr.net/phaser/2.5.0/phaser.min.js”></script>

to:

<script src="../phaser.min.js"></script>

Navigate to the Phaser folder and start the web server using command line:

http-server

Navigate to localhost:8080 (port 8080 is default; can also use http-server <path to project folder> if not in project folder)

Directory structure displayed when navigating to localhost from Phaser root folder

Click the hellophaser/ link to see the game running (phaser logo in the middle of black background). Ctrl-C to stop server.

Static image with black background in hellophaser sample game


Part 2

Optional Setup

Microsot Visual Studio Code, Typescript, and Phaser

Superset of Javascript

Typescript is more strict that Javascript and thus provides better error checking and auto-completion

Typescript has to be compiled to Javascript (build) before launching game

Download and install Code

Install Typescript as Node.js module using command:

npm install typescript -g

To compile a Typescript project create a tsconfig.json file (docs) under the game root folder and add this to tsconfig.json (should autocomplete in Code):

To add Phaser support to the project in Code go to phaser github page and look for typescript folder and get the following definition files:

p2.d.ts (p2 physics), phaser.d.ts, and pixi.d.ts

Find other .ts definition files (Definitely Typed) as needed from the phaser github typescript folder (for this example only phaser.d.ts is required)

What does the project structure look like in Code for a Typescript Phaser game?

Create a game folder called SimpleGame. Then add phaser.js or phaser.min.js in /bin/js folder. Place the three typescript definition (.ts) files in /tsDefinitions folder.

Folder src will be created under the root folder to hold typescript game files

SimpleGame folder structure

Next add a assets folder under root and save this phaser logo in it as logo.png

Create Game.ts in the src folder and add the following code (should autocomplete):

Next create a index.html file in the bin folder that will hold and display the game. Add the following to index.html:

Since we are using typescript, we have to compile (build) the code to javascript

To compile game.js from Game.ts hit

Ctrl + Shift + B

in Code. Since no build process was configured you should get a Configure Task Runner button. Click on it and select npm as the Task Runner. This will add tasks.json file in the .vscode folder.

Edit tasks.json:

Install the ‘Debugger For Chrome’ extension for Code

Create a folder called chrome under the Phaser project root folder. This will be used to store a chrome instance that will display the game. (see launch.json argument user-data-dir below)

Phaser project folder structure

To launch game hit F5. To configure launch options select Chrome as the environment. This should create launch.json file in the .vscode folder.

Edit launch.json:


Follow the steps below to launch the game

In Code ensure that the build is current by using build shortcut:

Ctrl + Shift + B

In Documents Explorer navigate into the Game folder (SimpleGame) and in the command line start up http-server using command:

http-server

This should start server in the Game root folder path

Now back in Code hit F5 to launch the game