iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 28
1
自我挑戰組

學JS的心路歷程系列 第 28

學JS的心路歷程 Day28 - PixiJS - 基礎(二)

材質暫存 (texture cache)

昨天有說到,圖片要放入 stage 前,需要先把圖片轉成 Sprite 的特殊圖片物件。

但是我們也可以先將圖片放進 材質暫存 (texture cache)。

什麼是「材質」(texture)?
PIXI 用 WebGL 的 GPU 渲染圖片,所以圖片需轉成 GPU 可用版本,可被 WebGL 處理圖片稱為「材質」(texture)。

而在放進 sprite 片前,將原始圖片轉成 WebGL texture 形式,可以提高效率。

PIXI 使用材質暫存 (texture cache)來儲存和參考所有 sprite 需要的材質。

let texture = PIXI.utils.TextureCache["images/anySpriteImage.png"];
let sprite = new PIXI.Sprite(texture);

在官網教學連結中有貼出這段程式碼,利用 PIXI.utils.TextureCache 將圖片加入暫存中,但我在實際使用後發現沒有任何效果,搜尋了一下之後發現官方文件並沒有公開提供這個方法。
且在 github issue 找到了官方開發者的說明

也許是被棄用,官方開發者建議使用 PIXI.loader

原文連結

那我們就來看一下 PIXI.loader 的範例吧!

let imageURL = "./image/bunny.png";
PIXI.loader
    .add('bunny',imageURL)
    .load(init);

function init(loader,resources) {
    var bunny = new PIXI.Sprite(
        resources['bunny'].texture // get Texture Cache
    );
    app.stage.addChild(bunny);
}

把圖片放入 loader 中轉成材質暫存後在放入 Sprite 中。

add('bunny',imageURL)'bunny' 可以選擇不寫, resourceskey 值就會是 url 。

let imageURL = "./image/bunny.png";
PIXI.loader
    .add(imageURL)
    .load(init);

function init(loader,resources) {
    var bunny = new PIXI.Sprite(
        resources[imageURL].texture // get Texture Cache
    );
    app.stage.addChild(bunny);
}

但是千萬別這樣寫:

let imageURL = "./image/bunny.png";
PIXI.loader
    .add('bunny',imageURL)
    .load(init);

function init(loader,resources) {
    var bunny = PIXI.Sprite.fromImage(imageURL); 
    app.stage.addChild(bunny);
}

PIXI.Sprite.fromImagePIXI.loader 是兩種不同的 API ,同時使用會造成破壞或重複存入記憶體暫存區。

PIXI.Sprite.fromImage 是比較方便的作法,直接傳入圖片的 url ,會判斷是否已經在材質暫存中,如果沒有就自動加載。

PIXI.loader 我覺得好用的地方在於,可以用陣列傳入引數:

PIXI.loader
    .add([
      "images/imageOne.png",
      "images/imageTwo.png",
      "images/imageThree.png"
    ])
    .load(setup);

那要如何查看暫存區的資訊呢?我們可以透過 PIXI.TextureCache 查看暫存區的資訊,不過官方文件上找不到這個屬性,不確定之後會不會被棄用。

那麼今天就先到這邊,一樣如果有錯誤及來源未附上歡迎留言指正,我們明天見!

參考資料:
PIXI.utils.TextCache instead of PIXI.loader.resource?
PIXI.loaders.Loader
Preload all textures?


上一篇
學JS的心路歷程 Day27 - PixiJS - 基礎(一)
下一篇
學JS的心路歷程 Day29 - PixiJS - 基礎(三)
系列文
學JS的心路歷程30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言