{"id":259,"date":"2026-10-14T23:55:55","date_gmt":"2026-10-14T23:55:55","guid":{"rendered":"https:\/\/sites.wsagames.com\/yh9g25\/?page_id=259"},"modified":"2026-10-29T19:22:53","modified_gmt":"2026-10-29T19:22:53","slug":"game-design-03","status":"publish","type":"page","link":"https:\/\/sites.wsagames.com\/yh9g25\/game-design-03\/","title":{"rendered":"Game design 03"},"content":{"rendered":"<nav class=\"has-large-font-size is-responsive items-justified-right wp-block-navigation is-content-justification-right is-layout-flex wp-container-core-navigation-is-layout-0ca25c3d wp-block-navigation-is-layout-flex\" aria-label=\"GD\" \n\t\t data-wp-interactive=\"core\/navigation\" data-wp-context='{\"overlayOpenedBy\":{\"click\":false,\"hover\":false,\"focus\":false},\"type\":\"overlay\",\"roleAttribute\":\"\",\"ariaLabel\":\"Menu\"}'><button aria-haspopup=\"dialog\" aria-label=\"Open menu\" class=\"wp-block-navigation__responsive-container-open\" \n\t\t\t\tdata-wp-on--click=\"actions.openMenuOnClick\"\n\t\t\t\tdata-wp-on--keydown=\"actions.handleMenuKeydown\"\n\t\t\t><svg width=\"24\" height=\"24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M4 7.5h16v1.5H4z\"><\/path><path d=\"M4 15h16v1.5H4z\"><\/path><\/svg><\/button>\n\t\t\t\t<div class=\"wp-block-navigation__responsive-container\"  id=\"modal-1\" \n\t\t\t\tdata-wp-class--has-modal-open=\"state.isMenuOpen\"\n\t\t\t\tdata-wp-class--is-menu-open=\"state.isMenuOpen\"\n\t\t\t\tdata-wp-watch=\"callbacks.initMenu\"\n\t\t\t\tdata-wp-on--keydown=\"actions.handleMenuKeydown\"\n\t\t\t\tdata-wp-on--focusout=\"actions.handleMenuFocusout\"\n\t\t\t\ttabindex=\"-1\"\n\t\t\t>\n\t\t\t\t\t<div class=\"wp-block-navigation__responsive-close\" tabindex=\"-1\">\n\t\t\t\t\t\t<div class=\"wp-block-navigation__responsive-dialog\" \n\t\t\t\tdata-wp-bind--aria-modal=\"state.ariaModal\"\n\t\t\t\tdata-wp-bind--aria-label=\"state.ariaLabel\"\n\t\t\t\tdata-wp-bind--role=\"state.roleAttribute\"\n\t\t\t>\n\t\t\t\t\t\t\t<button aria-label=\"Close menu\" class=\"wp-block-navigation__responsive-container-close\" \n\t\t\t\tdata-wp-on--click=\"actions.closeMenuOnClick\"\n\t\t\t><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><path d=\"m13.06 12 6.47-6.47-1.06-1.06L12 10.94 5.53 4.47 4.47 5.53 10.94 12l-6.47 6.47 1.06 1.06L12 13.06l6.47 6.47 1.06-1.06L13.06 12Z\"><\/path><\/svg><\/button>\n\t\t\t\t\t\t\t<div class=\"wp-block-navigation__responsive-container-content\" \n\t\t\t\tdata-wp-watch=\"callbacks.focusFirstElement\"\n\t\t\t id=\"modal-1-content\">\n\t\t\t\t\t\t\t\t<ul class=\"wp-block-navigation__container has-large-font-size is-responsive items-justified-right wp-block-navigation\"><li data-wp-context=\"{ &quot;submenuOpenedBy&quot;: { &quot;click&quot;: false, &quot;hover&quot;: false, &quot;focus&quot;: false }, &quot;type&quot;: &quot;submenu&quot;, &quot;modal&quot;: null, &quot;previousFocus&quot;: null }\" data-wp-interactive=\"core\/navigation\" data-wp-on--focusout=\"actions.handleMenuFocusout\" data-wp-on--keydown=\"actions.handleMenuKeydown\" data-wp-on--pointerenter=\"actions.openMenuOnHover\" data-wp-on--pointerleave=\"actions.closeMenuOnHover\" data-wp-watch=\"callbacks.initMenu\" tabindex=\"-1\" class=\"wp-block-navigation-item has-child open-on-hover-click wp-block-navigation-submenu has-large-font-size\"><a class=\"wp-block-navigation-item__content\" href=\"https:\/\/sites.wsagames.com\/yh9g25\/game-design01\/\"><span class=\"wp-block-navigation-item__label\">Game design<\/span><\/a><button data-wp-bind--aria-expanded=\"state.isSubmenuOpen\" data-wp-on--click=\"actions.toggleMenuOnClick\" aria-label=\"Game design submenu\" class=\"wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle\" ><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M1.50002 4L6.00002 8L10.5 4\" stroke-width=\"1.5\"><\/path><\/svg><\/button><ul data-wp-on--focus=\"actions.openMenuOnFocus\" class=\"wp-block-navigation__submenu-container wp-block-navigation-submenu has-large-font-size\"><li class=\"wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"https:\/\/sites.wsagames.com\/yh9g25\/game-design01\/\"><span class=\"wp-block-navigation-item__label\">Game design 01<\/span><\/a><\/li><li class=\"wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"https:\/\/sites.wsagames.com\/yh9g25\/game-design02\/\"><span class=\"wp-block-navigation-item__label\">Game design 02<\/span><\/a><\/li><li class=\"wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"https:\/\/sites.wsagames.com\/yh9g25\/game-design-03\/\"><span class=\"wp-block-navigation-item__label\">Game design 03<\/span><\/a><\/li><li class=\"wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"https:\/\/sites.wsagames.com\/yh9g25\/game-design-04\/\"><span class=\"wp-block-navigation-item__label\">Game design 04<\/span><\/a><\/li><li class=\"wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"https:\/\/sites.wsagames.com\/yh9g25\/game-design-05\/\"><span class=\"wp-block-navigation-item__label\">Game design 05<\/span><\/a><\/li><li class=\"wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"https:\/\/sites.wsagames.com\/yh9g25\/game-design-06\/\"><span class=\"wp-block-navigation-item__label\">Game design 06<\/span><\/a><\/li><li class=\"wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"https:\/\/sites.wsagames.com\/yh9g25\/game-design-07\/\"><span class=\"wp-block-navigation-item__label\">Game design 07<\/span><\/a><\/li><\/ul><\/li><\/ul>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div><\/nav>\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-35f06ea7 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/migao01.itch.io\/game-design\" target=\"_blank\" rel=\"noopener\">click here go to the Prototype webpage<\/a><\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" style=\"margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--30)\" \/>\n\n\n\n<figure class=\"wp-block-pullquote has-xx-large-font-size\" style=\"border-style:none;border-width:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:0px;border-bottom-right-radius:0px;margin-right:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\"><blockquote><p><strong>Prototype version &#8211; bar0<\/strong>2<\/p><cite>playtest name &#8211; <strong>Bar1860PT02-pc<\/strong><\/cite><\/blockquote><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<h2 class=\"wp-block-heading\">Initial UI Concept<\/h2>\n<\/blockquote>\n\n\n\n<div class=\"wp-block-buttons has-custom-font-size has-small-font-size is-horizontal is-content-justification-left is-layout-flex wp-container-core-buttons-is-layout-8d73bb89 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/miro.com\/app\/board\/uXjVEbf0X80=\/\">my design Canvas board<\/a><\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">In the second version of my prototype, I added more background images and made some small improvements to the UI details to make the game look more complete. Compared to the first version, I focused more on the visuals.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I added some preset story scenes to the second version of my prototype to test how the dialogue and text appear in the game. The images below show the current game layout and how the story text is displayed. I also made some small changes to the text position and UI details to make the layout clearer.<\/p>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"576\" data-id=\"283\" src=\"https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-25-1024x576.png\" alt=\"\" class=\"wp-image-283\" srcset=\"https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-25-1024x576.png 1024w, https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-25-300x169.png 300w, https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-25-768x432.png 768w, https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-25-1536x864.png 1536w, https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-25.png 1672w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" data-id=\"284\" src=\"https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-26-1024x576.png\" alt=\"\" class=\"wp-image-284\" srcset=\"https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-26-1024x576.png 1024w, https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-26-300x169.png 300w, https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-26-768x432.png 768w, https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-26-1536x864.png 1536w, https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-26.png 1672w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/figure>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">I tried looking for background images online, but I couldn&#8217;t find anything that really matched the style I wanted. So I decided to use AI-generated images instead.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<p class=\"wp-block-paragraph\">At first, I planned to use a dialogue box like the one shown below as a reference for my game&#8217;s ui design.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"341\" src=\"https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-27-1024x341.png\" alt=\"\" class=\"wp-image-285\" srcset=\"https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-27-1024x341.png 1024w, https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-27-300x100.png 300w, https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-27-768x256.png 768w, https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-27-1536x512.png 1536w, https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-27-2048x683.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">I didn&#8217;t want the dialogue box and background to draw too much attention away from the story and characters, so I changed my original UI design. I tried to keep everything simple and remove unnecessary details, allowing players to focus more on the dialogue and story.<\/p>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-3a88641f wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-3 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"551\" data-id=\"278\" src=\"https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-21-1024x551.png\" alt=\"\" class=\"wp-image-278\" srcset=\"https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-21-1024x551.png 1024w, https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-21-300x161.png 300w, https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-21-767x413.png 767w, https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-21-1536x827.png 1536w, https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-21-2048x1102.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/figure>\n<\/div>\n<\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1734\" height=\"511\" src=\"https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-22.png\" alt=\"\" class=\"wp-image-279\" srcset=\"https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-22.png 1734w, https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-22-300x88.png 300w, https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-22-1024x302.png 1024w, https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-22-767x226.png 767w, https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-22-1536x453.png 1536w\" sizes=\"(max-width: 1734px) 100vw, 1734px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" style=\"margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--30)\" \/>\n\n\n\n<p class=\"wp-block-paragraph\">I made some changes to the bar tending interface, giving the buttons more rounded corners and making the overall ui. I also added hover effects, so the buttons change visually when the player moves the mouse over them. This makes it easier for players to see which parts of the interface they can click on.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-4 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"556\" data-id=\"281\" src=\"https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-24-1024x556.png\" alt=\"\" class=\"wp-image-281\" srcset=\"https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-24-1024x556.png 1024w, https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-24-300x163.png 300w, https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-24-767x416.png 767w, https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-24-2048x1111.png 2048w, https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-24-1536x834.png 1536w\" 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=\"556\" data-id=\"287\" src=\"https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-28-1024x556.png\" alt=\"\" class=\"wp-image-287\" srcset=\"https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-28-1024x556.png 1024w, https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-28-300x163.png 300w, https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-28-768x417.png 768w, https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-28-1536x834.png 1536w, https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-28.png 2040w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">I also made some changes to the Notebook interface<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"502\" src=\"https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-29-1024x502.png\" alt=\"\" class=\"wp-image-288\" srcset=\"https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-29-1024x502.png 1024w, https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-29-300x147.png 300w, https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-29-767x376.png 767w, https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-29-1536x753.png 1536w, https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-29.png 1776w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" style=\"margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--30)\" \/>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<h2 class=\"wp-block-heading\">NPC image design<\/h2>\n<\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">I plan to use character silhouettes in a similar style for my game. I don&#8217;t want to show the characters&#8217; appearances too clearly. Make the protagonist&#8217;s sense of amnesia more pronounced.<\/p>\n\n\n\n<div class=\"wp-block-buttons has-custom-font-size has-small-font-size is-horizontal is-content-justification-left is-layout-flex wp-container-core-buttons-is-layout-8d73bb89 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/miro.com\/app\/board\/uXjVEbf0X80=\/\">my design Canvas board<\/a><\/div>\n<\/div>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"454\" src=\"https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-35-1024x454.png\" alt=\"\" class=\"wp-image-307\" style=\"aspect-ratio:2.255614447297962;width:496px;height:auto\" srcset=\"https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-35-1024x454.png 1024w, https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-35-300x133.png 300w, https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-35-767x340.png 767w, https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-35.png 1146w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">I found some images online that were close to the style I wanted and used them as references for AI to make some changes and improvements. For example, I added some unique features to different characters to make them more recognizable. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"740\" height=\"482\" src=\"https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-37.png\" alt=\"\" class=\"wp-image-309\" style=\"aspect-ratio:1.5353144642392234;width:465px;height:auto\" srcset=\"https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-37.png 740w, https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-37-300x195.png 300w\" sizes=\"(max-width: 740px) 100vw, 740px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">I was worried that using only shadows might make the characters look too similar and difficult to recognise. So I decided to add some coloured accessories or objects that represent each character&#8217;s personality or features. This way, I can keep the original silhouette style while making it easier for players to tell the characters apart.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Since I&#8217;m not very good at drawing, I used AI image generation tools to help me create visual assets for my game. This allowed me to experiment with different art styles and keep adjusting the images to make them closer to the visual style I wanted for my game.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Like this: <\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-5 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"439\" height=\"1024\" data-id=\"313\" src=\"https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-38-439x1024.png\" alt=\"\" class=\"wp-image-313\" style=\"width:194px;height:auto\" srcset=\"https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-38-439x1024.png 439w, https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-38-129x300.png 129w, https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-38-768x1792.png 768w, https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-38-658x1536.png 658w, https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-38.png 821w\" sizes=\"(max-width: 439px) 100vw, 439px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"273\" height=\"396\" data-id=\"600\" src=\"https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-71.png\" alt=\"\" class=\"wp-image-600\" srcset=\"https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-71.png 273w, https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-71-207x300.png 207w\" sizes=\"(max-width: 273px) 100vw, 273px\" \/><\/figure>\n<\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Final effect:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"718\" height=\"924\" src=\"https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-34.png\" alt=\"\" class=\"wp-image-303\" style=\"aspect-ratio:0.777064548312407;width:387px;height:auto\" srcset=\"https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-34.png 718w, https:\/\/sites.wsagames.com\/yh9g25\/wp-content\/uploads\/sites\/91\/2026\/10\/image-34-233x300.png 233w\" sizes=\"(max-width: 718px) 100vw, 718px\" \/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<h2 class=\"wp-block-heading\">Future Plans<\/h2>\n<\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">In the next version (Bar 03), I plan to continue improving the game&#8217;s UI and story game play. I want to add more functions to the Notebook, such as page-turning, so players can look through different notes more easily. I will also continue developing the story and interactions to make the prototype more complete.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\" open><summary>Use of AI Tools<\/summary>\n<p class=\"wp-block-paragraph\">Google translate<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Youdao translate<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Chat GPT drawing, code debugging.<\/p>\n<\/details>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Prototype version &#8211; bar02 playtest name &#8211; Bar1860PT02-pc Initial UI Concept In the second version of my prototype, I added more background images and made some small improvements to the UI details to make the game look more complete. Compared to the first version, I focused more on the visuals. I added some preset story [&hellip;]<\/p>\n","protected":false},"author":71,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-259","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.wsagames.com\/yh9g25\/wp-json\/wp\/v2\/pages\/259","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.wsagames.com\/yh9g25\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.wsagames.com\/yh9g25\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/yh9g25\/wp-json\/wp\/v2\/users\/71"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/yh9g25\/wp-json\/wp\/v2\/comments?post=259"}],"version-history":[{"count":28,"href":"https:\/\/sites.wsagames.com\/yh9g25\/wp-json\/wp\/v2\/pages\/259\/revisions"}],"predecessor-version":[{"id":611,"href":"https:\/\/sites.wsagames.com\/yh9g25\/wp-json\/wp\/v2\/pages\/259\/revisions\/611"}],"wp:attachment":[{"href":"https:\/\/sites.wsagames.com\/yh9g25\/wp-json\/wp\/v2\/media?parent=259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}