0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【環境構築】無料でクライアントサーバー型のゲームを制作する2

Last updated at Posted at 2022-08-01

はじめに

私用のPCでクライアントサーバー型のゲームを制作したかったので、環境構築からはじめました。
クライアントサイドはUnity/C#を使います。
サーバーサイドはMAMPでローカルサーバーを構築し、PHP/Laravelを使います。
MAMPではなくAWSが使えるとよかったのですが、無料でできなくなるので諦めました。
ローカルサーバーなので、公開はできず、自分用になります。

動作環境

Mac OS Catalina 10.15.7

クライアントサイドの環境構築

unityとvscodeをインストールします。
これらはすでにインストールしていたので手順を省きます。
バージョンは以下のものを使いました。
Unity 2020.1.8f1

サーバーサイドの環境構築

MAMPの導入

こちらの記事を参考に進めます。
まずはMAMPをインストールします。MAMP PROは使いません。
MAMPを立ち上げ、Preferences>Portsを確認するとデフォルトで8888になっていると思います。
右上のStartを押下してサーバーを立ち上げ、http:://localhost:8888にアクセスできれば成功です。

このリンクはデフォルトで/Applications/MAMP/htdocs/をローカルディレクトリとして開くようになっています。
複数のローカルホストを管理したいので、その設定をしていきます。

httpd.confの設定

/Applications/MAMP/conf/apache/httpd.confを開きます。
以下のような記述があると思います。

# Virtual hosts
#Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

2行目のコメントアウトを解除し、以下のようにします。

# Virtual hosts
Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

httpd-vhosts.confの設定

/Applications/MAMP/conf/apache/extra/httpd-vhosts.confを開きます。
一番下に、追加したいローカルホストの分だけ以下のように記述します。

Listen (任意のポート番号1)

<VirtualHost *(任意のポート番号1)>
    DocumentRoot "(ローカルディレクトリのパス1)"
    <Directory "(ローカルディレクトリのパス1)">
        AllowOverride All
    </Directory>
</VirtualHost>

Listen (任意のポート番号2)

<VirtualHost *:(任意のポート番号2)>
    DocumentRoot "(ローカルディレクトリのパス2)"
    <Directory "(ローカルディレクトリのパス2)">
        AllowOverride All
    </Directory>
</VirtualHost>

...

これでhttp:://localhost:(任意のポート番号)にアクセスできるようになるはずです。
MAMPのPreferences>Portsは8888のままで問題ないですが、Startは忘れないようにしましょう。

例えば、私はホームディレクトリに今回のサーバーサイド用のSample_Apiというローカルディレクトリを作成していて、ポート番号8002を使いたかったので以下のように記述しました。

Listen 8002

<VirtualHost *:8002>
    DocumentRoot "/Users/(ホームディレクトリ名)/Sample_Api"
    <Directory "/Users/(ホームディレクトリ名)/Sample_Api">
        AllowOverride All
    </Directory>
</VirtualHost>

これでhttp:://localhost:8002にアクセスできるようになります。

Laravelの導入

Laravelは流行りのPHPのフレームワークです。
こちらこちらを参考に進めます。

ターミナルを使います。

Homebrewのインストール

Homebrewがインストールされているか確認します。

brew -v

入っていなければ、以下のコマンドでインストールします。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

composerのインストール

以下のコマンドでHomebrewでComposerが提供されていることを確認します。

brew search composer

提供されていればインストールします。

brew install composer

Laravelインストール

Laravelを入れたいディレクトリに移動します。

cd Sample_Api

任意のディレクトリ名を設定して、そこにLaravelのプロジェクトを入れます。

composer create-project --prefer-dist laravel/laravel (任意のディレクトリ名)

私はlaravelというディレクトリに入れたかったので、以下のように入力しました。

composer create-project --prefer-dist laravel/laravel laravel

/Users/(ホームディレクトリ名)/Sample_Api/laravelにインストールされたと思います。
http://localhost:8002/laravel/publicにアクセスし、Laravelのページがでれば成功です。

LaravelのDB接続設定

.envの設定

laravel/.envを開きます。
以下のような記述があると思います。

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=

これを以下のように変更します。

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=8889
DB_DATABASE=Sample_Game
DB_USERNAME=root
DB_PASSWORD=デフォルトならroot

database.phpの設定

laravel/config/database.phpを開きます。
mysqlのところに以下のような記述があると思います。

'port' => env('DB_PORT', '3306'),
'database' => env('DB_DATABASE', 'forge'),
'user_name' => env('DB_USERNAME', 'forge'),
'password' => env('DB_PASSWORD', ''),

これを以下のように変更します。

'port' => env('DB_PORT', '8889'),
'database' => env('DB_DATABASE', 'Sample_Game'),
'user_name' => env('DB_USERNAME', 'root'),
'password' => env('DB_PASSWORD', 'デフォルトならroot'),

これでDB接続できるようになりました。

