Pixi.JS淘宝小程序快速上手指南

1.Pixi.JS基本介绍

2.新建一个H5 pixi项目

2.1 导入pixi.js的包

2.2 在dom中写一个div，之后pixi.js会在它后面注入

2.3 创建pixi.js应用

2.4 PixiApplication.ts

2.5 创建精灵(Sprite)

2.5 将精灵添加进舞台并添加轨迹

2.6 处理点击事件

2.7 动态精灵

3.移植到淘宝小程序

3.1 安装

3.2 app.json 里添加 enableSkia 配置

3.3 往页面axml里面添加canvas，并添加事件把手

3.4 使用 Pixi 接口

3.5 移植pixi

4.总结

1.Pixi.JS基本介绍

Pixi是一个超快的2D渲染引擎。这意味着什么呢？这意味着它会帮助你用JavaScript或者其他HTML5技术来显示媒体，创建动画或管理交互式图像，从而制作一个游戏或应用。它拥有语义化的，简洁的API接口并且加入了一些非常有用的特性。比如支持纹理贴图集和为精灵（交互式图像）提供了一个简单的动画系统。它也提供了一个完备的场景图，你可以在精灵图层里面创建另一个精灵，当然也可以让精灵响应你的鼠标或触摸事件。最重要的的是，Pixi没有妨碍你的编程方式，你可以自己选择使用多少它的功能，你可以遵循你自己的编码风格，或让Pixi与其他有用的框架无缝集成。

——pixi官网

PixiJS官网

中文文档

中文教程

2.新建一个H5 pixi项目

淘宝小程序官方API不支持实时预览pixijs，所以我们要新建一个h5的项目，完成后移植到淘宝小程序。

2.1 导入pixi.js的包

npm install pixi.js

2.2 在dom中写一个div，之后pixi.js会在它后面注入

<!-- index.html --><!DOCTYPE html>
<html lang="en"><head><title></title></head><body><div id="app" class="index-page"></div><!-- built files will be auto injected --></body>
</html>

2.3 创建pixi.js应用

import PIXI from './class/PIXI'
import PixiApp from './class/PixiApplication';const app = new PIXI.Application({width: 750,height: 1247,resolution: 0.5,transparent: true
});const dom = window.document.getElementById('app');if (dom) {dom.appendChild(app.view);const pixiapp = new PixiApp(app);
}

这里是封装了一个PixiApplication，代码都写在PixiApplication.ts里面了。然后把创建好的节点插入到dom里面。

2.4 PixiApplication.ts

