【Photon Fusion】共有モードのチュートリアル

この記事はPhoton運営事務局メンバーによって書かれた記事です。
内容は「Photon Fusion 入門の入門」の続きになります。

セッションに参加しよう

まずプレイヤーがネットワーク上の他のプレイヤーと通信するためには、セッション（Session）に参加する必要があります。セッションは部屋のようなもので、同じセッションに参加しているプレイヤー同士でのみ、データを送受信してゲームを同期させることができます。

NetworkRunnerのプレハブの作成

NetworkRunnerは、Fusionのネットワークを管理するための最重要コンポーネントになります。以下の画像を参考にNetworkRunnerのプレハブを作成してください。

NetworkRunnerインスタンスの生成

シーン上に配置した空のゲームオブジェクトに新規のスクリプト（GameLauncher）を追加して、NetworkRunnerのプレハブをアタッチしましょう。このスクリプトからNetworkRunnerインスタンスを生成して、StartGame()を呼び出すことでセッションに参加できます。

GameLauncher.cs

using Fusion;
using UnityEngine;

public class GameLauncher : MonoBehaviour
{
    [SerializeField]
    private NetworkRunner networkRunnerPrefab;

    private NetworkRunner networkRunner;

    private void Start() {
        // NetworkRunnerを生成する
        networkRunner = Instantiate(networkRunnerPrefab);
        // StartGameArgsに渡した設定で、セッションに参加する
        networkRunner.StartGame(new StartGameArgs {
            GameMode = GameMode.Shared,
            SceneManager = networkRunner.GetComponent<NetworkSceneManagerDefault>()
        });
    }
}

正常にセッションに参加できているか確認するために、コンソールにログを出してみましょう。StartGame()は非同期メソッドになっていて、タスク完了後に戻り値（StartGameResult型）から実行結果を取得して、成功時と失敗時の処理を分岐させることができます。

GameLauncher.cs

+ private async void Start() {
      networkRunner = Instantiate(networkRunnerPrefab);
+     var result = await networkRunner.StartGame(new StartGameArgs {
          GameMode = GameMode.Shared,
          SceneManager = networkRunner.GetComponent<NetworkSceneManagerDefault>()
      });
  
+     if (result.Ok) {
+         Debug.Log("成功！");
+     } else {
+         Debug.Log("失敗！");
+     }
  }

セッションへの参加が成功した時のログ

プレイヤーのアバターを表示しよう

プレイヤーのアバターをネットワークオブジェクトとして生成して、セッションへ参加しているプレイヤーの人数の分だけ、ゲーム画面上にアバターが表示されるようにしてみましょう。

共有モードでは、クライアントが自由にネットワークオブジェクトを生成することができます。各プレイヤーはそれぞれセッションへ参加した時に、自分自身のアバターを生成するようにしましょう。

アバターのプレハブの作成

以下の画像を参考にアバターのプレハブを作成してください。アバターをネットワークオブジェクトにするために、NetworkObjectコンポーネントを追加するのを忘れないようにしてください。

アバターのプレハブが作成できたら、プレハブの参照をGameLauncherにアタッチしましょう。

GameLauncher.cs

    [SerializeField]
    private NetworkRunner networkRunnerPrefab;
+   [SerializeField]
+   private NetworkPrefabRef playerAvatarPrefab;

GameLauncherにアバターのプレハブをアタッチする

ネットワークオブジェクトのプレハブの作成でエラーが発生したら

ネットワークオブジェクトのプレハブはFusionに登録されている必要があります。通常はFusionが自動的にプレハブを検出して登録されるようになっていますが、状況によってはプレハブが登録されないケースがあり、エラーが発生してしまうことがあります。

未登録のプレハブがアタッチされていると、NetworkPrefabRefの枠が赤くなる

もしこのエラーが発生してしまった場合は、Unityのメニューバーの「Fusion > Rebuild Prefab Table」から、手動でプレハブの検出と登録の処理を実行してください。

アバターの生成と破棄

ネットワークオブジェクトは、Unity標準のInstantiate()ではなくNetworkRunner.Spawn()から生成します。セッションへの参加が成功したら、プレイヤー自身のアバターを生成しましょう。

