pixi用WebGL和GPU渲染圖像,圖像需要轉換成GPU可以處理的格式,叫做紋理Texture
,在sprite顯示圖片以前,需要先講圖片轉化成WebGL可讀的紋理貼圖。
以下會介紹常用到的Texture api用來載入圖片:PIXI.Texture.from
:直接引用圖片
let texture = PIXI.Texture.from('./me.png')
let sprite = new PIXI.Sprite(texture)
Pixi會使用紋理緩存,儲存並加載sprite需要的紋理貼圖PIXI.Texture.addToCache(texture, id)
:加入紋理緩存,新增全局都可以使用的紋理貼圖PIXI.Texture.removeFromCache(texture)
:反之,移除紋理緩存
PIXI.Texture.fromLoader(source, imageUrl, name)
:產生紋理貼圖並加入緩存
PIXI.Texture.fromURL(url, options)
:官網寫說跟PIXI.Texture.from
有點相似,比PIXI.Texture.from
效率好,5.3.0以後的新方法
要看更多PIXI.Texture
屬性可以看官網的介紹
絕對不是今天太累寫得比較簡短XD
今天圖片都載入了
明天會教如何用另種方法載入多張圖片
~如有疑問或是錯誤,歡迎不吝指教~
參考來源:
[1]https://ithelp.ithome.com.tw/articles/10209483
[2]http://pixijs.download/release/docs/PIXI.Texture.html
[3]https://hsiangfeng.github.io/javascript/20200309/2684951958/
[4]https://supermrji.gitbooks.io/pixi-js/content/standard_loader.html
[5]https://www.html5gamedevs.com/topic/16019-preload-all-textures/#comment-90907