写点什么

小程序技术分享| 小程序集成 pixi 渲染引擎

作者:anyRTC开发者
  • 2023-06-27
    上海
  • 本文字数:2568 字

    阅读完需:约 8 分钟

开发小程序时一些特殊场景需要使用 canvas,但 canvas 渲染一些特效时太过耗费性能造成页面卡顿并且展示效果也不好(拖动卡顿不连贯等),因此使用渲染引擎来满足需求。本文在小程序中使用 pixi 渲染引擎。

引入改造后的 pixi

pixi 与小程序不是很匹配,需要进行对应改造才可在小程序中使用。本文中使用 spine、animate 等,可保存至同一文件夹下


下载地址 gitee 仓库


  • 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
用户头像

实时交互,万物互联! 2020-08-10 加入

实时交互,万物互联,全球实时互动云服务商领跑者!

评论

发布
暂无评论
小程序技术分享| 小程序集成 pixi 渲染引擎_小程序_anyRTC开发者_InfoQ写作社区