PixiJS で、touchover、touchout イベントを取得したい場合があった際に、
mouseover, mouseout イベントを取っておけば勝手に動くとおもっていたが、Touch環境で動作せず、また、touchover、touchout イベントがPixiJSにそもそも無く困ったので調査したメモ。
作成した、PIXI.Renderer の plugins.interaction.hitTest 関数に、
タッチ座標を渡してあげると、当たっているオブジェクトが返ってくるので
これを使って実現する。
動作コード(Codepen)
注) touch環境のみにて確認できるコード
See the Pen PixiJS emurate touchenter and touchout. by quqjp (@quqjp) on CodePen.
コード概要
touchover,touchout イベントを取りたいオブジェクトに、touchover、touchout メソッドを実装。
touchover,touchout イベントを取りたいオブジェクトを内包するオブジェクトを、interactive = true にたうえで、
touchstart,touchmove,touchendイベントを取る。
イベントのハンドラー内で、plugins.interaction.hitTest を用いて当たっているオブジェクトを取得。
渡ってくるオブジェクトの変化を判定しtouchover、touchoutを呼び出す。
plugins.interaction.hitTest の判定は、対象のオブジェクトのhitArea設定にも有効であるようなので、
hitAreaにpolygonが設定された複雑なhitAreaでも動作できそう。