PIXI.JS把Sprite寫成Class

在 JavaScript 中， Class是一種用於建立物件的函數類型。它是建立物件的模板，並提供了封裝屬於物件的屬性和方法的方式。

JavaScript Class也支援繼承，這允許一個class繼承另一個class的屬性和方法。這是使用 extends 關鍵字來實現的。

在使用PIXI.JS時也可使用class的方式封裝並繼承需要重複使用的PIXI.Sprite或PIXI.AnimatedSprite，例如我需要重複創建一個金幣的PIXI.AnimatedSprite並添加到舞台上，class的範例寫法如下：

// 金幣陣列
let goldArray = [];

class gold extends PIXI.AnimatedSprite {
  constructor(texture) {

    // 整理AnimatedSprite需要的貼圖陣列
    let textureArray = [];
    for (let i = 1; i < 8; i++) {
      textureArray.push(PIXI.Texture.from('gold_'+i+'.png'))
    }

    // 使用整理好的貼圖陣列
    super(textureArray);

    // 設置動畫的中心點置中
    this.anchor.set(0.5);

    // 設置動畫的位置
    this.x = (goldArray.length)?goldArray[goldArray.length-1].x + 60 + Math.floor(Math.random() * 5) * 60 : 800;
    this.y = 140;

    // 設置動畫的尺寸
    this.width = 31;
    this.height = 40;

    // 設置動畫的播放速度    
    this.animationSpeed = 0.15;

    // 播放動畫
    this.play();
    
    // 將動畫添加到舞台上
    app.stage.addChildAt(this, 2);

    // 將動畫添加到金幣陣列裡
    goldArray.push(this);
  }
}

金幣Sprite Sheet素材

這樣就可以在需要時使用 new 關鍵字來創建重複的連續動圖了，如下：

// 創建金幣動圖
new gold();

// console.log(goldArray) (1) [gold]

使用 new gold() 創建gold範例圖

// 連續創建5個金幣動圖
for (let i = 0; i < 5; i++) {
  new gold();
}

// console.log(goldArray) (5) [gold, gold, gold, gold, gold]