Ionic 整合 pixi.js

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ionic 整合 pixi.js相关的知识,希望对你有一定的参考价值。

最近做了个app,上线google play不大顺利,说是有假冒行为,然后改了下icon和名字以及描述,但是没啥信息去上,于是暂时放下搞点别的。

 

因为近期看到个比较有趣的绘图创意,

于是想通过ionic整合pixi来实现,

整合途径来自这里:

Integrate pixijs - typescript in Ionic 2 with npm

为啥是pixi呢?因为pixi目前来讲是地球上效率最好的js 2d渲染框架。

基于pixi的游戏框架phaser更是霸气十足。

 

以下是在ionic中使用pixi的步骤:

1. 新建ionic项目

2. 进入项目运行npm install --save pixi.js:添加pixi包

3. 运行npm install --save @types/pixi.js:添加typescript包

就这样pixi就在你的项目中可以使用了。

 

到任意一个page里面,加入一些代码以确保pixi是否可以正常运行,ts文件中:

import { Component,ViewChild,ElementRef } from ‘@angular/core‘;
import { NavController } from ‘ionic-angular‘;
import * as PIXI from ‘pixi.js‘;

@Component({
  selector: ‘page-home‘,
  templateUrl: ‘home.html
})
export class HomePage {
  @ViewChild(‘content‘) content:ElementRef;
  constructor(public navCtrl: NavController) {
    console.log(window.innerWidth,window.innerHeight);
  }

  ionViewDidLoad(){
    var type = "WEBGL";
    if(!PIXI.utils.isWebGLSupported){
      type = "canvas";
    }
    PIXI.utils.sayHello(type);
    
    var app = new PIXI.Application(window.innerWidth, window.innerHeight,{backgroundColor:0x1099bb});
    this.content.nativeElement.appendChild(app.view);

    let bg = new PIXI.Graphics();
    bg.beginFill(0xcccccc,0.6);
    bg.drawRect(0,0,window.innerWidth, window.innerHeight);
    bg.endFill();

    bg.interactive = true;
    app.stage.addChild(bg);
    bg.on(‘pointerdown‘,onClick);
    bg.on(‘pointermove‘,onMove);
    function onClick(evt){
      console.log(‘on touched...‘,evt);
    }
    function onMove(evt){
      var pos = evt.data.getLocalPosition(this.parent);
      bg.beginFill(Math.random()*0xffffff,1);
      bg.drawCircle(pos.x, pos.y,5);
      bg.endFill();
      console.log(‘on move...‘);
    }
  }
}

模板文件.html中修改为如下:

<ion-content>
  <div #content style="width:100%" ></div>
</ion-content>

#content 可以让它在ts中以ViewChild方式找到。

这里是一个简单的拖动绘制随机颜色圆的demo。

效果图如下:

技术分享

 

以上是关于Ionic 整合 pixi.js的主要内容,如果未能解决你的问题,请参考以下文章

如何从控制台中删除 pixi.js 横幅?

用 pixi.js 画一个矩形

Pixi.js 中的自定义字体

从 PIXI.js 中的同级或父 DOM 元素捕获鼠标事件

pixi.js tools

变态版大鱼吃小鱼-基于pixi.js 2D游戏引擎