{"id":662,"date":"2015-08-06T09:04:29","date_gmt":"2015-08-06T09:04:29","guid":{"rendered":"http:\/\/www.doolwind.com\/blog\/?page_id=662"},"modified":"2016-04-11T09:21:08","modified_gmt":"2016-04-11T09:21:08","slug":"phaser-with-visual-studio-2015-and-typescript","status":"publish","type":"page","link":"https:\/\/www.doolwind.com\/blog\/phaser-with-visual-studio-2015-and-typescript\/","title":{"rendered":"Phaser with Visual Studio 2015 and TypeScript"},"content":{"rendered":"

\"run\"<\/a>I’ve been playing with\u00a0Phaser<\/a>\u00a0recently\u00a0and I’m really liking it so far. I plan to use TypeScript<\/a>\u00a0for 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\u00a0a quick tutorial to help others get started with Phaser development in Visual Studio 2015 Community Edition using TypeScript.\u00a0The 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.<\/p>\n

    \n
  1. Download VS 2015 Community – http:\/\/visualstudio.com\/en-us\/products\/visual-studio-community-vs.aspx<\/a><\/li>\n
  2. Download Phaser source – http:\/\/phaser.io\/download\/stable
    \n<\/a>\u00a0 – Use whichever form you prefer (clone in github or download full source zip)<\/li>\n
  3. Create a new project –\u00a0Select Templates -> Other Languages -> TypeScript -> \u201cHTML Application with TypeScript\u201d
    \n    \"Phaser1\"<\/a><\/li>\n
  4. For the next two steps, find the phaser src directory you downloaded to in Step #2<\/li>\n
  5. Copy <phaser src directory>\\build\\phaser.js into the project (in\u00a0the root)
    \n    \"Phaser2\"<\/a><\/li>\n
  6. Copy the files below into your project (in the root)\n
      \n
    1. <phaser src directory>\\typescript\\phaser.d.ts<\/li>\n
    2. <phaser src directory>\\typescript\\pixi.d.ts<\/li>\n
    3. <phaser src directory>\\typescript\\p2.d.ts
      \n      \"Phaser3\"<\/a><\/li>\n<\/ol>\n<\/li>\n
    4. Add http:\/\/phaser.io\/images\/download\/run.png<\/a> to the project in the root<\/li>\n
    5. Your solution should look like this:
      \n      \"Phaser4\"<\/a><\/li>\n
    6. Edit index.html and include\u00a0the phaser.js script:\n
      <script src=\"phaser.js\"><\/script><\/pre>\n<\/li>\n
    7. Edit app.ts, remove all the existing code and replace it with:\n
      class PhaserDemo {\r\n\r\n    game: Phaser.Game;\r\n\r\n    constructor() {\r\n        this.game = new Phaser.Game(800, 600, Phaser.AUTO, 'content', { preload: this.preload, create: this.create });\r\n    }\r\n\r\n    preload() {\r\n        this.game.load.image('phaser_run', 'run.png');\r\n    }\r\n\r\n    create() {\r\n        this.game.add.sprite(0, 0, 'phaser_run');\r\n    }\r\n}\r\n\r\nwindow.onload = () => {\r\n    var game = new PhaserDemo();\r\n};<\/pre>\n<\/li>\n
    8. Press F5 to run
      \n– The page will load up in       http:\/\/localhost:<someport<\/a>>
      \n– You’re now ready for phaser game development<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
      I’ve been playing with\u00a0Phaser\u00a0recently\u00a0and I’m really liking it so far. I plan to use TypeScript\u00a0for 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\u00a0a quick tutorial to help others get started with Phaser development in Read More<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":{"jetpack_post_was_ever_published":false,"footnotes":""},"class_list":["post-662","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/PgEc5-aG","_links":{"self":[{"href":"https:\/\/www.doolwind.com\/blog\/wp-json\/wp\/v2\/pages\/662","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.doolwind.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.doolwind.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.doolwind.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.doolwind.com\/blog\/wp-json\/wp\/v2\/comments?post=662"}],"version-history":[{"count":0,"href":"https:\/\/www.doolwind.com\/blog\/wp-json\/wp\/v2\/pages\/662\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.doolwind.com\/blog\/wp-json\/wp\/v2\/media?parent=662"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}