{"id":6016,"date":"2026-03-04T05:37:51","date_gmt":"2026-03-04T05:37:51","guid":{"rendered":"https:\/\/sites.wsagames.com\/hl1d23\/?p=6016"},"modified":"2026-05-14T07:01:32","modified_gmt":"2026-05-14T07:01:32","slug":"dialogue-system-2","status":"publish","type":"post","link":"https:\/\/sites.wsagames.com\/hl1d23\/dialogue-system-2\/","title":{"rendered":"Dialogue System"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

30 April Update - Dialogue System V2.0 Dev - 05<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Multiple Character Portraits and Portrait Switching<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Two days before the playtest, Alex told me that he had created several portrait states for the characters. Because of this, I decided to add a multiple-expression portrait system into the dialogue system, so the characters could show different emotions during conversations instead of using one static portrait.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

The portrait switching is mainly controlled through character tags<\/strong> in the Ink dialogue. Each dialogue line can include a tag to show who is speaking and which expression should be displayed, for example:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

When the dialogue is running, DialogueManager.cs reads the tag from the current dialogue line. The system then compares this tag with the portrait list configured in the Dialogue Manager. For example, if the tag is MarcusQUIET, the system displays Marcus\u2019s quiet portrait. If the tag is SierraMAD, the left-side NPC portrait area switches to Sierra\u2019s angry portrait.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

=====================================================================<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

17 April Update - Dialogue System V2.0 Dev - 04<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Item-Based Dialogue Trigger<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Later dialogue also needs to respond to the player\u2019s inventory. Some dialogue branches should only appear when the player already has a specific item. If the required item is not in the inventory, the NPC will only play the default dialogue.<\/p>

This is mainly handled in DialogueManager.cs. When a dialogue starts, the function PushEngineStateIntoStory() checks the current inventory and sends the result into Ink variables.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\tvoid PushEngineStateIntoStory(Story s)\r\n{\r\n    var inv = InventorySystem.Instance;\r\n\r\n    TrySetInkVar(s, \"map\", inv != null &amp;&amp; inv.Has(\"Map\") ? 1 : 0);\r\n    TrySetInkVar(s, \"mushroom\", inv != null &amp;&amp; inv.Has(\"Mushroom\") ? 1 : 0);\r\n    TrySetInkVar(s, \"compass\", inv != null &amp;&amp; inv.Has(\"Compass\") ? 1 : 0);\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b8e08dd elementor-widget elementor-widget-text-editor\" data-id=\"b8e08dd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>For example, if the player has a Map, the Ink variable map will be set to 1. If the player does not have it, the value will be 0.<\/p><p>\u00a0<\/p><p>The Ink dialogue can then use these variables to decide which dialogue branch should play. This allows the dialogue system to react to the player\u2019s progress instead of always showing the same response.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2cb6584 elementor-widget elementor-widget-heading\" data-id=\"2cb6584\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">=====================================================================<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a799ed5 e-con-full e-flex e-con e-child\" data-id=\"a799ed5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c360a9b elementor-widget elementor-widget-heading\" data-id=\"c360a9b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">14 April Update - Dialogue System V2.0 Dev - 03<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bdb4de5 elementor-widget elementor-widget-heading\" data-id=\"bdb4de5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">First Talk Dialogue<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e7cfee4 elementor-widget elementor-widget-text-editor\" data-id=\"e7cfee4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>After the forced opening dialogue ends, the player can move freely and start exploring the scene. However, to help the player understand the identities, attitudes, and story background of the two NPCs, we designed a First Talk Dialogue for each NPC.<br \/>This dialogue only plays once. When the player talks to an NPC for the first time, the system plays the special first-time dialogue. After it has been played, the system saves this state. From then on, talking to the same NPC again will trigger the normal default dialogue instead.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1e07d73 elementor-widget elementor-widget-code-highlight\" data-id=\"1e07d73\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>TextAsset GetDialogueToPlay()\r\n{\r\n    if (firstTimeInkJSON == null) return inkJSON;\r\n    if (HasPlayedFirstTalk()) return inkJSON;\r\n    return firstTimeInkJSON;\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dcd1243 elementor-widget elementor-widget-heading\" data-id=\"dcd1243\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">=====================================================================<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b19a751 e-con-full e-flex e-con e-child\" data-id=\"b19a751\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0a080e2 elementor-widget elementor-widget-heading\" data-id=\"0a080e2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">11 April Update - Dialogue System V2.0 Dev - 02<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-de1cb3a elementor-widget elementor-widget-heading\" data-id=\"de1cb3a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Forced Opening Dialogue<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0184630 elementor-widget__width-initial elementor-widget elementor-widget-image\" data-id=\"0184630\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1143\" height=\"977\" src=\"https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/05\/ezgif.com-animated-gif-maker-11.gif\" class=\"attachment-full size-full wp-image-6623\" alt=\"\" sizes=\"100vw\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-decd58c elementor-widget elementor-widget-text-editor\" data-id=\"decd58c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>When the game starts, the script automatically calls the opening dialogue instead of waiting for the player to press E. It checks whether the forced dialogue Ink file has been assigned, then uses DialogueManager.Instance.StartForcedDialogue() to open the Dialogue Panel and play the opening story.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c7c0a6b elementor-widget elementor-widget-code-highlight\" data-id=\"c7c0a6b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>DialogueManager.Instance.StartForcedDialogue(\r\n    forcedDialogueInkJSON,\r\n    forcedDialoguePortrait,\r\n    allowEscToSkipForcedDialogue,\r\n    OnForcedDialogueClosed\r\n);<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f271dcb elementor-widget elementor-widget-text-editor\" data-id=\"f271dcb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>During this forced dialogue, normal player interaction is locked. The script sets OpeningLock.IsLocked = true, which prevents the player from triggering other interactions while the opening story is playing.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1fc275e elementor-widget elementor-widget-code-highlight\" data-id=\"1fc275e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>OpeningLock.IsLocked = true;<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6476248 elementor-widget elementor-widget-text-editor\" data-id=\"6476248\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>After the forced dialogue is finished, OnForcedDialogueClosed() is called. This unlocks the player\u2019s normal input and allows the player to start exploring and interacting with NPCs.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c300511 elementor-widget elementor-widget-code-highlight\" data-id=\"c300511\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>void OnForcedDialogueClosed()\r\n{\r\n    OpeningLock.IsLocked = false;\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cf7f642 elementor-widget elementor-widget-heading\" data-id=\"cf7f642\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Inventory  Unlocked Notice<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-11ced63 elementor-widget elementor-widget-text-editor\" data-id=\"11ced63\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>During the playtest, some players said they were not sure how to open the backpack system. Although the inventory function already existed, without a clear prompt, players might not immediately realise that they could press B to check their items.<\/p><p>Because of this, I later created a backpack icon to continuously show the backpack position and its shortcut key in the UI. This part has already been explained in Inventory &amp; Reputation &amp; Task System.<\/p><p>In addition, since the game starts with a forced dialogue sequence, the player cannot freely control the character at the beginning. I wanted to make the backpack guidance clearer after this dialogue ended. When the forced dialogue finishes and the player regains control, the system displays a notice: Backpack system unlocked. Press B to view.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-43766bd elementor-widget__width-initial elementor-widget elementor-widget-image\" data-id=\"43766bd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"757\" height=\"342\" src=\"https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/03\/image-2-1.png\" class=\"attachment-full size-full wp-image-6785\" alt=\"\" srcset=\"https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/03\/image-2-1.png 757w, https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/03\/image-2-1-300x136.png 300w\" sizes=\"100vw\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0a2d51b elementor-widget elementor-widget-text-editor\" data-id=\"0a2d51b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>When the forced dialogue finishes, the system calls OnForcedDialogueClosed(). This function unlocks the player, shows the bag icon, and plays the notice prompt.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c21cc1f elementor-widget elementor-widget-code-highlight\" data-id=\"c21cc1f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>void OnForcedDialogueClosed()\r\n{\r\n    OpeningLock.IsLocked = false;\r\n    SetBagVisible(true);\r\n    PlayNoticeAfterDialogue();\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4da9280 elementor-widget elementor-widget-text-editor\" data-id=\"4da9280\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>SetBagVisible(true) makes the backpack icon appear in the bottom-left corner.<br \/>Then PlayNoticeAfterDialogue() starts the notice animation coroutine.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fca49d4 elementor-widget elementor-widget-code-highlight\" data-id=\"fca49d4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>noticeCoroutine = StartCoroutine(ShowNoticeRoutine());<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8b78583 elementor-widget elementor-widget-text-editor\" data-id=\"8b78583\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Inside ShowNoticeRoutine(), the system first shows the notice:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b38e074 elementor-widget elementor-widget-code-highlight\" data-id=\"b38e074\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>SetNoticeVisible(true, true);<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9edd2bf elementor-widget elementor-widget-text-editor\" data-id=\"9edd2bf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Then it uses CanvasGroup.alpha to create a pulsing fade effect.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2d65736 elementor-widget elementor-widget-code-highlight\" data-id=\"2d65736\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>float curve = Mathf.Sin(progress * Mathf.PI);\r\nnoticeCanvasGroup.alpha = Mathf.Lerp(1f, minAlpha, curve);<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4138e1d elementor-widget elementor-widget-text-editor\" data-id=\"4138e1d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"2838\" data-end=\"3022\">This means the notice fades down and then returns to full visibility.<br data-start=\"2907\" data-end=\"2910\" \/>The current setup makes it pulse 3 times, with each pulse lasting 0.6 seconds, and the lowest alpha set to 0.35.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c4114af elementor-widget elementor-widget-code-highlight\" data-id=\"c4114af\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>noticePulseCount = 3;\r\nnoticePulseDuration = 0.6f;\r\nnoticeMinAlpha = 0.35f;<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6647d0a elementor-widget elementor-widget-text-editor\" data-id=\"6647d0a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>After the pulse animation ends, the notice is destroyed:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2702c50 elementor-widget elementor-widget-code-highlight\" data-id=\"2702c50\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>Destroy(noticeRoot);\r\nnoticeRoot = null;<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-eec90b7 elementor-widget elementor-widget-heading\" data-id=\"eec90b7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">=====================================================================<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fbbc59f e-con-full e-flex e-con e-child\" data-id=\"fbbc59f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-86c3a29 elementor-widget elementor-widget-heading\" data-id=\"86c3a29\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">10 April Update - Dialogue System V2.0 Dev - 01<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c7666ef elementor-widget elementor-widget-heading\" data-id=\"c7666ef\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Active Speaker Highlight<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b5999b0 elementor-widget__width-initial elementor-widget elementor-widget-image\" data-id=\"b5999b0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"677\" height=\"418\" src=\"https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/03\/1212.png\" class=\"attachment-full size-full wp-image-6606\" alt=\"\" srcset=\"https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/03\/1212.png 677w, https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/03\/1212-300x185.png 300w\" sizes=\"100vw\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7fccafd elementor-widget elementor-widget-code-highlight\" data-id=\"7fccafd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>void ApplySpeakerState(Speaker speaker)\r\n{\r\n    float leftBrightness = dimBrightness;\r\n    float rightBrightness = dimBrightness;\r\n\r\n    switch (speaker)\r\n    {\r\n        case Speaker.Player:\r\n            rightBrightness = 1f;\r\n            break;\r\n        case Speaker.Npc:\r\n            leftBrightness = 1f;\r\n            break;\r\n    }\r\n\r\n    SetPortraitBrightness(leftPortrait, leftBrightness);\r\n    SetPortraitBrightness(rightPortrait, rightBrightness);\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-49f491c elementor-widget elementor-widget-text-editor\" data-id=\"49f491c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The function ApplySpeakerState() controls which portrait should be highlighted during dialogue. If the current speaker is an NPC, the NPC portrait becomes bright and Tyler\u2019s portrait becomes dimmer. If Tyler is speaking, Tyler\u2019s portrait becomes bright instead.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d1becb7 elementor-widget elementor-widget-heading\" data-id=\"d1becb7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Multiple NPC Portrait Switching<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-cc24d62 e-con-full e-flex e-con e-child\" data-id=\"cc24d62\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-659e2c7 elementor-widget__width-initial elementor-widget elementor-widget-image\" data-id=\"659e2c7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"458\" height=\"612\" src=\"https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/03\/image-1.png\" class=\"attachment-large size-large wp-image-6611\" alt=\"\" srcset=\"https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/03\/image-1.png 458w, https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/03\/image-1-225x300.png 225w\" sizes=\"100vw\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c6c5a8a elementor-widget elementor-widget-text-editor\" data-id=\"c6c5a8a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"83\" data-end=\"262\">In the Canvas, the Dialogue Panel is divided into two portrait areas. The left side is used for the current NPC portrait, while the right side is fixed for the protagonist, Tyler.<\/p><p data-start=\"264\" data-end=\"539\">After setting up the required UI references in the Dialogue Manager, I used the dialogue tag system to control which NPC portrait should appear on the left side.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1042f27 elementor-widget elementor-widget-code-highlight\" data-id=\"1042f27\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>void TrySwapPortraitFromCurrentTags(Speaker speaker)\r\n{\r\n    string rawTag = TryGetRawTagFromCurrentTags();\r\n\r\n    if (!string.IsNullOrEmpty(rawTag) &amp;&amp; tagPortraits != null)\r\n    {\r\n        \/\/ Match the dialogue tag with the correct portrait\r\n    }\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d4d1423 elementor-widget elementor-widget-text-editor\" data-id=\"d4d1423\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"800\" data-end=\"1061\">This function reads the current dialogue tag and matches it with the correct portrait setup. As a result, Marcus, Sierra, or any other NPC can appear in the same left-side portrait area, as long as their name and portrait are configured in the Dialogue Manager.<\/p><p data-start=\"1063\" data-end=\"1187\">This makes the dialogue UI reusable for different NPC conversations instead of creating a separate panel for each character.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8959acc elementor-widget__width-initial elementor-widget elementor-widget-image\" data-id=\"8959acc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"976\" src=\"https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/03\/ezgif.com-animated-gif-maker-10.gif\" class=\"attachment-full size-full wp-image-6615\" alt=\"\" sizes=\"100vw\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a52f519 elementor-widget elementor-widget-heading\" data-id=\"a52f519\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">=====================================================================<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9d8b6fb e-con-full e-flex e-con e-child\" data-id=\"9d8b6fb\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9f1f232 elementor-widget elementor-widget-heading\" data-id=\"9f1f232\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">15 March Update - Dialogue System  V2.0 Requirement Planning<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cbc222e elementor-widget elementor-widget-text-editor\" data-id=\"cbc222e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"138\" data-end=\"362\">After the first version of the dialogue system was completed, the basic interaction had been tested and confirmed. However, feedback from Playtesting 2 showed that the dialogue and exposition still needed major improvements.<\/p><p data-start=\"364\" data-end=\"806\">Several players felt that the opening exposition was too long and delayed the start of the game. Some players skipped the dialogue because they wanted to begin playing sooner. The narration was also confusing for some players, as they were not sure who they were playing as, who the NPCs were, or what the main objective was. The story information was not always presented in a clear chronological order, which made the plot harder to follow.<\/p><p data-start=\"808\" data-end=\"1099\">Based on this feedback, I started planning the restructure of Dialogue System Version 2. The updated system needed to make the dialogue shorter, clearer, and easier to follow, while still supporting the story and character interactions. I listed several key requirements for the new version:<\/p><p data-start=\"808\" data-end=\"1099\">\u00a0<\/p><ul data-start=\"1101\" data-end=\"1703\"><li data-section-id=\"zy1w1e\" data-start=\"1101\" data-end=\"1144\">Shorten and simplify the opening dialogue<\/li><li data-section-id=\"2zs2r1\" data-start=\"1145\" data-end=\"1224\">Add a forced opening dialogue at the beginning, but keep it brief and focused<\/li><li data-section-id=\"vwmc3b\" data-start=\"1225\" data-end=\"1288\">Make the player\u2019s role and objective clearer through dialogue<\/li><li data-section-id=\"16b6sk7\" data-start=\"1289\" data-end=\"1343\">Improve the chronological order of story information<\/li><li data-section-id=\"3am7vt\" data-start=\"1344\" data-end=\"1389\">Implement active speaker highlight feedback<\/li><li data-section-id=\"v1k887\" data-start=\"1390\" data-end=\"1436\">Support portrait switching for multiple NPCs<\/li><li data-section-id=\"x2jyip\" data-start=\"1437\" data-end=\"1494\">Use character tags to control portraits and expressions<\/li><li data-section-id=\"1b3kzh0\" data-start=\"1495\" data-end=\"1542\">Add a First Talk Dialogue system for each NPC<\/li><li data-section-id=\"lo14pp\" data-start=\"1543\" data-end=\"1581\">Support item-based dialogue triggers<\/li><li data-section-id=\"nw5yq1\" data-start=\"1582\" data-end=\"1703\">Make important dialogue information easier to understand, such as using visual emphasis or clearer speaker presentation<\/li><\/ul><p data-start=\"1705\" data-end=\"1954\">A key change in Version 2 was that the dialogue system was no longer only used for storytelling. It also needed to guide the player more clearly, helping them understand who is speaking, what their current objective is, and what they should do next.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-93747bc elementor-widget elementor-widget-heading\" data-id=\"93747bc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">=====================================================================<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-569e2e8 e-con-full e-flex e-con e-child\" data-id=\"569e2e8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7e3a96a elementor-widget elementor-widget-heading\" data-id=\"7e3a96a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">25 Feb Update - Dialogue System Implementation<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-037a0ed elementor-widget__width-initial elementor-widget elementor-widget-image\" data-id=\"037a0ed\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1961\" height=\"1092\" src=\"https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/03\/Snipaste_2026-05-12_10-51-36.png\" class=\"attachment-full size-full wp-image-6916\" alt=\"\" srcset=\"https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/03\/Snipaste_2026-05-12_10-51-36.png 1961w, https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/03\/Snipaste_2026-05-12_10-51-36-300x167.png 300w, https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/03\/Snipaste_2026-05-12_10-51-36-1024x570.png 1024w, https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/03\/Snipaste_2026-05-12_10-51-36-768x428.png 768w, https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/03\/Snipaste_2026-05-12_10-51-36-1536x855.png 1536w\" sizes=\"100vw\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-32785cb elementor-widget elementor-widget-text-editor\" data-id=\"32785cb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"qMYqUG_convSearchResultHighlightRoot\"><div class=\"relative w-full overflow-visible\"><section class=\"text-token-text-primary w-full focus:outline-none [--shadow-height:45px] has-data-writing-block:pointer-events-none has-data-writing-block:-mt-(--shadow-height) has-data-writing-block:pt-(--shadow-height) [&amp;:has([data-writing-block])&gt;*]:pointer-events-auto [content-visibility:auto] supports-[content-visibility:auto]:[contain-intrinsic-size:auto_100lvh] R6Vx5W_threadScrollVars scroll-mb-[calc(var(--scroll-root-safe-area-inset-bottom,0px)+var(--thread-response-height))] scroll-mt-[calc(var(--header-height)+min(200px,max(70px,20svh)))]\" dir=\"auto\" data-turn-id=\"request-69fdb136-de8c-83eb-8537-efeb9c3b2fa6-1\" data-turn-id-container=\"request-69fdb136-de8c-83eb-8537-efeb9c3b2fa6-1\" data-testid=\"conversation-turn-92\" data-scroll-anchor=\"false\" data-turn=\"assistant\"><div class=\"text-base my-auto mx-auto pb-10 [--thread-content-margin:var(--thread-content-margin-xs,calc(var(--spacing)*4))] @w-sm\/main:[--thread-content-margin:var(--thread-content-margin-sm,calc(var(--spacing)*6))] @w-lg\/main:[--thread-content-margin:var(--thread-content-margin-lg,calc(var(--spacing)*16))] px-(--thread-content-margin)\"><div class=\"[--thread-content-max-width:40rem] @w-lg\/main:[--thread-content-max-width:48rem] mx-auto max-w-(--thread-content-max-width) flex-1 group\/turn-messages focus-visible:outline-hidden relative flex w-full min-w-0 flex-col agent-turn\"><div class=\"flex max-w-full flex-col gap-4 grow\"><div class=\"min-h-8 text-message relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal outline-none keyboard-focused:focus-ring [.text-message+&amp;]:mt-1\" dir=\"auto\" data-message-author-role=\"assistant\" data-message-id=\"8586addc-9619-437b-b0aa-67c02d3d418d\" data-message-model-slug=\"gpt-5-5-thinking\" data-turn-start-message=\"true\"><div class=\"flex w-full flex-col gap-1 empty:hidden\"><div class=\"markdown prose dark:prose-invert wrap-break-word w-full dark markdown-new-styling\"><p data-start=\"0\" data-end=\"445\">Before developing the dialogue system in Unity, I first collected references from visual novel games to study how their interaction interfaces present dialogue, character portraits, and player choices. Based on these references, I then created a simple interaction prototype in Figma. This prototype helped me plan the basic structure of the Dialogue UI, including the Dialogue Panel, dialogue text area, character portraits, and choice buttons.<\/p><p data-start=\"447\" data-end=\"641\" data-is-last-node=\"\" data-is-only-node=\"\">The first version of the dialogue system was mainly created by Iris. At that time, I was working on other gameplay features, so the basic dialogue system was assigned to Iris for implementation.<\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/section><\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-71560c1 elementor-widget__width-initial elementor-widget elementor-widget-image\" data-id=\"71560c1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1811\" height=\"1175\" src=\"https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/03\/ezgif.com-animated-gif-maker-9.gif\" class=\"attachment-full size-full wp-image-6578\" alt=\"\" sizes=\"100vw\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Figma Dialogue System Prototype<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>30 April Update &#8211; Dialogue System V2.0 Dev &#8211; 05 Multiple Character Portraits and Portrait Switching Two days before the playtest, Alex told me that he had created several portrait states for the characters. Because of this, I decided to add a multiple-expression portrait system into the dialogue system, so the characters could show different &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/sites.wsagames.com\/hl1d23\/dialogue-system-2\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Dialogue System&#8221;<\/span><\/a><\/p>\n","protected":false},"author":44,"featured_media":6401,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[36],"tags":[],"class_list":["post-6016","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-y2_s2_development"],"_links":{"self":[{"href":"https:\/\/sites.wsagames.com\/hl1d23\/wp-json\/wp\/v2\/posts\/6016","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.wsagames.com\/hl1d23\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sites.wsagames.com\/hl1d23\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/hl1d23\/wp-json\/wp\/v2\/users\/44"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/hl1d23\/wp-json\/wp\/v2\/comments?post=6016"}],"version-history":[{"count":68,"href":"https:\/\/sites.wsagames.com\/hl1d23\/wp-json\/wp\/v2\/posts\/6016\/revisions"}],"predecessor-version":[{"id":7033,"href":"https:\/\/sites.wsagames.com\/hl1d23\/wp-json\/wp\/v2\/posts\/6016\/revisions\/7033"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/hl1d23\/wp-json\/wp\/v2\/media\/6401"}],"wp:attachment":[{"href":"https:\/\/sites.wsagames.com\/hl1d23\/wp-json\/wp\/v2\/media?parent=6016"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.wsagames.com\/hl1d23\/wp-json\/wp\/v2\/categories?post=6016"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sites.wsagames.com\/hl1d23\/wp-json\/wp\/v2\/tags?post=6016"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}