Phaser Game Framework
Canvas and WebGL based games
pixi.js library for rendering
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
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
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:
Navigate to the Phaser folder and start the web server using command line:
Navigate to localhost:8080 (port 8080 is default; can also use http-server <path to project folder> if not in project folder)
Click the hellophaser/ link to see the game running (phaser logo in the middle of black background). Ctrl-C to stop server.
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
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
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:
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.
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)
To launch game hit F5. To configure launch options select Chrome as the environment. This should create launch.json file in the .vscode folder.
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:
This should start server in the Game root folder path
Now back in Code hit F5 to launch the game
In this tutorial we're going to cover setting-up a development environment with which you can build your Phaser games…phaser.io
In this tutorial we'll cover setting-up a Phaser TypeScript project. We're going to specifically cover using Visual…phaser.io