Integrate pixijs - typescript in Ionic 2 with npm

Ionic Framework ionic-v3
1

Hello

  • npm install -g ionic
  • ionic start pixiApp blank --v2
  • cd pixiApp
  • npm install
  • npm install pixi.js --save (version 4.1.0)
  • npm install --save @types/pixi.js (I know it’s def types for v3 :frowning: )
  • I replace contents of pixiApp\node_modules@types\pixi.js\index.d.ts by https://github.com/pixijs/pixi-typescript/blob/v4.x/pixi.js.d.ts
  • In the default home.ts off app, i added this code :
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import * as PIXI from 'pixi.js';

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

  ngOnInit() {
    PIXI.autoDetectRenderer(800, 600, {backgroundColor: 0x1099bb});
  }
}
  • and finally, i launched the app with command: ionic serve

Results KO

[16:56:52] rollup: Export ‘autoDetectRenderer’ is not defined by ‘D:\labs\ionic2\pixiApp\src\pages\home\home.ts’

I tried many variants with only failures :(:frowning:

Can you help me ?

Best regards

2

It’s OK now with @ionic/app-scripts 0.0.37
:slight_smile:

3

Emmanuel! I’ve repeted your flow, but cant get Pixi work :frowning:
This is what I have: (please, help me)
error opening ws message: {“category”:“console”,“type”:“log”,“data”:["\n %c %c %c Pixi.js 4.2.3 - ✰ WebGL ✰
%c %c http://www.pixijs.com/ %c %c :heart:%c​:heart:%c​:heart: \n\n",“background: #ff66a5; padding:5px 0;”,“background: #ff66a5;
padding:5px 0;”,“color: #ff66a5; background: #030307; padding:5px 0;”,“background: #ff66a5; padding:5px
0;”,“background: #ffc3dc; padding:5px 0;”,“background: #ff66a5; padding:5px 0;”,“color: #ff2424; background:
#fff; padding:5px 0;”,“color: #ff2424; background: #fff; padding:5px 0;”,“color: #ff2424; background: #fff;
padding:5px 0;”]}

4

Hello, this is not an error message :slight_smile:
It’ OK if you have this message in log.
Best regards

5

Emmanuel, unfortunately I cant see anything on screen. Seems that some of my steps is wrong. Please, can you share, how you achieve Pixi integration in details🙏

6

Hello,

Ok let’s go …

extract package.json

“dependencies”: {
"@angular/common": “2.0.0”,
"@angular/compiler": “2.0.0”,
"@angular/compiler-cli": “0.6.2”,
"@angular/core": “2.0.0”,
"@angular/forms": “2.0.0”,
"@angular/http": “2.0.0”,
"@angular/platform-browser": “2.0.0”,
"@angular/platform-browser-dynamic": “2.0.0”,
"@angular/platform-server": “2.0.0”,
"@ionic/storage": “1.0.3”,
"@types/fpsmeter": “^0.3.28”,
"@types/lodash": “^4.14.37”,
"@types/pixi.js": “^3.0.30”,
"@types/stats": “^0.16.30”,
“fpsmeter”: “^0.3.1”,
“ionic-angular”: “2.0.0-rc.1”,
“ionic-native”: “2.2.3”,
“ionicons”: “3.0.0”,
“lodash”: “^4.16.4”,
“nipplejs”: “^0.6.7”,
“pixi.js”: “^4.1.0”,
“rxjs”: “5.0.0-beta.12”,
“stats.js”: “^0.16.0”,
“zone.js”: “0.6.21”
},
“devDependencies”: {
"@ionic/app-scripts": “0.0.37”,
“typescript”: “^2.0.3”
}, …

home.html
<ion-content>
<div #canvas></div>
</ion-content>

home.ts
import { Component, ViewChild } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;
import { Content } from ‘ionic-angular’;

import * as Stats from ‘Stats.js’; //optionnal : it’s for display framerate
import * as PIXI from ‘pixi.js’;

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {
@ViewChild(Content) content: Content;

public vPadData : any;
hello: String = “hello world”;
canvas:any ;

constructor(public navCtrl: NavController) {}

ngAfterViewInit() {

PIXI.autoDetectRenderer(800, 600, {backgroundColor: 0x1099bb});

var renderer = PIXI.autoDetectRenderer(800, 600,{backgroundColor : 0x1099bb});

this.content.getNativeElement().appendChild(renderer.view);

//this.canvas.nativeElement.appendChild(renderer.view);

//console.log(renderer.view);

// create the root of the scene graph
var stage = new PIXI.Container();

// create a texture from an image path
// var texture = PIXI.Texture.fromImage('assets/basics/bunny.png');

// create a new Sprite using the texture

let bunnies = [];
for (var j = 0; j < 5; j++) {

    for (var i = 0; i < 5; i++) {
        var bunny = PIXI.Sprite.fromImage('assets/basics/bunny.png');
        bunny.anchor.x = 0.5;
        bunny.anchor.y = 0.5;

        bunny.x = 40 * i + 100;
        bunny.y = 40 * j + 200;
        stage.addChild(bunny);
        bunnies.push(bunny);
    };
};

var me = PIXI.Sprite.fromImage('assets/basics/bunny.png');
me.anchor.x = 0.5;
me.anchor.y = 0.5;
me.x = 20;
me.y = 20;
stage.addChild(me);

// init stats
let stats = new Stats();
stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
this.content.getNativeElement().appendChild(stats.dom);

let page = this;
// start animating
animate();

function animate() {
 
    stats.begin();
    requestAnimationFrame(animate);

    // just for fun, let's rotate mr rabbit a little
    for (let bunny of bunnies) {
      bunny.rotation += 0.1;
    }

    // render the container
    renderer.render(stage);
    stats.end();
}

}
}

I hope it’s help you :slight_smile:
Best regards

7

Can somebody help me here? InAppBrowser Insert CSS by File not Working

8

Hello !

Did you manage how to make the events work ? Thanks in advance !

9

Hello,
Which type of events ?
Emmanuel

10

Events like clicks on sprites. I managed to make them work on browser by deleting in js the two HTML elements on top of the canvas, but it doesn’t work on mobille (or at least Android). I’ll probably just put the canvas directly on the body and hide ionic as long as the user is in the game and use a button to switch from canvas in ionic to canvas and ionic hidden. Except if there’s another way.

11

Hi sir. I managed to make the canvas work but the sprite isn’t showing.

var me = PIXI.Sprite.from(‘assets/basics/test.png’);
me.anchor.x = 0.5;
me.anchor.y = 0.5;
me.x = 20;
me.y = 20;
stage.addChild(me);