iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 23
0

Texture

pixi用WebGL和GPU渲染圖像,圖像需要轉換成GPU可以處理的格式,叫做紋理Texture,在sprite顯示圖片以前,需要先講圖片轉化成WebGL可讀的紋理貼圖。

Texture 方法

以下會介紹常用到的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


上一篇
【Day22】Pixi-Sprite
下一篇
【Day24】Pixi-Loader
系列文
菜雞用Canvas/Pixi動動動動動起來30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言