How to use Phaser with TypeScript

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.

This guide is based on TypeScript 0.9.5 and Visual Studio 2013. 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”.

part1

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

part2

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. Browse to the Phaser repository and within the build select the following 3 items: phaser.d.ts, phaser.js and phaser.min.js:

part3

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:

We need to add Phaser into this, so before the app.js line add:

You’ll notice there is a div tag in the html already with an id of content. We’ll use this to hook our game to. Save your changes.

Step 4: Edit app.ts

It’s nice of the TypeScript template to have given us the sample Greeter code in app.ts, but we don’t need any of it, so remove it all and replace it with the following:

Save this, it’s time to test it.

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:

part4

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

part5

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:

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:

part6

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:

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:

part7

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:

part8

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

part9

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:

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:

The final create function should now look like this (we’ve added a few line-breaks for readability):

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

A note about the Phaser TypeScript definitions file

We originally used an automated process to generate our TypeScript definitions file from the core JavaScript source code. However we found this introduced lots of data-type errors and we’ve been methodically patching them by hand since then. You are very likely to find there are some functions or properties that exist in Phaser that are not in the definitions file.

Equally some method signatures may be incorrect too. If you come across any please report them and we’ll fix them as a matter of urgency. If you find an error is holding back your project you can always edit the phaser.d.ts file in any text editor and correct the part that is wrong.

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.

Don’t forget to subscribe to our Phaser newsletter for details.

Posted on December 10th 2013 at 2:39 pm by .
View more posts in Phaser. Follow responses via the RSS 2.0 feed.


24 Responses

Leave a comment
  • Vaibhav Gupta
    February 12th 2014 at 7:29 pm

    hi, i just came to know about phaser. i am trying this and used the code above in app.ts. in line 4: Phaser is showing error “Could not find symbol ‘Phaser’.” although i did referenced in default.htm ” “. can you please help

  • February 13th 2014 at 9:33 am

    You may need to add a to the d.ts file at the top of you app.ts. For some reason certain set-ups require this (mine doesn’t, others do.. I don’t really understand why, it’s a Microsoft thing!)

  • Shana
    March 5th 2014 at 10:43 pm

    Hi.

    I’m French, and I don’t understood your last message :
    “You may need to add a to the d.ts file at the top of you app.ts”

    It is not something missing ?

    Cuz’ I tried to import Phaser by export all class in the file (By adding “export” before all modules), but it doesn’t work at all, that is to say, I juste have a black screen.

    I’ve tried everything, but nothing’s works.

    Can u help me ?
    Thanks :) .

  • Shana
    March 5th 2014 at 11:07 pm

    Excuse me, but now it works.

    I’ve just added ” /// ” on the top, and now, it works.
    I’ve added this earlier, but it doesn’t worked.

    Anyway, now it works, and it’s great \o/ .

  • Matt
    March 16th 2014 at 1:52 am

    I am having the same issue as the original comment.

    Could you clarify what you mean by “You may need to add a to the d.ts file at the top of you app.ts.”

    Thanks!

  • March 16th 2014 at 5:55 pm

    Yea.. none of the comments made this clear.
    The answer is to add the following line to the top or your app.ts file

    ///

  • March 16th 2014 at 5:57 pm

    ah .. this is and issue with the blog stripping tags..
    /// >reference path=”phaser.d.ts”/<

  • March 16th 2014 at 5:58 pm

    Doh! Here is the correct line…
    /// <reference path=”phaser.d.ts”/>

  • Matt
    March 17th 2014 at 1:44 am

    Thanks a lot Corey!

  • Den
    March 29th 2014 at 4:38 pm

    visual studio + project type script – not appear pop-up menu classes Phaser (also bad highlighted syntax). What need to install?

    Good lesson.

  • arrowhen
    June 6th 2014 at 4:21 pm

    If you paste in the correct line that Corey posted above and still get the “Could not find symbol ‘Phaser'” error, replace the right double quotes (”) with standard quotations marks (“) and it should work just fine.

  • arrowhen
    June 6th 2014 at 4:24 pm

    Ah… it seems the comments here turn normal quotes into “smart quotes”.

  • Nico
    July 9th 2014 at 12:36 pm

    Same here. In Visual doesnt have auto complete with popup …. what we need to install?

  • Yahiko
    October 7th 2014 at 12:20 am

    Your framework seems interesting and I’m trying to use it with TypeScript.

    However, it seems there are some issues with your TypeScript implementation.
    1) You define some WebGL typings without declaring them.
    To solve this, I’ve downloaded a WebGL TypeScript declaration (https://github.com/piersh/WebGL.ts/blob/master/WebGL.d.ts) and added a /// at the top of phaser.d.ts.

    2) Visual Studio 2012 generates a duplicate identifiers error in this declaration file phaser.d.ts. This is caused by the identifier Filter. The module Filter should be declared AFTER the class Filter in order to prevent this error.

    I’ve forked your project in order to add a WebGL.d.ts declaration and fix your file phaser.d.ts in the build folder: https://github.com/yahiko00/phaser

    And, in order to make your framework a little bit more visible, maybe you could upload Phaser on the Microsoft NuGet Gallery: https://www.nuget.org/users/account/LogOn?ReturnUrl=%2Fpackages%2Fupload
    This will help users like me to download phaser a little bit more easily.

    Best!

  • C-Chan
    November 13th 2014 at 3:43 pm

    Great stuff. Your tutorials are really informative.

    Just a small note, I believe the link to the Phaser logo has changed, but you are still are able to get the Phaser logo easily. So not a big problem

  • recursor94
    January 18th 2015 at 2:44 am

    I recently read a thread posted by Rich from 2013 that he was dropping typescript support.

    is that still accurate or is it safe to write a project in typescript?

    If so I’m getting some bizarre errors

    For example:

    boot.ts(15,20): error TS2339: Property ‘pageAlignHorizontally’ does not exist on type ‘Point’.
    boot.ts(20,14): error TS2339: Property ‘scaleMode’ does not exist on type ‘Stage’.
    boot.ts(20,33): error TS2339: Property ‘StageScaleMode’ does not exist on type ‘typeof Phaser’.
    boot.ts(21,14): error TS2339: Property ‘forceLandscape’ does not exist on type ‘Stage’.
    boot.ts(22,20): error TS2339: Property ‘pageAlignHorizontally’ does not exist on type ‘Point’.
    boot.ts(23,20): error TS2339: Property ‘setScreenSize’ does not exist on type ‘Point’.

  • Asmodean
    January 25th 2015 at 1:38 pm

    It seems that this tutorial is a little bit outdated.
    1. If you have only Windows 7 you can use Visual Studio 2013 Express Web. That works without a problem with Typescript.
    2. The phaser.d.ts file is now in the typescript folder, not in the build folder. You need phaser.js and phaser.min.js from the build folder and phaser.d.ts from the typescript folder.
    Download it direct from the Github https://github.com/photonstorm/phaser or download the whole zip-file.
    The picture you should download is renamed is now called phaser-logo-small.png you can get it here: https://raw.github.com/photonstorm/phaser/master/phaser-logo-small.png
    You have to rename the image to phaser2.png and copy it to your poject folder

  • dmennenoh
    March 24th 2015 at 2:17 pm

    I got this basically working, however after adding the ///reference path to phaser.d.ts I get the same sort of errors about not finding PIXI and pixi.d.ts

Make yourself heard