{"id":6034,"date":"2026-03-04T05:59:42","date_gmt":"2026-03-04T05:59:42","guid":{"rendered":"https:\/\/sites.wsagames.com\/hl1d23\/?p=6034"},"modified":"2026-05-12T16:27:40","modified_gmt":"2026-05-12T16:27:40","slug":"opening-comic-sequence-system","status":"publish","type":"post","link":"https:\/\/sites.wsagames.com\/hl1d23\/opening-comic-sequence-system\/","title":{"rendered":"Opening Comic Sequence 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

20 March Update - Iteration After Playtest Feedback<\/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\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

After the second playtest, Adam and some classmates gave us important feedback. They felt that the opening was too long, with too much information presented at once, and that the player had to wait too long before entering gameplay. The overall experience felt more like reading a novel than starting an interactive game.

<\/p>

Based on this feedback, we discussed the opening flow again. In the end, we decided to cut the original opening comic, voiceover, and subtitle sequence<\/strong> completely, and instead use only the forced dialogue system to introduce the necessary story background. This allowed the player to enter the game scene much faster and understand the character relationships and story conflict more naturally through NPC dialogue.

<\/p>

This was also a realistic part of game development: sometimes decisions have to be made through compromise. Although I had spent a lot of time building the opening comic system, including the UI structure, comic playback, subtitles, audio, and skip function, we still decided to remove it in order to create a smoother and better player experience.<\/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

\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

10 March Update - Assets Prodution & Implementation 02<\/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

Opening Sequence Code Logic<\/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\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

In terms of code implementation, the opening comic is mainly controlled by OpeningSequenceManager. It manages the comic images, subtitles, voiceover, fade transitions, player lock, and the transition into the main game world after the opening.<\/p>

In the Inspector, each comic page can be configured as a Slide. Each Slide can contain:<\/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\t\t\t\t

This means I did not need to hard-code each comic page. Instead, I could configure the image, subtitle, and voiceover directly in the Unity Inspector. During testing, I used temporary images. Later, when the final comic assets from Alex and Yansong were ready, I could simply replace the images while keeping the same playback system.<\/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

Hiding the Game World<\/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

The game first played the opening comic sequence. To keep the player focused on the comic, I hid GameWorldRoot during the opening and only displayed OpeningCanvas.<\/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\tif (openingCanvasRoot != null)\r\n{\r\n    openingCanvasRoot.SetActive(true);\r\n}\r\n\r\nif (gameWorldRoot != null)\r\n{\r\n    gameWorldRoot.SetActive(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-0c0dbf0 elementor-widget elementor-widget-text-editor\" data-id=\"0c0dbf0\" 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>GameWorldRoot represents the root object of the main game scene. Although the player\u2019s view is focused on the UI layer, the game scene and character have already been loaded. If GameWorldRoot is not hidden, the player may still be distracted by environmental sounds, character behaviour, or WASD input from the game world. Therefore, I temporarily hide GameWorldRoot during the opening comic sequence, allowing the player to focus only on the comic visuals, subtitles, and voiceover.<\/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-c23e22a elementor-widget elementor-widget-heading\" data-id=\"c23e22a\" 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\">Comic Playback<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2680fa7 elementor-widget elementor-widget-text-editor\" data-id=\"2680fa7\" 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 comic playback is handled by PlaySequence(). It loops through the slides array one by one.<\/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-034576a elementor-widget elementor-widget-code-highlight\" data-id=\"034576a\" 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>for (int i = 0; i &lt; slides.Length; i++)\r\n{\r\n    ComicSlide currentSlide = slides[i];\r\n\r\n    comicImage.sprite = currentSlide.image;\r\n    subtitleText.text = currentSlide.subtitle;\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-eed18b8 elementor-widget elementor-widget-text-editor\" data-id=\"eed18b8\" 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 each new slide, the system updates the current image and subtitle.<br \/>If the slide has a voiceover clip, the system plays the corresponding AudioClip and waits until it finishes before moving to the next slide.<\/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-46937df elementor-widget elementor-widget-code-highlight\" data-id=\"46937df\" 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>audioSource.clip = currentSlide.voice;\r\naudioSource.Play();\r\n\r\nwhile (audioSource.isPlaying)\r\n{\r\n    yield return null;\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-9e2347f elementor-widget elementor-widget-text-editor\" data-id=\"9e2347f\" 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>If there is no voiceover, the system uses durationIfNoVoice as the fallback display time.<\/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-7a44f74 elementor-widget elementor-widget-heading\" data-id=\"7a44f74\" 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\">Comic Playback<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1a215ca elementor-widget elementor-widget-text-editor\" data-id=\"1a215ca\" 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 fade-in and fade-out effects are controlled through the alpha value of a CanvasGroup.<br \/>The code uses Mathf.Lerp() to smoothly change the alpha from 0 to 1, or from 1 to 0.<\/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-305904a elementor-widget elementor-widget-code-highlight\" data-id=\"305904a\" 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>comicVisualGroup.alpha = Mathf.Lerp(from, to, t);<\/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-9593330 elementor-widget elementor-widget-text-editor\" data-id=\"9593330\" 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>This makes each comic panel appear smoothly instead of suddenly popping onto the screen.<\/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-071223f elementor-widget elementor-widget-heading\" data-id=\"071223f\" 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\">End of Opening<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c4250bf elementor-widget elementor-widget-text-editor\" data-id=\"c4250bf\" 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 all comic slides are finished, the system calls EndOpening().<br \/>This function closes the opening UI, clears the sub-comic images, stops the audio, and shows the game world again.<\/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-845e72b elementor-widget elementor-widget-code-highlight\" data-id=\"845e72b\" 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>openingCanvasRoot.SetActive(false);\r\ngameWorldRoot.SetActive(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-5f477ea elementor-widget elementor-widget-text-editor\" data-id=\"5f477ea\" 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, if a forced dialogue is configured, the system starts the Ink dialogue directly:<\/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-7c0e431 elementor-widget elementor-widget-heading\" data-id=\"7c0e431\" 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\">End of Opening<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1eb3c6a elementor-widget elementor-widget-text-editor\" data-id=\"1eb3c6a\" 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>I also added an ESC skip function. A Hold ESC to Skip hint is shown in the top-left corner of the screen, allowing the player to hold ESC to skip the opening comic. This prevents players from having to watch the full opening again during repeated testing or replaying, making the flow more flexible.<\/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-06f8530 elementor-widget elementor-widget-image\" data-id=\"06f8530\" 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 decoding=\"async\" width=\"1435\" height=\"888\" src=\"https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/05\/1113.png\" class=\"attachment-full size-full wp-image-6716\" alt=\"\" srcset=\"https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/05\/1113.png 1435w, https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/05\/1113-300x186.png 300w, https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/05\/1113-1024x634.png 1024w, https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/05\/1113-768x475.png 768w\" 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-9756dfe elementor-widget elementor-widget-image\" data-id=\"9756dfe\" 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=\"1920\" height=\"970\" src=\"https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/05\/ezgif.com-animated-gif-maker-14.gif\" class=\"attachment-full size-full wp-image-6738\" 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-7e3fb25 elementor-widget elementor-widget-heading\" data-id=\"7e3fb25\" 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-4d493e7 e-con-full e-flex e-con e-child\" data-id=\"4d493e7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c354b2a elementor-widget elementor-widget-heading\" data-id=\"c354b2a\" 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\">09 March Update - Assets Prodution &amp; Implementation 01<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a053e22 elementor-widget elementor-widget-image\" data-id=\"a053e22\" 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=\"1150\" height=\"701\" src=\"https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/03\/Snipaste_2026-05-09_07-36-20.png\" class=\"attachment-full size-full wp-image-6694\" alt=\"\" srcset=\"https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/03\/Snipaste_2026-05-09_07-36-20.png 1150w, https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/03\/Snipaste_2026-05-09_07-36-20-300x183.png 300w, https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/03\/Snipaste_2026-05-09_07-36-20-1024x624.png 1024w, https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/03\/Snipaste_2026-05-09_07-36-20-768x468.png 768w\" 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-b6725f4 elementor-widget elementor-widget-text-editor\" data-id=\"b6725f4\" 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=\"620\" data-end=\"1001\">During the testing stage, I created six temporary images myself to test the comic sequence playback, fade-in effect, subtitle display, and audio synchronisation. The plan was to later replace these placeholder images with the final comic assets created by Yansong and Alex.<\/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-1ac448f elementor-widget elementor-widget-image\" data-id=\"1ac448f\" 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=\"1434\" height=\"846\" src=\"https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/05\/Snipaste_2026-05-10_15-56-44.png\" class=\"attachment-full size-full wp-image-6704\" alt=\"\" srcset=\"https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/05\/Snipaste_2026-05-10_15-56-44.png 1434w, https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/05\/Snipaste_2026-05-10_15-56-44-300x177.png 300w, https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/05\/Snipaste_2026-05-10_15-56-44-1024x604.png 1024w, https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/05\/Snipaste_2026-05-10_15-56-44-768x453.png 768w\" 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-032e9d7 elementor-widget elementor-widget-text-editor\" data-id=\"032e9d7\" 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 that, I built the UI structure for the opening comic system in Unity. The whole opening system was placed under OpeningSequence, including OpeningManager, OpeningCanvas, and GameWorldRoot. OpeningCanvas was used to display the comic images, subtitles, audio, and skip hint, while GameWorldRoot controlled whether the main game world was visible.<\/p><p>Inside OpeningCanvas, I set up Image, comicVisualGroup, SubtitleBackground, SubtitleText, Audio Source, and Skip Hint Root. This allowed each comic image to be played through the same UI structure, together with subtitles and voiceover for testing. It also made it easier to later replace my temporary test images with the final comic assets created by Yansong and Alex.<\/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-47354e6 elementor-widget elementor-widget-heading\" data-id=\"47354e6\" 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-4a08bb8 e-con-full e-flex e-con e-child\" data-id=\"4a08bb8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ddf56eb elementor-widget elementor-widget-heading\" data-id=\"ddf56eb\" 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\">02 March Update -Opening Comic Sequence Planning<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-30e0c2f elementor-widget elementor-widget-text-editor\" data-id=\"30e0c2f\" 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=\"620\" data-end=\"1001\">Because our game has a strong background story, we first needed to consider how to communicate this narrative information to the player. If all of the story was placed directly into gameplay, it might interrupt the player\u2019s control. However, if we did not explain enough, the player might struggle to understand the character relationships and the reason behind the later conflict.<\/p><p data-start=\"1003\" data-end=\"1278\">After group discussion and evaluating our production skills at the time, we decided to test an <strong data-start=\"1098\" data-end=\"1124\">opening comic sequence<\/strong>. This opening would combine comic panels, voiceover, and subtitles to quickly introduce the background story before the player entered the main gameplay.<\/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-9721707 elementor-widget elementor-widget-image\" data-id=\"9721707\" 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=\"1155\" height=\"619\" src=\"https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/03\/123.png\" class=\"attachment-full size-full wp-image-6688\" alt=\"\" srcset=\"https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/03\/123.png 1155w, https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/03\/123-300x161.png 300w, https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/03\/123-1024x549.png 1024w, https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/03\/123-768x412.png 768w\" 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-0c37e60 elementor-widget elementor-widget-text-editor\" data-id=\"0c37e60\" 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=\"620\" data-end=\"1001\">Before implementation, I first created a <strong data-start=\"1321\" data-end=\"1353\">pre-game narrative flowchart<\/strong> to organise the logic of the opening story. The flow starts with Tyler\u2019s arrival in Whitehorse, then introduces the warning about bears, Tyler leaving camp alone, falling into the river, being stalked by the bear, losing navigation supplies, and finally reaching the trust collapse state where the main game begins.<\/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-7eceb14 elementor-widget elementor-widget-image\" data-id=\"7eceb14\" 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=\"2048\" height=\"1450\" src=\"https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/03\/124.png\" class=\"attachment-full size-full wp-image-6689\" alt=\"\" srcset=\"https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/03\/124.png 2048w, https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/03\/124-300x212.png 300w, https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/03\/124-1024x725.png 1024w, https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/03\/124-768x544.png 768w, https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/03\/124-1536x1088.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-e1e3a8a elementor-widget elementor-widget-text-editor\" data-id=\"e1e3a8a\" 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=\"1671\" data-end=\"2021\">After that, based on Erik\u2019s story setting, I created a text-based storyboard for a six-panel opening comic sequence. Each panel included narration, comic content, visual details, sound requirements, and technical requirements. This helped make the opening sequence clearer before production and also made it easier to divide the work across the team.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4b381ec e-con-full e-flex e-con e-child\" data-id=\"4b381ec\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7f5384f elementor-widget__width-initial elementor-widget elementor-widget-image\" data-id=\"7f5384f\" 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=\"1116\" height=\"798\" src=\"https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/05\/21.png\" class=\"attachment-full size-full wp-image-6695\" alt=\"\" srcset=\"https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/05\/21.png 1116w, https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/05\/21-300x215.png 300w, https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/05\/21-1024x732.png 1024w, https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/05\/21-768x549.png 768w\" 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-a73b5fe elementor-widget elementor-widget-text-editor\" data-id=\"a73b5fe\" 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=\"1671\" data-end=\"2021\">For the visual design, I referenced the dynamic panel layouts commonly seen in Marvel comics. Compared with a simple horizontal image transition, I wanted the opening comic to feel more rhythmic visually, so I first created a simple comic layout in Figma.<\/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-3a228e6 elementor-widget elementor-widget-image\" data-id=\"3a228e6\" 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=\"1142\" height=\"699\" src=\"https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/05\/Snipaste_2026-05-10_14-04-10.png\" class=\"attachment-full size-full wp-image-6696\" alt=\"\" srcset=\"https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/05\/Snipaste_2026-05-10_14-04-10.png 1142w, https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/05\/Snipaste_2026-05-10_14-04-10-300x184.png 300w, https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/05\/Snipaste_2026-05-10_14-04-10-1024x627.png 1024w, https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/05\/Snipaste_2026-05-10_14-04-10-768x470.png 768w\" 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-0c1bba4 elementor-widget elementor-widget-text-editor\" data-id=\"0c1bba4\" 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=\"257\" data-end=\"507\">This layout used panels with different sizes and angles, making the sequence feel more like a comic page rather than a single illustration display. My plan was for each comic panel to fade in one by one, paired with voiceover narration and subtitles.<\/p><p data-start=\"509\" data-end=\"772\" data-is-last-node=\"\" data-is-only-node=\"\">At this stage, the Figma version was mainly used to test the panel proportions, the order in which the images would appear, and the overall reading pace. These panel images were originally planned to be passed to Alex and Yansong to develop into final art assets.<\/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\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>20 March Update &#8211; Iteration After Playtest Feedback After the second playtest, Adam and some classmates gave us important feedback. They felt that the opening was too long, with too much information presented at once, and that the player had to wait too long before entering gameplay. The overall experience felt more like reading a &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/sites.wsagames.com\/hl1d23\/opening-comic-sequence-system\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Opening Comic Sequence System&#8221;<\/span><\/a><\/p>\n","protected":false},"author":44,"featured_media":6733,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[36],"tags":[],"class_list":["post-6034","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\/6034","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=6034"}],"version-history":[{"count":40,"href":"https:\/\/sites.wsagames.com\/hl1d23\/wp-json\/wp\/v2\/posts\/6034\/revisions"}],"predecessor-version":[{"id":6928,"href":"https:\/\/sites.wsagames.com\/hl1d23\/wp-json\/wp\/v2\/posts\/6034\/revisions\/6928"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/hl1d23\/wp-json\/wp\/v2\/media\/6733"}],"wp:attachment":[{"href":"https:\/\/sites.wsagames.com\/hl1d23\/wp-json\/wp\/v2\/media?parent=6034"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.wsagames.com\/hl1d23\/wp-json\/wp\/v2\/categories?post=6034"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sites.wsagames.com\/hl1d23\/wp-json\/wp\/v2\/tags?post=6034"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}