(※追記 この方法はAndroidでしか作動しないようです。iPhoneではちゃんと動きません。
バーチャルパッドのつくりかたはこちらにあります ▷▷ スマホ用ブラウザゲームで使えるバーチャルパッドの作り方)
自作ゲームエンジンを作っているときにpixi.jsのマルチタッチについての記事が全然なくてかなり困ったので記事にしておきます(‘ω’)ノ
pixi.jsのバージョンはv5です。
マルチタッチの認識について
まずマルチタッチは以下のようにして判別します。
this.on('pointerdown', (event) => {
const touches = event.data.originalEvent.targetTouches
if(!touches || touches.length < 2){//複数タッチしていない
//処理
}else {//複数タッチしている
//処理
}
}
event.data.originalEvent.targetTouchesは配列でシングルタッチの時はundefinedになっています。なので配列の長さが2以上になっているときがマルチタッチだということになります。
タッチそれぞれの位置の取得の方法
わからなかったのが位置の取得。
まずシングルタッチの時はevent.data.getLocalPosition(DisplayObject)で押した位置の座標を取得できます。
マルチタッチの場合はevent.data.originalEvent.targetTouchesの配列の各要素がオブジェクトになっていてその中に座標が入っています(console.logで確認してください)。
配列に入るタッチの順番について
で、まず一つ目の問題がこの配列の順番。
押した順番に配列に入っていくのは想像できると思いますが、離したタッチはどうなるの？そして別のをまたタッチしたら？
ここがどうなってるのかわからなくてかなり時間を使ったんですが、結論をサラッと言うと
- 押した順番に配列に入る
- 離しても配列の順番は変わらない(まだどこかタッチしている場合)
- 完全ノータッチ時に配列はクリアされる
となっているようです。
押した順番を記録しておいて、ノータッチになったときに初期化すれば各タッチを識別することができます。
マルチタッチ時の位置がずれる問題の解決策
event.data.originalEvent.targetTouches配列内のオブジェクトから取得した位置はシングルタッチで使ったgetLocalPosition()で取得した位置とズレます。
これの原因はgetLocalPosition()で取得する位置はPIXI.Application()で作成した解像度に変換されているのに対して、event.data.originalEvent.targetTouchesで取得した位置はディスプレイの解像度での位置になっています。
この問題を解決するには PIXI.Applicatin解像度 / 画面解像度で比率を出して掛ければ解決します。
また中央寄せなどを使っている場合はPIXI.Applicatinのview.clientWidth(clientHeight)でゲーム画面の幅(高さ)を取得できるので画面サイズからそれを引いた値の半分をタッチ位置から引いて計算すると合わせることができます。
参考資料
