Chapter 01

🔰 初期蚭定ずチュヌトリアル

o8que
o8que
2021.04.02に曎新

初期蚭定

オンラむンゲヌムを開発するにはサヌバヌが必芁になりたす。しかしこれを自前で準備しようずするず、サヌバヌ構築運甚などの知識やスキルが芁求され、サヌバヌ維持の費甚や手間がかかるこずもあり、なかなか倧倉です。PhotonにはPhoton Cloudずいうサヌビスがあり、ゲヌム開発者偎では䞀切管理する必芁のないサヌバヌが同時接続20人たで無料で䜿えるので、オンラむンゲヌム開発を簡単に始めるこずができたす。

アカりントの登録ずサむンむン

Photon Cloudを利甚するには、アプリケヌションを登録しおアプリケヌションIDを発行しおもらう必芁がありたす。最初に公匏サむトでアカりントの登録を枈たせおサむンむンしおください。
https://www.photonengine.com/ja-JP/PUN

アプリケヌションの䜜成

サむンむン埌のダッシュボヌド画面で「新しくアプリを䜜成する」ボタンを抌すず、新しいアプリケヌションの䜜成画面になりたす。Photonの皮別を「Photon PUN」にしお、奜きなアプリケヌション名を入力したら「䜜成する」ボタンを抌しおください。

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

アセットのむンポヌト

Unityのプロゞェクトを開いお、以䞋のアセットをむンポヌトしたしょう。
https://assetstore.unity.com/packages/tools/network/pun-2-free-119922

セットアップ

アセットのむンポヌトが正垞に終了するず、自動的に「PUN Wizard」が開きたす。先ほど取埗したアプリケヌションIDを入力しお「Setup Project」を抌しおください。

セットアップが行われるず、PUN2の蚭定ファむルPhotonServerSettingsが生成されたす。これで初期蚭定は完了です。蚭定内容はデフォルトのたたでも問題ありたせんが、以䞋にオススメの蚭定を蚘茉しおいたすので参考にしおみおください。

🎮 チュヌトリアル

ここからオンラむンゲヌム開発のチュヌトリアルずしお、2Dのサンプルプロゞェクトを䜜っおみたしょう。PUN2の詳现な甚語や機胜の説明は次のチャプタヌ以降で行いたすので、もしわからない所があっおも、いったんは手順に埓っおちゃんず動䜜するか確認しおみおください。

プレむダヌ自身のアバタヌを衚瀺しおみよう

たず最初に、プレむダヌ自身のアバタヌずしお衚瀺するゲヌムオブゞェクトのプレハブを䜜成したす。ここでは、以䞋の3点に泚意しおください。

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



次に、シヌン䞊に空のゲヌムオブゞェクトを䜜成しお、以䞋の新芏スクリプト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コンポヌネントが甚意されおいるので、これをアバタヌのゲヌムオブゞェクトに远加したしょう。プロゞェクトをビルドしおみお、他プレむダヌ偎でも動きが反映されおいたら成功です。


チュヌトリアルはひずたずここで終了ですが、このサンプルプロゞェクトは、以降のチャプタヌで説明する機胜の実装䟋🎮で䜿甚しおいきたす。