Using Phaser on ionic

Ionic Framework ionic-v3
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