【おまけ】便利ツールのインストール

ここからは必ず必要ではないですが、あると便利なものたちの準備です。

GitHubとSouretree

リポジトリの作成

GitHubのアカウント作成は省きます。
今回はクライアント用とサーバー用のリポジトリをそれぞれ用意します。
まずはクライアント用です。
Repositories>Newより新規リポジトリを作成できます。
以下のように設定し、Create repositoryを押下します。

Repository name: Sample_Client ※リポジトリ名
Description: サンプルゲームのクライアント用 ※リポジトリの説明
Public  ※公開範囲 Public...公開する/Private...公開しない
Add.gitgnore: Unity ※無視するものの設定

次はサーバー用です。
以下のように設定しました。

Repository name: Sample_Api
Description: サンプルゲームのサーバー用
Public

Souretreeのインストールと設定

こちらを参考にインストールします。
こちらを参考に、トークンでGitHubとSouretreeを連携させます。
GitHubのアカウントメニューからSettings>Developer settings>Personal access tokensへ移動し、Generate new tokenを押下します。
以下のように設定し、Generate tokenを押下します。

Note: Souretree ※トークン名
Expiration: 30days ※トークンの期限(No expirainで無期限の更新いらずを設定できるが非推奨)
repo: チェック
user: チェック

トークンが生成されます。
これ以降トークンは確認できなくなるので、コピーは大事にとっておきましょう。

Scurcetree>環境設定を開きます。
一般>アカウント>追加で以下の設定でGitHubのアカウントを保存します。

認証タイプ: Basic
ユーザー名: GitHubのユーザー名
パスワード: 先ほど生成したトークン
プロトコル: HTTPS

クローンとコミット、プッシュ

設定できたので、Scurcetreeでリポジトリをクローンします。
リモートタブにリポジトリがあればそこからクローンを押下で良いです。
なければGitHubのリポジトリを確認し、CodeからHttpsのリンクをコピーしてきます。
Scurcetreeの「新規...」のプルダウンメニューから「URLからクローン」を選択し、ソース URLにHttpsのリンクを貼り付けてクローンします。
デフォルトの保存先なら以下のディレクトリに保存されると思います。
/Users/(ホームディレクトリ名)/Sample_Client
/Users/(ホームディレクトリ名)/Sample_Api

Scurcetreeでコミット、プッシュしてみます。
Unityで2Dゲームを新規作成し、プロジェクトの中身を全てSample_Clientにコピーします。
Unity HubにSample_Clientをプロジェクトフォルダとして登録しなおしましょう。

ScurcetreeのローカルタブからSample_Clientを開くと、コミットに差分が溜まっています。
コミットをクリックし、差分をステージングへあげます。
「初回コミット」とコミットメッセージを記入し、コミットを直ちにプッシュにチェックをつけてコミットを押下します。
パスワードを聞かれたらトークンを入力しましょう。
キーチェーンアクセスに保存されるので、パスワードの入力が求められるのは初回のみです。
これでプッシュができました。

Sequel Pro - Nightly buildのインストールと設定

Sequel Proはデータベース管理ツールです。
MAMPだとhttp:://localhost:8002/phpMyAdminでデータベースを触れるので必須ではないですが、私はSequel Proが好きなのでこちらを使います。

現在は以下の3種類が出ています。
・Sequel Pro
・Sequel Pro - Nightly build
・Sequel Ace
個人的に2番目のSequel Pro - Nightly buildが使いやすいのでこれをインストールします。

こちらを参考にSequel Pro - Nightly buildをインストールします。

MAMPのPreferences>PortsよりMySQLのポート番号を確認しておいてください。
デフォルトなら8889のはずです。

Sequel Pro - Nightly buildを立ち上げ、以下のように設定します。

Name: MAMP ※任意の設定名
Host: 127.0.0.1
Username: root
Password: デフォルトならroot
Database: ※デフォルトの接続DB(空でOK)
Port: デフォルトなら8889

Test Connectionで成功したらSave changesで設定を保存し、Connectで接続します。
Choose DatabaseからAdd Databaseで今回のゲーム用のDBを新規作成します。
Sample_Gameという名前にしました。
先ほどの接続設定のDatabaseにSample_Gameを設定しておくと、接続時にデフォルトでSample_Gameが選択された状態になっているので便利です。

POSTMANの設定

POSTMANをインストールします。
サインインはGoogleがおすすめです。

WorkspaceからMyWorkspaceを選択します。
Create New Collectionから新規作成し、Sample_Gameと名付けておきます。
Add a requestからリクエストを登録します。
リクエストURLはhttp://localhost:8002/laravel/public/api/(laravel/routes/api.phpで設定したパス)になります。
APIを作成したらSendして実行してみましょう。

さいごに

環境構築が完了しました。
後々思い立って書き始めたので、不備があったら申し訳ないです。
次回はサーバーサイドをやります。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?