キーボード専用のブラウザゲームにタッチ操作を追加するには？

ゲームがすでに理解できる入力を渡す、独立したタッチレイヤーをゲームの上に重ねます。KittenGalaxy で行った方法と、まだテストできていない点を紹介します。

タッチを、ゲームがすでに扱える入力に変換する独立した画面上の操作レイヤーを追加し、ゲームの画面ごとに違う操作ボタンを表示します。ゲームを書き直す必要はありません。私たちはこの方法で KittenGalaxy をスマホで遊べるようにしました。この記事では、まだテストできていない部分も含めて、その判断を順に説明します。

もともとゲームは何を想定していたのか？

KittenGalaxy は、canvas に描画する1つの JavaScript ファイルとして書かれたアーケードシューティングです。入力はすべて3つの経路で届いていました。飛行・射撃・メニュー用のキー入力、パイロット名のための文字入力、そしてショップの一覧と、算数チャレンジで canvas 上に描かれるテンキーへのマウスクリックです。

スマホでは、プレイヤーが押せるものが何もなくなります。キーはなく、canvas 上の数字キーは幅720ユニットのプレイフィールドの中で幅38ユニットなので、幅375ピクセルのスマホでは約20 CSS ピクセルにしかなりません。確実に押すには小さすぎます。

タッチは共有の入力状態を変えるべきか、キーイベントを送るべきか？

よくある設計は2つあります。

共有状態のほうがきれいな設計で、これからゲームを作るならそうしてください。私たちが合成キーイベントを選んだ理由は1つです。KittenGalaxy は別の場所で開発されており、受け取ったファイルを1バイトも変えずに保っているので、新しいバージョンを取り込むたびに自分たちの変更をやり直す必要がありません。スクリプトで作ったイベントは、通常のリスナーにきちんと届きます。ブラウザ自身の既定の動作は引き起こしませんが、ゲームには不要です。

タッチレイヤーは、ゲームが今どの画面にいるかも知る必要があります。そのために、ビルド時に小さな読み取り専用オブジェクトを1つ追加し、現在の状態やロケットを装備しているかどうかなど、いくつかの値を公開しています。そこからゲームを変更することはできません。

画面ごとにどんな操作が必要か？

固定のボタン一式を置くのが最初によくある試みですが、ゲームにメニューがあるとすぐに破綻します。すべての画面と、そこでプレイヤーができなければならないことを書き出しましょう。

予想以上に重要だった点が3つあります。

文字入力には本物のテキスト欄を使う。スマホがキーボードを表示するのは、フォーカスのあるテキスト欄だけです。その欄自体のキー入力はゲームに渡さず、完成した名前を一度にゲームへ入力しています。

指はホバーできない。マウスなら、ショップの行を指すと選択、クリックで購入です。タップはその両方を同時に行ってしまうため、誤って買いやすくなります。レイヤーは、行への最初のタップを選択に変え、2回目を購入として通します。

該当しないものは隠す。ロケットのボタンはロケットを装備しているときに、爆弾のボタンは爆弾を持っているときに現れます。ボタンが少ないほど、ボタンを大きくできます。

親指用スティックはどう作るか？

ゲームの宇宙船は矢印キーと同じく8方向に動くので、スティックはどの矢印キーが押されているかを決めるだけです。私たちのスティックは親指が触れた場所に現れ、12ピクセルのデッドゾーン内の動きは無視し、親指がその軸に沿って十分に離れたときに、その方向を押されたものとして扱います。

const DEAD = 12;
function steer(dx, dy) {
  const far = Math.hypot(dx, dy) > DEAD;
  const want = {
    ArrowLeft:  far && dx < 0 && Math.abs(dx) >= Math.abs(dy) * 0.41,
    ArrowRight: far && dx > 0 && Math.abs(dx) >= Math.abs(dy) * 0.41,
    ArrowUp:    far && dy < 0 && Math.abs(dy) >= Math.abs(dx) * 0.41,
    ArrowDown:  far && dy > 0 && Math.abs(dy) >= Math.abs(dx) * 0.41,
  };
  // press the keys that became true, release the ones that became false
}

