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を作成して幅・高さだけを指定すると作成することができます。

マルチタッチについて

pixi.jsのマルチタッチについてはこっちの記事にまとめてあるので気になる方はどうぞ(‘ω’)ノ

ゲーム開発試行錯誤

pixi.jsでマルチタッチ時のそれぞれの位置の取得について

https://techlog.wgc-cosmo.com/multi-touch-position

(※追記　この方法はAndroidでしか作動しないようです。iPhoneではちゃんと動きません。バーチャルパッドのつくりかたはこちらにあります　▷▷　スマホ用ブラウザゲームで使えるバーチャルパッドの作り方)自作ゲームエンジンを作っているときにpixi.jsのマルチタッチについての記事が全然なくてかなり困ったので記事にしておきます('ω')ノマルチタッチの認識についてまずマルチタッチは以下のようにして判別します。this.on('pointerdown', (event) => { const touches = event.data.originalEvent.targetTouche...