ジェスチャーとブラウザーの境界を決める
マウス、ペン、タッチの入力を同じ仕組みで扱うのがゲームの操作に合う場合は、Pointer Eventsを使います。pointerdownから移動、解放までアクティブなポインターを追跡し、マルチタッチが意図した仕様でない限り、ほかのポインターは無視します。プレイヤーが必要とするブラウザーのスクロールやピンチズームを残せるよう、ゲーム面にtouch-actionを設定します。面全体にtouch-action: noneを指定すると、ブラウザーのズームを使えなくなることがあります。
ドラッグ操作では、つかんだことがすぐ分かる状態を表示し、ポインターの位置に合わせてオブジェクトを更新します。タップ操作では、わずかな移動で起動をキャンセルするかを決め、実際のタッチ端末で境界値を試します。ジェスチャーの規則はページ全体ではなく、ゲーム面に限定します。
キャンセルを通常の結果として扱う
ブラウザーがジェスチャーを引き継いだとき、端末の状態が変わったとき、または操作が別の理由で中断したとき、ポインターはキャンセルされることがあります。pointercancelを受け取ったら、通常の解放時と同じように押下状態を解除します。そうしないと、キャラクターが動き続けたり、ボタンが押されたままに見えたりします。ゲームがポインターをキャプチャしている場合は、後片付けの際にキャプチャを解放します。
タップ、ゆっくりしたドラッグ、画面端から始めるジェスチャー、ブラウザーのスクロール操作を試します。それぞれに明確なフィードバックがあり、ゲーム面から出ても操作が押されたままにならないことを確認します。MDNのPointer Eventsガイドでは、共通のポインターモデルとtouch-actionの動作が説明されています。
Webゲームのタッチ操作についての質問
ゲームではブラウザーのタッチジェスチャーをすべて無効にすべきですか？
ゲーム面がそれらのジェスチャーを本当に制御する必要がある場合に限ります。可能な範囲でブラウザーのスクロールやズームを残し、touch-actionの規則は必要な操作領域だけに適用します。
pointercancelの後はどうすべきですか？
進行中のゲーム操作を終了し、押下中またはドラッグ中の状態を解除します。キャンセルは想定される入力結果なので、pointerupと同じように確実に後片付けを行います。
関連情報
古い情報を見つけましたか？ 訂正を連絡