オンラインゲーム開発:五日間でオリジナルゲームをつくってみる - その2(ゲーム要素の実装)

公開:2020/12/29
更新:2020/12/30
2 min読了の目安(約2400字TECH技術記事

この記事は「オンラインゲーム開発:五日間でオリジナルゲームをつくってみる - その1」の続編です。その1は下記から閲覧できます。

その1では、開発環境を整えるところまでを扱いました。ここから先は下記の内容に入ります。

  • Day2~3: ゲーム要素の実装
  • Day4~5: 「遊べるもの」に向けての調整

初日ですでに下記の設定が終わっていることを確認してください。

  1. ビルドできる開発環境:Webpack + HTML/JS
  2. ゲーム要素の描画、ユーザ入力:Canvas + KeyEvents
  3. サーバーサイドとの通信:Express server + WebSocket

不安な場所があれば、その1を復習しましょう。分かりにくい部分があれば質問ください。

Day2~3: ゲーム要素の実装

さて、ここでいったん作りたいものを確認をしましょう。ゲームのアイデアメモがあると便利です。

ゲームアイデアメモ

<登場人物>
キャラクター:2D空間で移動。
じゃんけんコイン:2D空間上に配置。

<ロジック>
キャラクターがコインを集めると集めたコインの総数に応じて状態変化(グー、チョキ、パーのいずれか)。
キャラクター同士がぶつかると、じゃんけん開始。キャラクターの状態に応じて、勝者が決まる。
勝者はそのまま2D空間に居残る。敗者は退出。

どうやって面白いゲームをつくるか、についてはこの記事では踏み込みません。自分もゲームをつくれるんだ、というイメージまで一緒にたどり着きましょう。

ロジックをデータに変換する

私のゲームの場合、登場人物に関する情報をデータとして表現することから始めました。全てを表現しようとは考えず、まずは「土台になりそうな部分」「イメージが湧きそうな部分」をデータで表現してみましょう。

{
  players: [ { id: yuta, x: 0, y: 0 }, ... ],
  coins: [ { kind: Rock, x: 10, y: 10 }, ... ],
}

それぞれID、座標を持つプレイヤーと、じゃんけんの属性と座標を持つコインをデータとして表現してみました。

ロジック、描画の分離

オンラインゲームにする上で大事なのが、ルールを管理するサーバーサイドと、描画・入力を担当するユーザー側の分離です。

game transition
ユーザー入力->状態変化(サーバーサイド)->画面の描画 というサイクル


まずは、上で表現したデータモデルをクライアントに描画する部分までをやってみましょう。上のサイクルでいうところの、状態変化が終わった状態から、画面の描画までの部分です。

  1. データモデルをJS Objectとして表現、サーバーサイドに持たせる
  2. 随時受け取るデータモデルの状態を、クライアントサイドで描画する

この部分の作業コミットは、こちらから

今までの作業部分と比べると、ちょっと混み合っていると感じるかもしれません。質問あればコメント欄にて受け付けます。

成功すると、下記のようにサーバーサイドで定義したデータ gameStateがCanvasで反映されているはずです。

gameUpdate server to client
大きな丸がプレイヤー。小さな丸がコイン。開発の仕上げ(後述)で、画像に差し替えます。


ユーザ入力をサーバーに送る

サーバーからクライアントへのデータ送信に成功しました。今度は、クライアントからサーバーへのユーザ入力(カーソルキー)を送信してみましょう。

  1. ユーザー入力を、WebSocketのイベント送信につなげる。
  2. サーバーでその入力を受け取り、ゲームロジックの状態として保存。
  3. 前段で静的に表現していたデータモデルを、動的なものとして変更。

この部分をコードで表現すると、こんな感じのコミットとなりました。

うまくいっていれば、下記のように入力が描画に反映されます。クライアント→サーバー→クライアントという順番でメッセージが動いているのを脳内でイメージしてください。


途中経過

ここまでくれば、オンラインブラウザゲーム開発(プロトタイプ)の基礎はできたといってもいいと思います。おめでとうございます!

実際に「遊べる状態」に持っていく作業を、その3で説明します。最終章です!