{"id":1141,"date":"2026-03-07T20:53:25","date_gmt":"2026-03-07T20:53:25","guid":{"rendered":"https:\/\/sites.wsagames.com\/yy8y24\/?p=1141"},"modified":"2026-03-25T14:26:32","modified_gmt":"2026-03-25T14:26:32","slug":"character-dialogue-system","status":"publish","type":"post","link":"https:\/\/sites.wsagames.com\/yy8y24\/2026\/03\/07\/character-dialogue-system\/","title":{"rendered":"Character Dialogue System"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong>The video shows character dialogue system\uff1a<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-video alignwide\"><video height=\"1440\" style=\"aspect-ratio: 2400 \/ 1440;\" width=\"2400\" controls src=\"https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/Scopophobia-\u865a\u5e7b\u7f16\u8f91\u5668-2026-03-07-21-16-05.mp4\"><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Character Dialogue System\uff1a<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Dialogue UI\uff1a<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"610\" src=\"https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-07-210910-1-1024x610.png\" alt=\"\" class=\"wp-image-1148\" srcset=\"https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-07-210910-1-1024x610.png 1024w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-07-210910-1-300x179.png 300w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-07-210910-1-768x458.png 768w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-07-210910-1-1536x915.png 1536w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-07-210910-1-2048x1220.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">I began by crafting a dialogue UI. I created a canvas panel, which serves as the display screen; all added content must reside within its boundaries. I added a border as the parent element, followed by a text component where all text will be displayed. Finally, I placed a character image above the border. This constitutes a very classic dialogue UI.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Show UI blueprint\uff1a<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"371\" src=\"https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-05-234949-1-1024x371.png\" alt=\"\" class=\"wp-image-1150\" srcset=\"https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-05-234949-1-1024x371.png 1024w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-05-234949-1-300x109.png 300w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-05-234949-1-768x279.png 768w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-05-234949-1.png 1169w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">My blueprint concept is as follows: Upon the game commencing execution, this event shall be triggered. Add a mapping context, designating the player as the mapping context. Acquire the player controller, augmenting input to the local player system as the target of the mapping context.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Detect player proximity\uff1a<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"612\" src=\"https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-05-235004-1-1024x612.png\" alt=\"\" class=\"wp-image-1151\" srcset=\"https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-05-235004-1-1024x612.png 1024w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-05-235004-1-300x179.png 300w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-05-235004-1-768x459.png 768w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-05-235004-1-1536x918.png 1536w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-05-235004-1-2048x1224.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">My blueprint approach: As my game is first-person, I first acquire the first-person camera, obtaining the world location, world rotation, and forward vector. The forward vector is multiplied by 500, where 500 represents the detection range. The sum of the world location and forward vector yields the final detection distance. Subsequently, I configure line tracing by channel to detect hit objects. The hit actor is converted into a mirror (an item requiring player interaction). Finally, the interaction is invoked.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Dialogue change to next line\uff1a<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"611\" src=\"https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-07-210814-1-1024x611.png\" alt=\"\" class=\"wp-image-1163\" srcset=\"https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-07-210814-1-1024x611.png 1024w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-07-210814-1-300x179.png 300w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-07-210814-1-768x458.png 768w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-07-210814-1-1536x916.png 1536w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-07-210814-1-2048x1221.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"612\" src=\"https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-07-210843-2-1024x612.png\" alt=\"\" class=\"wp-image-1156\" srcset=\"https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-07-210843-2-1024x612.png 1024w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-07-210843-2-300x179.png 300w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-07-210843-2-768x459.png 768w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-07-210843-2-1536x919.png 1536w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-07-210843-2-2048x1225.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">First, create a new function named Nextline. Establish a variable called current index. Obtain the current index and increment it to derive a new current index. Create a text variable. Retrieve this variable and decrement it. When the current index is less than or equal to the text variable, the condition is satisfied. Upon satisfying the condition, the dialogue concludes and disappears.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I wish to implement automatic door opening upon completion of the text. Therefore, the function to open the door after the UI disappears.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"611\" src=\"https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-05-235012-3-1024x611.png\" alt=\"\" class=\"wp-image-1155\" srcset=\"https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-05-235012-3-1024x611.png 1024w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-05-235012-3-300x179.png 300w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-05-235012-3-768x458.png 768w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-05-235012-3-1536x916.png 1536w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-05-235012-3-2048x1221.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">I have created an event triggered by the left mouse button. Upon satisfying the \u201con mirror\u201d condition, Nextline will be displayed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Open the door\uff1a<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"612\" src=\"https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-07-212228-1-1024x612.png\" alt=\"\" class=\"wp-image-1161\" srcset=\"https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-07-212228-1-1024x612.png 1024w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-07-212228-1-300x179.png 300w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-07-212228-1-768x459.png 768w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-07-212228-1-1536x918.png 1536w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-07-212228-1-2048x1224.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">I created a custom event named \u201copen door\u201d. After adding a timeline, I set up a lerp function to return to the position of the revolving door in the viewport. Once the rotation angle and coordinates were determined, these values were populated into the lerp function. This position was then designated as the new location.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Aim of open door\uff1a<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"611\" src=\"https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-07-212236-1-1024x611.png\" alt=\"\" class=\"wp-image-1164\" srcset=\"https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-07-212236-1-1024x611.png 1024w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-07-212236-1-300x179.png 300w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-07-212236-1-768x459.png 768w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-07-212236-1-1536x917.png 1536w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-07-212236-1-2048x1223.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">This method is identical to the sliding door technique. Set the duration to one second, with the starting point coordinates at (0, 0) and the ending point coordinates at (1, 1).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"612\" src=\"https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-07-210747-1-1024x612.png\" alt=\"\" class=\"wp-image-1160\" srcset=\"https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-07-210747-1-1024x612.png 1024w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-07-210747-1-300x179.png 300w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-07-210747-1-768x459.png 768w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-07-210747-1-1536x918.png 1536w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-07-210747-1-2048x1224.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Create a custom event named \u201copendoorafterdialogue\u201d. I have set a delay of 2 seconds to allow the player time to react. Subsequently, configure \u201cget all actors of class\u201d, selecting \u201cdoor\u201d as the actor type, and finally execute \u201copen door\u201d.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Set text content\uff1a<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"742\" height=\"911\" data-id=\"1167\" src=\"https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-07-210723-1.png\" alt=\"\" class=\"wp-image-1167\" srcset=\"https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-07-210723-1.png 742w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-07-210723-1-244x300.png 244w\" sizes=\"(max-width: 742px) 100vw, 742px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"739\" height=\"941\" data-id=\"1168\" src=\"https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-07-210731-1.png\" alt=\"\" class=\"wp-image-1168\" srcset=\"https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-07-210731-1.png 739w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-07-210731-1-236x300.png 236w\" sizes=\"(max-width: 739px) 100vw, 739px\" \/><\/figure>\n<\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">By clicking on the mirror within the scene (the interactive object I require), I can add textual content within the detail viewport. Each sentence constitutes a separate line of text, with a total of 27 lines added.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The video shows character dialogue system\uff1a Character Dialogue System\uff1a Dialogue UI\uff1a I began by crafting a dialogue UI. I created a canvas panel, which serves as the display screen; all added content must reside within its boundaries. I added a border as the parent element, followed by a text component where all text will be [&hellip;]<\/p>\n","protected":false},"author":56,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[75,1],"tags":[],"class_list":["post-1141","post","type-post","status-publish","format-standard","hentry","category-development","category-year2"],"_links":{"self":[{"href":"https:\/\/sites.wsagames.com\/yy8y24\/wp-json\/wp\/v2\/posts\/1141","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.wsagames.com\/yy8y24\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sites.wsagames.com\/yy8y24\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/yy8y24\/wp-json\/wp\/v2\/users\/56"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/yy8y24\/wp-json\/wp\/v2\/comments?post=1141"}],"version-history":[{"count":11,"href":"https:\/\/sites.wsagames.com\/yy8y24\/wp-json\/wp\/v2\/posts\/1141\/revisions"}],"predecessor-version":[{"id":1170,"href":"https:\/\/sites.wsagames.com\/yy8y24\/wp-json\/wp\/v2\/posts\/1141\/revisions\/1170"}],"wp:attachment":[{"href":"https:\/\/sites.wsagames.com\/yy8y24\/wp-json\/wp\/v2\/media?parent=1141"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.wsagames.com\/yy8y24\/wp-json\/wp\/v2\/categories?post=1141"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sites.wsagames.com\/yy8y24\/wp-json\/wp\/v2\/tags?post=1141"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}