0.41 は 22.5 度のタンジェントで、円を8等分します。親指が縁を越えるとスティックの中心がついてくるので、方向を反転するのに長い動きではなく小さな動きで済みます。

タッチ、ペン、マウスを1組のハンドラで扱えるポインターイベントと、親指がスティックからずれても受け取り続けられるポインターキャプチャを使いました。射撃は既定で自動にし、射撃ボタンを好むプレイヤーのために切り替えを用意しています。1回のプレイ中ずっと親指を押し続けるのは疲れますし、シューティングは撃ちっぱなしでもほとんど損をしません。

ブラウザとゲームの衝突を防ぐには？

ブラウザは、指示がない限り、タッチをスクロール、ズーム、テキスト選択として扱います。

• ゲームとその操作部分に [touch-action: none](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/touch-action) を設定し、ドラッグを自分で処理できるようにします。
• ゲーム上でのテキスト選択と長押しメニューを無効にします。
• ウィンドウがフォーカスを失ったら、押されているキーをすべて離します。そうしないと、通知が画面を占めたあとも宇宙船が左へ飛び続けます。
• 音は実際のタップから始めます。ブラウザは、プレイヤーがページを操作したあとにしか音声を許可しないため、最初のタップでゲームの音声も起こします。
• 操作ボタンは描画ループだけでなくタイマーからも更新し、最初のフレームが描かれる前に正しいボタンが出ているようにします。
• ゲームが空けている帯を使います。縦向きでは正方形のプレイフィールドが中央にあるので、操作ボタンは上下の黒い帯に置きます。横向きでは四隅に置き、薄く表示します。

何をテストし、何をしていないか？

公開当日の 2026 年 10 月 8 日、スマホのサイズに設定したデスクトップブラウザで、縦向き（375 × 812）と横向き（812 × 375）のタッチレイヤーを確認しました。スクリプトによるタッチで操作し、テキスト欄からのパイロット作成、プレイの開始、スティックの全8方向、ショップ、テンキーでの算数問題への解答を試しました。

実機のスマホやタブレットではまだ遊んでいません。エミュレーションでは、本物の親指でのスティックの感触、各スマホのキーボードの挙動、遅い端末での動作はわかりません。ゲームのページでは、モバイルブラウザの遊び方のところにまさにこのとおり書いてあり、実機で試したら更新します。ご自分のスマホで遊んだら、端末と起きたことを書いたレビューを送っていただけるのが何よりも役に立ちます。

よくある質問

タッチ操作にゲームエンジンは必要ですか？ いいえ。ボタンは canvas の上に置いた普通の HTML 要素で、どれに触れたかはブラウザが判定します。

ボタンは canvas に描くべきですか、HTML で作るべきですか？ ほとんどの場合は HTML です。当たり判定、マルチタッチ、アクセシビリティ用のラベルを自分で書かずに済み、CSS で見た目を変えられます。

タッチボタンはどのくらいの大きさにすべきですか？ プレイ中に押すボタンは縦向きで各辺 46 CSS ピクセル以上、主要なボタンはさらに大きくしています。隅にあるいくつかの補助ボタンは意図的に小さくしています。置き換えた canvas 上のキーは約 20 でした。

プレイヤーは隠れたジェスチャーに気づきますか？ 気づかないと考えてください。私たちのレイヤーでは、すべての操作に目に見えるラベル付きのボタンがあります。

モバイル操作が完成する前に、HeapPlay にゲームを掲載できますか？ はい。それぞれの遊び方は個別に掲載・確認されるので、今はパソコン向けの遊び方でゲームを投稿し、モバイル向けは後から追加できます。その後、確認済みの開発者は各バージョンを自分で記録できます。開発者が受け取れるものをご覧ください。