The other week I wrote an introduction to Phaser and I wanted to follow up with a short walk through on how to get a project up and running with Phaser, TypeScript, NodeJS and Grunt. I have talked about a similar workflow in the past as well but figured I should come up with a basic Phaser Project Template to help get others started. Here are some instructions on how to use it.
You can download the Phaser Project Template from my Github repo here.
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
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:
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.
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.