pixi-miniprogram 微信小程序 PIXI 适配器快速跑通小程序里的 WebGL 2D 渲染【免费下载链接】pixi-miniprogram一个可运行于微信小程序的PIXI引擎通过模拟window环境有些功能小程序无法模拟就直接修改了PIXI引擎代码最终使得PIXI引擎正常运行在小程序上项目地址: https://gitcode.com/gh_mirrors/pi/pixi-miniprogram微信小程序里没有 window、没有完整浏览器环境原生 PIXI.js 跑不起来。pixi-miniprogram 模拟出一套 window 环境基于 PIXI.js v7.3.2 改写引擎代码让精灵、文本、Spine 动画直接渲染在小程序里。核心能力速览先花 10 秒判断它能不能解决你的问题功能一句话说明典型场景WebGL 画布渲染autoDetectRenderer 接管小程序的 webgl canvas 输出画面全屏游戏、互动页面精灵、文本与图形Sprite、Text、Graphics 的渲染逻辑已按小程序适配立绘展示、动态 UI 绘制触摸事件转发把小程序 touch 事件喂给 PIXI 做命中检测点击、拖拽交互远端资源加载Assets 接口加载 fnt、json 等资源位图字体、Spine 骨骼数据插件扩展Spine、Animate、Live2D 通过 install 函数注入骨骼动画、虚拟形象遮罩与缓动shader 实现遮罩 myTween 内置缓动库复杂图形效果、补间动画这是 example 示例页的运行画面背景与画面元素都由适配后的 PIXI 引擎绘制。五分钟跑通环境要求就四样Node.js 运行环境微信开发者工具Git微信小程序基础库 2.16.1 及以上你只需要把仓库拉到本地就能得到 src 源码和一套可运行的 example 示例项目git clone https://gitcode.com/gh_mirrors/pi/pixi-miniprogram cd pixi-miniprogram跑完你会看到当前目录下多了 pixi-miniprogram 文件夹。你只需要执行一次依赖安装就能装好 webpack 和 babel 构建工具链npm install跑完你会看到 node_modules 生成没有报错输出。你只需要执行一条构建命令就能得到适配小程序的引擎文件npm run build跑完你会看到根目录生成 dist 文件夹里面是 pixi.miniprogram.js。你只需要把构建产物复制到示例项目的 libs 下就能让示例用上最新引擎按你的项目结构调整cp dist/pixi.miniprogram.js example/libs/跑完你会看到 example/libs 里的引擎文件被更新。最后用微信开发者工具导入 example 目录点编译页面直接呈现出 PIXI 渲染的场景。核心配置详解整个初始化只有一条主线先声明 canvas再调用 createPIXI 建立环境。wxml 里先声明一个 webgl canvas并把四个触摸事件都绑到 touchEvent 上canvas typewebgl idmyCanvas bindtouchstarttouchEvent bindtouchmovetouchEvent bindtouchendtouchEvent bindtouchcanceltouchEvent/canvas跑完你会看到页面上有一个全屏画布所有触摸都指向 touchEvent 处理函数。下面的代码做了两件事先用 createPIXI 把小程序 canvas 包装成浏览器环境再通过 renderer 的 view 参数把真实画布交给 PIXI。var info wx.getSystemInfoSync(); // 获取屏幕信息 var canvas res[0].node; // 拿 wxml 里声明的 canvas 节点 canvas.width info.screenWidth; // 物理像素宽实现全屏 canvas.height info.screenHeight; // 物理像素高 var PIXI createPIXI(canvas, 750); // 750 是舞台宽度用于触摸坐标换算 unsafeEval(PIXI); // 修补 PIXI 内部用到的 eval installSpine(PIXI); // 注入 Spine 库 installAnimate(PIXI); // 注入 Animate 库 var renderer PIXI.autoDetectRenderer({ width: 750, // 舞台宽 height: stageHeight, // 舞台高 backgroundAlpha: 1, // 背景不透明 premultipliedAlpha: true, preserveDrawingBuffer: true, // 保留缓冲方便截图保存 view: canvas // 把小程序画布传入 }); var stage new PIXI.Container(); renderer.render(stage);跑完你会看到画布输出一帧空舞台之后往 stage 里加元素即可。实战场景文本与图形绘制小程序里没有 DOM想画动态文本和形状怎么办var txt new PIXI.Text(得分1234, { fill: #ff0000, fontSize: 44 }); txt.x 100; txt.y 400; stage.addChild(txt); var box new PIXI.Graphics(); box.beginFill(0xFF3300); // 红色填充 box.drawRect(0, 0, 100, 100); // 画 100x100 的矩形 box.endFill(); box.x 100; box.y 200; stage.addChild(box);效果红色文本和红色方块出现在指定位置修改 txt.text 即可实时更新。要显示位图字体或骨骼动画得先把远端资源拉回来。加载远端 fnt / json 资源小程序不支持加载本地 fnt、json 文件资源必须放到网络服务器加载流程是这样的PIXI.Assets.add(blog, https://你的服务器/blog.fnt); // 位图字体 PIXI.Assets.add(spine, https://你的服务器/spine.json); // Spine 骨骼 PIXI.Assets.load([blog, spine]).then(function(res) { var btext new PIXI.BitmapText(score:1234, { fontName: blog, fontSize: 60, tint: 0xffff00 }); stage.addChild(btext); var boy new PIXI.spine.Spine(res.spine.spineData); // 创建骨骼动画 boy.state.setAnimation(0, idle, true); stage.addChild(boy); });效果加载完成后位图文本和 Spine 角色同时上场角色循环播放 idle 动画。静态展示只是半壁江山交互得让 PIXI 听见手指。转发触摸事件小程序的触摸事件不会自动进入 PIXI必须手动转发Page({ touchEvent: function(e) { PIXI.dispatchEvent(e); // 把触摸事件喂给 PIXI } }); bg.eventMode static; // 开启命中检测 bg.on(pointerdown, function(e) { console.log(坐标, e.data.global); // 拿到全局坐标 });效果手指按下屏幕控制台立刻打印对应坐标说明交互链路已经打通。避坑指南你会遇到触摸无响应原因是小程序 touch 事件不会自动进 PIXI在 wxml 绑好四个 touch 处理器并用 PIXI.dispatchEvent(e) 转发就行。你会遇到 fnt、json 加载失败原因是小程序不支持本地加载这类文件把资源挪到网络服务器再用 Assets 加载就行。你会遇到第三方库报 PIXI undefined原因是这版 PIXI 不在全局环境把 PIXI 作为参数显式传入如 installSpine(PIXI) 就行。你会遇到 Text、Graphics 不显示原因是 2d canvas 类型不对或未传入确保基础库 2.16.1 以上让新版自动创建离屏 2d canvas 就行。版本兼容当前版本要求微信基础库 2.16.1 以上兼容旧基础库请用 v1.0 版本代码视频功能不支持。进阶调优⚡ 优先使用 WebGL 渲染器autoDetectRenderer 默认行为渲染效率明显更高。 ⚡ 及时释放不再使用的纹理与对象避免小程序内存持续上涨。 ⚡ 用 getSystemInfoSync 拿到物理像素宽高动态调整画布避免画面拉伸模糊。 ⚡ 复用精灵与纹理、减少每帧对象创建降低内存分配压力。 用 console.log 打印坐标和资源加载状态在开发者工具控制台查看输出。 用 canvas 的 toDataURL 加写文件做截图验证渲染结果是否符合预期。 Graphics 显示异常时先检查 canvas 的 type 是否为 webgl。pixi-miniprogram 把精灵、文本、Spine、遮罩这一整套 PIXI 能力搬进了微信小程序。你要是在小程序里做需要 WebGL 级渲染的互动内容它是一套开箱即用的方案。【免费下载链接】pixi-miniprogram一个可运行于微信小程序的PIXI引擎通过模拟window环境有些功能小程序无法模拟就直接修改了PIXI引擎代码最终使得PIXI引擎正常运行在小程序上项目地址: https://gitcode.com/gh_mirrors/pi/pixi-miniprogram创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 pixi-miniprogram 微信小程序 PIXI 适配器：快速跑通小程序里的 WebGL 2D 渲染
pixi-miniprogram 微信小程序 PIXI 适配器快速跑通小程序里的 WebGL 2D 渲染【免费下载链接】pixi-miniprogram一个可运行于微信小程序的PIXI引擎通过模拟window环境有些功能小程序无法模拟就直接修改了PIXI引擎代码最终使得PIXI引擎正常运行在小程序上项目地址: https://gitcode.com/gh_mirrors/pi/pixi-miniprogram微信小程序里没有 window、没有完整浏览器环境原生 PIXI.js 跑不起来。pixi-miniprogram 模拟出一套 window 环境基于 PIXI.js v7.3.2 改写引擎代码让精灵、文本、Spine 动画直接渲染在小程序里。核心能力速览先花 10 秒判断它能不能解决你的问题功能一句话说明典型场景WebGL 画布渲染autoDetectRenderer 接管小程序的 webgl canvas 输出画面全屏游戏、互动页面精灵、文本与图形Sprite、Text、Graphics 的渲染逻辑已按小程序适配立绘展示、动态 UI 绘制触摸事件转发把小程序 touch 事件喂给 PIXI 做命中检测点击、拖拽交互远端资源加载Assets 接口加载 fnt、json 等资源位图字体、Spine 骨骼数据插件扩展Spine、Animate、Live2D 通过 install 函数注入骨骼动画、虚拟形象遮罩与缓动shader 实现遮罩 myTween 内置缓动库复杂图形效果、补间动画这是 example 示例页的运行画面背景与画面元素都由适配后的 PIXI 引擎绘制。五分钟跑通环境要求就四样Node.js 运行环境微信开发者工具Git微信小程序基础库 2.16.1 及以上你只需要把仓库拉到本地就能得到 src 源码和一套可运行的 example 示例项目git clone https://gitcode.com/gh_mirrors/pi/pixi-miniprogram cd pixi-miniprogram跑完你会看到当前目录下多了 pixi-miniprogram 文件夹。你只需要执行一次依赖安装就能装好 webpack 和 babel 构建工具链npm install跑完你会看到 node_modules 生成没有报错输出。你只需要执行一条构建命令就能得到适配小程序的引擎文件npm run build跑完你会看到根目录生成 dist 文件夹里面是 pixi.miniprogram.js。你只需要把构建产物复制到示例项目的 libs 下就能让示例用上最新引擎按你的项目结构调整cp dist/pixi.miniprogram.js example/libs/跑完你会看到 example/libs 里的引擎文件被更新。最后用微信开发者工具导入 example 目录点编译页面直接呈现出 PIXI 渲染的场景。核心配置详解整个初始化只有一条主线先声明 canvas再调用 createPIXI 建立环境。wxml 里先声明一个 webgl canvas并把四个触摸事件都绑到 touchEvent 上canvas typewebgl idmyCanvas bindtouchstarttouchEvent bindtouchmovetouchEvent bindtouchendtouchEvent bindtouchcanceltouchEvent/canvas跑完你会看到页面上有一个全屏画布所有触摸都指向 touchEvent 处理函数。下面的代码做了两件事先用 createPIXI 把小程序 canvas 包装成浏览器环境再通过 renderer 的 view 参数把真实画布交给 PIXI。var info wx.getSystemInfoSync(); // 获取屏幕信息 var canvas res[0].node; // 拿 wxml 里声明的 canvas 节点 canvas.width info.screenWidth; // 物理像素宽实现全屏 canvas.height info.screenHeight; // 物理像素高 var PIXI createPIXI(canvas, 750); // 750 是舞台宽度用于触摸坐标换算 unsafeEval(PIXI); // 修补 PIXI 内部用到的 eval installSpine(PIXI); // 注入 Spine 库 installAnimate(PIXI); // 注入 Animate 库 var renderer PIXI.autoDetectRenderer({ width: 750, // 舞台宽 height: stageHeight, // 舞台高 backgroundAlpha: 1, // 背景不透明 premultipliedAlpha: true, preserveDrawingBuffer: true, // 保留缓冲方便截图保存 view: canvas // 把小程序画布传入 }); var stage new PIXI.Container(); renderer.render(stage);跑完你会看到画布输出一帧空舞台之后往 stage 里加元素即可。实战场景文本与图形绘制小程序里没有 DOM想画动态文本和形状怎么办var txt new PIXI.Text(得分1234, { fill: #ff0000, fontSize: 44 }); txt.x 100; txt.y 400; stage.addChild(txt); var box new PIXI.Graphics(); box.beginFill(0xFF3300); // 红色填充 box.drawRect(0, 0, 100, 100); // 画 100x100 的矩形 box.endFill(); box.x 100; box.y 200; stage.addChild(box);效果红色文本和红色方块出现在指定位置修改 txt.text 即可实时更新。要显示位图字体或骨骼动画得先把远端资源拉回来。加载远端 fnt / json 资源小程序不支持加载本地 fnt、json 文件资源必须放到网络服务器加载流程是这样的PIXI.Assets.add(blog, https://你的服务器/blog.fnt); // 位图字体 PIXI.Assets.add(spine, https://你的服务器/spine.json); // Spine 骨骼 PIXI.Assets.load([blog, spine]).then(function(res) { var btext new PIXI.BitmapText(score:1234, { fontName: blog, fontSize: 60, tint: 0xffff00 }); stage.addChild(btext); var boy new PIXI.spine.Spine(res.spine.spineData); // 创建骨骼动画 boy.state.setAnimation(0, idle, true); stage.addChild(boy); });效果加载完成后位图文本和 Spine 角色同时上场角色循环播放 idle 动画。静态展示只是半壁江山交互得让 PIXI 听见手指。转发触摸事件小程序的触摸事件不会自动进入 PIXI必须手动转发Page({ touchEvent: function(e) { PIXI.dispatchEvent(e); // 把触摸事件喂给 PIXI } }); bg.eventMode static; // 开启命中检测 bg.on(pointerdown, function(e) { console.log(坐标, e.data.global); // 拿到全局坐标 });效果手指按下屏幕控制台立刻打印对应坐标说明交互链路已经打通。避坑指南你会遇到触摸无响应原因是小程序 touch 事件不会自动进 PIXI在 wxml 绑好四个 touch 处理器并用 PIXI.dispatchEvent(e) 转发就行。你会遇到 fnt、json 加载失败原因是小程序不支持本地加载这类文件把资源挪到网络服务器再用 Assets 加载就行。你会遇到第三方库报 PIXI undefined原因是这版 PIXI 不在全局环境把 PIXI 作为参数显式传入如 installSpine(PIXI) 就行。你会遇到 Text、Graphics 不显示原因是 2d canvas 类型不对或未传入确保基础库 2.16.1 以上让新版自动创建离屏 2d canvas 就行。版本兼容当前版本要求微信基础库 2.16.1 以上兼容旧基础库请用 v1.0 版本代码视频功能不支持。进阶调优⚡ 优先使用 WebGL 渲染器autoDetectRenderer 默认行为渲染效率明显更高。 ⚡ 及时释放不再使用的纹理与对象避免小程序内存持续上涨。 ⚡ 用 getSystemInfoSync 拿到物理像素宽高动态调整画布避免画面拉伸模糊。 ⚡ 复用精灵与纹理、减少每帧对象创建降低内存分配压力。 用 console.log 打印坐标和资源加载状态在开发者工具控制台查看输出。 用 canvas 的 toDataURL 加写文件做截图验证渲染结果是否符合预期。 Graphics 显示异常时先检查 canvas 的 type 是否为 webgl。pixi-miniprogram 把精灵、文本、Spine、遮罩这一整套 PIXI 能力搬进了微信小程序。你要是在小程序里做需要 WebGL 级渲染的互动内容它是一套开箱即用的方案。【免费下载链接】pixi-miniprogram一个可运行于微信小程序的PIXI引擎通过模拟window环境有些功能小程序无法模拟就直接修改了PIXI引擎代码最终使得PIXI引擎正常运行在小程序上项目地址: https://gitcode.com/gh_mirrors/pi/pixi-miniprogram创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考