PixiJS V5 教學 (5) - Texture
前言
有引入文字那麼就會有引入圖片啦~而 PIXI 會使用 GPU 以及 WebGL 來渲染圖片,而圖片需要經過處理才能夠使用的,而通常處理好的圖片都會稱為 Texture。
處理圖片
通常來講我們會使用 PIXI.Texture.from()
來新增要渲染處理的圖片路徑,Texture 在翻譯上可以將它理解為材質暫存(Texture Cache),這邊請容許我使用 假圖產生器。
1 | const img = PIXI.Texture.from('https://fakeimg.pl/100/'); |
準備好要處理的圖片後,接下來就會透過 PIXI 中一個語法 new PIXI.Sprite()
來將圖片貼入到我們目前的畫布
1 | const img = PIXI.Texture.from('https://fakeimg.pl/100/'); |
最後再將他加入到我們先前建立的 Container
就搞定囉~
1 | const img = PIXI.Texture.from('https://fakeimg.pl/100/'); |
基本上在 PIXI 貼入一張圖片的觀念很簡單,先使用 PIXI.Texture
接下來使用 new PIXI.Sprite()
這樣就可以搞定了。
簡單來講我們是透過 PIXI Texture 方式所產生的圖片,效能是會比較好的。
See the Pen PIXI Texture by HF (@hsiangfeng) on CodePen.
另一種寫法(官方推薦)
此外也會有其他寫法,其中一種是 PIXI.utils.TextureCache
,但是在先前版本官方會希望你將 PIXI.utils.TextureCache
改寫成 PIXI.loader.add().load()
,但是在 V5 版官方會又改變做法變成希望你用 PIXI.Loader
。
而 PIXI.Loader 有兩種寫法,這邊我們將會使用來自 imgur 的圖片來當作範例
1 | // 第一種寫法 |
我個人是比較偏好於第二種寫法,首先先講講第二種寫法,而加入圖片的方式與先前版本雷同,也是 add()
,但是這邊要注意你不能使用 https://fakeimg.pl/100/
來生成假圖唷~
1 | const loader = new PIXI.Loader(); |
使用 loader 的好處在於可以多筆引入圖片
1 | const loader = new PIXI.Loader(); |
而且使用這個方法還可以監聽圖片是否已經全部載入,並確保全部載入才執行特定動作
1 | const loader = new PIXI.Loader(); |
正常來講完成後你會得到一個 Done,這種方式是比較方便寫可以明確指定載入,那該如何將圖片貼入呢?
1 | const loader = new PIXI.Loader(); |
恭喜你,這樣圖片就貼入 container 了,此外 add()
也可以以陣列形式撰寫
1 | add([ |
但是以陣列形式撰寫的話,圖片就會需要使用 for...in...
迴圈來加載
1 | const loader = new PIXI.Loader(); |
那另一種寫法就下一篇介紹囉~