pixi.jsのイベントを無理やり代入して動かす

この記事は @HibikineCode 1人 Advent Calendar 2018 の3日目の記事です。

ゲームエンジン pixi.js にはドキュメント化されていない機能があります。私が知っているうちの1つ、「on コールバック関数を DisplayObject に代入すると動く」について調べてみました。pixiをしばきたい人はどうぞ。

pixi.js のイベント

pixi.jsのイベントは、ドキュメント通りにはonメソッドで登録します。

const sprite = new Sprite();
sprite.interactive = true;
sprite.on('pointerdown', () => console.log('Clicked!');

ところが、これでも登録できます。

const sprite = new Sprite();
sprite.interactive = true;
sprite.pointerdown = () => console.log('Clicked!');

この場合は当然1つしか登録できませんので、基本的には前者の方法を使うことになります。

この方法は、React Pixi Fiberといったライブラリを使う時に効果を発揮します。

const HogeSprite = () => (
  <Sprite
    texture={texture}
    interactive
    pointerdown={() => console.log('Clicked!')}
  />
);

感想

実は v4 以前の機能としてあって、互換で残ってるのかも。