ちょっと話題の記事

Unity 4.3 x Photon Cloud 2Dオンラインアプリチュートリアル(前編)| アドカレ2013 : SP #3

2013.12.03

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

unity-photon-logos

最近リリースされたUnity 4.3とPhoton Cloudを使って何か出来ないかな・・と思ったので実験してみました。 前編ではPhoton Coundの準備からゲームの下地作り、ゲームサーバーへ接続するところまでを簡単に説明したいと思います。

Photon Cloudを準備する

unity-photon-00

Photon Cloudを使うにはまずアカウント作成が必要です。PhotonCloud公式サイトでExit Games Photonアカウントを作成しましょう。Emailアドレスだけで作ることができます。

unity-photon-01

アカウントを作成したらログインし、MyPhoton>アプリケーションを確認します。ここに表示されている「AppID」はアプリケーション毎に発行される固有の識別子で、クライアントからサーバーへ接続する際に必要となります。今回はデフォルトで発行済みのAppIDを利用するのでメモっておきましょう。

Unity 4.3のインストール

Unity公式サイトからUnityの最新版(執筆時は4.3.1)をダウンロードしてインストールします。またUnityの強みであるAsset Storeを利用するためにUnityアカウントの作成も行っておくと便利です。こちらから登録できます。

新規プロジェクトを作成する

unity-photon-03

Unity4.3を起動、メニュー>File>New Projectから新規プロジェクトを作成します。今回は2Dゲームを作るので、プロジェクトの初期設定を「2D」に設定しておきます。ただMac版はここで2Dに設定しても実際には反映されない不具合があるため、メニュー>Projet Settings>EditorからDefault Behavior Modeを2Dに設定します。

ゲームを作成する前に

photon04

最初にProjectビューであらかじめ後で必要になるフォルダを追加しておきます。ここではResources、Scripts、Spritesの3つのフォルダを追加しました。フォルダを追加したら一旦Sceneをセーブしておきましょう。

Unity4.3では「2Dゲームに特化したコンポーネント」が各種追加されていますので、それらを使って2Dゲームを作成していきます。

プレイヤーを作成する

Player

このプレイヤーのイメージ素材(Player.png)をProjectビューのSpritesフォルダへドラッグ&ドロップします。

unity-photon-05n

この時にUnity側は取り込まれたファイル形式やプロジェクト設定に応じて自動で適切な処理を施しますが、ここではInspectorビューでTexture TypeがSpriteに設定されていることを確認しておきましょう。

unity-photon-06

次に取り込まれたイメージ(Sprite)をHierarchビューへドラッグ&ドロップします。するとSprite Rendererを持ったGameObject(以下Player)が自動的に作成されます。

unity-photon-07

続いてゲームを作るのに必要なコンポーネントをPlayerへ付与していきましょう。ここではUnity4.3で新しく追加された「Circle Collider 2D」と「Rigidbody 2D」をPlayerへ与えました。それぞれShere ColliderとRigidbodyの2Dバージョンだと思って頂いて今は大丈夫です。

試しに実行すると・・Playerは自由落下していきました。

地面を作成する

地面もPlayerと同様にSpriteで作成することが出来ますが、ここではあえてCubeを使ってみます。

HierarchyのCreateボタン>Cubeを選択してHierarchyへ追加、名前を「Ground」に変更します。

そしてGroundのTransformを以下の様に設定します。

unity-photon-08

ついでにDirectional Lightを追加、Playerもこのままでは地面にめり込んでしまっているので少し上方へ移動させておきましょう。

ここで実行すると・・・地面を抜けて自由落下していきました。

これは3D用のColliderと2D用のColliderは互いに干渉しない性質をもっているため、そのままだとすり抜けてしまいます。GroundのBox Colliderを削除して、代わりにBox Collider 2Dを与えてみましょう。

unity-photon-09

実行すると・・・PlayerがGroundに無事着地しました。成功です。

プレイヤーを動かす

このままだと豆みたいなやつがただ地面に乗っているだけであまり面白くないので、次の様なスクリプトをPlayerへ与えてキーボード操作で動かせるようにします。ここでは「PlayerController.cs」という名前でスクリプトを作成します。

PlayerController.cs

using UnityEngine;

public class PlayerController : MonoBehaviour {

    public float jumpPower = 300f;
    public float movePower = 10f;

    void Start () {
    }

