{"id":1031,"date":"2026-05-20T17:48:32","date_gmt":"2026-05-20T17:48:32","guid":{"rendered":"https:\/\/sites.wsagames.com\/et4g23-yr3\/?p=1031"},"modified":"2026-05-20T17:48:32","modified_gmt":"2026-05-20T17:48:32","slug":"comic-style-cutscenes","status":"publish","type":"post","link":"https:\/\/sites.wsagames.com\/et4g23-yr3\/2026\/05\/20\/comic-style-cutscenes\/","title":{"rendered":"Comic-Style Cutscenes"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">As researched in the following post, making fully animated cutscenes just isn&#8217;t viable. So I pitched the idea to Paula of making single frame picture book-type scenes:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-e-jay-tripoli wp-block-embed-e-jay-tripoli\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"Uu05LJyVO5\"><a href=\"https:\/\/sites.wsagames.com\/et4g23-yr3\/2026\/05\/17\/planning-cutscenes\/\">Planning Cutscenes<\/a><\/blockquote><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; visibility: hidden;\" title=\"&#8220;Planning Cutscenes&#8221; &#8212; E-Jay Tripoli\" src=\"https:\/\/sites.wsagames.com\/et4g23-yr3\/2026\/05\/17\/planning-cutscenes\/embed\/#?secret=LaA1sc1Smx#?secret=Uu05LJyVO5\" data-secret=\"Uu05LJyVO5\" width=\"500\" height=\"282\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Similar to that of Nine Sols:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"768\" height=\"432\" src=\"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-298.png\" alt=\"\" class=\"wp-image-1032\" srcset=\"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-298.png 768w, https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-298-300x169.png 300w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Paula agreed this was the best way to set the story as quick as possible, so she took my <a href=\"https:\/\/sites.wsagames.com\/et4g23-yr3\/2026\/05\/17\/planning-cutscenes\/\">poorly drawn storyboards<\/a>, and turned them into comic-style pages:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"613\" height=\"458\" src=\"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-299.png\" alt=\"\" class=\"wp-image-1033\" srcset=\"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-299.png 613w, https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-299-300x224.png 300w\" sizes=\"(max-width: 613px) 100vw, 613px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"617\" height=\"418\" src=\"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-300.png\" alt=\"\" class=\"wp-image-1034\" srcset=\"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-300.png 617w, https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-300-300x203.png 300w\" sizes=\"(max-width: 617px) 100vw, 617px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Unity Implementation<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">I took these seperate frames Paula sent me and layed them out:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"575\" src=\"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-301-1024x575.png\" alt=\"\" class=\"wp-image-1035\" srcset=\"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-301-1024x575.png 1024w, https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-301-300x169.png 300w, https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-301-768x432.png 768w, https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-301.png 1066w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Then, I created a script I would put on each of these panels, causing them to fade in and then activate the next panel whenever the player would press the continue input:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-794e3cfa wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6aca30c1e7000&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6aca30c1e7000\" class=\"wp-block-image aligncenter size-full is-resized wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"504\" height=\"475\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-302.png\" alt=\"\" class=\"wp-image-1036\" style=\"width:256px;height:auto\" srcset=\"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-302.png 504w, https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-302-300x283.png 300w\" sizes=\"(max-width: 504px) 100vw, 504px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6aca30c1e776b&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6aca30c1e776b\" class=\"wp-block-image aligncenter size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"552\" height=\"456\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-303.png\" alt=\"\" class=\"wp-image-1037\" srcset=\"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-303.png 552w, https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-303-300x248.png 300w\" sizes=\"(max-width: 552px) 100vw, 552px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">In the inspector, I could assign the next panel that to be activated &#8211; and assign when panels needed to be deactivated (Like when the next comic scene would need to be shown or when the dialogue scene begins to play):<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"572\" src=\"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-304-1024x572.png\" alt=\"\" class=\"wp-image-1038\" srcset=\"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-304-1024x572.png 1024w, https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-304-300x168.png 300w, https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-304-768x429.png 768w, https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/image-304.png 1058w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Results<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Intro Comic Animation<\/h3>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"720\" style=\"aspect-ratio: 1280 \/ 720;\" width=\"1280\" controls src=\"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/Intro-Comic.mp4\"><\/video><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">End Comic Animation<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">I used this exact same process for when the player picks up the final fish hook fragment:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"720\" style=\"aspect-ratio: 1280 \/ 720;\" width=\"1280\" controls src=\"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-content\/uploads\/sites\/41\/2026\/05\/End-Comic.mp4\"><\/video><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>As researched in the following post, making fully animated cutscenes just isn&#8217;t viable. So I pitched the idea to Paula of making single frame picture book-type scenes: Similar to that of Nine Sols: Paula agreed this was the best way to set the story as quick as possible, so she took my poorly drawn storyboards, [&hellip;]<\/p>\n","protected":false},"author":28,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[33],"tags":[],"class_list":["post-1031","post","type-post","status-publish","format-standard","hentry","category-sprint-5"],"_links":{"self":[{"href":"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-json\/wp\/v2\/posts\/1031","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-json\/wp\/v2\/users\/28"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-json\/wp\/v2\/comments?post=1031"}],"version-history":[{"count":1,"href":"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-json\/wp\/v2\/posts\/1031\/revisions"}],"predecessor-version":[{"id":1041,"href":"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-json\/wp\/v2\/posts\/1031\/revisions\/1041"}],"wp:attachment":[{"href":"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-json\/wp\/v2\/media?parent=1031"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-json\/wp\/v2\/categories?post=1031"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-json\/wp\/v2\/tags?post=1031"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}