GameLauncher.cs

    private async void Start() {
        networkRunner = Instantiate(networkRunnerPrefab);
        var result = await networkRunner.StartGame(new StartGameArgs {
            GameMode = GameMode.Shared,
            SceneManager = networkRunner.GetComponent<NetworkSceneManagerDefault>()
        });

+       if (result.Ok) {
+           // ランダムな生成位置（半径5の円の内部）を取得する
+           var randomValue = Random.insideUnitCircle * 5f;
+           var spawnPosition = new Vector3(randomValue.x, 5f, randomValue.y);
+           // プレイヤー自身のアバターを生成する
+           networkRunner.Spawn(playerAvatarPrefab, spawnPosition, Quaternion.identity, networkRunner.LocalPlayer);
+       }
    }

ネットワークオブジェクトの破棄は、Unity標準のDestroy()ではなくNetworkRunner.Despawn()で行います。共有モードでのみ、プレイヤーがセッションから退出した時に、そのプレイヤーが状態権限を持つネットワークオブジェクト（ここではプレイヤー自身のアバター）を自動的に破棄するプロパティを利用することができます。

ネットワークオブジェクトの自動的な破棄を有効にする

アバターの位置の同期

ここでUnityのプロジェクトをビルドして、動作確認してみましょう。生成されたアバターが画面に表示されるようにはなりましたが、アバターの位置は同期されていないことがわかります。

Fusionには、ネットワークオブジェクトの位置を同期するコンポーネントがいくつか用意されているので、今回はNetworkCharacterControllerPrototypeコンポーネントを使ってみましょう。アバターのプレハブにこのコンポーネントを追加すれば、アバターの位置が自動的に同期されるようになります。

NetworkCharacterControllerPrototypeを追加する（CharacterControllerは自動で追加される）

コンポーネントのInterpolation Targetプロパティを設定すると、位置をスムーズに補間して表示できるようになるので、子要素のゲームオブジェクトをアタッチしておきましょう。

NetworkCharacterControllerPrototypeのInterpolation Targetを設定する

Unityのプロジェクトをビルドして、複数のアバターの位置が正しく同期されて表示されるかを確認してみましょう。

プレイヤー自身のアバターを操作できるようにしよう

アバターが表示できたので、ここから自分自身のアバターを操作できるようにしてみましょう。

共有モードでは、各プレイヤーがネットワークオブジェクトの状態権限を持つことができるため、状態権限を持つネットワークオブジェクト（ここでは自分自身のアバター）を直接操作することができます。

アバターの移動

ネットワーク上で同期する処理は、UnityのUpdate()内ではなくFixedUpdateNetwork()内で実行する必要があります。新規スクリプトでPlayerAvatarを追加して、FixedUpdateNetwork()の中で取得した入力に応じて、アバターを移動させる処理を実行しましょう。

アバターのプレハブにPlayerAvatarを追加する

PlayerAvatar.cs

using Fusion;
using UnityEngine;

public class PlayerAvatar : NetworkBehaviour
{
    private NetworkCharacterControllerPrototype characterController;

    private void Awake() {
        characterController = GetComponent<NetworkCharacterControllerPrototype>();
    }

    public override void FixedUpdateNetwork() {
        if (Object.HasStateAuthority) {
            var inputDirection = new Vector3(Input.GetAxis("Horizontal"), 0f, Input.GetAxis("Vertical")).normalized;
            // 入力方向を移動方向としてそのまま渡す
            characterController.Move(inputDirection);
        }
    }
}

アバターのジャンプ

ジャンプボタンの押下を判定して、アバターのジャンプ処理を実行しましょう。

PlayerAvatar.cs

    public override void FixedUpdateNetwork() {
        if (Object.HasStateAuthority) {
            var inputDirection = new Vector3(Input.GetAxis("Horizontal"), 0f, Input.GetAxis("Vertical")).normalized;
+           var isJumpButtonDown = Input.GetKey(KeyCode.Space);

            characterController.Move(inputDirection);
+           if (isJumpButtonDown) {
+               characterController.Jump();
+           }
        }
    }

カメラの制御

今回はカメラの制御に、Unity公式パッケージのCinemachineを利用します。以下の画像を参考にして、Cinemachine Free Look Cameraのセットアップを行ってください。

