Phaser with Visual Studio 2015 and TypeScript

runI’ve been playing with Phaser recently and I’m really liking it so far. I plan to use TypeScript for the language as it has a bunch of advantages over straight javascript. I found the Phaser tutorial was a little out of date so figured I would put together a quick tutorial to help others get started with Phaser development in Visual Studio 2015 Community Edition using TypeScript. The new Community Edition of Visual Studio is free for commercial use which means anyone running Windows can start making WebGL games in Phaser with a powerful IDE at no cost. Below are the instructions, if you find any problems please let me know.

  1. Download VS 2015 Community – http://visualstudio.com/en-us/products/visual-studio-community-vs.aspx
  2. Download Phaser source – http://phaser.io/download/stable
      – Use whichever form you prefer (clone in github or download full source zip)
  3. Create a new project – Select Templates -> Other Languages -> TypeScript -> “HTML Application with TypeScript”
    Phaser1
  4. For the next two steps, find the phaser src directory you downloaded to in Step #2
  5. Copy <phaser src directory>\build\phaser.js into the project (in the root)
    Phaser2
  6. Copy the files below into your project (in the root)
    1. <phaser src directory>\typescript\phaser.d.ts
    2. <phaser src directory>\typescript\pixi.d.ts
    3. <phaser src directory>\typescript\p2.d.ts
      Phaser3
  7. Add http://phaser.io/images/download/run.png to the project in the root
  8. Your solution should look like this:
    Phaser4
  9. Edit index.html and include the phaser.js script:
  10. Edit app.ts, remove all the existing code and replace it with:
  11. Press F5 to run
    – The page will load up in http://localhost:<someport>
    – You’re now ready for phaser game development