Basic Bootstrap for Phaser.io and Typescript Game Development

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.

The dist folder where we will put the “compiled” application.
The src folder where we will put the TypeScript source code.

Setup TypeScript

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

tsc --init

This command will create a tsconfig.json file with a minimal configuration. This file is where the TypeScript compiler will go to read all the configurations needed for compiling (for instance, the output folder for the compiled JavaScript file, or the target language version of the JavaScript output such as ES5 or ES6).

We need to change this file in the following way:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
    "compilerOptions": {
        "module": "amd",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": true,
        "outFile": "dist/js/app.js"
    },
    "exclude": [
        "node_modules"
    ]
}

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

In the 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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>TypeScript + Phaser.io Demo</title>

    <script src="js/app.js"></script>
</head>
<body>
    <h1>TypeScript + Phaser.io Demo</h1>
    <div id="content"></div>
</body>
</html>

Setup Phaser.io

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

Now we need to install the types definitions for Phaser.io so that TypeScript can use them to enable autocomplete, type checking and all the other things for which you are using TypeScript instead of plain JavaScript.

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:

p2.d.ts
phaser.d.ts
pixi.d.ts

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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
class SimpleGame {

    game: Phaser.Game;

    constructor() {
        this.game = new Phaser.Game(800, 600, Phaser.AUTO, 'content', 
            {preload: this.preload, create: this.create});
    }

    preload() {
        this.game.load.image('logo', 'anyimages.png');
    }

    create() {
        let logo = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY, 'logo');
        logo.anchor.setTo(0.5, 0.5);
    }
}

window.onload = () => {
    let game = new SimpleGame();
}

Where 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.

tsc -w

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 localhost:8000

If everything is correct, you should see the image you loaded at the center of the black canvas.