インタラクション

PixiJSは主にレンダリングシステムですが、インタラクティビティのサポートも含まれています。プロジェクトにマウスやタッチイベントのサポートを追加するのは簡単かつ一貫しています。

イベントモード

v6からInteractionManagerを置き換える新しいイベントベースシステムは、コンテナーがインタラクティブであることの定義を拡張しました。これにより、オブジェクトがインタラクションイベントに応答する方法を制御できるeventModeを導入しました。これはv6のinteractiveプロパティと似ていますが、オプションが多くなっています。

eventMode	説明
none	CSSのpointer-events: noneに似て、すべてのインタラクションイベントを無視します。非インタラクティブな子要素に対して最適化されています
passive	イベントをエミットせず、自身に対するヒットテストを無視しますが、イベントとヒットテストのみインタラクティブな子要素に対して許可されます。これは、すべてのコンテナーのデフォルトのeventModeです
auto	イベントをエミットしませんが、親がインタラクティブな場合はヒットテストを行います。v7のinteractive = falseと同じです
static	イベントをエミットし、ヒットテストを行います。ボタンなどのオブジェクトには、v7のinteraction = trueと同じで、移動しないオブジェクトに適しています
dynamic	イベントをエミットし、ヒットテストも行いますが、ティッカーから発行されたモックインタラクションイベントも受信するため、マウスが動いていない場合でもインタラクションが可能です。独立して移動またはアニメーション化されている要素に適しています

イベントタイプ

PixiJSは次のイベントタイプをサポートしています

イベントタイプ	説明
pointercancel	ポインターデバイスのボタンが、最初にpointerdownを登録したディスプレイオブジェクトの外側で放されたときに発生します。
pointerdown	ポインターデバイスのボタンがディスプレイオブジェクト上で押されたときに発行されます。
pointerenter	ポインターデバイスがディスプレイオブジェクトに入るときに発行されます。
pointerleave	ポインターデバイスがディスプレイオブジェクトから離れるときに発行されます。
pointermove	ポインターデバイスがディスプレイオブジェクト上にありながら移動するときに発行されます。
globalpointermove	ポインターデバイスが移動したときに、現在のオブジェクトのヒットテストに関係なく発行されます。
pointerout	ポインターデバイスがディスプレイオブジェクトの外側に移動したときに発行されます。
pointerover	ポインターデバイスがディスプレイオブジェクト上へ移動した時に起動されます。
pointertap	ポインターデバイスがディスプレイオブジェクト上で2回タップされた時に起動されます。
pointerup	ポインターデバイスのボタンがディスプレイオブジェクト上で離された時に起動されます。
pointerupoutside	ポインターデバイスのボタンが、最初にpointerdownを登録したディスプレイオブジェクトの外側で放されたときに発生します。
mousedown	マウスのボタンがディスプレイオブジェクト上で押された時に起動されます。
mouseenter	マウスカーソルがディスプレイオブジェクト内に入った時に起動されます。
mouseleave	マウスカーソルがディスプレイオブジェクトから出た時に起動されます。
mousemove	マウスカーソルがディスプレイオブジェクト上にある間に移動した時に起動されます。
globalmousemove	マウスが移動した時に起動され、現在のオブジェクトとのヒットテストを実行するかどうかは関係ありません。
mouseout	マウスカーソルがディスプレイオブジェクトから外へ移動した時に起動されます。
mouseover	マウスカーソルがディスプレイオブジェクト内に入った時に起動されます。
mouseup	マウスのボタンがディスプレイオブジェクト上で離された時に起動されます。
mouseupoutside	マウスのボタンが、最初にmousedownを登録したディスプレイオブジェクトの外側で離された時に起動されます。
click	マウスのボタンがディスプレイオブジェクト上でクリックされた（押されて離された）時に起動されます。
touchcancel	最初にtouchstartを登録したディスプレイオブジェクトの外側でタッチポイントが削除された時に起動されます。
touchend	タッチポイントがディスプレイオブジェクトから削除された時に起動されます。
touchendoutside	最初にtouchstartを登録したディスプレイオブジェクトの外側でタッチポイントが削除された時に起動されます。
touchmove	タッチポイントがディスプレイオブジェクトに沿って移動した時に起動されます。
globaltouchmove	タッチポイントが移動した時に起動され、現在のオブジェクトとのヒットテストを実行するかどうかは関係ありません。
touchstart	タッチポイントがディスプレイオブジェクト上に置かれた時に起動されます。
tap	タッチポイントがディスプレイオブジェクト上で2回タップされた時に起動されます。
wheel	マウスのホイールがディスプレイオブジェクト上で回された時に起動されます。
rightclick	右のマウスのボタンがクリックされた（押されて離された）時に起動されます。
rightdown	右のマウスのボタンがディスプレイオブジェクト上で押された時に起動されます。
rightup	右のマウスのボタンがディスプレイオブジェクト上で離された時に起動されます。
rightupoutside	右のマウスのボタンが、最初にrightdownを登録したディスプレイオブジェクトの外側で離された時に起動されます。