カメラにCinemachineBrainを追加する

ヒエラルキーのメニューから「Cinemachine > FreeLook Camera」を選択する

CinemachineFreeLookの設定を調整する

CinemachineFreeLookのプロパティ設定は自由に変えてもらっても構いません。オススメとして、Lens Vertical FOV・TopRig・MiddleRig・BottomRigあたりは、デフォルトの値から変更すると画面が見やすくなると思います。

次に、PlayerAvatarViewスクリプトを新規で作成して、アバターにカメラを追従させる処理を実装しましょう。スクリプトは、アバターの3Dモデル部分のゲームオブジェクトに追加します。

PlayerAvatarView.cs

using Cinemachine;
using UnityEngine;

public class PlayerAvatarView : MonoBehaviour
{
    public void SetCameraTarget() {
        var freeLookCamera = FindObjectOfType<CinemachineFreeLook>();
        freeLookCamera.LookAt = transform;
        freeLookCamera.Follow = transform;
    }
}

アバターの3Dモデル部分にPlayerAvatarViewを追加する

NetworkBehaviourを継承しているスクリプト（PlayerAvatar）は、ネットワークオブジェクトが生成された時にSpawned()が呼ばれます。そこで自分自身のアバターかどうか（自分自身が入力権限を持つネットワークオブジェクトかどうか）を調べて、自分自身のアバターならカメラを追従させる処理を実行しましょう。

PlayerAvatarにPlayerAvatarViewをアタッチする

PlayerAvatar.cs

  public class PlayerAvatar : NetworkBehaviour
  {
+     [SerializeField]
+     private PlayerAvatarView view;

      private NetworkCharacterControllerPrototype characterController;
  
      private void Awake() {
          characterController = GetComponent<NetworkCharacterControllerPrototype>();
      }

+     public override void Spawned() {
+         // 自分自身のアバターにカメラを追従させる
+         if (Object.HasStateAuthority) {
+             view.SetCameraTarget();
+         }
+     }

      public override void FixedUpdateNetwork() {
          if (Object.HasStateAuthority) {
              var inputDirection = new Vector3(Input.GetAxis("Horizontal"), 0f, Input.GetAxis("Vertical")).normalized;
              var isJumpButtonDown = Input.GetKey(KeyCode.Space);

              characterController.Move(inputDirection);
              if (isJumpButtonDown) {
                  characterController.Jump();
              }
          }
      }
  }

ここでひとまずUnityのエディター上で再生してみて、自分自身のアバターにカメラが追従しているか？を確認してみましょう。

カメラが操作できるようになると、入力の方向をそのまま（ワールド座標系の方向として）渡すだけでは操作性に問題が発生することがわかるかと思います。そのため、入力の方向をカメラの正面向きを基準とした方向（ビュー座標系の方向）として、ビュー座標系からワールド座標系に変換する処理を追加する必要があります。

PlayerAvatar.cs

    public override void FixedUpdateNetwork() {
        if (Object.HasStateAuthority) {
-           var inputDirection = new Vector3(Input.GetAxis("Horizontal"), 0f, Input.GetAxis("Vertical")).normalized;
+           // 入力の方向をカメラの向きを基準にした方向に変換する
+           var cameraRotation = Quaternion.Euler(0f, Camera.main.transform.rotation.eulerAngles.y, 0f);
+           var inputDirection = new Vector3(Input.GetAxis("Horizontal"), 0f, Input.GetAxis("Vertical"));
+           inputDirection = (cameraRotation * inputDirection).normalized;
            var isJumpButtonDown = Input.GetKey(KeyCode.Space);

            characterController.Move(inputDirection);
            if (isJumpButtonDown) {
                characterController.Jump();
            }
        }
    }

共有モードでは、プレイヤー間で入力の通信が行われないため入力権限は必須ではありませんが、FusionのNetworkInputを使って実装することも可能です。

実装の詳細は【Photon Fusion】ホストモードのチュートリアルの方を確認してください。

FusionのNetworkInputを使った実装例

GameLauncher.cs

using System;
using System.Collections.Generic;
using Fusion;
using Fusion.Sockets;
using UnityEngine;

