Jump to content

New tutorial: How to use Phaser with TypeScript


Recommended Posts

I've just completed Part 1 of a tutorial on using Phaser with TypeScript. There were a few kicking around from pre 1.0 versions, but this one is bang up to date, with TypeScript 0.9.5 and Phaser 1.1.3.




Part 2 will show how to use the more advanced features of TypeScript with Phaser, like extending classes and state management.

Link to comment
Share on other sites

Ahhh knowledge from the source. :P Thanks Rich.


Honestly the only reason to start using typescript was because Phaser used and this was a sign for a good and structured codebase.


Now more than half an year later I see that the good codebase is made by the developer, but still TypeScript can save you some  headaches and help with code organization.


So useful tutorial and Part 2 will be surely needed.

Link to comment
Share on other sites

The tutorials were written (and compiled) using 0.9.5, but I'll draw your attention to this part at the beginning :)


"Note: At the time of writing the most accurate TypeScript definitions file is here in the dev branch of Phaser (click the “Raw” link to download it). Please use this one for the rest of this tutorial. We’ll remove this notice when it moves from dev to master."

Link to comment
Share on other sites

  • 1 month later...

So I'm following along with the tutorial - http://www.photonstorm.com/phaser/how-to-use-phaser-with-typescript.  I got to Step 5 'Test you game' and the image displays correctly as shown below.  I am concerned because at this point I am getting 10 build errors in Visual Studio 2013.  


The errors are all the same and state, "The property 'game' does not exist on value of type 'SimpleGame'.  It's obviously working as I'm seeing the image in my browser.  But why does it not recognize game?  I made sure I have the latest TypeScript definitions from the dev branch.


It's more a matter of convenience because I'm unable to use code completion for anything following 'game'.  I just realized after I posted this that my code completion is not working as expected.  In Step 6, it tells me to type in 'logo.' and I should get a pop-up with all the properties of a Phaser.Sprite object but no pop-up appears.  I'm assuming this is directly related to my errors.




Any ideas?



Link to comment
Share on other sites

Have you tried adding a <reference> to the phaser.d.ts file at the top of your TS files?

Rich, no I have not.  Honestly, I'm unsure of how to do this (correct syntax and all.)  Would you be able to post the line of code that adds the reference?


I'm used to adding references in vb and c# (imports and using), just never worked with TypeScript before.

Link to comment
Share on other sites



Once I add the 3 files to my project (phaser.js, phaser.d.ts, phaser.min.js) I'm supposed to grab the latest TS definitions using RAW view from the following link https://raw2.github.com/photonstorm/phaser/dev/build/phaser.d.ts, correct? I went to RAW, selected all content and copy pasted it into my projects phaser.d.ts file.  Was this correct?


Here is a screen grab of my curren situation.  Does anything obvious stand out to you?




Thanks in advance.  I know you're getting over being sick, so I appreciate your help.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...