VS Code setup with Phaser and TypeScript

[Majirefy]

I want to setup a Phaser project via npm:

npm install --save phaser-ce

When I put some code in a *.ts file, TSLint in VS Code will always say "cannot find name 'Phaser'".

I can use triple-slash reference, but are there any better ways to do that? Or there are some tutorials on how to setup a project via NPM in TypeScript? Using NPM will be easier to keep Phaser up-to-date instead of downloading *.js and *.d.ts files respectively.

Although there are many templates to help us setup a project with Phaser+Webpack+TypeScript, I think it's better to learn how to setup, so I could do more on it myself such as bundling Cordova and Eletron with Phaser in TypeScript.

 

Thanks for advance!

[Tom Atom]

I do not use any template (except for cloning basic project of mine), but setup is easy:

1] create new project "HTML Application with TypeScript"
2] adjust your directories structure on disk and in VS like this:

on left, there is screenshot from file manager - I added:
 - "assets", where I have all game assets,
 - "css", where I put style files,
 - "lib" where I have all typescript definitions (keep name "lib" - it seems VS looks for this name),
 - "src", where I put all source code

 Copy phaser.js and *.d.ts into lib. Also copy phaser.js and phaser.min.js into js folder.

 on right is screenshot from VS. I am not adding all dirs into it - like assets. I do not edit assets in VS, so I do not care.

3] open project properties (right click on project in solution explorer and select the most bottom choice):

 Here you can setup merging of all your compiled output into one file. I am setting here output name and path. Notice, that part of the path "js/" is in my output file name. This is some bug or hack, how to force VS to store it into js folder. Also do not forget to adjust your index.html to load your output file.

4] after compilation, your final product for distribution is in these folders: assets + css + js + index.html

 

[Majirefy]

24 minutes ago, Tom Atom said:

I do not use any template (except for cloning basic project of mine), but setup is easy:

1] create new project "HTML Application with TypeScript"
2] adjust your directories structure on disk and in VS like this:

on left, there is screenshot from file manager - I added:
 - "assets", where I have all game assets,
 - "css", where I put style files,
 - "lib" where I have all typescript definitions (keep name "lib" - it seems VS looks for this name),
 - "src", where I put all source code

 Copy phaser.js and *.d.ts into lib. Also copy phaser.js and phaser.min.js into js folder.

 on right is screenshot from VS. I am not adding all dirs into it - like assets. I do not edit assets in VS, so I do not care.

3] open project properties (right click on project in solution explorer and select the most bottom choice):

 Here you can setup merging of all your compiled output into one file. I am setting here output name and path. Notice, that part of the path "js/" is in my output file name. This is some bug or hack, how to force VS to store it into js folder. Also do not forget to adjust your index.html to load your output file.

4] after compilation, your final product for distribution is in these folders: assets + css + js + index.html

 

Thanks for reply!

But I want to use Visual Studio CODE.

Visual Studio is very very very powerful. It can save a lot of time.

Also, I want to use NPM to keep everything up-to-date.

I use Visual Studio Code on Mac and Linux, what should I do?

[Tom Atom]

Hmmm... I do not have experience with VS Code. It is lightweight, so I think it will be closer to command line compiling, which is easy for TypeScript. Probably using tsconfig.json somewhere in project.

Try to read this thread:

 there are some informations on how compiling works and how to avoid "///" references. Your problem looks like some missing path to defs. First try to copy them directly into source folder to see, if it compiles.

[Majirefy]

@Tom AtomThanks!

I will try it later. I love TypeScript, so these obstacles shall not stop me using Phaser with TypeScript.

[Rune Kode]

There is a Phaser + Typescript starter project here:

https://github.com/rroylance/phaser-npm-webpack-typescript-starter-project

Tried it a couple of days ago, looked good. No errors in VS Code.

[Majirefy]

@Rune Kode Thanks for your work! I really love that.

What I am doing now is make a project like yours by myself. So I can learn how to bundle all these things together, and do more in the future.

@Tom Atom And eventually I found why TS compile cannot find Phaser:

There are duplicate files of Phaser defination file:phaser.d.ts and phaser.comment.d.ts.

In genneral, we do not need these *.comment.d.ts files. After simply deleting these comment files, everything is well now.

This topic discussed about these unuseful comment files:

And it will be fixed next week:https://github.com/photonstorm/phaser-ce/pull/33

But I do not know why we should have two files...

[Rune Kode]

It isn't my work. The starter template was featured in the latest issue of Phaser World