PixiJS V5 教學 (6) - Texture(2) | 是 Ray 不是 Array

前言

上一篇介紹了使用 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

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

前言

loader

參考文獻

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

Terminal

相關文章

分享這篇文章

留言

前言

loader

參考文獻

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

Terminal

相關文章

PixiJS V5 教學 (40) - 終章

PixiJS V5 教學 (39) - 音樂

PixiJS V5 教學 (38) - TexturePacker

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

分享這篇文章

留言