ホーム > プログラミング > オンライン対戦ゲームを作る > 01.ゲームの骨格を作る

01.ゲームの骨格を作る



オンライン対戦のタンクゲームを作っていきます。まず、オンライン対戦ゲームの骨格を作ります。

デモ

デモ(Google App Engine):https://online-battle-tanks.appspot.com/index01.html
デモ(Heroku):http://online-battle-tanks.herokuapp.com/index01.html

Webアプリの骨格

Nodeを用いて、Webアプリを作成するために、最低限すべきことは以下です。

オンライン対戦ゲームの骨格

オンライン対戦ゲームの骨格の作成として行うことは以下です。

サーバー側

クライアント側

オンライン対戦ゲームのクラス設計

「オンライン対戦ゲームの骨格」を踏まえて、オンライン対戦ゲームのクラスを、以下のように設計しました。

(サーバー側)ゲームクラス

(サーバー側)ワールドクラス

(クライアント側)スクリーンクラス

その他のクラス

サーバー側、クライアント側には、上記クラス以外にも、ゲーム設定に関するクラスや、画像ファイルに関するクラス、ゲーム内に存在しているものの種類ごとのクラス、便利関数のクラス、などを作ります。

Node.jsのインストール

Node.js をインストールしていない場合は、まず、Node.js をインストールします。

Node.js がインストール済みかは、「node --version」コマンドで確認できます。

Raspbian の場合の例。


Windows の場合の例。

オンライン対戦ゲーム用のフォルダの作成

オンライン対戦ゲーム用のフォルダとして、「OnlineBattleTanks」というフォルダを作成します。

Node.jsのパッケージ管理の初期化

Node.jsのパッケージのインストールに先立ち、パッケージ管理の初期化をします。

「OnlineBattleTanks」フォルダに移動し、下記コマンドを実行します。



package name : 何も入力せずエンターキーを押します ( onlinebattletanksとなる )
version : 何も入力せずエンターキーを押します ( 1.0.0となる )
description : 何も入力せずエンターキーを押します (空となる)
entry point : server.js と入力しエンターキーを押します
test command : 何も入力せずエンターキーを押します (既定のtest コマンドが登録される)
git repository : 何も入力せずエンターキーを押します (空となる)
keywords : 何も入力せずエンターキーを押します (空となる)
author : 何も入力せずエンターキーを押します (空となる)
license : 何も入力せずエンターキーを押します (ISCとなる)

Is this OK? : y を入力しエンターキーを押します。

Windows の場合の例。


「OnlineBattleTanks」フォルダに、「package.json」ファイルが生成されます。
「package.json」ファイルの内容は以下のような内容になっています。

Node.jsのパッケージのインストール

「OnlineBattleTanks」フォルダに、Node.jsのパッケージ 「Express」と「Socket.io」 をインストールします。

オンライン対戦ゲーム用のフォルダに移動し、下記コマンドを実行します。





Windows の場合の例(「Express」のインストール)


Windows の場合の例(「socket.io」のインストール)


「node_modules」
「OnlineBattleTanks」フォルダに、「node_modules」フォルダが生成され、フォルダ内に、Node.jsのパッケージ 「Express」と「Socket.io」および関連パッケージがインストールされます。

「package.json」ファイルの内容は以下のような内容になっています。
(dependenciesセクションが追加され、expressとsocket.ioに関する記述が追加されます。)

サーバー起動処理

サーバー起動処理ファイルを追加します。
「OnlineBattleTanks」フォルダに、「server.js」というファイルを作成し、内容を以下のようにします。

コード解説

サーバー側スクリプトのフォルダ作成とファイル追加

サーバー側スクリプト用のフォルダとして、「OnlineBattleTanks」フォルダに、「libs」というフォルダを作成します。

ゲームクラスの追加

サーバー側スクリプトフォルダにゲームクラス定義ファイルを追加します。
「libs」フォルダに、「Game.js」というスクリプトファイルを追加し、内容を以下のようにします。


コード解説

ワールドクラスの追加

サーバー側スクリプトフォルダにワールドクラス定義ファイルを追加します。
「libs」フォルダに、「World.js」というスクリプトファイルを追加し、内容を以下のようにします。


コード解説

ゲーム設定クラスの追加

サーバー側スクリプトフォルダにゲーム設定クラス定義ファイルを追加します。
「libs」フォルダに、「GameSettings.js」というスクリプトファイルを追加し、内容を以下のようにします。


コード解説

公開フォルダ・ファイルの作成

公開フォルダとして、「OnlineBattleTanks」フォルダに、「public」というフォルダを作成します。

「public」フォルダに、「index.html」というウェブページファイルを作成し、内容を以下のようにします。


コード解説

画像ファイル用のフォルダの作成と画像ファイルの配置

画像ファイル用のフォルダとして、「public」フォルダに、「images」というフォルダを作成します。

「public/images」フォルダに、背景画像ファイルを配置します。

背景画像ファイルは、フリーゲームやオープンソースゲーム用のメディア倉庫である「OpanGameArt.org」から、「athile」さんが公開している「Seamless Grass Textures (20 pack)」より、「grass01.png」を借用しました。

クライアント側スクリプトのフォルダ作成とファイル追加

クライアント側スクリプト用のフォルダとして、「public」フォルダ下に、「js」というフォルダを作成します。

クライアント側開始処理

クライアント側スクリプトフォルダにクライアント側開始処理ファイルを追加します。
「public/js」フォルダに、「client.js」というスクリプトファイルを追加し、内容を以下のようにします。


コード解説

スクリーンクラスの追加

クライアント側スクリプトフォルダにスクリーンクラス定義ファイルを追加します。
「public/js」フォルダに、「Screen.js」というスクリプトファイルを追加し、内容を以下のようにします。


コード解説

アセットクラスの追加

クライアント側スクリプトフォルダにアセットクラス定義ファイルを追加します。
「public/js」フォルダに、「Assets.js」というスクリプトファイルを追加し、内容を以下のようにします。


コード解説

描画設定クラスの追加

クライアント側スクリプトフォルダに描画設定クラス定義ファイルを追加します。
「public/js」フォルダに、「RenderingSettings.js」というスクリプトファイルを追加し、内容を以下のようにします。


コード解説

共有設定クラスの追加

クライアント側スクリプトフォルダに共有設定クラス定義ファイルを追加します。
「public/js」フォルダに、「SharedSettings.js」というスクリプトファイルを追加し、内容を以下のようにします。


コード解説

動作を確認

サーバーを起動します。
「OnlineBattleTanks」フォルダで、以下のコマンドを実行します。



「Server on port 1337」と表示されます。

ブラウザから、「localhost:1337」にアクセスします。

背景画像が表示されます。
画面右上に「サーバーでのゲームワールドの更新処理時間」が表示されます。

起動したサーバーは、「Ctrl + C」で終了します。

ダウンロード

サンプルプログラム

デモ

デモ(Google App Engine):https://online-battle-tanks.appspot.com/index01.html
デモ(Heroku):http://online-battle-tanks.herokuapp.com/index01.html

関連ページ

次項目:02.プレーヤの操作で移動するタンクの追加


ご意見、ご感想、ご質問、ご要望等は、「コメントを投稿する」もしくは「ホーム > コンタクト」よりお願いいたします。
内容の誤り、誤字脱字、リンクミスなどの問題点を発見された場合には「コメントを投稿する」もしくは「ホーム > コンタクト」より連絡していただけると幸いです。


Copyright (c) 2005-2018 Nobuki HIRAMINE All rights reserved.