码迷,mamicode.com
首页 > Web开发 > 详细

PIXIJS性能优化之图集加载

时间:2020-06-25 23:51:02      阅读:198      评论:0      收藏:0      [点我收藏+]

标签:开始   ring   app   项目   渲染   word   filename   按钮   load   

技术图片

介绍

使用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

PIXIJS性能优化之图集加载

标签:开始   ring   app   项目   渲染   word   filename   按钮   load   

原文地址:https://www.cnblogs.com/1156184981651a/p/13193171.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!