public class GameLauncher : MonoBehaviour, INetworkRunnerCallbacks
{
    [SerializeField]
    private NetworkRunner networkRunnerPrefab;
    [SerializeField]
    private NetworkPrefabRef playerAvatarPrefab;

    private NetworkRunner networkRunner;

    private async void Start() {
        networkRunner = Instantiate(networkRunnerPrefab);
        networkRunner.AddCallbacks(this);
        var result = await networkRunner.StartGame(new StartGameArgs {
            GameMode = GameMode.Shared,
            SceneManager = networkRunner.GetComponent<NetworkSceneManagerDefault>()
        });

        if (result.Ok) {
            var randomValue = UnityEngine.Random.insideUnitCircle * 5f;
            var spawnPosition = new Vector3(randomValue.x, 5f, randomValue.y);
            networkRunner.Spawn(playerAvatarPrefab, spawnPosition, Quaternion.identity, networkRunner.LocalPlayer);
        }
    }

    public void OnInput(NetworkRunner runner, NetworkInput input) {
        var data = new NetworkInputData();

        var cameraRotation = Quaternion.Euler(0f, Camera.main.transform.rotation.eulerAngles.y, 0f);
        var inputDirection = new Vector3(Input.GetAxis("Horizontal"), 0f, Input.GetAxis("Vertical"));
        data.Direction = cameraRotation * inputDirection;
        data.Buttons.Set(NetworkInputButtons.Jump, Input.GetKey(KeyCode.Space));

        input.Set(data);
    }

    public void OnPlayerJoined(NetworkRunner runner, PlayerRef player) {}
    public void OnPlayerLeft(NetworkRunner runner, PlayerRef player) {}
    public void OnInputMissing(NetworkRunner runner, PlayerRef player, NetworkInput input) {}
    public void OnShutdown(NetworkRunner runner, ShutdownReason shutdownReason) {}
    public void OnConnectedToServer(NetworkRunner runner) {}
    public void OnDisconnectedFromServer(NetworkRunner runner) {}
    public void OnConnectRequest(NetworkRunner runner, NetworkRunnerCallbackArgs.ConnectRequest request, byte[] token) {}
    public void OnConnectFailed(NetworkRunner runner, NetAddress remoteAddress, NetConnectFailedReason reason) {}
    public void OnUserSimulationMessage(NetworkRunner runner, SimulationMessagePtr message) {}
    public void OnSessionListUpdated(NetworkRunner runner, List<SessionInfo> sessionList) {}
    public void OnCustomAuthenticationResponse(NetworkRunner runner, Dictionary<string, object> data) {}
    public void OnHostMigration(NetworkRunner runner, HostMigrationToken hostMigrationToken) {}
    public void OnReliableDataReceived(NetworkRunner runner, PlayerRef player, ArraySegment<byte> data) {}
    public void OnSceneLoadDone(NetworkRunner runner) {}
    public void OnSceneLoadStart(NetworkRunner runner) {}
}

NetworkInputData.cs

using Fusion;
using UnityEngine;

public struct NetworkInputData : INetworkInput
{
    public Vector3 Direction;
    public NetworkButtons Buttons;
}

public enum NetworkInputButtons
{
    Jump
}

PlayerAvatar.cs

using Fusion;
using UnityEngine;

public class PlayerAvatar : NetworkBehaviour
{
    [SerializeField]
    private PlayerAvatarView view;

    private NetworkCharacterControllerPrototype characterController;

    private void Awake() {
        characterController = GetComponent<NetworkCharacterControllerPrototype>();
    }

    public override void Spawned() {
        if (Object.HasStateAuthority) {
            view.SetCameraTarget();
        }
    }

    public override void FixedUpdateNetwork() {
        if (GetInput(out NetworkInputData data)) {
            characterController.Move(data.Direction);
            if (data.Buttons.IsSet(NetworkInputButtons.Jump)) {
                characterController.Jump();
            }
        }
    }
}

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

アバターを自由に動かせるようになりましたが、このままではどれが誰のアバターなのか判別がつかないので、アバターの頭上にプレイヤーの名前を表示させてみましょう。

プレイヤー名の保存

事前にプレイヤー名を文字列で保存・取得できるようにしておきましょう。新規スクリプトで、以下のような静的クラスのPlayerDataを作成してください。

PlayerData.cs

using UnityEngine;

