In WHALIEN, Ernest communicates with Fin using the phonebook he’s always carrying with him. We took this as an opportunity to convey our story in a more charming way than regular subtitles, by displaying the conversations between the two as text chats.

Design, UI

We had the following requirements for our chat system:

• each chat entry should display a picture of the current speaker that properly conveys their current emotion
• the conversation partner should be able to react with their own chat message after a certain amount of time
• the chat log should automatically scroll down to the newest message and old messages should fade out after a while. 

In order to dynamically add and remove individual chat messages, we split up our chat system into three different widgets:

• W_Subtitle to display a single message on the screen.
• W_SubtitleContainer to keep track of a single chat conversation between Ernest, Fin and potentially other characters. A W_SubtitleContainer can add new W_Subtitles at runtime and automatically scrolls to display the new message. If the speaker or emotion has changed between individual W_Subtitles, the W_SubtitleContainer also adds a new profile picture displaying that speaker with their new emotion next to the message.
• W_SubtitlesChat manages the content of individual W_SubtitleContainers. It keeps track of when to add new W_Subtitle lines and when to discard the entire W_SubtitleContainer. It also keeps track of any upcoming chat conversations to be displayed once the current conversation is finished.

Rich Text

We use RichTextBlocks to design our chats more lively. For one, RichTextBlocks support different text style sets that allow the developer to highlight certain text segments in a different font, size or color using markup-like syntax. Moreover, they support image decorators that allow the developer to add inline images to the text. Different text and image styles can be defined using DataTables, whereby the text style DataTable needs to inherit from RichTextStyleRow and the image decorators need to inherit from RichImageRow.

Setting up and triggering conversations

We also store all our conversations in a DataTable, where each entry is one conversation, consisting of multiple messages. Thereby, each message can be linked to a speaker and their current emotion and we can define when the message should appear on the screen and how long it should be displayed.

We mostly add new conversations to the screen when the player walks through a specific trigger, but they can also be added when special events happen in the world.

We also fire delegates whenever a single chat message is displayed and when an entire chat conversation is finished, so that other elements of our game can react to our story.

Tutorials

We can also add non-text content to our chat system, for example tutorial videos. This allows us to first introduce a new ability verbally and then play a video that explains how to use it in detail.

We let every tutorial video loop indefinitely until the player uses their newly gained ability at least once before the video disappears.

As usual, if you have any questions or comments about our conversation system, please let us know!
- Andi, Ralf