オンラインゲーム開発：五日間でオリジナルゲームをつくってみる - その２（ゲーム要素の実装）
この記事は「オンラインゲーム開発：五日間でオリジナルゲームをつくってみる - その１」の続編です。その１は下記から閲覧できます。
その１では、開発環境を整えるところまでを扱いました。ここから先は下記の内容に入ります。
- Day2~3: ゲーム要素の実装
- Day4~5: 「遊べるもの」に向けての調整
初日ですでに下記の設定が終わっていることを確認してください。
- ビルドできる開発環境：Webpack + HTML/JS
- ゲーム要素の描画、ユーザ入力：Canvas + KeyEvents
- サーバーサイドとの通信：Express server + WebSocket
不安な場所があれば、その１を復習しましょう。分かりにくい部分があれば質問ください。
Day2~3: ゲーム要素の実装
さて、ここでいったん作りたいものを確認をしましょう。ゲームのアイデアメモがあると便利です。
ゲームアイデアメモ
<登場人物>
キャラクター：2D空間で移動。
じゃんけんコイン：2D空間上に配置。
<ロジック>
キャラクターがコインを集めると集めたコインの総数に応じて状態変化（グー、チョキ、パーのいずれか）。
キャラクター同士がぶつかると、じゃんけん開始。キャラクターの状態に応じて、勝者が決まる。
勝者はそのまま2D空間に居残る。敗者は退出。
どうやって面白いゲームをつくるか、についてはこの記事では踏み込みません。自分もゲームをつくれるんだ、というイメージまで一緒にたどり着きましょう。
ロジックをデータに変換する
私のゲームの場合、登場人物に関する情報をデータとして表現することから始めました。全てを表現しようとは考えず、まずは「土台になりそうな部分」「イメージが湧きそうな部分」をデータで表現してみましょう。
{
players: [ { id: yuta, x: 0, y: 0 }, ... ],
coins: [ { kind: Rock, x: 10, y: 10 }, ... ],
}
それぞれID、座標を持つプレイヤーと、じゃんけんの属性と座標を持つコインをデータとして表現してみました。
ロジック、描画の分離
オンラインゲームにする上で大事なのが、ルールを管理するサーバーサイドと、描画・入力を担当するユーザー側の分離です。
ユーザー入力->状態変化(サーバーサイド)->画面の描画 というサイクル
まずは、上で表現したデータモデルをクライアントに描画する部分までをやってみましょう。上のサイクルでいうところの、状態変化が終わった状態から、画面の描画までの部分です。
- データモデルをJS Objectとして表現、サーバーサイドに持たせる
- 随時受け取るデータモデルの状態を、クライアントサイドで描画する
この部分の作業コミットは、こちらから。
今までの作業部分と比べると、ちょっと混み合っていると感じるかもしれません。質問あればコメント欄にて受け付けます。
成功すると、下記のようにサーバーサイドで定義したデータ gameStateがCanvasで反映されているはずです。
大きな丸がプレイヤー。小さな丸がコイン。開発の仕上げ（後述）で、画像に差し替えます。
ユーザ入力をサーバーに送る
サーバーからクライアントへのデータ送信に成功しました。今度は、クライアントからサーバーへのユーザ入力（カーソルキー）を送信してみましょう。
- ユーザー入力を、WebSocketのイベント送信につなげる。
- サーバーでその入力を受け取り、ゲームロジックの状態として保存。
- 前段で静的に表現していたデータモデルを、動的なものとして変更。
この部分をコードで表現すると、こんな感じのコミットとなりました。
うまくいっていれば、下記のように入力が描画に反映されます。クライアント→サーバー→クライアントという順番でメッセージが動いているのを脳内でイメージしてください。
途中経過
ここまでくれば、オンラインブラウザゲーム開発（プロトタイプ）の基礎はできたといってもいいと思います。おめでとうございます！
実際に「遊べる状態」に持っていく作業を、その３で説明します。最終章です！
Discussion