拓冰网站定制 
在微信小程序里跑 WebGL 图形PIXI.js 适配器 pixi-miniprogram 上手指南【免费下载链接】pixi-miniprogram一个可运行于微信小程序的PIXI引擎通过模拟window环境有些功能小程序无法模拟就直接修改了PIXI引擎代码最终使得PIXI引擎正常运行在小程序上项目地址: https://gitcode.com/gh_mirrors/pi/pixi-miniprogrampixi-miniprogram 是面向微信小程序的 PIXI.js 引擎适配层基于 PIXI.js v7.3.2 修改而来。它模拟浏览器 window 环境并重写部分引擎代码让 WebGL 渲染、精灵、文本、Spine 骨骼动画等能力直接跑在小程序 canvas 上适合做小游戏类 2D 场景。为什么原生 PIXI.js 在小程序里跑不起来小程序跑 WebGL 有两个绕不过去的坎没有 DOM。PIXI 依赖 window、document、Image、fetch 这一整套浏览器全局对象小程序环境里都不存在渲染路径不一致。Text 和 Graphics 的渲染依赖 2d canvas 上下文小程序的 canvas 机制不同直接用会显示异常pixi-miniprogram 的思路是在 src/ 里用自己的实现模拟 window、fetch、XMLHttpRequest 等浏览器对象并改写 Text、Graphics 的渲染逻辑无法模拟的部分如读取本地 fnt/json则直接修改引擎代码。最终产出单文件pixi.miniprogram.js引入即用。能力一览能力说明精灵 / 纹理渲染加载网络图片、AnimatedSprite 帧动画文本 / BitmapText重写的 2d 渲染支持位图字体Graphics 矢量绘制矩形、圆形等基本图形Spine 骨骼动画集成 pixi-spine 运行时含 3.8 版本库Adobe Animate集成 pixi-animate 运行时Live2D提供集成库Shader 遮罩Filter 纹理实现圆形遮罩效果音频wx 音频封装补间动画myTween 缓动库12 种缓动公式5 分钟跑通第一个场景先克隆仓库并编译出适配文件git clone https://gitcode.com/gh_mirrors/pi/pixi-miniprogram cd pixi-miniprogram npm install npm run build把dist/下的pixi.miniprogram.js拷到小程序libs/目录在 wxml 里放一个 webgl canvas页面 onLoad 中初始化import { createPIXI } from ../../libs/pixi.miniprogram; var unsafeEval require(../../libs/unsafeEval); var installSpine require(../../libs/pixi-spine); var canvas queryRes[0].node; canvas.width info.screenWidth; canvas.height info.screenHeight; PIXI createPIXI(canvas, 750); // canvas 舞台宽度 unsafeEval(PIXI); // 修补引擎内部的 eval installSpine(PIXI); // 第三方库需手动注入 PIXI var renderer PIXI.autoDetectRenderer({ width: 750, height: 1500, backgroundAlpha: 1, preserveDrawingBuffer: true, view: canvas });createPIXI第二个参数是舞台宽度内部据此计算与物理画布的缩放比用来适配触摸坐标view直接把小程序 canvas 交给引擎完成对接。之后搭好 stage 进入requestAnimationFrame渲染循环即可完整可运行的工程见 example/。实战全屏场景与触摸事件怎么接最常见的场景是画一张全屏背景图并响应点击var bg PIXI.Sprite.from(https://example.com/bg.jpg); bg.eventMode static; bg.on(pointerdown, function (e) { console.log(e.data.global); }); stage.addChild(bg);小程序的触摸事件引擎收不到必须手动转发。在 wxml 的 canvas 上把 touchstart/move/end/cancel 四类事件都绑到同一个处理函数touchEvent: function (e) { PIXI.dispatchEvent(e); }坐标缩放已在内部适配e.data.global直接就是 stage 空间可用的值。其余能力点到为止位图字体和 Spine 资源需通过PIXI.Assets.addAssets.load从网络服务器加载小程序读不了本地 fnt/json遮罩用 Graphics 画一个白色形状renderer.generateTexture生成纹理后交给自定义 Filter 完成补间动画用myTween.to在渲染循环里每帧调myTween.update()。避坑指南PIXI 版本锁定 7.3.2旧项目对应 5.2.1 / 6.3.2按 release 选需基础库2.16.1 以上依赖新版离屏 canvas 接口兼容旧基础库请用 v1.0 代码该版本的 PIXI不在全局环境引入第三方库要自己把 PIXI 传进去可参考 example/libs/ 的注入写法视频功能不支持本地 fnt/json 加载不了资源一律放网络服务器Graphics 不显示 / 文本渲染异常确认 canvas 类型用对webgl 主画布传view2d 离屏画布由适配层内部处理触摸无响应检查四类触摸事件是否都绑定并转给了PIXI.dispatchEvent调优建议坚持 WebGL 渲染路径避免高频生成离屏纹理及时 destroy 不再用的纹理复用 Sprite 对象减少内存分配舞台尺寸按屏幕比例动态计算不要写死只在需要截图保存时开启preserveDrawingBuffer否则有额外开销pixi-miniprogram 让 PIXI.js 的 2D 渲染链路完整跑进小程序配合官方示例工程搭好 canvas 就能开始做自己的场景了。【免费下载链接】pixi-miniprogram一个可运行于微信小程序的PIXI引擎通过模拟window环境有些功能小程序无法模拟就直接修改了PIXI引擎代码最终使得PIXI引擎正常运行在小程序上项目地址: https://gitcode.com/gh_mirrors/pi/pixi-miniprogram创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 在微信小程序里跑 WebGL 图形：PIXI.js 适配器 pixi-miniprogram 上手指南
在微信小程序里跑 WebGL 图形PIXI.js 适配器 pixi-miniprogram 上手指南【免费下载链接】pixi-miniprogram一个可运行于微信小程序的PIXI引擎通过模拟window环境有些功能小程序无法模拟就直接修改了PIXI引擎代码最终使得PIXI引擎正常运行在小程序上项目地址: https://gitcode.com/gh_mirrors/pi/pixi-miniprogrampixi-miniprogram 是面向微信小程序的 PIXI.js 引擎适配层基于 PIXI.js v7.3.2 修改而来。它模拟浏览器 window 环境并重写部分引擎代码让 WebGL 渲染、精灵、文本、Spine 骨骼动画等能力直接跑在小程序 canvas 上适合做小游戏类 2D 场景。为什么原生 PIXI.js 在小程序里跑不起来小程序跑 WebGL 有两个绕不过去的坎没有 DOM。PIXI 依赖 window、document、Image、fetch 这一整套浏览器全局对象小程序环境里都不存在渲染路径不一致。Text 和 Graphics 的渲染依赖 2d canvas 上下文小程序的 canvas 机制不同直接用会显示异常pixi-miniprogram 的思路是在 src/ 里用自己的实现模拟 window、fetch、XMLHttpRequest 等浏览器对象并改写 Text、Graphics 的渲染逻辑无法模拟的部分如读取本地 fnt/json则直接修改引擎代码。最终产出单文件pixi.miniprogram.js引入即用。能力一览能力说明精灵 / 纹理渲染加载网络图片、AnimatedSprite 帧动画文本 / BitmapText重写的 2d 渲染支持位图字体Graphics 矢量绘制矩形、圆形等基本图形Spine 骨骼动画集成 pixi-spine 运行时含 3.8 版本库Adobe Animate集成 pixi-animate 运行时Live2D提供集成库Shader 遮罩Filter 纹理实现圆形遮罩效果音频wx 音频封装补间动画myTween 缓动库12 种缓动公式5 分钟跑通第一个场景先克隆仓库并编译出适配文件git clone https://gitcode.com/gh_mirrors/pi/pixi-miniprogram cd pixi-miniprogram npm install npm run build把dist/下的pixi.miniprogram.js拷到小程序libs/目录在 wxml 里放一个 webgl canvas页面 onLoad 中初始化import { createPIXI } from ../../libs/pixi.miniprogram; var unsafeEval require(../../libs/unsafeEval); var installSpine require(../../libs/pixi-spine); var canvas queryRes[0].node; canvas.width info.screenWidth; canvas.height info.screenHeight; PIXI createPIXI(canvas, 750); // canvas 舞台宽度 unsafeEval(PIXI); // 修补引擎内部的 eval installSpine(PIXI); // 第三方库需手动注入 PIXI var renderer PIXI.autoDetectRenderer({ width: 750, height: 1500, backgroundAlpha: 1, preserveDrawingBuffer: true, view: canvas });createPIXI第二个参数是舞台宽度内部据此计算与物理画布的缩放比用来适配触摸坐标view直接把小程序 canvas 交给引擎完成对接。之后搭好 stage 进入requestAnimationFrame渲染循环即可完整可运行的工程见 example/。实战全屏场景与触摸事件怎么接最常见的场景是画一张全屏背景图并响应点击var bg PIXI.Sprite.from(https://example.com/bg.jpg); bg.eventMode static; bg.on(pointerdown, function (e) { console.log(e.data.global); }); stage.addChild(bg);小程序的触摸事件引擎收不到必须手动转发。在 wxml 的 canvas 上把 touchstart/move/end/cancel 四类事件都绑到同一个处理函数touchEvent: function (e) { PIXI.dispatchEvent(e); }坐标缩放已在内部适配e.data.global直接就是 stage 空间可用的值。其余能力点到为止位图字体和 Spine 资源需通过PIXI.Assets.addAssets.load从网络服务器加载小程序读不了本地 fnt/json遮罩用 Graphics 画一个白色形状renderer.generateTexture生成纹理后交给自定义 Filter 完成补间动画用myTween.to在渲染循环里每帧调myTween.update()。避坑指南PIXI 版本锁定 7.3.2旧项目对应 5.2.1 / 6.3.2按 release 选需基础库2.16.1 以上依赖新版离屏 canvas 接口兼容旧基础库请用 v1.0 代码该版本的 PIXI不在全局环境引入第三方库要自己把 PIXI 传进去可参考 example/libs/ 的注入写法视频功能不支持本地 fnt/json 加载不了资源一律放网络服务器Graphics 不显示 / 文本渲染异常确认 canvas 类型用对webgl 主画布传view2d 离屏画布由适配层内部处理触摸无响应检查四类触摸事件是否都绑定并转给了PIXI.dispatchEvent调优建议坚持 WebGL 渲染路径避免高频生成离屏纹理及时 destroy 不再用的纹理复用 Sprite 对象减少内存分配舞台尺寸按屏幕比例动态计算不要写死只在需要截图保存时开启preserveDrawingBuffer否则有额外开销pixi-miniprogram 让 PIXI.js 的 2D 渲染链路完整跑进小程序配合官方示例工程搭好 canvas 就能开始做自己的场景了。【免费下载链接】pixi-miniprogram一个可运行于微信小程序的PIXI引擎通过模拟window环境有些功能小程序无法模拟就直接修改了PIXI引擎代码最终使得PIXI引擎正常运行在小程序上项目地址: https://gitcode.com/gh_mirrors/pi/pixi-miniprogram创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考