2D渲染pixi项目实战总结

戒骄戒躁TBE

已于 2022-06-01 16:55:50 修改

阅读量876

点赞数

文章标签： js

于 2022-05-13 15:37:37 首次发布

本文链接：https://blog.csdn.net/weixin_45942049/article/details/124753049

版权

在一次开发中遇到了循环反复的较复杂动画效果，工具调研后选择的pixi，网上大多的可参考资料也不少，但需要深度搜索，引入小程序缺乏可借鉴性实战代码。故总结如下，加深理解与印象。

介绍下pixi能力，开发者如何快速介入。

以web端为例：脚本中暴露了PIXI基类，这里引入了舞台和精灵的抽象概念，也就是说希望开发者把开发过程当做一场舞台剧，舞台上的动画、交互等理解为精灵，我是这样理解的，感觉还不错。按流程搞一下舞台剧从开始到结束怎么进行：

1、创建舞台剧&布局

let app = new PIXI.Application({width: 256, height: 256});
document.body.appendChild(app.view);

舞台布局提供的option自行参考

2、创建精灵

let cat = new PIXI.Sprite(PIXI.loader.resources["images/cat.png"].texture);
app.stage.addChild(cat);

sprite实际是生成实例，接受的形参是图片的纹理缓存，引入外部资源的话这一步是必须的。纹理texture（因为pixi支持WebGL在GPU上渲染图像，图像需要转位GPU可以处理的东西）

当然精灵也可以是自己绘制的图形，here参考网站。

let Application = PIXI.Application,
    loader = PIXI.loader,
    resources = PIXI.loader.resources,
    Sprite = PIXI.Sprite;

常用的还有Container等，到这也没什么了，一个工具的介入往往是简易的，复杂的往往是业务实现。

有前端工程的安装下相关三方包，无的话下载到本地也是可以的here下载传送门

案列：技术同学的小程序基础代码示例，准备工作完成后就可以预览基础效果了。

因为要在移动端进行视频渲染、动画以及各种交互，技术栈考虑再三，没有选择使用原生直接开发，选型最终定在pixi。在正式开发前，重点在于web端及小程序端能力实现的差异：

1、不同于web端的运行环境，小程序的运行环境没有boom和doom api，所以在web上相关操作doom的代码都要替换成调用小程序的api，这里涉及到adapter的概念，结尾处解释。

2、然后就是小程序的与web的开发注意事项了，因为用的是原生小程序+pixi，所有的api接口调用也要写法转型

实例：

轮播图，图片上的物品会随着出现而附带tag标识，这里主要是开发tag的一个规则运动，以及其他舞台元素的联动及事件处理。代码解决途径其实就是创建子对象，也没啥，唉，确实写之前觉得需要总结，写完后又觉得功能性的包实在没啥可总结的。不如去看看如何封装的canvas。

适配器：

想要创建画布标签，使用wx.createCanvas()，但是pixi创建的舞台想要挂载到页面使用的

document.body.appendChild(app.view);

显然是不行的，小程序宿主是没有document和window的全局变量，Adapter 是用户代码，不是基础库的一部分（使用 wx API模拟BOM 和BOM的代码组成的库）

微信开发者大大说的也很明确了here传送门

关注