インタラクションの有効化

Containerから派生したオブジェクト（Sprite、Containerなど）は、eventMode プロパティを上記のいずれかのeventModeに設定するだけでインタラクティブにすることができます。そうすることで、オブジェクトはあなたのプロジェクトの動作を制御するために応答可能なインタラクションイベントを放出します。

インタラクションコード例 をご覧ください。

クリックやタップに応答するには、オブジェクト上で発生するイベントに以下のようにバインドします。

let sprite = Sprite.from('/some/texture.png');
sprite.on('pointerdown', (event) => { alert('clicked!'); });
sprite.eventMode = 'static';

サポートされているインタラクションイベントのリストについては、 Container をご覧ください。

オブジェクトがインタラクティブかどうかを確認する

isInteractive プロパティを呼び出すことで、オブジェクトがインタラクティブであるかどうかを確認できます。eventMode が static または dynamic に設定されている場合、true が返されます。

if (sprite.isInteractive()) {
    // sprite is interactive
}

ポインターイベントを使用する

PixiJS は 3 種類のインタラクションイベント（マウス、タッチ、ポインター）をサポートしています。マウスイベントはマウスの動き、クリックなどで発生します。タッチイベントは、タッチに対応したデバイス向けに発生します。ポインターイベントは、どちらに対してでも発生します。

つまり、ほとんどの場合、プロジェクトでポインターイベントを使用するように記述できます。マウスでもタッチ入力でも使用すると、そのまま機能します。したがって、ポインター以外のイベントを使用する唯一の理由は、入力タイプに基づいて異なる操作モードをサポートしたり、マルチタッチ操作をサポートしたりするためです。他のすべてのケースでは、ポインターイベントを優先してください。

最適化

ヒット検出にはオブジェクトツリー全体のリストが必要であり、複雑なプロジェクトでは最適化のボトルネックになる可能性があります。この問題を軽減するために、PixiJS から派生したコンテナオブジェクトには interactiveChildren という名前のプロパティがあります。複雑な子ツリーを持つコンテナやその他のオブジェクトで、インタラクティブにならないことがわかっている場合は、このプロパティを false に設定できます。そうすると、ヒット検出アルゴリズムはホバーイベントとクリックイベントのチェック時にそれらの子供をスキップします。たとえば、サイドスクロールゲームを構築している場合、岩、雲、花などが配置されている背景レイヤーに background.interactiveChildren = false を設定する必要があるでしょう。背景レイヤーはクリックできない子オブジェクトを多数含んでいるため、これによりヒット検出が大幅に高速化されます。

また、EventSystem をカスタマイズして、より高いパフォーマンスを実現することもできます

const app = new Application({
    eventMode: 'passive',
    eventFeatures: {
        move: true,
        /** disables the global move events which can be very expensive in large scenes */
        globalMove: false,
        click: true,
        wheel: true,
    }
});