Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

@tbminiapp/pixi-miniprogram-engine

Package Overview
Dependencies
1
Maintainers
1
Versions
13
Issues
File Explorer

Advanced tools

@tbminiapp/pixi-miniprogram-engine

pixi.js引擎阿里小程序版(基于PixiJs v4.8.8版本)

    1.0.29latest

Version published
Maintainers
1
Yearly downloads
3,622
increased by105.91%

Weekly downloads

Readme

Source

pixi.js引擎阿里小程序版(基于PixiJs v4.8.8版本)

使用方法

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

  • Pixi API : 官网:https://pixijs.download/v4.8.8/docs/PIXI.html
  • Pixi阿里小程序文档: https://g.alicdn.com/mm/pixi-miniprogram-docs/1.0.12/index.html

引擎包:

@tbminiapp/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和预览,为保证构建速度,建议使用1.13.4版本以上IDE
  • 小程序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.安装@tbminiapp/pixi-miniprogram-engine依赖,以及pixi的type描述依赖

2.1:npm包安装

npm install @tbminiapp/pixi-miniprogram-engine --by=yarn npm install @types/[email protected] --by=yarn #### 3.为Canvas节点 增加onReady事件监听 (type依然可以保持webgl 不受影响),onTouchStart\onTouchEnd\onTouchMove 事件通过onTouchHandle侦听(onTouchHandle在下方js中有实现) ```javascript <canvas id="canvas" type="webgl" onReady="onCanvasReady" class="canvas" onTouchStart="onTouchHandle" onTouchMove="onTouchHandle" onTouchEnd="onTouchHandle"></canvas>

4.在js中编写canvas的 onReady事件侦听函数 onCanvasReady

//引入pixi引擎 import * as PIXI from "@tbminiapp/pixi-miniprogram-engine"; // registerCanvas 注册canvas给PIXI const { registerCanvas, devicePixelRatio } = PIXI.miniprogram; Page({ //pixi渲染的canvas pixiCanvas:null, // canvasonReady事件侦听函数 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); } } });
Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc