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イベントでスマホでは動かないものがあるようです。
タッチの座標を取得
タッチの座標などの情報は下記のような感じに取得できます。
this.on('pointerdown', (event) => {
const pos = event.data.getLocalPosition(event.currentTarget);
ball.postion.set(pos.x, pos.y);
});
getLocalPositionは引数に指定した要素上の座標になります。だいたいはタッチしたもの(event.currentTarget)か、もしくはその親(event.currentTarget.parent)の座標を取得することになると思います。
パブリングに注意
javascriptのタッチなどのイベントにはバブリングという機能があります。
これは例えばオブジェクトをタッチしたときにそのタッチで起こるイベントがそのタッチしたオブジェクトだけでなくそのオブジェクトの親オブジェクトでもイベントが起こる現象です。
もうちょっと具体的な例としては、例えば画面をタッチしたらキャラがジャンプするようにしていて、その画面の上にポーズボタンを作っていた場合、このポーズボタンを押すとキャラもジャンプしてしまう現象です。ポーズだけしてくれればいいのにキャラがジャンプしてしまう現象が起こります。
これの対処法は
pauseBtn.on("pointerdown", (e) => {
e.stopPropagation();//eventの伝搬を止める
//ボタンの処理
});
e.stopPropagation()を書いておくと親への伝搬を止めることができます。
Containerのタッチイベント
画面をタッチして動かす場合にPixi.ContainerにイベントをつけたいところですがContainerだけではタッチイベントは機能しないみたいです。
Containerにタッチイベントを仕込みたい場合はSpriteを画面の幅・高さに作ってaddChildしてやるとSpriteからのバブリングで使うことができます(画像は無しでもOK)。
マルチタッチについて
pixi.jsのマルチタッチについてはこっちの記事にまとめてあるので気になる方はどうぞ(‘ω’)ノ
タッチで動かしたいものと実際にタッチするもの
ゲームで表示されている画像を動かしたいときに動かしたいものを直接タッチして動かすのか？それとも背景をタッチして動かした方が良いのか？をちょっと考えたりします。
スマホで遊ぶ場合にプレイヤーキャラなどを直接指でタッチして動かそうとすると指で隠れて見づらくなってしまうので直接キャラクターではなく背景にタッチイベントを仕込んで動かすようにしたりしています。
ゲームにもよりますがどこを触って動かすかっていうのはちょっと考えてみると良いと思います。
pixi.jsでenchant.jsみたいにさっくりブラウザゲームが作れる簡易ゲームエンジンを作ってみたので興味ある方は見てみてください(‘ω’)ノ
