PIXI Sprite(Class)をextendsしてカスタマイズする

はじめに

new PIXI.Sprite() で作成したスプライトオブジェクトの型にはないプロパティを追加したかったが、そのまま追加すると「プロパティ'〇〇'は型 'Sprite'に存在しません」とTypescriptエラーが出るので、PIXI.Spriteをextendsしてカスタマイズしようと思います。

PIXI.Spriteをextendsする

PIXI.Spriteをextendsするには、

import * as PIXI from 'pixi.js'

export class ExtendedSprite extends PIXI.Sprite {
    constructor(texture: PIXI.Texture) {
        super(texture)
    }
}

と定義すればok。

PIXI.Spriteは引数にPIXI.Textureが必要なため、constructorでtextureを受け取り、super(texture)でextendsしたClass(PIXI.Sprite)を呼び出すだけです。
実際に使用する際は、new PIXI.Sprite()の代わりに、

import image from 'assets/image.png';

const texture = PIXI.Texture.from(image)
const sprite = new ExtendedSprite(texture)

と記述します。

extendsしたClassにプロパティを追加する

では、実際にこのextendsしたClassに新しくプロパティを追加してみます。例えば、Number型のcategoryIdを追加すると以下のようになります。

export class ExtendedSprite extends PIXI.Sprite {
    public categoryId?: number
    constructor(texture: PIXI.Texture) {
        super(texture)
    }
}

これで、

const texture = PIXI.Texture.from(image)
const sprite = new ExtendedSprite(texture)
sprite.categoryId = 1

とすることで、PIXI.Spriteを継承しつつもプロパティcategoryIdを持つClassを作成することが出来ました。
categoryIdごとにPIXI.Spriteを条件分岐して、Canvasに描画する際には便利だと思います。