pixi.js引擎阿里小程序版,依托引擎版本4.8.8
使用方法
本模板主要使用Pixi引擎作为基础,实现手淘Canvas绘制,我们对Pixi原有4.8.8引擎进行了改写,实现了对Canvas的兼容。项目开发非常接近web Pixi。 Pixi API : 官网:https://pixijs.download/v4.8.8/docs/PIXI.html
注意:
- 目前Canvas要求手淘版本 > 9.7.0,项目中需要进行判断版本,进行降级抄底。
- Canvas 2d: 要求手淘版本 > 9.7.0。
- webGL : 要求手淘版本 > 9.9.0。
引擎包:
@ali/pixi-miniprogram-engine
使用方式:
配置流程,启用Canvas -> 页面Canvas组件 ->侦听Canvas组件onReady事件->my._createCanvas ->成功回调后,设置canvas尺寸->使用PIXI.miniprogram.registerCanvas将Canvas注册给pixi->实例化PIXI.Application(注意options中forceCanvas强制使用2d上下文,resolution为当前设备像素密度)->侦听Canvas的onTouchStart\onTouchEnd\onTouchMove 事件通过onTouchHandle侦听
1.开启使用Canvas:
app.json 增加配置项:"enableSkia": "true"
{
"pages": [
"pages/test/index"
],
"window": {
"defaultTitle": "My App",
"enableSkia": "true"
}
}
2.安装@ali/pixi-miniprogram-engine依赖,以及pixi的type描述依赖
2.1:阿里内部tnpm包安装
tnpm install @ali/pixi-miniprogram-engine --by=yarn
tnpm install @types/pixi.js@4.7.5 --by=yarn
2.2:阿里外部:引擎包文件直接引入: 拷贝引擎源码中dist/pixi.js文件到项目目录中(比如/libs/pixi.js)
3.为Canvas节点 增加onReady事件监听 (type依然可以保持webgl 不受影响),onTouchStart\onTouchEnd\onTouchMove 事件通过onTouchHandle侦听(onTouchHandle在下方js中有实现)
<canvas id="canvas" type="webgl" onReady="onCanvasReady" class="canvas" onTouchStart="onTouchHandle" onTouchMove="onTouchHandle" onTouchEnd="onTouchHandle"></canvas>
4.在js中编写canvas的 onReady事件侦听函数 onCanvasReady
//引入pixi引擎
// 阿里内部tnpm包模式
import * as PIXI from "@ali/pixi-miniprogram-engine";
// 阿里外部拷贝引擎文件方式
// import * as PIXI from "/libs/pixi.js";
// registerCanvas 注册canvas给PIXI
const { registerCanvas, devicePixelRatio } = PIXI.miniprogram;
Page({
// 供pixi渲染的canvas
pixiCanvas:null,
// canvas的onReady事件侦听函数 onCanvasReady
onCanvasReady() {
// 建立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 application = new 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);
}
}
});