Using Phaser on ionic

Ionic Framework ionic-v3
1

I’m trying to use Phaser on an Ionic 2 app, but I didn’t manage to do it

I’ve installed the NPM package :

npm install --save-dev phaser

Import it on my .ts :

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Game } from 'phaser';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {
    console.log(Game);
  }
}

Error on ionic serve :

        Typescript: ...node_modules/phaser/typescript/typings.json, line: 4
   L3:  "main": "phaser.comments.d.ts",
   L4:  "files": ["pixi.comments.d.ts", "p2.d.ts"],
        ';' expected.

        File '/node_modules/phaser/typescript/typings.json' is not a module.
   L2:  import { NavController } from 'ionic-angular';
   L3:  import { Game } from 'phaser';

Error on chrome :

Runtime Error
PIXI is not defined
Stack
ReferenceError: PIXI is not defined
    at Object.<anonymous> (http://localhost:8100/build/main.js:127930:11)
    at Object.<anonymous> (http://localhost:8100/build/main.js:207709:4)
    at Object.<anonymous> (http://localhost:8100/build/main.js:207715:30)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at Object.<anonymous> (http://localhost:8100/build/main.js:52570:65)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at Object.<anonymous> (http://localhost:8100/build/main.js:93463:75)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at Object.<anonymous> (http://localhost:8100/build/main.js:82205:73)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)

PIXI js files ae bundled into Phaser, so I don’t understand why it’s not found…
I try to solve webpack config issue but no success (https://github.com/photonstorm/phaser/issues/2762)

Anyone knows how to import Phaser on ionic2 porject?

2

only because pixi is bundled the phaser package, does not mean it will land in your final package. Webpack crawls through your imports and only bundles what it sees you are using.

try to import pixi as well. I played around with phase + es6 and webpack yesterday, and there you need to import it as well.

3

Ok thanks for your answer,

Do you mean

  1. Import pixi by getting the pixi npm package and then import it in my ts
  2. Or import the phaser’s bundled pixi?

image
Capture.PNG199×570 18.6 KB

I guess you mean the bundled pixi, but I don’t know how to proceed :smirk:

4

Hi guys,

I have tried to implemented Phaser + ionic 2 and I get this error as well. Did you find any issue ?
Is it possible to implemented phaser without webpack ?

Thanks

5

Did you find a solution?

6

Hello! Did you find a solution?

7

Hey, Did anyone of you find the solution?

8

The following procedure works for me with ionic 3.x. If anyone find something cleaner than copying the phaser js to the project i’ll be interested.

my conf :

cli packages:

@ionic/cli-plugin-proxy : 1.4.3
@ionic/cli-utils        : 1.8.1
ionic (Ionic CLI)       : 3.8.1

System:

Node : v6.11.2
npm  : 3.10.10
OS   : Windows 7

procedure :

  1. install phaser (v 2.6.2 at time of writing):

npm install --save phaser

  1. copy libraries :
  • create folder assets/thirdParties
  • copy node_modules/phaser/build/phaser.min.js to assets/thirdParties/
    (or do it with npm copy script)
  1. update index.html
<head>
...
<script src="assets/thirdParties/phaser.min.js"></script>
...
</head>
  1. test page :

Html :

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  
  <h3>phaser sample</h3>

  <div id="phaser-example"></div>

</ion-content>

Ts :

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

declare var Phaser: any;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {
    this.buildPhaserRenderer();
  }

  private buildPhaserRenderer() {
    var poly, graphics, game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { create: create });
    
    function create() {
        poly = new Phaser.Polygon();
        poly.setTo([ new Phaser.Point(200, 100), new Phaser.Point(350, 100), new Phaser.Point(375, 200), new Phaser.Point(150, 200) ]);
        graphics = game.add.graphics(0, 0);
        graphics.beginFill(0xFF33ff);
        graphics.drawPolygon(poly.points);
        graphics.endFill();
    }
  }

}
2 Likes
9

@ekoz

Im new to ionic… come from python.
What do you think about this way to use ionic and phaser? https://github.com/photonstorm/phaser-ce#ionic

Or does this lead to issues within ionic?

Also Does that same method of adding phaser you described work with a lib called p5.js?

Thank fort he help,
-RCcola

10

Using Phaser with WebComponents instead here :wink: