Implementing text chat using UI Kit

try a more advanced tutorial!

UI Configuration

img.png

First, let me show you an overview of the scene.

The message list is placed at the top of the screen, and the text input field and send button are placed at the bottom.

Context

img_1.png

This section describes the placement of Context.

A is the room context for GS2-Chat.

B is the message list context of GS2-Chat.

C is the message context for GS2-Chat.

Explanation of implementation

Obtaining a message list

img_11.png img_12.png

The room context is set to the information of the room created by GS2-Chat in advance.

img_2.png img_3.png

Two components are attached to the message list context.

Gs2ChatMessageListFetcher retrieves a list of messages in a room specified by a room context.

Gs2ChatMessageList creates a GameObject based on the data retrieved by the Fetcher. Maximum Items is the maximum number of elements to be created in the list.

At startup, Gs2ChatMessageList duplicates and instantiates the GameObject specified as Prefab for the number of Maximum Items. Since it is expensive to re-instantiate the GameObjects as the number of list items increases or decreases, instantiate all GameObjects in advance and hide the ones that are not needed.

Example runtime status

![img_4.png](img_4.png) Mass instantiated Message node.

Prefab can be a GameObject with a message context, which will always be set to one of the messages retrieved from the fetcher when displayed.

Example runtime status

![img_5.png](img_5.png) ![img_6.png](img_6.png) State of the message context assigned to the instantiated Message.

Display of Message

img_8.png img_9.png

Three components are attached to the message context.

Message is not specified for Gs2ChatMessageContext. This is because it is assumed that the value is set by Gs2ChatMessageList.

Gs2ChatMessageFetcher retrieves and stores information about the message specified in Gs2ChatMessageContext.

Gs2ChatMessageEnabler is set to activate the Text node once Gs2ChatMessageFetcher has completed retrieving the value.

img_10.png

Text is set to Gs2ChatMessageLabel so that the content of the Message’s metadata is reflected in the text.

Posting a message

To post a message, you need to call GS2-Chat’s Post API.

img_15.png

The UI Kit provides a Prefab, Gs2ChatMessagePostAction, for executing Post. This Prefab should be initially disabled because the API will be invoked when it is enabled.

img_16.png

Two parameters can be set for the message to be posted.

NameDescription
CategoryMessage Type
MetadataMessage Body

Category can be any number, and can be categorized as “0” is a text message, “1” is a sticker, and so on, and can be used as information to determine how Metadata is read. Metadata is the body of the message.

In this sample, only 0 is used for Category, and a raw string is specified for Metadata.

OnPostComplete is called on success, disabling its own GameObject and initializing the InputField input to empty.

img_13.png img_14.png

Handling the change of input field value with OnValueChanged in InputField and setting the value to Metadata in Gs2ChatMessagePostAction.

img_17.png img_18.png

Gs2ChatMessagePostAction Prefab is enabled in the OnClick event of the submit button.

Confirmation of operation

img_19.png

(3 messages exist due to the fact that we checked the operation beforehand) Type ddd and press the submit button.

img_20.png

ddd is added to the message list and InputField is initialized.

Finally.

Did you get the fun of Declarative programming of UI Kit?

You don’t have to write a process to retrieve the message list after sending a message. You can control the behavior by simply setting up a component to “display the message list” and “reflect the message metadata in the text”.