0.0.12 • Published 4 years ago

pixi-aliminiapp-engine v0.0.12

Weekly downloads
-
License
ISC
Repository
-
Last release
4 years ago

pixi.js引擎阿里小程序版,依托引擎版本4.8.8

使用方法

本模板主要使用Pixi引擎作为基础,实现手淘Canvas绘制,我们对Pixi原有4.8.8引擎进行了改写,实现了对Canvas的兼容。项目开发非常接近web Pixi。

引擎包:

@ali/pixi-miniprogram-engine

开发IDE:

阿里小程序IDE:https://miniapp.open.taobao.com/docV3.htm?docId=117780&docType=1

注意:

  • 目前Canvas要求手淘版本 > 9.7.0,项目中需要进行判断版本,进行降级抄底
  • Canvas 2d: 要求手淘版本 > 9.7.0
  • webGL : 要求手淘版本 > 9.9.0
  • 目前小程序IDE只支持”真机调试“云构建方式进行项目debug,当云构建失败后会默认降级本地构建,此时就无法正常调试了,需要重启IDE。建议普通查看效果使用”预览“功能(构建速度快,但无法查看console信息)。debug使用”真机调试“(速度慢)。IDE中的模拟器目前暂时无法用于预览和调试。

使用方式:

配置流程,启用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,
        };
        // 2d:使用2d上下文绘制
        // webgl:使用webgl上下文绘制
        const contextType = '2d';
        // 如果使用2d 上下文,则配置引擎强制2d
        const forceCanvas = contextType === '2d' ? true : false;
        const context = canvas.getContext(contextType);
        const application = new PIXI.Application({
          width: size.width,
          height: size.height,
          view: canvas,
          context: context,
          transparent: true,
          // 强制使用2d上下文进行渲染,如果为flase,则默认使用webgl渲染
          forceCanvas: forceCanvas,
          // 设置resolution 为像素密度
          resolution: devicePixelRatio,
        });
      },
    });
  },
  // 监听小程序canvas的touch事件,并触发pixi内部事件
  onTouchHandle(event) {
    if (this.pixiCanvas && event.changedTouches && event.changedTouches.length) {
      this.pixiCanvas.dispatchEvent(event);
    }
  }
});