Jump to content

How to use the Phaser in Visual Studio 2017


IsmaelGames7
 Share

Recommended Posts

Hello guys,


I wanted to know how to use the phaser in visual studio 2017?
I know you have this tutorial: https://phaser.io/tutorials/how-to-use-phaser-with-typescript 
Only that from 2013 until 2017 much has changed, If someone could update the tutorial, it would help a lot. :D
Also if someone can teach you how to add syntaxes to the autocomplete, it would help.
The syntaxes in auto completer are missing a lot, especially for those who are starting!!

Link to comment
Share on other sites

 

10 hours ago, IsmaelGames7 said:

I wanted to know how to use the phaser in visual studio 2017?
I know you have this tutorial: https://phaser.io/tutorials/how-to-use-phaser-with-typescript 
Only that from 2013 until 2017 much has changed, If someone could update the tutorial, it would help a lot. :D

1

Were you not able to follow the tutorial in VS2017? I'm not at my desktop currently and don't have VS2017 installed, but I was able to follow the same project setup process I'd been using with VS2015 in 2017 without any hassle. The guide on the Phaser site is old, but the basic project setup hasn't really changed radically.

Link to comment
Share on other sites

Hi, long time ago, I wrote simple tutorial http://sbcgamesdev.blogspot.cz/2015/05/phaser-tutorial-dronshooter-simple-game.html - it is for VS2013 and change of web.config file is not needed anymore, but I use the same in VS2015. I do not believe VS2017 is so different.

Tutorial is good for very small one-file projects. For larger ones, try to read these posts (it is about structuring project and merging output into single file)

 

 I think your main problem is, that VS cannot find defs. For me it worked to put it into "root" directory - as in tutorial - or into lib directory for larger projects. This is my structure - left in VS and right on disk (I do not put assets into VS, beacuase I never needed it). Along with settings in linked posts it merges all compiled files into one output, saves it in js directory and thanks to post build events it uglifies it in Release mode.

Project.png.c94f0106a282e1fb65b807c7389a2824.png

Link to comment
Share on other sites

  • 5 months later...

Good morning everyone!

I have the same issue with Visual studio communiy 2017, I haven't find a way to let Visual studio see Phaser.

I've copied:

p2.d.ts

phaser.d.ts

phaser.js

pixi.d.ts

I've even added package.json as I've read in a guide.

I've put Phaser folder in the environment variable.

I've launched the typings command for Phaser.

But after all of that there is no way to compile.

 

The officiale guide, based on Visual studio 2013, tell to create a new project "HTML Application with TypeScript" that it doesn't even exists in Visual studio community 2017.

Someone have found a way?

 

Thanks everyone!

Link to comment
Share on other sites

Hi, still on VS 2015, but friend of mine had the same problem in VS 2017 as you have - missing tamplate. It looks this template is not in VS 2017 anymore...

...but, some guy created it. Try it here and let others know, if it worked: https://marketplace.visualstudio.com/items?itemName=Rich-Newman.TypeScriptHTMLApplicationTemplate

For me, in VS 2015, worked always to put Phaset stuff into "lib" folder.

 

Link to comment
Share on other sites

Thanks Tom, now I can compile Typescript in Visual Studio community 2017... but there is no way to compile Phaser code :-(

If I put the files in the folder it says there is no Phaser.

If I install Phaser from Bower (in Visual Studio community 2017) it says there is no Phaser.

If I do both it say that I've double declarations.

Link to comment
Share on other sites

Could you put screenshot of your project hierarchy here?

You can also try to put Phaser reference to the top of your file - something like this:

/// <reference path="../lib/phaser.d.ts" />

For me, I do not have to do it - VS finds all *.d.ts files in lib folder, but it may help to explicitely set reference to it.

Link to comment
Share on other sites

This is the last try I've done yesterday.

First installed Phaser via Bower directly on Visual Studio project properties.

Then I put Phaser in the project folder (I do both edited the tsconfig.json and put the files on hierarchy... doesn't change anything).

Then I do both solution and now VS tell that it have duplicated identifier, declaration, ecc... but writing some Phaser code on app.ts it said that could not find Phaser.

Tried with Phaser 2.6.2 and Phaser CE 2.9.2 (separatly).

PhaserTest1.jpg

PhaserTest2.jpg

Link to comment
Share on other sites

Good morning!

I've an update.

I've uninstalled any Pixi.js and any Phaser I've installed (npm, @types, bower via Visual studio), then I've copied just the famous 4 files in the root of the project, now it see Phaser and compile... but launching the test give a white screen unless I put a <script src="//cdn.jsdelivr.net/phaser/2.6.2/phaser.min.js"></script> in the head of my html.

Google Chrome console log says:

Uncaught ReferenceError: Phaser is not defined
    at new PhaserDemo (phaserdemo.ts:6)
    at window.onload (phaserdemo.ts:23)

Anyone can understand why?

Link to comment
Share on other sites

  • 1 month later...

VisualStudio2017コミュニティ


私は普段、JSとHTMLを使用しません。
基本がわかっていないです
。HTML編集を行って、エーラーはやや減りました。
動画をいろいろ見てやっています
。Phaser公式サイトの説明はファイル導入の説明がかかり欠けていて不便です。

 

 

 

Link to comment
Share on other sites

  • 1 month later...

Thank you for the information on this thread. For anyone having the same issues this is what i had to do to resolve the problem. 

I download and installed the html-typescript template that was missing. After that i needed to download and install microsofts IIS Express for the template to actually work when creating a new project. Visual Studio informed me that the TypeScript version in the template does not match the TypeScript version that I have installed. After allowing Visual Studio to update my template to the new version of TypeScript everything seems to be working. From there i just followed the tutorial. 

 

HTML-TypeScript-Template: https://marketplace.visualstudio.com/items?itemName=Rich-Newman.TypeScriptHTMLApplicationTemplate
Microsoft IIS Express: https://www.microsoft.com/en-us/download/details.aspx?id=48264
Phaser TypeScript Tutorial: https://phaser.io/tutorials/how-to-use-phaser-with-typescript

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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