アマゾンバナーリンク

StirxCloud入門編~チャット実装まで~

2020年8月2日

こんにちは!ジェイです。今回はStirxCloud入門ということで、Unityちゃんのネットワーク上で同期したアクションゲームを動かしてチャットを動作させるところまでやっていきます。

アカウント作成からログインからサーバー設定まで

最初にこちらのページから、メールアドレスとパスワードを登録して、アカウントを作成します。

次にログインしたら下の画面になるので、アプリケーション作成で適当な名前を付けます。

作成したアプリケーションをクリックしてクラスター作成をクリックすると下の画面になりますので、このままクラスター作成をします。ここまで終わったらサーバーの準備は終わりです。

Unityの準備

まずはこちらからUnity用のStrixCloud SDKをダウンロードして解凍します。

そして、StrixUnitySDK-1.3.1/samples/StrixActionGameSmpleというのがあるので、UnityHubのリストに追加の項目から追加します。

UnityでのStrixCloudの設定

続いてUnity側での設定をします。Herarchy→StrixConnectUI→StrixConnectPanel→StrixConnectGUIのHostにマスターホスト名とアプリケーション名を先ほど作成したサーバー情報を参考に入力します。

以上の手順だけで簡単にオンラインゲームが実装できます。以下の様な感じです。

チャット機能の追加

まず最初に空のオブジェクトを作成し、StirxReplicatorと以下のChatScriptをアタッチしてください。

この時、1つのオブジェクトのみにChatScriptをアタッチし、StirxReplicatorの「Instantiable By」を「Room Owner」に変更してください。この手順を行わないと、1つのインスタンス以上が生成されてしまいチャット機能が適切に動きません。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using SoftGear.Strix.Unity.Runtime;
using SoftGear.Strix.Client.Match.Room.Model;
using System.Linq;

public class ChatScript : StrixBehaviour
{
    private string chatWord = "";
    List<string> chatLog = new List<string>();
    GUIStyle AllChatStyle = new GUIStyle(); //全体チャットStyle
    GUIStyleState AllChatStyleState = new GUIStyleState();
    Rect RoomGuiRect = new Rect(0, 0, 300, 200); //チャットUIの大きさ設定用
    Vector2 scrollPos = new Vector2(0, 10);   //スクロールバー位置
    bool FocusFlag = false;
    // Start is called before the first frame update
    void Start()
    {
        GUI.FocusControl("");
        //全体チャットの場合
        AllChatStyleState.textColor = Color.white;
        //文字がUIからあふれた場合は折り返す設定
        AllChatStyle.normal = AllChatStyleState;
        AllChatStyle.wordWrap = true;
    }
    void ChatUIWindow(int window_id)
    {
        var strixNetwork = StrixNetwork.instance;
        //FocusがチャットUIに乗ってるときにEnterを押すとチャット発言が実行される
        if (Event.current.type == EventType.KeyDown && (Event.current.keyCode == KeyCode.KeypadEnter || Event.current.keyCode == KeyCode.Return))
        {
            if (!string.IsNullOrEmpty(chatWord))  //チャット入力欄がNullやEmptyでない場合
            {               
                RpcToAll("RecvChat", strixNetwork.selfRoomMember.GetName(), chatWord);
                chatWord = "";
                return;
            }
            else
            {
                GUI.FocusControl("");
                FocusFlag = false;
            }
        }
        //垂直のコントロールグループ開始
        GUILayout.BeginVertical();
        //// ルーム内のプレイヤー一覧の表示
        //GUILayout.BeginHorizontal();
        //GUILayout.Label("PlayerList : ");
        
        //if (strixNetwork.sortedRoomMembers != null)
        //{
        //    foreach (var entry in strixNetwork.sortedRoomMembers)
        //    {
        //        CustomizableMatchRoomMember member = (CustomizableMatchRoomMember)entry;
        //        GUILayout.Label(member.GetName() + " ");
        //    }
        //}
        //GUILayout.EndHorizontal();

        //スクロールビュー開始位置
        scrollPos = GUILayout.BeginScrollView(scrollPos);

        //チャットログ表示用フレキシブルスペース生成
        GUILayout.FlexibleSpace();

        // チャットログを表示する
        for (int i = chatLog.Count - 1; i >= 0; --i)
        {
            GUILayout.Label(chatLog[i], AllChatStyle);
        }
        //スクロールビュー終了
        GUILayout.EndScrollView();

        GUILayout.BeginHorizontal();
        //入力テキストフィールド生成、Focusが乗った状態をChatInputと命名
        GUI.SetNextControlName("ChatInput");
        chatWord = GUILayout.TextField(chatWord, GUILayout.Width(100));
        // チャット発言文を送信する
        if (GUILayout.Button("Send", GUILayout.ExpandWidth(false)))
        {
            RpcToAll("RecvChat", strixNetwork.selfRoomMember.GetName(), chatWord);
            chatWord = "";
        }

        if (!FocusFlag && Input.GetKeyDown(KeyCode.Return))
        {
            FocusFlag = true;
            GUI.FocusControl("ChatInput");
        }
        GUILayout.EndHorizontal();

        //垂直のコントロールグループ終了
        GUILayout.EndVertical();
    }
    [StrixRpc]
    void RecvChat(string senderName, string senderWord)
    {
        chatLog.Add(senderName + " : " + senderWord);
        for(int i = 0; i < chatLog.Count; ++i)
        {
            Debug.Log(chatLog[i]);
        }
        if (chatLog.Count > 10)
        {
            chatLog.RemoveAt(0);
        }
    }

    void Update()
    {
        //ChatUIの位置を調整
        RoomGuiRect.y = Screen.height - RoomGuiRect.height;
        //ChatUIの大きさ調整
        RoomGuiRect.width = Screen.width / 4;
        RoomGuiRect.height = Screen.height / 3;
    }
    void OnGUI()
    {
        GUILayout.Window(0, RoomGuiRect, ChatUIWindow, "");
    }
 }

以上の手順でチャット付きオンラインアクションゲームがStrixCloudで簡単に作れます!