1
小程序技术分享| 小程序集成 pixi 渲染引擎
作者：anyRTC开发者
- 2023-06-27 上海
本文字数：2568 字
阅读完需：约 8 分钟
开发小程序时一些特殊场景需要使用 canvas,但 canvas 渲染一些特效时太过耗费性能造成页面卡顿并且展示效果也不好(拖动卡顿不连贯等)，因此使用渲染引擎来满足需求。本文在小程序中使用 pixi 渲染引擎。
引入改造后的 pixi
pixi 与小程序不是很匹配，需要进行对应改造才可在小程序中使用。本文中使用 spine、animate 等，可保存至同一文件夹下
pixi-animate.js
pixi-spine.js
pixi.miniprogram.js
unsafeEval.js(必备，牵连到一些事件转换)
使用
页面中添加 canvas
<canvas type="webgl" id="croplandCanvas" class="cropland_canvas" bindtouchstart="touchEvent" bindtouchmove="touchEvent" bindtouchend="touchEvent" bindtouchcancel="touchEvent"></canvas> <canvas type="2d" id="canvas2d" class="canvas_test"></canvas> <canvas type="2d" id="canvas2dText" class="canvas_test"></canvas>
复制代码
特效实现
初始定义
/** pixi 相关 */import { createPIXI} from "../libs/pixi.miniprogram";const unsafeEval = require("../libs/unsafeEval");const installSpine = require("../libs/pixi-spine");const installAnimate = require("../libs/pixi-animate");
// 动画定时器let animationFrame= null;// pixi 实例let storePIXI = null;// pixi 全局舞台容器let pixiRenderer = null;// canvas 容器实例let canvasInstance = null;
复制代码
pixi 初始化
// 获取 canvaswx.createSelectorQuery().select('#croplandCanvas').fields({ node: true, size: true }) .exec((res) => { const canvas = res[0].node; canvasInstance = canvas; // 设置canvas实际宽高 canvas.width = 400; canvas.height = 800; // 方便pixi定位 wx.createSelectorQuery().select('#canvas2d').fields({ node: true, size: true }).exec(function (res2d) { const canvas2d = res2d[0].node; canvas2d.width = 16; canvas2d.height = 16; // 方便pixi定位 wx.createSelectorQuery().select('#canvas2dText').fields({ node: true, size: true }).exec(async function (res2dText) { const canvas2dText = res2dText[0].node; canvas2dText.width = 16; canvas2dText.height = 16; /** 传入canvas，传入canvas宽度，用于计算触摸坐标比例适配触摸位置 */ // PIXI 初始化 -----start storePIXI = createPIXI(canvas, 400, canvas2d, canvas2dText)
unsafeEval(storePIXI); //适配PIXI里面使用的eval函数 installSpine(storePIXI); //注入Spine库 installAnimate(storePIXI); //注入Animate库
// 通过view把小程序的canvas传入 pixiRenderer = Store.PIXI.autoDetectRenderer({ width: 400, height: 800, 'transparent': true, 'view': canvas }); // PIXI 初始化 -----end // PIXI 舞台+精灵(特效实现) -----start /** 创建总舞台 */ const allStage = new Store.PIXI.Container(); // 舞台层级开关 allStage.sortableChildren = true; /** 例子：添加一个精灵图可拖拽 */ const bgStage = new storePIXI.Sprite.from(线上图片地址) bgStage.sortableChildren = true; // 添加到总舞台 allStage.addChild(bgStage); /** 对应事件触发 */ baseMapPIXIEvent(bgStage); // PIXI 舞台+精灵(特效实现) -----end // 视图渲染 function animate() { pixiRenderer.render(allStage); animationFrame = canvas.requestAnimationFrame(animate); } animate(); })
复制代码
pixi 事件绑定
// 小程序事件绑定至pixitouchEvent(e) { storePIXI.dispatchEvent(e)}
// pixi 事件处理baseMapPIXIEvent(stage) { stage.on("touchstart", function (e) { const global = e.data.global; console.log("touchstart-开始移动", global); }); stage.on("touchmove", function (e) { const global = e.data.global; console.log("touchstart-移动中", global); }); stage.on("pointerup", function (e) { const global = e.data.global; console.log("touchstart-移动结束", global); }); stage.on("pointertap", function (e) { const global = e.data.global; console.log("touchstart-点击", global); });}
复制代码
pixi 销毁
allStage && allStage.destroy(); animationFrame && canvasInstance.cancelAnimationFrame(animationFrame); pixiRenderer && pixiRenderer.destroy();
复制代码
注意
图片大小最好不要超过 300k
pixi 可参考对应官网文档实现需求特效
划线
评论
复制
发布于: 刚刚阅读数: 3
版权声明: 本文为 InfoQ 作者【anyRTC开发者】的原创文章。
原文链接:【http://xie.infoq.cn/article/ac3bab2866bef41a07bcf9acd】。文章转载请联系作者。
anyRTC开发者
关注
实时交互，万物互联! 2020-08-10 加入
实时交互，万物互联，全球实时互动云服务商领跑者！
评论