PIXIJS性能優化之圖集加載

介紹

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