材質暫存（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找到了官方開發者的說明(vmwork)

?

也許是被棄用，官方開發者建議使用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'可以選擇不寫，resources的key值就會是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.fromImage與PIXI.loader是兩種不同的API，同時使用會造成破壞或重復存入內存暫存區。

?

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

?

PIXI.loader我覺得好用的地方在于，可以用數組傳入參數(leafor)：

?

PIXI.loader

.add（[

“images/imageOne.png”，

“images/imageTwo.png”，

“images/imageThree.png”

]）

.load（setup）；

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

?

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

轉載于:https://www.cnblogs.com/lannyQ-Q/p/10181868.html

總結

以上是生活随笔為你收集整理的学JS的心路历程Day28 - PixiJS -基础（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。