Start Developing HTML5 games in Phaser using TypeScript

TypeScript is a superset of JavaScript which compiles to plain JavaScript. Anyone with an intermediate knowledge in JavaScript knows that as the project complexity increases, the number of classes and script files increases. JavaScript differs from other languages and the OOP is done through prototypical inheritance. Lack of typing and intellisense in IDE is another problem. TypeScript solves all these and helps developers with all the things they need – typing, auto-completion etc. TypeScript came from Microsoft and thus both Visual Studio and Visual Studio Code has full support for the syntax with intellisense.

You may already have read lots of articles about how html5 is the future of web games and I am not going to put the same things that written everywhere in this post. In an older post, we’ve created a concentration game in phaser. That was written in pure JavaScript. We know that coding a game is not easy in JavaScript if it contains lots of classes and methods causing confusion with our own code at a later time. To know about the variables and argument types we open the class and check the implementation again. As said earlier, TypeScript solves this by providing intellisense inside supported IDEs. It is provided as a typing file for the library we use. In this article we will learn how to start html5 game development using phaser and typescript using Visual Studio Code.

Also Read:   Godot Engine game tutorial for beginners – Create a 2D Racing Game 1

Install NodeJS

TypeScript compiler runs in NodeJS environment. The first step is to install NodeJS. You can refer to the official nodejs website for that.

Offical NodeJS website: https://nodejs.org/en/download/

Next, create a folder for our game. Go inside that folder and run

npm init

This will ask some details about our project, you can ignore those by pressing the ‘Enter’ key for every question. It will create a package.json file inside the directory. This keeps a record of the node packages we use inside this project.

Install TypeScript

NodeJS has a package manager – npm. A node package can be installed by running the below command in a terminal. This works on Windows, Mac and Linux as long as NodeJS is installed in our system.

npm install packagename

If we install a package, it will be installed inside our project folder. Most of the time, it is enough. Sometimes we use things everywhere, for example, we don’t want to install TypeScript as a local module inside our project. We will install the module globally so it will be available system wide and not exclusive for a specific project. Phaser is also available as a node module so install that first.

npm install phaser-ce --save

Then install the TypeScript and TSLint modules like this.

npm install -g typescript --save

The ‘-g’ tells npm to install the modules globally.

Also Read:   Creating a PHP website using MVC – 4 Creating Model class

After running the above command, check if it is installed by running

tsc -v

This will show the installed TypeScript compiler version. If it does give an error about ‘tsc’ command not found or something like that, we need to re-install the typescript module by doing the previous step again, preferably as an administrator with root privileges.

Install Visual Studio Code

Go to the official vscode website and install it. Open it and drag our project folder to it. Now our project folder is opened and the side panel will show the files in it.

Create a new file called tsconfig.json and type this inside

{
    "compilerOptions": {
        "target": "es5",
        "outDir": "js",
        "sourceMap": true,
        "watch": true
    },
    "files": [
        "node_modules/phaser-ce/typescript/phaser.d.ts",
        "node_modules/phaser-ce/typescript/pixi.d.ts"
    ],
    "include": [
        "ts/**/*.ts"
    ]
}

If you get an auto-completion for any of those parameters, then everything is perfectly working.

The tsconfig settings will tell the TypeScript compiler how to compile our code and where to put the resulting JavaScript files. You can change the directory if you want. I’d like my project structure to look like this.

project dir/
    dist/
    lib/
    js/
    ts/
    assets/
    css/
    node_modules/
    index.html
    package.json
    tsconfig.json

Install Typings module

We know that TypeScript provides the auto-completion and suggestions from the typings files for a library. Phaser provides the required typings files for every version released. We can use those but before that, install the typings module.

npm install -g typings

We’ve already added phaser typings by including those in the typings.json file. So nothing more needed.

Start developing Phaser games using TypeScript Click To Tweet

Setup VSCode Task Runner

Open VSCode and press Ctrl + Shift + P, type ‘task runner’ and select the option ‘Configure Task Runner’. Choose ‘Others’ and hit enter.

Also Read:   Godot Engine game tutorial for beginners – Create a 2D racing game part 7

This will create a tasks.json file inside .vscode directory. By default it looks like this.

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "taskName": "echo",
            "command": "echo Hello",
            "type": "shell"
        }
    ]
}

But it doesn’t help for our typescript environment. So change it to something like this.

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "type": "typescript",
            "group": {
                "kind": "build",
                "isDefault": true
            },
            "tsconfig": "tsconfig.json"
        }
    ]
}

Create app.ts file inside the ts folder and type something like

var game = new Phaser.Game(400,200,Phaser.AUTO,'game');

After writing code in TS, you can press Ctrl+Shift+B to compile our TS code to plain JS. It will compile and put the JS inside our js folder. After compiling the ts files, the task runner will watch for any changes and auto update the js files accordingly.

You can see it shows intellisense and autocompletion for Phaser library. That’s it and see you next time.

Never miss any content from Codetuto!

Subscribe to Codetuto Newsletter and be the first to recieve our latest posts and tutorials

Subscribe Now For Free

[Total: 3    Average: 5/5]