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

自作ゲームエンジンを作っているときにpixi.jsのマルチタッチについての記事が全然なくてかなり困ったので記事にしておきます(‘ω’)ノ

マルチタッチの認識について

まずマルチタッチは以下のようにして判別します。

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)でゲーム画面の幅(高さ)を取得できるので画面サイズからそれを引いた値の半分をタッチ位置から引いて計算すると合わせることができます。

 

参考資料

https://github.com/dekimasoon/pixi-simple-gesture/blob/master/src/gestures/pinch.js

同カテゴリー記事

当サイトのオリジナルゲーム(ランダム表示)

enchant.jsでこんなのもできるのか?と試したテストゲーム。
ゲームではない。想像してください。壮絶な男たちの戦いを。。
未完成の失敗作。なんで公開してるんだとか言わないでくれ。。
簡単な計算問題を制限時間内に何問解けるかな?頭の体操にどうぞ。

記事の感想・コメント

※コメントはまだありません※

コメントを残す

メールアドレスが公開されることはありません。

ゲームジャンルタグ

新着技術ブログ記事

新着開発日記