このプロジェクトは2つのScratchX上で動くプログラムがネットワーク越しに対戦できるシューティングゲームのサンプルです。 ネットワークで接続された2台のPC上のScratchXからサーバプログラムに接続し動作します。 以下のプログラムを含んでいます。
- ScratchX上で動作するプログラム（クライアント）
- ScratchXに読み込ませるエクステンションファイル
- サーバプログラム
- ScratchXにアクセスできる環境
- Node.js
- MySQLサーバ
- Git
サーバプログラムをローカルPCに立てて環境構築する手順を示します。
- プロジェクトファイル一式のダウンロード(git clone) プロジェクトのファイル一式をローカルPCの任意の場所に保存（クローン）します。
$ git clone https://github.com/awwa/onlinegame
- DBのアクセス環境を整える クローンしたプロジェクトフォルダに移動して、.env.exampleを.envというファイル名でコピーします。
$ cd onlinegame
$ cp .env.example .env
$ vi .env
DATABASE_URL="mysql://onlinegame:Sample!Password123@localhost/onlinegame?reconnect=true"
.envファイルを編集してDATABASE_URL環境変数にDBアクセスに必要な設定を行います。また、ここで設定したデータベース（この例ではデータベース名：onlinegame）を作成しておきます。詳しくはこちらを参照してください。
- DBテーブルの作成 クローンしたプロジェクトフォルダに移動して、db-migrateによりDBにテーブルを作成します。
$ cd onlinegame
$ npm install
$ ./node_modules/db-migrate/bin/db-migrate up
[INFO] Processed migration 20171015091819-add-games
[INFO] Done
- Node.jsサーバアプリケーションの起動 サーバアプリケーションを起動します。
$ npm start
ブラウザでhttp://localhost:3000/にアクセスしてCannot GET /のメッセージが表示されることを確認します。
-
ScratchXプロジェクトファイル(onlinegame.sbx)の読み込み ブラウザでScratchXにアクセスします。メニューの[File > Load Project]を選択して、プロジェクトフォルダ配下の
client/onlinegame.sbxを選択して読み込みます。「Replace contents of the current project?」と聞かれるので「OK」を選択します。「The extensions on this site are experimental」と聞かれたら「I understand, continue」を選択します。 -
エクステンションファイルの読み込み ScratchXの画面上で[Scripts > More Blocks]を選択し、[Load experimental extension]ボタンを選択します。「The extensions on this site are experimental」と聞かれたら「I understand, continue」を選択します。
-
旗ボタンをクリックして「▷」ボタンをクリックします。「ルームキーを入力してください」と表示されたら適当なアルファベットを入力します。
-
別のブラウザで開いたScratcXから同様にonlinegame.sbxとextension.jsを読み込んでルームキー先ほどと同じルームキーを入力します。ルームキーが一致するとゲーム開始です。
-
最初にルームを作成したプレイヤーが
red、後からルームに入室したプレイヤーがyellowとなります。
- redプレイヤーは左右キーで移動、下キーで弾を発射します。
- yellowプレイヤーはadキーで移動、sキーで弾を発射します。
- 先に20回当てた方が勝ちです。
最低限の実装のみ行っているのでいろいろ足りません。
- DBではルームキーの管理のみ行なっています。通信断からの復旧処理や接続＆切断のタイミング調整が必要です。
- シンプルに見えてレイテンシーにシビアです。ローカルネットワーク上にサーバを立てた場合はそこそこ動きますが、クラウド上にサーバを立てると遅くてゲームになりません。パフォーマンスチューニングが必須です。
本プロジェクトは以下の情報を参照または利用しています。大変参考になりました。