How to use Phaser with SystemJS and TypeScript?

[chibinaru]

Hey guys, this is driving me insane.

I created a working Angular 2 project using TypeScript and SystemJS.

SystemJS couldn't load Phaser properly, so I kept getting errors along the lines of "PIXI is undefined", or "Phaser.Game is not a constructor".

I solved those errors by including a reference to Phaser.js inside my index.html file, but now WebStorm can't properly autocomplete Phaser methods because it's no longer recognized as a module, just as a global variable declared inside index.html.

Is there a way to properly include the Phaser module using SystemJS, or at least make WebStorm autocomplete Phaser classes and methods?

[samme]

Check out https://github.com/photonstorm/phaser/blob/master/README.md#browserify--cjs and "Webpack", following, it may be similar.

[Aquarius]

I am making my game with Angular 2, Angular CLI, and TYPESCRIPT :
https://github.com/AquariusFR/_game_01-06

[chibinaru]

Thanks for the replies. I tried configuring SystemJS but I'm not so experienced in module loaders/builders so I gave up.

For now, this is the solution I came up with in order to have a working project AND coding assistance:

 

- include phaser.js in the index.html file: 

<script src="../node_modules/phaser-ce/build/phaser.js"></script>

 

- whenever you have to use Phaser inside a module, instead of writing an ES6 import, reference the path of the phaser typings file:

/// <reference path="../../node_modules/phaser-ce/typescript/phaser.d.ts" />

^ this will also enable the typescript code assistance of any capable IDE.

 

While this is obviously not an ideal fix, it works. I'll use it and refactor to something better once I have the time.

[mikkoh85]

On 31.3.2017 at 7:53 AM, chibinaru said:

Thanks for the replies. I tried configuring SystemJS but I'm not so experienced in module loaders/builders so I gave up.

For now, this is the solution I came up with in order to have a working project AND coding assistance:

 

- include phaser.js in the index.html file: 

<script src="../node_modules/phaser-ce/build/phaser.js"></script>

 

- whenever you have to use Phaser inside a module, instead of writing an ES6 import, reference the path of the phaser typings file:

/// <reference path="../../node_modules/phaser-ce/typescript/phaser.d.ts" />

^ this will also enable the typescript code assistance of any capable IDE.

 

While this is obviously not an ideal fix, it works. I'll use it and refactor to something better once I have the time.

This really made my project to work. Thank you. Have you found any more "elegant" way to do this yet? I am planning to use FireLoop, Angular CLI and Phaser Typescript to build some awesome multiplayer html5 games. I have good knowledge with LoopBack, Socket.IO and Angular 2 already. Now just some training with Phaser, and Vóila. I made a chess game with this same technology but without Phaser: http://52.174.198.187/

[alexagain]

I'm using angular cli 1.2.0, I was trying to get the set up the phaser hello world example in an angular cli project. 

I was getting this error in the browser

ERROR ReferenceError: PIXI is not defined

To get the phaser hello world example to work I had to update the "scripts" in .angular-cli.json with the following

      "scripts": [
        "../node_modules/phaser-ce/build/custom/pixi.js",
        "../node_modules/phaser-ce/build/custom/p2.js",
        "../node_modules/phaser-ce/build/custom/phaser-split.js"
      ],

 

Here is an an example project

https://github.com/alex-walker/angular-phaser

 

 

[samme]

On 5/9/2017 at 7:50 AM, mikkoh85 said:

This really made my project to work. Thank you. Have you found any more "elegant" way to do this yet?

See also phaser-ce/typescript#readme.