Phaser Starter Project for WebStorm and Chrome: Modular TypeScript, Code Completion, and Live Debugging

Game in Action


Getting started with TypeScript and Phaser on OSX and Ubuntu has been a tricky proposition. My requirements for a development environment were as follows:

  • Use TypeScript as the primary language
  • Break the project into small files – preferably one module or class per file
  • Have all the benefits of TypeScript utilized by my IDE, namely code completion, error checking, and documentation for function signatures
  • File watchers that generate javascript and source maps on file save
  • Live debugging of TypeScript files

Thanks to the latest WebStorm (6.0.2 v129.541 as of this writing), Require.js, and Chrome DevTools, I have a great development environment set up to create Phaser games on OSX and Linux. Here’s how I did it:

First, grab the starter project from my GitHub account (thanks to Jesse Freeman for the inspiration).

git clone

Then get the following four files from the Phaser ‘build’ folder:

  • phaser.js or phaser.min.js
  • phaser.d.ts
  • phaser-fx.js or phaser-fx.min.js
  • phaser-fx.d.ts

Copy those files to /phaser-webstorm-template/lib/

Then download require.js and put it in the same lib folder.

The contents of the lib folder

The contents of the lib folder

Now start WebStorm 6 (get the EAP version here). Close the existing project if it is open, and go to the welcome screen. Choose Create New Project from Existing Files. Then choose Source files are in a local directory, no Web server is yet configured and click Next.

A file selection window should appear. Find the phaser-webstorm-template folder, select it, and click the Project Root button. Then click Finish.

Find the phaser folder and make it the project root.

Find the phaser folder and make it the project root.

When the project finishes loading, open game/game.ts. After a few seconds, WebStorm should prompt you to add a ‘TypeScript’ file watcher. Click the Add Watcher link.

Click 'Add Watcher' when prompted.

Click ‘Add Watcher’ when prompted.

Once the watcher is added, go the the Webstorm menu (File menu in Linux) and open Preferences…. Click File Watchers under the Project Settings section, and double click the TypeScript entry. When the Edit Watcher window appears, add the following text to the Arguments: field:

 --target es5 --module amd
Edit the File Watcher settings.

Edit the File Watcher settings.

Click OK and return to the code editor. Open game/objects/Player.ts and also game/game.ts if it is not open already. Manually save both files to trigger the file watcher and regenerate the javascript and source map for each file. If this was successfull, the .js and files will appear underneath their respective .ts files, and can be viewed by clicking the expand arrow (see screenshot below).


You should now be able to use WebStorm and have lots of assistance for TypeScript. Code completion, method signatures, documentation, error reporting, and all the other benefits of WebStorm should now be available.

Code hinting should be working in .ts files.

Code hinting should be working in .ts files.

For live debugging of code, open Google Chrome and point it to http://localhost:63342/phaser-webstorm-template/index.html and open the Chrome DevTools (Cmd-Alt-i on OSX, F12 on Linux). Click the Settings button (the little gear icon in the bottom-right corner of the DevTools window). Check the box next to Enable source maps in the General section.

Enable source maps.

Enable source maps.

Now, from the Sources tab, you should be able to open the Player.ts and game.ts files and set breakpoints and watch expressions and step through the code one line at a time! Awesome, right?

Chrome Debugging

That’s basically it. WebStorm apparently has TypeScript debugging built in as well, but I’ve had trouble getting it to work reliably. Once I do, I’ll update this post with info on live debugging from within WebStorm as well. Also in the works is a screencast and more in-depth explanation of the actual code within the project itself. Stay tuned.

Special thanks to Photon Storm for the Phaser framework, Jesse Freeman for the original Phaser project template, and Luke Hoban for help debugging my modular TypeScript.


  1. Which addon did place that bug icon on the awesome bar?

  2. That would be the JetBrains Chrome extension. It allows debugging of javascript in WebStorm, as well as Live Reload.

  3. Hi, great guide, thanks a lot for sharing.

    Which version of Typescript were you using when you made this? The reason I ask is that I have just followed it but am getting a lot of errors. All of them currently are “error TS1046: ‘declare’ modifier required for top level element” errors so I was wondering if this is due to the new release of Typescript (0.9.0)?


  4. That’s very possible. I was using Typescript 0.8.4 with this example, so it may be outdated already. Both TypeScript and Phaser are going through some pretty major changes right now, so I’ll likely update this guide later on when Phaser 1.0 is released.

  5. Fair enough, thanks for the reply. I actually installed version 0.8.3 of Typescript (couldn’t find a version 0.8.4?) and got the demo working without any errors so Phaser must be incompatible with 0.9.0.

    Looking forward to Phaser 1.0! :)

  6. Hi there,

    nice job! I can not found the phaser-fx.js and phaser-fx.d.ts file they are removed from the repository…

    Cheers Josef

  7. Hi,we’re using Chutzpah under Visual Studio 2012. When we click Run JS Tests in browser our stlooiun directory is polluted with _Chutzpah files. Strangely, when we click Run JS Tests , we do not get these _Chutzpah files. I’ve tried updating Chutzpah and adding a chutzpah.json settings file, but that doesn’t appear to fix the problem. Can you advise us on how to avoid these _Chutzpah files, or at least tell Chutzpah where to put them, when running our tests in browser?Many thanks! Ralph

  8. I’m impressed you should think of something like that

  9. Typescript seems to deserve much more than I thought earlier.

  10. Jag har kollat pÃ¥ videon som visar hur man lägger upp media men det är nÃ¥got fel! Knappen ”Välj filer att ladda upp” existerar inte! den finns där men den tar ej när jag klickar pÃ¥ den. Vad ska jag göra?

  11. Oiii paz do senhor? o meeu dejeadalpe esta precisando de um JOGRAL falando sobre a vida de JOSÉ o teema esta em GENESES CAPITULO 39 VERSICULO 2 PARTE A. porfavor nos ajudeem.

  12. cho minh hoi:+ hoc truong nay ra thi lien thong dai hoc gran the nao?(cac dieu kien de dc lien thong?)+ viec cap bang la bang dai hoc cua truong?+ sau khi hoc xong co dc line thong len DH FPT khong?dieu kien lien thong la gi?

  13. It is not our purpose to become each other it is to recognize each other, to learn to see the other and honor him for what he is.

  14. Do one with 5k first so I know you’re legit then I’ll let you do my 10m

  15. thanks for the great ideas , which will be helpful.

  16. I have noticed you don’t monetize your website, don’t waste your
    traffic, you can earn additional cash every month because
    you’ve got high quality content. If you want to know how to make
    extra bucks, search for: Mertiso’s tips best adsense alternative

Leave a Reply

Your email address will not be published.


© 2018 Eric Terpstra

Theme by Anders NorénUp ↑