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

どのゲームで遊ぶ?

定番ゲームのマインスイーパーです。出てきた数字から爆弾の位置を推測します
クッソしょうもないあほげー。ある温泉街で殺人事件がおきた。どうやら犯人はこの中にいるようだ。
モバイル&対戦専用リバーシ。角を取ってみたら予想外に戦略が変わって面白い。
スマホ専用対戦ゲーム。3つの数字を順番にどちらが速く押せるかを競うミニゲーム。

コメント欄

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

コメントを残す

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

ゲームタグ一覧

ゲーム開発の参考書(amazon)

HTML5 ゲーム開発の教科書 スマホゲーム制作のための基礎講座
ゲームを作りながら楽しく学べるHTML5+CSS+JavaScriptプログラミング[改訂版] (Future Coders(NextPublishing))
改訂2版 はじめて学ぶ enchant.jsゲーム開発