マルチタッチできるようにする
マルチタッチできるようにするには、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
)を持っており、その識別子を参照することでマルチタッチを識別することができます。
下記のコンテンツではピンチイン・ピンチアウトを簡易実装しています。ピンチイン・ピンチアウトで短形が拡大縮小されます。 マルチタッチ可能なスマートフォン等のデバイスでご確認ください。