猫でもわかるUnity入門(第20回 Photon PUN2を使ったマルチプレイゲーム作成 その1)

f:id:enia:20210228230354p:plain えにあです。

今回はPhotonを使ったオンラインマルチプレイゲームの作り方を学んでいきます。 この知識を身に着けることで、一つのゲームを二人で同時にプレイして、協力・対戦できるゲームを作ることができるようになります。 全3回くらいになる予定で、今回はその1回目です。

目次

初めに

今回の学習は、以下のPhoton公式のチュートリアルをベースに進めていきます。 www.youtube.com

Photonとは

Photonについて、公式の説明を以下に抜粋しました。 正直、現時点では2つのソリューションの違いが全く分かりませんでしたが進めていけばわかるのでしょう。

Photonはネットワークエンジンであり、マルチプレイでの同期を担うソリューションと、マルチプレイでのコミュニケーションを補助するソリューションの大きく2つを提供します。 用途に応じて、適切なソリューションを選択することができます。

サーバとクライントSDKがセットで提供されており、ルームやロビー機能を含め、マルチプレイを実現するために必要な機能を一通り搭載しているため、ネットワークの実装を簡単に進めることができます。

今回はUnity上で動作する、Photon Unity Networking 2(PUN2)を利用していきます。 サーバについては、クラウド型とオンプレ型の2種類がありますが、クラウド型のPhoton Cloudを利用していきます。

アカウント作成

まずは公式ホームぺージにアクセスして、Photonのアカウントを作成します。 Unityのアカウントとは別物です。
www.photonengine.com

アカウントがない場合も、右上の「サインイン」を選択します。 f:id:enia:20210311153234p:plain

アカウントがないので「こちらから作成してください」を選択します。 f:id:enia:20210311153417p:plain

メールアドレスを入力し、reCAPTCHAにチェックを入れて、「登録する」を選択します。
f:id:enia:20210311154205p:plain

サインアップ完了のメッセージが表示されます。
f:id:enia:20210311154324p:plain

指定したメールアドレスに確認メールが送信されているのでメールに記載されたURLにアクセスします。アカウントセットアップ画面が表示されるので、パスワードを入力し「アカウントを作成する」を選択します。 f:id:enia:20210311154622p:plain

アカウント作成完了のメッセージが表示されます。
f:id:enia:20210311154856p:plain

アカウント作成は以上です。

AppIDの発行

次に、これから作成するアプリのAppIDを作成します。 TwitterFacebookAPIを利用する場合も同じですが、APIを利用するアプリケーションを識別するためにAppIDが必要になるのでしょう。そうでないと許可なくPhotonを利用されてしまいますからね。

ダッシュボードに以下の画面が表示されているので「新しくアプリを作成する」を選択します。 f:id:enia:20210311155817p:plain

Photonの種別とアプリケーション名を以下のように設定して「作成する」ボタンを押します。

Photonの種別: Photon PUNを選択
アプリケーション名: PUN2-tutorial
アプリケーションの説明: 空欄
URL: 空欄

f:id:enia:20210311160327p:plain

後ほど使うので、生成されたアプリケーションIDをコピーしておきます。
このIDを用いてPhotonサーバを通してクライアント間の通信ができます。
f:id:enia:20210311161045p:plain

AppIDの発行は以上です。

プロジェクト作成とPUN2のインポート

UnityHubでプロジェクトを作っていきます。 テンプレートは3Dを選択します。 プロジェクト名にPUN2と入力し「作成」ボタンを押します。 f:id:enia:20210311161907p:plain

Unityが起動するので、トップメニューから「ウィンドウ」->「アセットストア」を選択します。 f:id:enia:20210311163802p:plain

アセットストアが開くので、検索ボックスに「PUN 2 Free」と入力します。
検索結果のPUN2 - FREEを選択します。
f:id:enia:20210311164022p:plain

「Download」を選択します。数十秒程度かかると思います。
f:id:enia:20210311164205p:plain

ダウンロードが終わったら表示される「Import」を選択します。
f:id:enia:20210311164302p:plain

Importが完了すると、以下の画面が起動します。 デフォルトの設定のまま「インポート」ボタンを押します。 f:id:enia:20210311165121p:plain

PUNのセットアップウィンドウが立ち上がるので、先ほど発行したAppIdを入力して「Setup Porject」を選択します。
f:id:enia:20210311165858p:plain

ウィンドウが開くので「Close」を押します。
f:id:enia:20210311200002p:plain

プロジェクトウィンドウで「Assets」->「Photon」->「PhotonUnityNetworking]->「Resources」-> 「PhotonServerSettings」を選択してみましょう。
f:id:enia:20210311170433p:plain

インスペクターを見ると、AppIDが自動で設定されていることが分かります。 また、ここでFixedRegionに「jp」を設定しておきます。
f:id:enia:20210312071203p:plain

PUN2をimportした際にデフォルトで含まれるデモデータは不要なので、プロジェクトビューで「Assets」->「Photon」->「PhotonUnityNetworking]->「Resources」->「Demos」をフォルダ事削除します。
f:id:enia:20210311191201p:plain

プロジェクト作成とPUN2のインポートに関しては以上です。

Unity-Chanのimport

次にデモアプリで用いるUnityちゃんをインポートしていきます。 Unity-Chanは3Dモデルと、キー入力で動くアニメーションが含まれた便利なアセットです。

先ほどと同じ手順でアセットストアからUnityちゃんをダウンロードしていきます。 トップメニューから「ウィンドウ」->「アセットストア」を選択します。
f:id:enia:20210311163802p:plain

表示されたウィンドウの検索ボックスに「Unity-Chan Model」と入力します。
検索結果の「Unity-Chan! Model」を選択します。 f:id:enia:20210311185309p:plain

「Download」を選択します。 f:id:enia:20210311185532p:plain

「Import」を選択します。 f:id:enia:20210311185642p:plain

インポートが完了すると以下のウィンドウが表示されるのでデフォルトの設定で「インポート」を押します。
f:id:enia:20210311190032p:plain

私の場合、Unityのフッター部に以下のエラーメッセージが表示されました。
原因は分かりませんがいったん放置しています。この後の手順でもし問題がでるようであれば解消します。
f:id:enia:20210311191349p:plain

サンプルプロジェクトの初期設定

プロジェクトウィンドウで「Assets」直下に「Resources」、「Scenes」、「Scripts」の3つのディレクトリを作成します。
f:id:enia:20210311191559p:plain

プロジェクトウィンドウの検索ボックスに「locomotion」と入力し、シーンを検索してダブルクリックでオープンします。
f:id:enia:20210311191932p:plain

シーンビューのシーンタブに以下のような画像が表示されるはずです。
f:id:enia:20210311192237p:plain

このシーンを別名で保存します。
f:id:enia:20210311192338p:plain

Demosという名前で、「Assets」->「Demos」->「Scenes」の下に保存します。
f:id:enia:20210311192554p:plain

これでプロジェクトの初期設定は完了です。

今回はここまで! 次回はサンプルプロジェクトの作成を進めていきます。