In the last period, I’m really enjoying TypeScript. It is typed, can be used in a functional way without effort, it like a C# for the Web, in short, I love it. For this reason, I started converting some old Phaser.io demo in TypeScript, for fun.
So, why I’m writing here? To solve two main problems. First, the TypeScript guide in the Phaser.io web page is really outdated. Second, there are a lot of “template” project fo Phaser.io you can download. These templates are really state-of-the-art level: they use Gulp, Grunt, NPM and another million of tools.
However, when I’m approaching a new development environment, I’m usually overwhelmed by “too much tooling”. They are all additional levels between me and my understanding of how things work! I wanted something easy, something with only a web page, the Phaser.io library and the TypeScript compiler.
So, I present to you the **very basic bootstrap guide for TypeScript development for Phaser.io. **This includes the minimal amount of steps between an empty folder and a running Phaser.io + TypeScript environment! Enjoy!
Prepare the Folder
Create an empty folder. In this folder, create two other folders.
distfolder where we will put the “compiled” application.
srcfolder where we will put the TypeScript source code.
Now we need to setup TypeScript. If you don’t already, install TypeScript with the command
npm install -g typescript
Then, initialize the project with the command
This command will create a
We need to change this file in the following way:
We changed two things. We used amd as a value for the
module parameter because we want a single output file. Second, we added the
outFile field with the name and destination of the compiled file.
Write the index.html file
dist folder, we will add an empty
index.html file. This will be the page where our game will live. We write the following in this file:
Now we need to install Phaser.io. Go to the Phaser.io Repository and download the release you like. If you download the full report you will find the JS file in the build directory. Copy the file you like in your
dist/js/ folder. You can use the minimized one or the complete one. Doesn’t really matter.
Then, you need to load this in the web page, so add the following line before the line:
Install Phaser.io Type Definition
To do this, first, create an empty
typings folder. Here is where TypeScript will look for type definitions. Then, copy in there the following files from the
typescript folder in the Phaser.io repository:
NOTE: There is a bug in type definitions in the last 2.4.8 version of Phaser. It is not a big deal, but it is a bit annoying. The bug is fixed in 2.4.9 (in development). Until it is released you can stick to Phaser 2.4.6 or be breave and go in the dev channel.
Write the TypeScript application
It is finally time to write the Phaser.io application! So, in the
src folder, create an
app.ts file and fill it with the following code:
anyimages.png is any image file you put in the
dist folder. This is a bare minimal example of Phaser.
Compile and Run
Now in a terminal window, use this command to compile the TypeScript files.
This command will remain in watch-mode so that it automatically compiles the TypeScript files when they change.
To test our application we need a test server (because we are loading local files). If you have python installed you can go in the
dist directory and run the command
python -m http.server
and then open your browser at
If everything is correct, you should see the image you loaded at the center of the black canvas.