学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找到了官方開發者的說明(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 -基础（二）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C#零碎知识点
- 下一篇： 【J2EE】第四章 SpringMVC