Part 1 - Introduction

In this tutorial we'll cover setting-up a Phaser TypeScript project. We're going to specifically cover using Visual Studio, but the concepts will be similar regardless of which IDE you're using.

Rapidly Evolving TypeScript

This guide was written when TypeScript was on version 0.9.5 and using Visual Studio 2013. TypeScript is being rapidly updated, so if you find any problems with the current guide against the latest release please leave a comment and we'll update it.

Ensure you have both of these installed before carrying on, as it probably won't work with earlier builds of TypeScript. You will also need a local copy of the Phaser repository. See the Phaser Getting Started Guide for details on how to download this.

Step 1: Create a New Project

In Visual Studio create a new Project. Make sure you pick "HTML Application built with TypeScript" as the Template, which can be found under the TypeScript template category on the left. We've called our sample project "PhaserTypeScript".

After a short while it will create the Solution and open a file called app.ts containing the default TypeScript Greeter class example:

Step 2: Add the Phaser files to the Project

The first thing we need to do is add the Phaser build files and TypeScript definitions file into the Project. To do this select "Add Existing Item" from the "Project" menu in Visual Studio (or press Shift + Alt + A). It will open a standard Windows File Explorer.

As of Phaser 2 the TypeScript definitions are found in a folder called typescript in the root of the repository. You need to select the phaser.d.ts file from there. If you have an earlier version of Phaser the defs file can be found in the build folder.

You will also need the phaser.js and phaser.min.js files. You will find these in the build folder no matter which version of Phaser you're using:

The files should all appear in the Solution Explorer window. Visual Studio has copied them from the Phaser repository over into the Project folder, so remember this if you ever update Phaser; it won't automatically update our Visual Studio projects too.

In order to complete this part of the tutorial you'll also need to download this image file and save it to your Project folder. So it should be saved in the same place as default.htm, app.ts, and the other files.

Step 3: Edit default.htm

Double-click default.htm to open it and you'll see the standard boilerplate that the TypeScript template inserts:

Step 5: Test your 'game'

It's time to test our game out. To do this either press F5 (Start Debugging) or click the green play arrow next to your browser of choice on the top menu:

After a brief compilation step, Chrome or your default browser should open displaying our test game:

You'll notice it has connected to localhost on port 5407. Visual Studio selects a port at random, so if your page loads on a different port then don't worry. Hopefully if you've got the paths correct and copied the files over then you'll see a Phaser logo displayed in the middle of your game.

If you received errors about being unable to find Phaser then it's possible you may need to directly reference the definitions file in your code. If so, add this as the top line of app.ts:

/// <reference path=”phaser.d.ts”/>

Now let's return to our project. First close the browser window it opened and then swap back to Visual Studio. You'll notice that it's got an orange glow around it because it's running in Debug mode:

Click the red stop icon to end Debug mode (or press Shift + F5).

Step 6: The power of Code Completion

So far, so good. Now let's scale the sprite in size, which will help demonstrate a powerful feature of using Phaser within TypeScript: code completion. Back in app.ts, after the line:

logo.anchor.setTo(0.5, 0.5);

Start a new line and type in logo. - upon entering the period character you should see a pop-up menu showing all of the properties you can explore within a Phaser.Sprite object:

Select scale from the pop-up list. It will fill the code in for you. Now press period again and a second pop-up menu will appear, showing all the properties that scale has:

Pick setTo from the list and enter an opening brace: ( - this will trigger the final part of code-completion, the parameters list:

By looking at this you know that the setTo method expects two number values. We can now complete our line of code safe in the knowledge we're giving it what the compiler (and Phaser) expects:

logo.scale.setTo(0.2, 0.2);

If you press F5 you should see a tiny scrunched-up logo in the middle of your game. Using this same process enter the following line of code after the scale call:

Press F5 and the logo will now bounce into the screen, wobbling for a few seconds before settling down.

Next Steps

This has served as a basic introduction to using Phaser with TypeScript. The next article in the series is Advanced TypeScript Project Structures. This covers using TypeScript features to extend Phaser classes and our approach for a project structure.