PixiJS V5 教學 (5) - Texture

發表於 2020-03-09 分類於 JavaScript

有引入文字那麼就會有引入圖片啦~而 PIXI 會使用 GPU 以及 WebGL 來渲染圖片，而圖片需要經過處理才能夠使用的，而通常處理好的圖片都會稱為 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 就搞定囉~

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 的圖片來當作範例

// 第一種寫法
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 的好處在於可以多筆引入圖片

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

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

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，這種方式是比較方便寫可以明確指定載入，那該如何將圖片貼入呢?

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() 也可以以陣列形式撰寫

add([
  'https://i.imgur.com/SkUNDOQ.jpg',
  'https://i.imgur.com/SkUNDOQ.jpg',
  'https://i.imgur.com/SkUNDOQ.jpg',
  ])

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

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

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

參考文獻

PixiJS