import PIXI from "./PIXI";export default class PixiApplication {public app: PIXI.Application;constructor(application: PIXI.Application) {this.app = application;const { app } = this;this.init();}public init() {// 这里写初始化代码}
}

2.5 创建精灵(Sprite)

什么是精灵(Sprite)？精灵就是pixi中会动的动画元素，创建精灵需要加载纹理(Texture)，纹理就是用来生成精灵的图片。这里我把每个精灵封装成一个类了。用的时候直接调用。精灵有许多属性，具体可以参照官方API文档。

import PIXI from "./PIXI";/*** 炸弹Sprite封装*/export default class Bomb extends PIXI.Sprite {public vy: number; // 下落速度public vx: number; // 横移速度constructor(points?: number, vy?: number, vx?: number) {const textures = PIXI.Texture.from("bomb.png"); //加载纹理super(textures); //调用父类的构造方法this.anchor.set(0.5); //调整精灵位移的中心点this.width = 154;this.height = 143;this.vy = vy || 5;this.vx = vx || -1;this.rotation = Math.random() * 1.5 - 1.5; //随机旋转角度}
}

我们想要一个炸弹落下来的动画，所以要封装一个炸弹的精灵，Sprite.x和Sprite.y分别代表精灵距离舞台(stage)左上角的横向和纵向位移量。anchor.set(0.5)是设定精灵选择和位移的中心点为精灵的几何中心。ratation是旋转角度，以一个随机的角度出现。

注意：这里的图片仅为演示，开发的话请用线上资源。

2.5 将精灵添加进舞台并添加轨迹

有了精灵后我们要把它添加进舞台才能显示它，再给他添加轨迹，它才能动起来。

import PIXI from "./PIXI";
import Bomb from "./Bomb";export default class PixiApplication {public app: PIXI.Application;constructor(application: PIXI.Application) {this.app = application;const { app } = this;this.init();}public init() {// 这里写初始化代码let bomb = new Bomb(); this.app.stage.addChild(bomb);  //将精灵添加进舞台const fall = () => {            //精灵轨迹bomb.y += bomb.vy;            //每秒它的y值增加vy，相当于匀速下落bomb.x += bomb.vx;            //每秒它的x值增加vx，相当于匀速右移if (bomb.y > this.app.screen.height) {this.app.ticker.remove(fall);        //当超出屏幕范围后移除轨迹this.app.stage.removeChild(bomb);    //将精灵移出舞台bomb.destroy();                      //销毁精灵}};this.app.ticker.add(fall);             //添加轨迹}
}

2.6 处理点击事件

      bomb.interactive = true;// ------------------------------处理被点击-------------------------------------------------bomb.on("tap", async () => {// 获取元素位置let x = bomb.x;let y = bomb.y;// 创建一个动画元素let tapAnimation = new TapAnimation(x, y);// 插入动画元素到stagethis.app.stage.addChild(tapAnimation);// 播放点击动画tapAnimation.play();// 删除旧元素this.app.stage.removeChild(bomb);// 播放完毕后删除动画元素tapAnimation.onComplete = () => {this.app.stage.removeChild(tapAnimation);tapAnimation.destroy();};});}

接着加入点击事件，Sprite.interactive属性表示是否开启交互。这里有个爆炸开的点击动画，用到了动态精灵(AnimatedSprite)，待会就来说明它。

2.7 动态精灵

import PIXI from "./PIXI";
import { Texture } from 'pixi.js';/***点击动画特效*/export default class TapAnimation extends PIXI.extras.AnimatedSprite {constructor(x:number,y:number) {const animationTextures = ["1.png","2.png","3.png","4.png","5.png","6.png","7.png"].map((item) => PIXI.Texture.from(item));super(animationTextures);this.loop = false;this.animationSpeed = .8;this.anchor.set(0.5); //中心点this.width = 150;this.height = 150;this.x = x;this.y = y;}
}

同样的把它封装起来，这次继承的是"PIXI.extras.AnimatedSprite"这个类。把数组中的序列帧图片依次加载到纹理。使用一个纹理数组来加载动态精灵。loop是否循环播放，animattionSpeed是帧数FPS(Films per second)，默认是1，每秒60张(fps=60)。这里设定0.8，相当于fps=48。

注意：这里的图片仅为演示，开发的话请用线上资源。

3.移植到淘宝小程序

有了H5项目，并且能够正常跑起来后，就要移植到淘宝小程序里面了。这里参考了淘宝的官方文档：PixiJS 小程序使用文档

不过它写的有问题文档都不全。下面来看看小程序有哪些坑。

3.1 安装

npm install @tbminiapp/pixi-miniprogram-engine --by=yarn
npm install @types/pixi.js@4.7.5 --by=yarn

3.2 app.json 里添加 enableSkia 配置

{"pages": [  "pages/index/index"  ],"window": {  "defaultTitle": "My App",  "enableSkia":"true"  }
}

3.3 往页面axml里面添加canvas，并添加事件把手

<canvas id="canvas" type="webgl" onReady="onCanvasReady" class="canvas"onTouchStart="onTouchHandle" onTouchMove="onTouchHandle" onTouchEnd="onTouchHandle"></canvas>

3.4 使用 Pixi 接口

好，到这里淘宝小程序就出错了，会给你报一个“‘@tbminiapp/pixi-miniprogram-engine’不是模块”的错。可能是淘宝的d.ts没有写好，解决方法就是复制一份正确的pixi.js给他。

import * as PIXI from "@tbminiapp/pixi-miniprogram-engine";
// registerCanvas 注册canvas给PIXI

const fs = require('fs');
const path = require('path');// 下面处理TS模块引用出现“不是模块问题”
const file = path.resolve(__dirname, '../node_modules/@tbminiapp/pixi-miniprogram-engine/types/PIXI.d.ts');
const fileB = path.resolve(__dirname, '../node_modules/@types/pixi.js/index.d.ts');// 拷贝一份正确的ts
const data = fs.readFileSync(fileB).toString().replace('declare module "pixi.js"', 'declare module "@tbminiapp/pixi-miniprogram-engine"');// 写入
fs.writeFileSync(file, data);

好，第二个坑，又报错"const app = new PIXI.Application"不存在

你不是不存在吗？好，那我们去声明一个。

declare namespace PIXI {interface DisplayObject {zIndex: number;orderIndex: number;}const miniprogram : {registerCanvas: any, devicePixelRatio: any}
}

const app = new (<any>PIXI).Application({height: canvas.height,view: canvas,context: context,transparent: true,// 强制使用2d上下文进行渲染，如果为flase,则默认使用webgl渲染forceCanvas: true,// 设置resolution 为像素密度resolution: (windowWidth * dpr) / 750,background: 0xffffff,});

解决后完整代码如下，就是淘宝官方API上的，我搬过来了。

//引入pixi引擎
import * as PIXI from "@tbminiapp/pixi-miniprogram-engine";
// registerCanvas 注册canvas给PIXI
const { registerCanvas, devicePixelRatio } = PIXI.miniprogram;
Page({// 供pixi渲染的canvaspixiCanvas:null,// canvas的onReady事件侦听函数 onCanvasReadyonCanvasReady() {// 建立canvas引用my._createCanvas({id: "canvas",success: (canvas) => {const systemInfo = my.getSystemInfoSync();  // 拿到当前设备像素密度const dpr = systemInfo.pixelRatio;// 拿到当前设备的宽高const windowWidth = systemInfo.windowWidth;const windowHeight = systemInfo.windowHeight;// 为canvas设定宽高（需要设备宽高* 像素密度）;canvas.width = windowWidth * dpr;canvas.height = windowHeight * dpr;this.pixiCanvas = canvas;//为pixi引擎注册当前的canvas  registerCanvas(canvas);   //初始化PIXI.Application  //计算application的宽高  const size = {width: canvas.width / devicePixelRatio,height: canvas.height / devicePixelRatio,  };  const context = canvas.getContext('2d'); // canvas.getContext('webgl')  const app = new (<Any>PIXI).Application({width: size.width,  height: size.height,  view: canvas,  context: context,  transparent: true,  // 强制使用2d上下文进行渲染，如果为flase,则默认使用webgl渲染  forceCanvas: true,  // 设置resolution 为像素密度  resolution: devicePixelRatio,  }); },  });  },  // 监听小程序canvas的touch事件，并触发pixi内部事件  onTouchHandle(event) {if (this.pixiCanvas && event.changedTouches && event.changedTouches.length) {this.pixiCanvas.dispatchEvent(event);  }  }
});

3.5 移植pixi

try {const _ = new PixiApplication(app);} catch (e) {const _e: Error = e;my.alert({title: "游戏场景加载失败",content: e.message + " " + JSON.stringify(_e.stack),});}

将这段代码插入到onCanvasReady()这个钩子里，把你的PixiApplication.ts搬过来，真机调试一下，就可以了。

4.总结

创建一个H5项目
使用pixi创建一个pixi应用程序
将H5中的pixi移植到小程序里面

感谢@kezy大佬提供的技术支持