pixi.jsのタッチイベントの使い方

pixi.jsでのタッチイベントについてわかったことを書いておきます。

 

イベントの基本

pixi.jsでのイベントの使い方は

abcde.on('pointerup', () => {
  //処理
});

のようにonメソッドでイベント名を指定してコールバック処理を書けばそのイベントが発生したときに処理を行ってくれます。

interactiveをtrueにする

タッチイベントを使うには対象オブジェクトのinteractiveプロパティをtrueにする必要があります。

これを設定し忘れるとタッチイベントを作っても動いてくれません。

「あれぇ？なんで動かんのや？」ってときはだいたいこれを忘れています(;^ω^)

pointerでつくればPCもスマホもいける

pixi.jsではかなりたくさんのタッチ/マウスに関するイベントがあります。

参考　▷▷▷　PIXI.interaction.InteractionManager

mousedownやtouchstartなどマウス・スマホ用にイベントがありますが、基本的にpointerで指定すればPCでもスマホでも動きます。

pointerdown、pointermove、pointerupを基本的に使っていけばOKです。

ただしpointermoveはPCの場合pointerdownしてようがしてなかろうが関係なしにマウスを動かせば発火するので押しているだけを判別して動かすには押している状態を管理するフラグが必要です。

スマホではpointeroutが効かない

対象のオブジェクトからポインターが外れたときに発生するpointeroutが残念ながらスマホでは使えないようです。

そして残念ながらtouchoutというものもないようです。

なのでスマホの場合はtouchmoveで動かした位置が対象のオブジェクトの大きさより外側になっているかをチェックして外側に出ていたら処理を行うようにする必要があります。

他にもpointerイベントでスマホでは動かないものがあるようです(でも使わないんじゃないかな？)。

タッチで動かしたいものと実際にタッチするもの

ゲームで表示されている画像を動かしたいときに動かしたいものを直接タッチして動かすのか？それとも背景をタッチして動かした方が良いのか？をちょっと考えたりします。

スマホで遊ぶ場合にプレイヤーキャラなどを直接指でタッチして動かそうとすると指で隠れて見づらくなってしまうので直接キャラクターではなく背景にタッチイベントを仕込んで動かすようにしたりしています。

ゲームにもよりますがどこを触って動かすかっていうのはちょっと考えてみると良いと思います。

Containerにはタッチイベントがない

背景をタッチして動かす場合にPixi.ContainerにイベントをつけたいところですがContainerはタッチイベントは機能しないみたいです。

Containerはただの入れ物ということらしく、そういった機能は無いんだそうです。

透明な背景でタッチイベントをつけたい場合は画像無しのSpriteを作成して幅・高さだけを指定すると作成することができます。