PixiJS V5 教學 (6) - Texture(2)

前言

上一篇介紹了使用 new PIXI.Loader(); 的方式來渲染圖片,這一篇則會介紹另一種寫法。

loader

上一篇介紹了 new PIXI.Loader(); 的寫法

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)
}
})

而這一次要介紹的另一種寫法呢? const loader = PIXI.Loader.shared;,這個寫法與 new PIXI.Loader(); 寫法非常雷同

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

基本上你會發現寫法根本一模模一樣樣,所以應該會有很多人問,那要用哪一種寫法呢?答案是「你高興就好」,因為我也不是非常清楚,但是我比較偏好於使用 new PIXI.Loader(); 的做法,此外這個寫法一樣不可以使用 https://fakeimg.pl/100/ 來生成的。

最後讓我們來做點有趣的事情,我們來加載其他圖片,然後一次生成 25 個

1
2
3
4
5
6
7
8
9
10
const loader = new PIXI.Loader();
loader
.add('fakeimg','https://i.imgur.com/j5QyG2t.png')
.load((loader, resource)=> {
console.log('Done');
for(let i = 0;i < 25; i += 1){
const sprite = new PIXI.Sprite(resource.fakeimg.texture);
container.addChild(sprite)
}
})

但是此時你應該會發現好像沒有增加只有一張的感覺,這時候我們可以透過 PIXI 的一個 API,並設置 x 以及 y

1
2
3
4
5
6
7
8
9
10
11
12
const loader = new PIXI.Loader();
loader
.add('fakeimg','https://i.imgur.com/j5QyG2t.png')
.load((loader, resource)=> {
console.log('Done');
for(let i = 0;i < 25; i += 1){
const sprite = new PIXI.Sprite(resource.fakeimg.texture);
sprite.x = Math.floor(i) * 100;
sprite.y = Math.floor(i) * 100;
container.addChild(sprite)
}
})

這樣就會看到很多張圖片,但是他會一路往右下角延伸,這邊我們可以使用 PIXI 官方的範例公式來修改,並設置錨點 sprite.anchor.set(0.5);

1
2
3
sprite.anchor.set(0.5);
sprite.x = (i % 5) * 40;
sprite.y = Math.floor(i / 5) * 40;

這樣你就可以看到一推的 Emoji 了~

參考文獻

0%