スマホ対応の2人対戦ゲーム「Mace Duel Mobile」設計案：Three.jsとWebSocketで作るオンライン対戦

目指すのは「スマホでも成立する、短時間の1対1アクション」

「Mace Duel Mobile」は、メイスによる近接攻撃と風のチャージ攻撃を軸にした、ブラウザ上の2人対戦アクションの実装案です。PCだけでなくスマートフォンのブラウザでも遊べることを前提に、専用ルーム、タッチ操作、ラウンド制、再戦までをひとつの構成にまとめています。

クライアントは TypeScript＋Vite＋Three.js、サーバーは Node.js＋TypeScript＋ws を採用。ゲームの公平性を保つため、クライアントは移動入力や視点、攻撃命令を送るだけにとどめ、HP、ダメージ、命中、勝敗といった重要な状態はサーバーが確定します。

基本アーキテクチャ

• client/：3D描画、UI、キーボード・マウス・タッチ入力、音、相手プレイヤーの補間表示を担当
• server/：ルーム管理、固定30Hzのシミュレーション、移動、戦闘、投射物、HP、ラウンド結果を担当
• shared/：プロトコル型、ゲーム定数、ダメージ計算などをクライアント・サーバー間で共有

この構成では、プレイヤー位置やHPをクライアントから「正しい値」として送信させません。入力シーケンス番号、移動方向、視点角度、攻撃・風チャージの命令を受け取り、サーバーがルールに沿って状態を更新します。対戦ゲームでは、こうしたサーバー主導の判定が不正対策と同期の土台になります。

スマホ操作は「左右を役割分担」

モバイル版では、画面を横持ちにするランドスケープ表示を推奨します。操作は次のように整理します。

• 左側の仮想スティック：移動
• 右側のドラッグ：カメラ・視点操作
• ジャンプボタン
• ダッシュボタン
• メイス攻撃ボタン
• 風のチャージ攻撃ボタン

複数の指を同時に扱える入力設計にすれば、移動しながら視点を振り、攻撃ボタンを押すといった対戦アクションに必要な操作を成立させやすくなります。モバイル向けゲームのタッチ操作では、複数ポインターを利用した同時入力が重要です。1

PCでは、キーボードとマウスによる移動・視点操作も残す設計です。これにより、スマホとPCが同じルームで対戦できる構成を目指せます。

バトルのルール：落下攻撃と風のチャージ

戦闘には、通常のメイス攻撃に加え、空中から落下して当てる強化攻撃を用意します。

• 通常攻撃：射程と視線方向の判定を通った相手に固定ダメージ
• 落下攻撃：一定以上の落下距離と下降状態を満たすと追加ダメージ
• ノックバック：攻撃の種類に応じて相手を押し出す
• 風のチャージ：最大3回までストックできる投射物。命中または地面などへの接触で爆発し、周囲のプレイヤーを吹き飛ばす

風のチャージは時間経過で回復します。直接ダメージだけを競うのではなく、相手を浮かせて落下攻撃の機会を作る、距離を取る相手を爆風で動かす、といった位置取りの駆け引きにつなげる狙いです。

ルームと試合進行

対戦は6文字のルームコードを使う専用ルーム方式です。1ルームは最大2人で、両者が準備完了になるとカウントダウンを経て試合を開始します。

1ラウンドは120秒。HPが0になったプレイヤーが出た場合、または時間切れになった場合にラウンドを確定し、勝利数が先に3に達したプレイヤーがマッチ勝者になります。試合終了後は、両者が再戦を選べば新しいマッチを始められます。

また、開始直後に短時間の無敵時間を設けることで、スポーン直後の一方的な攻撃を抑える設計です。

ネットワーク処理で重視する点

サーバーは30Hzの固定更新で移動、重力、ジャンプ、攻撃、投射物を処理します。クライアント側では自分の入力を先に反映して操作感を確保し、サーバーから届くスナップショットで位置を調整します。相手キャラクターは補間して描画し、通信ごとの座標更新がそのままカクついて見えないようにします。

近接攻撃では、相手の過去の短い位置履歴を使う判定も想定されています。通信遅延の一部を考慮することで、「画面上では当たっていたのに外れた」と感じる場面を減らすためです。ただし、巻き戻し時間には上限を設け、過度な補正は避けます。

メッセージについては、サイズ制限、JSONの解析、型チェック、数値の範囲制限、入力シーケンスの検証を行います。ルーム満員、存在しないルーム、異常な入力などはサーバー側で拒否する想定です。

Three.jsでのモバイル向け描画の考え方

地面や繰り返し配置するオブジェクトには、同じジオメトリとマテリアルを多数描画できるInstancedMeshを使う選択肢があります。Three.jsのInstancedMeshはインスタンシング描画をサポートする特殊なメッシュです。2

また、モバイル端末では影の描画が負荷要因になりやすいため、設定で影を無効化できるようにします。Three.jsのWebGLRendererではシャドウマップの有効・無効や更新方法を制御できます。4 端末性能に応じて、影を切る、解像度を下げる、エフェクトを抑えるといった段階的な品質設定を用意すると扱いやすくなります。

実装時の要点

この設計の核は、派手な3D表現よりも次の4点です。

1. サーバーを勝敗判定の基準にすること
2. スマホで同時操作できる入力配置にすること
3. 通信遅延を前提に、予測・補間・補正を分けること
4. モバイル性能に合わせて描画品質を調整できること

短いラウンドと明快な操作に絞りつつ、落下攻撃と風のチャージで立体的な駆け引きを生む。こうした構成なら、ブラウザ上でも「対戦している感」を損なわないモバイル向けアクションを組み立てやすくなります。