    void Update () {        
        //移動
        float inputX = Input.GetAxis("Horizontal");
        float inputY = Input.GetAxis("Vertical");
        Vector2 force = new Vector2(inputX, inputY) * movePower;
        rigidbody2D.AddForce(force);

        //ジャンプ
        if(Input.GetButtonDown("Jump")) {
            rigidbody2D.AddForce(Vector2.up * jumpPower);
        }
    }
}

これでカーソルキーで移動、スペースキーでジャンプが出来る様になりました。動作が確認出来たらひとまずクライアントの土台は完成です。動けるようになった豆をPrefabとしてResourcesフォルダへ登録しておきましょう。名前は「PlayerPrefab」としておきます。

unity-photon-10

次はPhoton Cloudの設定と組込みを行います。

Photon Unity Networking Freeをインポートする

Photon CloudをUnityで扱うためのPhoton Unity Networking(通称PUN)という便利なフレームワークが用意されているのでそれを使います。Asset Storeからダウンロードすることができます。*Asset Storeを利用するためにはUnityアカウントが必要になります。

unity-photon-11

メニュー>Window>Asset Storeを開き、Photn Unity Networking Freeをインポートします。デモが同梱されていますが今回は使わない(と思います)ので、Photon Unity Networking/Demos/はチェックを外しておきましょう。インポートが完了するとProjectビューにPhoton Unity NetworkingとPluginsフォルダが追加されていることが確認できます。

unity-photon-12

PUN WizardでAppIDを設定する

PUNのインポートが完了すると自動的にPUN Wizardが開きます(メニュー>Window>Photon Unity Networking(Alt+P)でもPUN Wizardを開くことが出来ます)WizardのSetupのボタンをクリックして、取得したAppID、利用するRegionを設定します。ここではRegionはJapanを選択します。

unity-photon-13

Photon Cloudへ接続する

PUNの設定が終わったら次は組込みです。Photon Cloudは1つのマスターサーバーと複数のゲームサーバーから構成されています。クライアントはまずマスターサーバー上のロビーへ接続し、そこでルームを作成やルームへの参加を行うことが出来ます。今回は最も簡単なランダムマッチメイク(サーバーが自動的にルームを割り振ってくれる方法)でやってみます。

まずHierarchyに空のオブジェクトを追加(Ctrl+Shift+N)し、Photon.MonoBehaviourを継承したクラスを作成して空のオブジェクトへ付与します。ここでは「NetworkManager.cs」という名前にします。

次のコードを記述してサーバーへの接続できるか試してみましょう。

NetworkManager.cs

using UnityEngine;

public class NetworkManager : Photon.MonoBehaviour {
    void Awake () {
        //マスターサーバーへ接続
        PhotonNetwork.ConnectUsingSettings("v0.1");
    }

    void Update () {
    }
 
    //ロビー参加成功時のコールバック
    void OnJoinedLobby() {
        //ランダムにルームへ参加
        PhotonNetwork.JoinRandomRoom();
    }

    //ルーム参加失敗時のコールバック
    void OnPhotonRandomJoinFailed() {
        Debug.Log("ルームへの参加に失敗しました");
    }

    //ルーム参加成功時のコールバック
    void OnJoinedRoom() {
        Debug.Log("ルームへの参加に成功しました");
    }

    void OnGUI() {
        //サーバーとの接続状態をGUIへ表示
        GUILayout.Label(PhotonNetwork.connectionStateDetailed.ToString());
    }
}

実行するとConsoleビューに「ルームへの参加に失敗しました」と表示されました。

unity-photon-14

ルームが1つも作成されていないためOnPhotonRandomJoinFailed()が呼ばれています。

OnPhotonRandomJoinFailed()を次のように修正します。

//ルーム参加失敗時のコールバック
void OnPhotonRandomJoinFailed() {
    Debug.Log("ルームへの参加に失敗しました");
    //名前のないルームを作成
    PhotonNetwork.CreateRoom(null);
}

今度はConsoleビューに「ルームの参加に成功しました」と表示されました。そしてGUIに表示したコネクションステータスが「JoinedLobby」から「Joined」へ変化していることが確認できます。接続成功です。

unity-photon-15

さて、今回はひとまずゲームサーバーへの接続させるところまで完成しました。 次回はオブジェクトをネットワーク上で同期させる仕組みを作っていきたいと思います。

山本

関連記事

Unity 4.3 x Photon Cloud 2Dオンラインアプリチュートリアル(後編)| アドカレ2013 : SP #24