bpoetz / phaser-project-template

This is a simple project template I created to help add a structure to your next Phaser game.

What is the Phaser Project Template?

This is a simple project template I created to help add a structure to your next Phaser game. It includes the following things:

• A package.json for installing npm dependencies
• GruntFile.js for automating build tasks and compiling your game
• src folder where you can put your game code.
• Deploy folder where all code gets compiled to and you can push to a server

To get started all you need to do is download a copy of this template, the latest version of Phaser and make sure you have NodeJS and Grunt installed.

Installing NodeJS and Grunt

You can get a copy of NodeJS on its site here and install it. After installing it you will want to install grunt from the command line.

If you have installed Grunt in the past you may want to remove it first:

> npm uninstall -g grunt

Now you can install Grunt's command line tools by typing out the following:

> npm install -g grunt-cli

From here, Grunt should work via the command line. If you want to learn more about how all of this works check out my blog post on Automating TypeScript with Node and Grunt.

Setting up the Template's Dependencies

Via the command line, cd into the template's directory on your compute and run the following command:

> npm install

This will run through all the dependencies in the package.json file and install them locally for the project to use.

Next you will need to download a copy of Phaser's source code add it to your src directory. I keep it in a folder called src/libs/Phaser. Make sure you copy the main Phaser project code, you don't need the tests or other files floating around the directory.

After that you can simply run:

> grunt

In the directory and it will launch a browser with the default screen which will look something like this:

You can start building a game with Phaser by modifying the game.ts file inside of the src/game directory. While you have the Grunt task running in the browser your project will automatically recompile every time you make a change to any TypeScript file inside of the src directory. Make sure you disable your browser's cache to see changes.

What Else?

Since git doesn't include empty directories the one thing I would suggest adding is an assets directory in your deploy folder. This is where you should keep all of your externally loaded content such as sounds, sprites and textures. I usually create folders with the name of each type of media I am loading to keep things organized.

Also if you are lost or need some point of reference I highly suggest going through each of the tests in the Phaser project to see how things work until more of the framework is documented.