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

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

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

｜

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

前言

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

loader

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

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(); 寫法非常雷同

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 個

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 軸

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 了~

參考文獻

PixiJS