public static class PlayerData
{
    public static string NickName {
        get => PlayerPrefs.GetString("NickName", "No Name");
        set => PlayerPrefs.SetString("NickName", value);
    }
}

このチュートリアルでは、ランダムなプレイヤー名を表示することにします。セッションに参加する前に、プレイヤー名を設定する処理を追加しておきましょう。

GameLauncher.cs

    private async void Start() {
+       // ランダムなプレイヤー名を設定する
+       PlayerData.NickName = $"Player{Random.Range(0, 10000)}";

        networkRunner = Instantiate(networkRunnerPrefab);
        var result = await networkRunner.StartGame(new StartGameArgs {
            GameMode = GameMode.Shared,
            SceneManager = networkRunner.GetComponent<NetworkSceneManagerDefault>()
        });

        if (result.Ok) {
            var randomValue = Random.insideUnitCircle * 5f;
            var spawnPosition = new Vector3(randomValue.x, 5f, randomValue.y);
            networkRunner.Spawn(playerAvatarPrefab, spawnPosition, Quaternion.identity, networkRunner.LocalPlayer);
        }
    }

プレイヤー名のテキスト作成

以下の画像を参考にして、アバターの頭上にテキストを追加してください。テキストは、Unity公式パッケージのTextMesh Proを使用します。

ヒエラルキーのメニューから「3D Object > Text - TextMeshPro」を選択する

PlayerAvatarViewにテキストの参照（TextMeshPro）をアタッチして、プレイヤー名をテキストに設定する処理を追加しましょう。また、テキストは常にカメラの正面向きで表示させたいので、LateUpdate()のタイミングでビルボードの処理を実行しましょう。

PlayerAvatarView.cs

  using Cinemachine;
+ using TMPro;
  using UnityEngine;
  
  public class PlayerAvatarView : MonoBehaviour
  {
+     [SerializeField]
+     private TextMeshPro nameLabel;
  
      public void SetCameraTarget() {
          var freeLookCamera = FindObjectOfType<CinemachineFreeLook>();
          freeLookCamera.LookAt = transform;
          freeLookCamera.Follow = transform;
      }

+     // プレイヤー名をテキストに設定する
+     public void SetNickName(string nickName) {
+         nameLabel.text = nickName;
+     }
  
+     private void LateUpdate() {
+         // プレイヤー名のテキストを、常にカメラの正面向きにする
+         nameLabel.transform.rotation = Camera.main.transform.rotation;
+     }
  }

プレイヤー名をネットワークプロパティで定義します。NetworkRunner.Spawn()の引数のOnBeforeSpawned()からネットワークプロパティを初期化するメソッドが渡せるので、そこでプレイヤー名を設定して、アバターが生成された時にテキストに反映させましょう。

PlayerAvatar.cs

+   // プレイヤー名のネットワークプロパティを定義する
+   [Networked]
+   public NetworkString<_16> NickName { get; set; }

    [SerializeField]
    private PlayerAvatarView view;

GameLauncher.cs

    private async void Start() {
        PlayerData.NickName = $"Player{Random.Range(0, 10000)}";

        networkRunner = Instantiate(networkRunnerPrefab);
        var result = await networkRunner.StartGame(new StartGameArgs {
            GameMode = GameMode.Shared,
            SceneManager = networkRunner.GetComponent<NetworkSceneManagerDefault>()
        });

        if (result.Ok) {
            var randomValue = Random.insideUnitCircle * 5f;
            var spawnPosition = new Vector3(randomValue.x, 5f, randomValue.y);
+           networkRunner.Spawn(playerAvatarPrefab, spawnPosition, Quaternion.identity, networkRunner.LocalPlayer, (_, networkObject) => {
+               // プレイヤー名のネットワークプロパティの初期値を設定する
+               networkObject.GetComponent<PlayerAvatar>().NickName = PlayerData.NickName;
+           });
        }
    }

PlayerAvatar.cs

    public override void Spawned() {
        if (Object.HasStateAuthority) {
            view.SetCameraTarget();
        }
+       // プレイヤー名をテキストに反映する
+       view.SetNickName(NickName.Value);
    }

Unityのプロジェクトをビルドして、プレイヤー名が表示されることを確認してみましょう。