PIXIJS性能优化之图集加载

2020-06-24 11:39:14 阅读：451 来源： 互联网

标签：propertySprite pixi 图集雪碧图 PIXIJS resources 加载

在这里插入图片描述

介绍

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

如何实现

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

雪碧图的制作导出：

雪碧图的制作需要用到TexturePacker(免费版本就可以满足需求)，接着就可以开始制作了。
- 首先将需要用到的图片全部拖进软件中间可视区内，会自动生成雪碧图样式
- 紧接着配置右侧属性区域，按下图配置即可
- 最后点击’publish‘按钮就可以生成json文件和对应的雪碧图了

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

标签：propertySprite,pixi,图集,雪碧图,PIXIJS,resources,加载
来源： https://blog.csdn.net/junjunaijiji/article/details/106926051

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

PIXIJS性能优化之图集加载

介绍

如何实现

总结