GS2 UIKit for Unity のチュートリアル

GS2 UIKit for Unity の利用方法について

途中までは一般的なチュートリアルと同じ手順となります。

GS2のセットアップ

SDKのセットアップ

クレデンシャル(APIキー)の作成

ログイン処理に必要なリソースを準備

クライアントの初期化

環境情報を作成

まずは、環境情報を定義する ScriptableObject を作成します。

img_6.png

Project でコンテキストメニューを開き Create > Game Server Services > Core > Environment を作成します。

img.png

作成した ScriptableObject に クレデンシャル(APIキー)の作成 で作成した clientId / clientSecret を設定します。 Name には環境名を入力します。

クライアントホルダーを作成

次に、GS2 クライアント を保持する GameObject を作成します。

img_5.png

シーン内に適当な GameObject を作成します。今回は「GS2」という名前で用意しました。

img_1.png

Environments に先程作成した Environment を指定し、現在有効な環境を決めるための Active Environment に環境名を指定します。

環境の切り替えを容易にするためにこのような設定を可能としていますが、製品リリース時には開発環境などの ScriptableObject はビルド成果物に含まれないようにすることをお勧めします。

OnError には初期化に失敗した場合に発生するイベントハンドラを設定できます。 GS2ClientHolder はエラーメッセージをダンプする DebugErrorHandler 関数が用意されています。今回はエラーが発生したことを把握できればいいので、このイベントハンドラを利用します。

これだけの設定で、ゲーム起動時に勝手にSDKの初期化が行われます。

アカウントの作成とログイン

GS2リソース情報を作成

環境を作成したように、GS2で利用可能なリソースを ScriptableObject として宣言する必要があります。

今回は ログイン処理に必要なリソースを準備 で GS2-Account で 「game-0001」 というネームスペースを作成し、 GS2-Key で 「account-encryption-key-namespace」という名前のネームスペースと「account-encryption-key」という名前の暗号鍵を作成しましたので、その設定を反映する必要があります。

img_7.png

先程と同じように、Project のコンテキストメニューから Create > Game Server Services > Account > Namespace で ScriptableObject を作成します。

img_8.png

作成した ScriptableObject にネームスペースの名前を入力します。

同じように GS2-Key の ScriptableObject も作成します。

img_9.png img_10.png

ログイン処理の実装

実装とは言っても、 シーン内に配置するだけで「アカウントを作成して、ログイン」の処理を実行してくれる Prefab が用意されています。

img_2.png

Hierarchy で適当な GameObject を選択した状態でコンテキストメニューを開き、Game Server Services > Core > Action > AutoLogin を選択します。

img_3.png

すると、選択しているノードの下に Gs2AutoLogin というプレハブオブジェクトが追加されます。

img_4.png

Namespace に GS2-Account のネームスペースの ScriptableObject を、Key に GS2-Key の暗号鍵の ScriptableObject を指定します。

イベントハンドラとして、OnAutoLoginComplete と OnError が用意されています。

成功時には OnAutoLoginComplete が呼び出され、自分自身の GameObject を無効化する処理が動きます。 失敗時には OnError が呼び出され、 GS2ClientHolder の DebugErrorHandler を呼び出すように設定しています。

動きの可視化

ここからが UIKit の本領発揮です。 ログイン状況を画面に表示してみましょう。

テキストノードの作成

img_11.png

Canvas の配下に View という階層を用意し、その下に NotLoggedIn / LoggedIn というテキストを配置しています。

img_12.png

このように画面中央に2つのテキストが重なって表示されている状態です。

これから、ログイン状態にあわせて表示するテキストを切り替えるようにします。

ログイン状態にあわせてノードを表示・非表示する

UI Kit には状態に合わせて特定のノードを有効化したり、無効化したりできる Enabler というコンポーネントが存在します。

img_13.png

View ノードを選択し、コンポーネントを追加します。

img_14.png img_15.png img_16.png img_17.png img_18.png

コンポーネントには、表示条件と制御対象を設定できます。

Logged In にチェックが入っていない状態 = ログインしていない 時に 制御対象 を表示する ということになります。

img_20.png

コンポーネントを2つ登録し、それぞれログイン状態・未ログイン状態でどのノードを有効化したいかを設定します。

実行

実行してみましょう。

img_21.png

一瞬上記のような表示がされ、すぐに以下の表示に切り替わります。

img_22.png

つまり、AutoLogin プレハブがログイン処理を行い、その結果ログイン状態が変化してUIの表示も勝手に切り替わったことになります。

自分のユーザーIDを表示

先程は Enabler を使ってみましたが、次は Context と Fetcher と Label を使用してみましょう。

img_23.png

まずは UI を用意します。LoggedIn の配下に UserId という名前のテキストノードを作成します。 現在ログイン中のプレイヤーのユーザーIDをこのテキストに反映するようにしてみましょう。

img_24.png

LoggedIn ノードを選択します。

img_25.png

Gs2AccountAccountContext と Gs2AccountAccountFetcher コンポーネントを追加します。

Gs2AccountAccountContext には表示したいアカウント情報を設定します。

img_27.png

Account の ScriptableObject を作成します。

img_26.png

ユーザーIDに #{userId} を指定することで、自分自身のユーザーIDとして扱うことができます。

img_28.png

この ScriptableObject を Gs2AccountAccountContext に指定することで LoggedIn ノードの下で Account に関する処理を UIKit を使用して行うと、Context で指定したオブジェクトに関する操作として処理されます。

img_25.png

Gs2AccountAccountContext の横に Gs2AccountAccountFetcher を配置しました。 これによって、Gs2AccountAccountFetcher はログイン中のユーザーに関する情報をサーバーから取得して保持してくれます。

img_29.png

次に UserId ノードに Gs2AccountAccountLabel を追加します。 Format にテキストに反映する文字列の整形方法を指定します。

今回は Fetcher が取得したアカウント情報の中から userId のフィールドを反映したテキストを作成しています。

OnUpdate に整形されたテキストが渡ってきますので、それをテキストコンポーネントに反映しています。

再度実行してみましょう。

img_30.png

ログインが完了すると、右下にユーザーIDが表示されました。

UI Kit の使い方が奇妙に感じましたか?

記述したコードが上から下に処理されるようなプログラミングを 手続型プログラミング と呼びます。 一方で、UI Kit のようなプログラミングを 宣言的プログラミング と呼びます。

おそらく奇妙に感じたあなたは、手続型プログラミング を主に行ってきたのだと思います。 手続型プログラミング に慣れ親しんだあなたは「処理の副作用がどのように発生するのか追いづらく、使いにくそう」と感じたかもしれません。 一方で、副作用について考える必要はなく、最終的に自分が各 GameObject にどのように振る舞って欲しいのかを定義することで、処理の順番や誰が実行するのかを意識の外に出せるのが 宣言的プログラミング のメリットです。

手続型プログラミング宣言的プログラミング の違いが理解できれば、 UI Kit のような状態に応じて、UIがどのようになって欲しいかを宣言する記述スタイルが Unity と相性がいいことが理解できると思います。


GS2 UIKit for Unity の実装サンプル

GS2 UIKit for Unity の実装サンプルの紹介

UI Kit を使ってテキストチャットを実装

もう少し高度なチュートリアルにも挑戦してみましょう

UI Kit を使ってアイテムインベントリを実装

もう少し高度なチュートリアルにも挑戦してみましょう