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
2
const img = PIXI.Texture.from('https://fakeimg.pl/100/');
const dude = new PIXI.Sprite(img);

最後再將他加入到我們先前建立的 Container 就搞定囉~

1
2
3
4
const img = PIXI.Texture.from('https://fakeimg.pl/100/');
const sp = new PIXI.Sprite(img);

container.addChild(sp);

基本上在 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
2
3
4
5
// 第一種寫法
const loader1 = PIXI.Loader.shared;

// 第二種寫法
const loader = new PIXI.Loader();

我個人是比較偏好於第二種寫法,首先先講講第二種寫法,而加入圖片的方式與先前版本雷同,也是 add(),但是這邊要注意你不能使用 https://fakeimg.pl/100/ 來生成假圖唷~

1
2
const loader = new PIXI.Loader();
loader.add('fakeimg','https://i.imgur.com/SkUNDOQ.jpg');

使用 loader 的好處在於可以多筆引入圖片

1
2
3
4
5
const loader = new PIXI.Loader();
loader
.add('fakeimg1','https://i.imgur.com/SkUNDOQ.jpg')
.add('fakeimg2','https://i.imgur.com/SkUNDOQ.jpg')
.add('fakeimg3','https://i.imgur.com/SkUNDOQ.jpg')

而且使用這個方法還可以監聽圖片是否已經全部載入,並確保全部載入才執行特定動作

1
2
3
4
5
6
7
8
const loader = new PIXI.Loader();
loader
.add('fakeimg1','https://i.imgur.com/SkUNDOQ.jpg')
.add('fakeimg2','https://i.imgur.com/SkUNDOQ.jpg')
.add('fakeimg3','https://i.imgur.com/SkUNDOQ.jpg')
.load(()=> {
console.log('Done');
})

正常來講完成後你會得到一個 Done,這種方式是比較方便寫可以明確指定載入,那該如何將圖片貼入呢?

1
2
3
4
5
6
7
8
9
10
const loader = new PIXI.Loader();
loader
.add('fakeimg1','https://i.imgur.com/SkUNDOQ.jpg')
.add('fakeimg2','https://i.imgur.com/SkUNDOQ.jpg')
.add('fakeimg3','https://i.imgur.com/SkUNDOQ.jpg')
.load((loader, resource)=> {
console.log('Done');
const sprite = new PIXI.Sprite(resource.fakeimg1.texture);
container.addChild(sprite)
})

恭喜你,這樣圖片就貼入 container 了,此外 add() 也可以以陣列形式撰寫

1
2
3
4
5
add([
'https://i.imgur.com/SkUNDOQ.jpg',
'https://i.imgur.com/SkUNDOQ.jpg',
'https://i.imgur.com/SkUNDOQ.jpg',
])

但是以陣列形式撰寫的話,圖片就會需要使用 for...in... 迴圈來加載

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const loader = new PIXI.Loader();
loader
.add([
'https://i.imgur.com/SkUNDOQ.jpg',
'https://i.imgur.com/S6sxipJ.jpg',
'https://i.imgur.com/a21wWFL.jpg',
])
.load((loader, resource)=> {
console.log('Done');
for (let prop in resource) {
const sprite = new PIXI.Sprite(resource[prop].texture);
container.addChild(sprite)
}
})

那另一種寫法就下一篇介紹囉~

參考文獻