PIXIJS性能优化之图集加载

Posted 2020-12-12 1156184981651a

介绍

使用pixi去开发一个稍微复杂的项目的时候就会涉及到各种类型的图片加载成为纹理，之后GPU去渲染，但是在图片数量较多但尺寸较小时，分开去加载还是比较消耗性能的，因为浏览器的并行下载都是有限制的，下载图片的时候可能就会影响到首页的接口请求速度以及其他更重要的UI渲染速度，因此建议当首次加载有此类情况的时候最好去使用图集的方式来实现。

如何实现

纹理图集的实现分为雪碧图的制作导出、场景内加载两部分，接下来分开介绍：

1. 雪碧图的制作导出：
   
   雪碧图的制作需要用到TexturePacker(免费版本就可以满足需求)，接着就可以开始制作了。
   • 首先将需要用到的图片全部拖进软件中间可视区内，会自动生成雪碧图样式
   • 紧接着配置右侧属性区域，按下图配置即可
   • 最后点击’publish‘按钮就可以生成json文件和对应的雪碧图了
   
   
   
2. pixi加载图集：
   
   pixi加载图集时使用的是pixi的loader来加载json文件，之后loader解析之后会再去下载同目录下的雪碧图，代码如下：

   // 初始化pixi场景
   const app = new PIXI.Application({
           width: window.innerWidth,
           height: window.innerHeight,
           antialias: true,    
           transparent: true,
       }),
       jsonFileName = ‘test.json‘,
       spriteName = ‘test.png‘;
   let resources = {},
       Loader = new PIXI.Loader();
   
   // pixi 内置的loader加载json文件    
   Loader.add(url)
       .load((loader, resources) => {
           Object.assign(resources, resources);
       });
   
   // 获取资源文件，‘title-1‘是图集内单个文件的名称   
   let propertySprite = new PIXI.Sprite(resources[jsonFileName].textures[‘title-1‘]);
   propertySprite.anchor.set(.5, .5);
   propertySprite.position.set(0, 0);
   app.stage.add(propertySprite);
   
   

   
   
   

总结

通过这样两步就可以实现pixi使用图集实现纹理渲染了，这样开发时只需要请求少量文件就可以获取到需要的纹理图片，降低了带宽占用、减少请求次数。

附：
pixijs: https://www.pixijs.com/
texturepacker: https://www.codeandweb.com/texturepacker

 推荐 https://www.xmtpost.com/