Inbox(GS2 UIKit for Unity) のサンプル

GS2 UIKit for Unity を使用した GS2-Inbox の機能実装サンプルの紹介

プレゼントボックス機能を実装します。

リポジトリ

https://github.com/gs2io/gs2-uikit-for-unity-sample/tree/main/Inbox

GS2-Deploy テンプレート

https://github.com/gs2io/gs2-uikit-for-unity-sample/blob/main/Inbox/initialize_inbox_template.yaml

プロジェクト内容

img.png

プロジェクトを開くと上記の通りになります。

img_1.png

実行すると、上部には何もなく下部にメニューが表示されている画面が表示されます。

img_2.png

メニューから「Send」ボタンを3回押してみます。

img_3.png

3通のメッセージがリスト表示されます。 このように画面上部にはプレゼントボックスに届いているメッセージの一覧を表示します。

img_2.png

今度は、メニューから「Send With Expire」ボタンを押してみます。

img_4.png

メッセージ一覧に、新しく有効期限が設定されたメッセージの一覧が表示されます。 日時の表記が2行表示されていますが、上が受信日時で下が有効期限です。 有効期限は受信日時から1分後が設定されています。

このまま1分間待ってください。

img_5.png

有効期限を迎えたメッセージが勝手に表示されなくなります。

次は、3通あるメッセージの真ん中の「Read」ボタンを押してみます。

img_6.png

すでに読んだメッセージは Read ボタンがグレーアウトされます。

プロジェクトの解説

img_7.png

シーンのヒエラルキーに注目してください。

Canvas/InboxWindow

Gs2InboxNamespaceContext

この GameObject 以下のノードで取り扱う GS2-Inbox のネームスペースを指定しています。

img_8.png

今回は、GS2-Inbox の inbox-0001 というネームスペースを指定しています。

Canvas/InboxWindow/Inbox/…/Content

img_9.png

Gs2InboxOwnMessageListFetcher

NamespaceContext で指定されたネームスペースのメッセージ一覧を取得します。

Gs2InboxOwnMessageList

Gs2InboxOwnMessageListFetcher で取得したメッセージを指定されたプレハブに割り当てて生成します。 Maximum Items にはプレハブを生成する最大数を指定します。

img_10.png

今回は子ノードにいる Message をプレハブとして指定しています。 フレハブとして指定された GameObject がシーン内にある場合、その GameObject は無効化され、それ以外に Maximum Items で指定された数だけ GameObject が生成されます。

Canvas/InboxWindow/Inbox/…/Content/Message

img_11.png

Gs2InboxOwnMessageContext

この GameObject 以下のノードで取り扱うメッセージを指定しています。 コンテキストの内容は Gs2InboxOwnMessageList によって割り当てられます。

Gs2InboxOwnMessageFetcher

Gs2InboxOwnMessageContext で指定されたメッセージを取得します。

Canvas/InboxWindow/Inbox/…/Content/Message/Metadata

メッセージのペイロードを表示します。

img_12.png

Gs2InboxOwnMessageLabel

メッセージの内容を、Format で指定した形式で整形します。 整形されたテキストは OnUpdate(String) にコールバックされ、そこから Text コンポーネントに値を反映しています。

Canvas/InboxWindow/Inbox/…/Content/Message/Timestamp

img_13.png

Gs2InboxOwnMessageExpiresAtEnabler

メッセージに設定された有効期限の値を元に 表示・非表示 を制御します。 有効期限が設定している場合は ExpiresAt を有効化するように設定しています。

Canvas/InboxWindow/Inbox/…/Content/Message/Timestamp/ReceivedAt

Gs2InboxOwnMessageLabel

img_14.png

メッセージの受信日時を表示しています。整形の方法は Format で指定しており、 整形されたテキストは OnUpdate(String) にコールバックされ、そこから Text コンポーネントに値を反映しています。

Canvas/InboxWindow/Inbox/…/Content/Message/Timestamp/ExpiresAt

Gs2InboxOwnMessageLabel

img_14.png

メッセージの有効期限を表示しています。整形の方法は Format で指定しており、 整形されたテキストは OnUpdate(String) にコールバックされ、そこから Text コンポーネントに値を反映しています。

Canvas/InboxWindow/Inbox/…/Content/Message/Control

img_15.png

Gs2InboxOwnMessageIsReadEnabler

メッセージの既読状態の値を元に 表示・非表示 を制御します。 未読状態の場合は Read を有効化し、既読状態の場合は AlreadyRead を有効化しています。

Canvas/InboxWindow/Inbox/…/Content/Message/Control/Gs2InboxMessageReadAction

img_16.png

こちらのコンテキストメニューよりプレハブを追加できます。

img_17.png

プレハブを有効化することで Gs2InboxOwnMessageContext で指定したメッセージを既読状態にします。

OnReadComplete(String)

に既読化が正常終了した場合のコールバックを設定でき、自分自身を無効化しています。

Canvas/InboxWindow/Input/Send

img_18.png

Gs2ExchangeRateModelContext

GS2-Inbox のメッセージを送信する GS2-Exchange の交換レートを設定します。

img_20.png img_19.png

ここでは、GS2-Exchange の exchange-0002 という名前のネームスペース の SendMessage という名前の交換レートを指定しています。

Canvas/ExperienceWindow/Input/Send/Gs2ExchangeExchangeExchangeAction

Count に交換数量を指定し、プレハブを有効化することで Gs2ExchangeRateModelContext で指定した交換レートの交換を実行します。

OnExchangeComplete(String)

に交換処理が正常終了した場合のコールバックを設定でき、自分自身を無効化しています。

Canvas/InboxWindow/Input/Send With Expire

img_21.png

Gs2ExchangeRateModelContext

GS2-Inbox の有効期限月メッセージを送信する GS2-Exchange の交換レートを設定します。

ここでは、GS2-Exchange の exchange-0002 という名前のネームスペース の SendMessageWithExpire という名前の交換レートを指定しています。

Canvas/ExperienceWindow/Input/Send With Expire/Gs2ExchangeExchangeExchangeAction

Count に交換数量を指定し、プレハブを有効化することで Gs2ExchangeRateModelContext で指定した交換レートの交換を実行します。

OnExchangeComplete(String)

に交換処理が正常終了した場合のコールバックを設定でき、自分自身を無効化しています。

Process/Gs2AutoLogin

ログイン処理を実行するプレハブが設定されています。

Accountのサンプル で解説していますので、そちらを参照ください。