是 Ray 不是 Array

整理這些技術筆記真的很花時間，如果你願意 關閉 Adblock 支持我，我會把這份感謝轉換成更多「踩坑轉避坑」的內容給你！ヽ(・∀・)ﾉ

Advertisement
2020-03-09 JavaScript

PixiJS V5 教學 (5) - Texture

#JavaScript #PixiJS V5 教學 #PixiJS #Canvas #w3HexSchool

前言

有引入文字那麼就會有引入圖片啦~而 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)
    }
  })

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

參考文獻

整理這些技術筆記真的很花時間，如果你願意 關閉 Adblock 支持我，我會把這份感謝轉換成更多「踩坑轉避坑」的內容給你！ヽ(・∀・)ﾉ

Advertisement

你的支持會直接轉換成更多技術筆記

如果我的筆記讓你少踩一個坑、節省 Debug 的時間，
也許你可以請我喝杯咖啡，讓我繼續當個不是 Array 的 Ray ☕

buymeacoffee | line | portaly

Terminal

相關文章

PixiJS V5 教學 (40) - 終章

2020-11-11

PixiJS V5 教學 (39) - 音樂

2020-11-02

PixiJS V5 教學 (38) - TexturePacker

2020-10-31

PixiJS V5 教學 (37) - 加入 stats.js

2020-10-21

分享這篇文章

留言

© 2025 Ray. All rights reserved.

Powered by Ray Theme