Chapter 01

🔰 初期設定とチュートリアル

o8que
o8que
2021.04.02に更新

初期設定

オンラインゲームを開発するにはサーバーが必要になります。しかしこれを自前で準備しようとすると、サーバー構築~運用などの知識やスキルが要求され、サーバー維持の費用や手間がかかることもあり、なかなか大変です。PhotonにはPhoton Cloudというサービスがあり、ゲーム開発者側では一切管理する必要のないサーバーが(同時接続20人まで)無料で使えるので、オンラインゲーム開発を簡単に始めることができます。

アカウントの登録とサインイン

Photon Cloudを利用するには、アプリケーションを登録してアプリケーションIDを発行してもらう必要があります。最初に公式サイトで(アカウントの登録を済ませて)サインインしてください。

https://www.photonengine.com/ja-JP/PUN

アプリケーションの作成

サインイン後のダッシュボード画面で「新しくアプリを作成する」ボタンを押すと、新しいアプリケーションの作成画面になります。Photonの種別を「Photon PUN」にして、好きなアプリケーション名を入力したら「作成する」ボタンを押してください。

アプリケーション名、説明、URLは後から編集できるので、仮で入力しても問題ありません。

正しく作成されると、ダッシュボード画面からアプリケーションIDが確認できるようになります。

アセットのインポート

Unityのプロジェクトを開いて、以下のアセットをインポートしましょう。

https://assetstore.unity.com/packages/tools/network/pun-2-free-119922

セットアップ

アセットのインポートが正常に終了すると、自動的に「PUN Wizard」が開きます。先ほど取得したアプリケーションIDを入力して「Setup Project」を押してください。

自動で「PUN Wizard」が開かなかった場合は、メニューバーの「Window」>「Photon Unity Networking」>「PUN Wizard」から、手動で「PUN Wizard」を開くことができます。

セットアップが行われると、PUN2の設定ファイル(PhotonServerSettings)が生成されます。これで初期設定は完了です。設定内容はデフォルトのままでも問題ありませんが、以下にオススメの設定を記載していますので参考にしてみてください。

🎮 チュートリアル

ここからオンラインゲーム開発のチュートリアルとして、2Dのサンプルプロジェクトを作ってみましょう。PUN2の詳細な用語や機能の説明は次のチャプター以降で行いますので、もしわからない所があっても、いったんは手順に従ってちゃんと動作するか確認してみてください。

プレイヤー自身のアバターを表示してみよう

まず最初に、プレイヤー自身のアバターとして表示するゲームオブジェクトのプレハブを作成します。ここでは、以下の3点に注意してください。

  1. プレハブの名前は「Avatar」にする
  2. プレハブは「Resources」フォルダーの中に入れる
  3. ゲームオブジェクトにはPhotonViewコンポーネントを追加する



SpriteRendererで表示するスプライトは好きな画像を使ってOKです。

次に、シーン上に空のゲームオブジェクトを作成して、以下の新規スクリプト(SampleScene)を追加してください。


SampleScene.cs
using Photon.Pun;
using Photon.Realtime;
using UnityEngine;

// MonoBehaviourPunCallbacksを継承して、PUNのコールバックを受け取れるようにする
public class SampleScene : MonoBehaviourPunCallbacks
{
    private void Start() {
        // PhotonServerSettingsの設定内容を使ってマスターサーバーへ接続する
        PhotonNetwork.ConnectUsingSettings();
    }

    // マスターサーバーへの接続が成功した時に呼ばれるコールバック
    public override void OnConnectedToMaster() {
        // "Room"という名前のルームに参加する(ルームが存在しなければ作成して参加する)
        PhotonNetwork.JoinOrCreateRoom("Room", new RoomOptions(), TypedLobby.Default);
    }

    // ゲームサーバーへの接続が成功した時に呼ばれるコールバック
    public override void OnJoinedRoom() {
        // ランダムな座標に自身のアバター(ネットワークオブジェクト)を生成する
        var position = new Vector3(Random.Range(-3f, 3f), Random.Range(-3f, 3f));
        PhotonNetwork.Instantiate("Avatar", position, Quaternion.identity);
    }
}

Unityのエディター上で実行してみて、自身のアバターが画面に表示されたら成功です。プロジェクトをビルドして、複数のアバターが表示されるかも確認してみましょう。

プレイヤー名を表示してみよう

このままでは、どれが誰のアバターなのか判別がつかないので、アバターの頭上にプレイヤー名を表示してみましょう。アバターのゲームオブジェクトの子要素として、テキストのゲームオブジェクトを作成して、以下のスクリプト(AvatarNameDisplay)を追加してください。


AvatarNameDisplay.cs
using Photon.Pun;
using TMPro;

// MonoBehaviourPunCallbacksを継承して、photonViewプロパティを使えるようにする
public class AvatarNameDisplay : MonoBehaviourPunCallbacks
{
    private void Start() {
        var nameLabel = GetComponent<TextMeshPro>();
        // プレイヤー名とプレイヤーIDを表示する
        nameLabel.text = $"{photonView.Owner.NickName}({photonView.OwnerActorNr})";
    }
}

さらにSampleSceneのスクリプトを修正して、プレイヤー名を設定する処理を追加しましょう。

SampleScene.cs
 using Photon.Pun;
 using Photon.Realtime;
 using UnityEngine;

 public class SampleScene : MonoBehaviourPunCallbacks
 {
     private void Start() {
+        // プレイヤー自身の名前を"Player"に設定する
+        PhotonNetwork.NickName = "Player";

         PhotonNetwork.ConnectUsingSettings();
     }

     public override void OnConnectedToMaster() {
         PhotonNetwork.JoinOrCreateRoom("Room", new RoomOptions(), TypedLobby.Default);
     }

     public override void OnJoinedRoom() {
         var position = new Vector3(Random.Range(-3f, 3f), Random.Range(-3f, 3f));
         PhotonNetwork.Instantiate("Avatar", position, Quaternion.identity);
     }
 }

これで実行すると、アバターの頭上にプレイヤー名とプレイヤーIDが表示されるようになります。

アバターの動きを同期させてみよう

ここからアバターを操作して動かせるようにしてみましょう。アバターのゲームオブジェクトに以下のスクリプト(AvatarController)を追加して、Unityエディター上で自身のアバターが移動できることを確認してください。

AvatarController.cs
using Photon.Pun;
using UnityEngine;

// MonoBehaviourPunCallbacksを継承して、photonViewプロパティを使えるようにする
public class AvatarController : MonoBehaviourPunCallbacks
{
    private void Update() {
        // 自身が生成したオブジェクトだけに移動処理を行う
        if (photonView.IsMine) {
            var input = new Vector3(Input.GetAxis("Horizontal"), Input.GetAxis("Vertical"), 0f);
            transform.Translate(6f * Time.deltaTime * input.normalized);
        }
    }
}

オブジェクトを操作する処理を行うだけでは、他プレイヤー側の画面上で動きは反映されません。PUN2には、オブジェクトの座標を他プレイヤーと自動的に同期してくれるPhotonTransformViewコンポーネントが用意されているので、これをアバターのゲームオブジェクトに追加しましょう。プロジェクトをビルドしてみて、他プレイヤー側でも動きが反映されていたら成功です。


チュートリアルはひとまずここで終了ですが、このサンプルプロジェクトは、以降のチャプターで説明する機能の実装例(🎮)で使用していきます。