Skip to content

マルチタッチできるようにする

マルチタッチできるようにするには、g.PointEvent#pointerId を利用します。

IMPORTANT

ニコ生ゲームでは、マルチタッチがゲームプレイ上必須にならないようにしてください。 PC ユーザに遊べないゲームになってしまうためです。

凡例

javascript
let pointCache = [];
scene.onPointDownCapture.add((ev: g.PointDownEvent) => {
  if (!pointCache.find(id => id === ev.pointerId)) {
    pointCache.push(ev.pointerId);
  }

  if (pointCache.length === 2) {
    // 2本指の2本目の押下時の処理
  }
});

scene.onPointMoveCapture.add((ev: g.PointMoveEvent) => {
  if (pointCache.length === 2) {
    // 2本指でタッチ中の移動時の処理
  }
});

scene.onPointUpCapture.add((ev: g.PointUpEvent) => {
  if (pointCache.length === 2) {
    // 2本指のタッチの終了時の処理
  }

  pointCache = pointCache.filter(id => id !== ev.pointerId);
});

タッチイベントの流れは、 g.PointDownEvent, g.PointMoveEvent, g.PointUpEvent の順に実行されます。凡例のコードでは g.PointDownEvent でタッチされたイベントの ID を配列に追加し、g.PointMoveEvent で配列数が 2 つの場合にマルチタッチ時の処理を行い、g.PointUpEvent で配列をクリアしています。

利用例

次のコンテンツは、ゲーム画面をタッチした箇所に矩形を追加します。マルチタッチの場合は 2 つ目の矩形が赤色で表示されます。 マルチタッチ可能なスマートフォン等のデバイスでご確認ください。

詳細

Akashic Engine ではユーザがタップやクリックするとポイントイベントが発生します。 ポイントイベントはそれぞれユニークな識別子(PointEvent#pointerId)を持っており、その識別子を参照することでマルチタッチを識別することができます。

下記のコンテンツではピンチイン・ピンチアウトを簡易実装しています。ピンチイン・ピンチアウトで短形が拡大縮小されます。 マルチタッチ可能なスマートフォン等のデバイスでご確認ください。

関連情報