Jump to content

How to use Phaser with SystemJS and TypeScript?


chibinaru
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 1 month later...
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/

Link to comment
Share on other sites

  • 1 month later...

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
 
 
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.

Guest
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.

Loading...
 Share

  • Recently Browsing   0 members

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