月内の画像のアップロード容量制限に引っかかってしまったため、後日画像をアップロードします
Session.05 UI Kit
第五回は GS2 の UI コンポーネントシステムである UI Kit を使用した UI 構築について解説します。
UI Kit とは
UI Kit とは、ゲームエンジン上で UI を構築する工程を大幅に効率化するためのソリューションです。
これまで、クライアント開発者がサーバーからデータを取得して、UIに値を反映するプログラムをしながら開発を進めてきました。
UI Kit はそのアプローチとは異なり、ゲームエンジン上でテキストコンポーネントに対して GS2 上のどのデータを反映したいかを宣言的に定義することで、プログラムを一切記述することなく UI に値を表示することができます。
UI Components
今回使用する UI Kit のコンポーネントを解説します。
Fetcher
GS2から値を取得するコンポーネントです。
GameObject に対して、このコンポーネントを付与し、データの種類を定義して使用します。
子ノードに データを参照するようなコンポーネントを付与した場合、親階層に存在する Fetcher が取得したデータの値を使用して動作します。
Label
親ノードの Fetcher で取得したデータの情報を表示するコンポーネントです。
format パラメーターで指定した形式で値を整形し、onUpdate コールバックが呼び出されます。
onUpdate コールバックにテキストコンポーネントを指定することで、テキストの値を更新することができます。
Enabler
データの状況に応じてノードを有効化・無効化するコンポーネントです。
データの種類によって、有効化するために設定できる条件が異なります。
たとえば、GS2-Showcase の Display Item であれば 「データ読み込み中」「購入可能」「購入不可能」といった条件に基づき、表示・非表示を制御できます。
Unity の特性上、Enabler をつけたコンポーネントが非表示になると、表示判定処理が動かなくなるため、再度表示条件を満たしたとしても表示することができません。
Enabler は実際に操作するノードより親階層に配置するようにしましょう。
Support Prefabs
UI Kit には単純なGS2のAPI呼び出しをプログラムを記述せずに実行できるようにするサポートプレハブが用意されています。
Gs2ExchangeExchangeAction
GS2-Exchange で交換を実行するプレハブです。
交換を実行する Rate Model を指定することで、コンポーネントをアタッチした GameObject を有効化するだけで交換処理を実行できます。
これで UI Kit に関する学習は終了です。
それでは、ここからは実際に実装して UI Kit を利用してみましょう。
Demo
それでは、実際にUnityで実装してみましょう。
リソースの定義
まずは、今回使用する GS2 リソースを ScriptableObject で定義します。
これで、UI を組み立てる準備が整いました。
ログイン
ログイン処理も UI Kit を使って実現してみましょう。
まずは、UI Kit の Gs2ClientHolder プレハブを配置します。
Gs2AccountAutoLogin プレハブを配置します。
続けて、環境設定 ScriptableObject を作成し、クライアントIDやクライアントシークレットを設定します。
配置したプレハブに設定を反映します。
UI の作成
ここからしばらくはUIを配置します。
UIの準備が整いましたので、UI Kit で動作を加えていきましょう。
GS2-Inventory の情報を出力
現在のポーションの所持数量を表示するようにします。
まずは Fetcher を追加します。Potion を表す ScriptableObject を設定します。
続けて、Label を追加します。
format に指定できるプレースホルダを確認します。
onUpdate にテキストコンポーネントを設定します。
GS2-Limit の情報を出力
次は、交換回数カウンターの値を表示するようにします。
同じく Fetcher を追加し、カウンターの種類を設定します。
続けて、Label を追加し、format を設定、onUpdate でテキストコンポーネントを設定します。
GS2-Exchange の交換レートの情報を出力
交換レートの Fetcher を設定し、交換レートを設定します。
交換によって入手できるアイテムの情報をテキストコンポーネントに反映します。
残り交換可能回数をテキストコンポーネントに反映します。
交換実行ボタンを配置
交換ボタンに交換処理のサポートプレハブを関連づけます。
サポートプレハブは初期状態では非アクティブにしておき、交換ボタンを押したらアクティブにするようにします。
交換済みの状態の時に表示する非アクティブなボタンを用意します。
Enabler を使用して、交換可能な時と交換済みの時で表示するボタンを切り替えるようにします。
動作確認
実行してみましょう。
勝手に通信が行われ、テキストコンポーネントに値が反映されていきます。
交換ボタンを押します。
その後の状態変化にもUIは勝手に追従します。
データの読み込み中はラベルを非表示にする
起動時に一瞬テキストコンポーネントの初期値が表示されていたのが気になるかもしれません。
読み込み中はコンポーネントを表示しないようにしてみます。
Enabler を追加し、読み込み完了時にテキストコンポーネントのノードを有効化するように設定します。
実行してみましょう。
先ほどとは異なり、読み込みが終わったら表示されるようになりました。
そもそも読み込みが終わるまで画面自体表示したくないようであれば、一般的に行われているように起動時に GS2-SDK でデータを一度でも取得しておけばキャッシュが作られ、ちらつきを無くすことができます。
これで UI Kit の解説は終了です。
開発効率が劇的に改善されるイメージを持っていただけていることに期待します。