{"id":216,"date":"2024-12-03T00:00:48","date_gmt":"2024-12-03T00:00:48","guid":{"rendered":"https:\/\/sites.wsagames.com\/sl1c22\/?p=216"},"modified":"2025-09-30T10:35:14","modified_gmt":"2025-09-30T10:35:14","slug":"game-main-page","status":"publish","type":"post","link":"https:\/\/sites.wsagames.com\/sl1c22\/2024\/12\/03\/game-main-page\/","title":{"rendered":"Game Main Page"},"content":{"rendered":"\n<h2 class=\"wp-block-heading has-text-align-center\"><span style=\"text-decoration: underline\">Final Edition:<\/span><\/h2>\n\n\n\n<figure class=\"wp-block-image alignwide size-full has-custom-border\"><img fetchpriority=\"high\" decoding=\"async\" width=\"2560\" height=\"1440\" src=\"https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/\u4e3b\u9875\u9762-scaled.jpg\" alt=\"\" class=\"wp-image-565\" style=\"border-width:5px\" srcset=\"https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/\u4e3b\u9875\u9762-scaled.jpg 2560w, https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/\u4e3b\u9875\u9762-300x169.jpg 300w, https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/\u4e3b\u9875\u9762-1024x576.jpg 1024w, https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/\u4e3b\u9875\u9762-768x432.jpg 768w, https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/\u4e3b\u9875\u9762-1536x864.jpg 1536w, https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/\u4e3b\u9875\u9762-2048x1152.jpg 2048w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/><\/figure>\n\n\n\n<h5 class=\"wp-block-heading has-text-align-center\">Examples:<\/h5>\n\n\n\n<figure class=\"wp-block-image alignwide size-full has-custom-border\"><img decoding=\"async\" width=\"2560\" height=\"1440\" src=\"https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/\u4e3b\u9875\u9762\u4f8b\u56fe-1-scaled.jpg\" alt=\"\" class=\"wp-image-566\" style=\"border-width:5px\" srcset=\"https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/\u4e3b\u9875\u9762\u4f8b\u56fe-1-scaled.jpg 2560w, https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/\u4e3b\u9875\u9762\u4f8b\u56fe-1-300x169.jpg 300w, https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/\u4e3b\u9875\u9762\u4f8b\u56fe-1-1024x576.jpg 1024w, https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/\u4e3b\u9875\u9762\u4f8b\u56fe-1-768x432.jpg 768w, https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/\u4e3b\u9875\u9762\u4f8b\u56fe-1-1536x864.jpg 1536w, https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/\u4e3b\u9875\u9762\u4f8b\u56fe-1-2048x1152.jpg 2048w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image alignwide size-large has-custom-border\"><img decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/\u5730\u56fe\u4f8b\u5b50-1024x576.jpg\" alt=\"\" class=\"wp-image-644\" style=\"border-width:5px\" srcset=\"https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/\u5730\u56fe\u4f8b\u5b50-1024x576.jpg 1024w, https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/\u5730\u56fe\u4f8b\u5b50-300x169.jpg 300w, https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/\u5730\u56fe\u4f8b\u5b50-768x432.jpg 768w, https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/\u5730\u56fe\u4f8b\u5b50-1536x864.jpg 1536w, https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/\u5730\u56fe\u4f8b\u5b50-2048x1152.jpg 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-large-font-size\">Since the game prototype was made from a presentation, I needed to scale the background and characters to fit a 16:9 ratio, so the elements in the main game page are in a square outline. To differentiate, the game dialogue has a white background, while the map and other UI screens have a black background. <\/li>\n\n\n\n<li class=\"has-large-font-size\">For the final version, I removed the menu icons as well as the functions, keeping only the dialogue boxes and location displays. There&#8217;s less functionality but it&#8217;s straightforward enough for a prototype.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center\"><strong>Third Edition:<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image alignwide size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1440\" src=\"https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/TP3-scaled.jpg\" alt=\"\" class=\"wp-image-357\" style=\"border-width:5px\" srcset=\"https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/TP3-scaled.jpg 2560w, https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/TP3-300x169.jpg 300w, https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/TP3-1024x576.jpg 1024w, https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/TP3-768x432.jpg 768w, https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/TP3-1536x864.jpg 1536w, https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/TP3-2048x1152.jpg 2048w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-large-font-size\">The third edition is close to the final version, but after testing it with a few friends I found a bug function on the menu key, as the menu popup uses the zoom function, but using zoom requires allowing the use of a single click to switch the slides page, which can lead to the player going from the menu directly into the later game screens resulting in the wrong order of playing, so I decided to remove this after experiencing feedback from friends feature and may enable it again in subsequent development.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center\"><strong>Second Edition:<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image alignwide size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1440\" src=\"https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/\u56fe\u72471-scaled.jpg\" alt=\"\" class=\"wp-image-356\" style=\"border-width:5px\" srcset=\"https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/\u56fe\u72471-scaled.jpg 2560w, https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/\u56fe\u72471-300x169.jpg 300w, https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/\u56fe\u72471-1024x576.jpg 1024w, https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/\u56fe\u72471-768x432.jpg 768w, https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/\u56fe\u72471-1536x864.jpg 1536w, https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/\u56fe\u72471-2048x1152.jpg 2048w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-large-font-size\">The second version retains the UI design of the draft but changes the backgrounds, characters, and dialogue box locations. Since this was early in the game&#8217;s development, the course timetable and map remained in the UI, and with further development these two items were deprecated, so this version of the game was also deprecated.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center\"><strong>First Edition:<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image alignwide size-full has-custom-border is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"4000\" height=\"2250\" src=\"https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/\u56fe\u72472-1.png\" alt=\"\" class=\"wp-image-355\" style=\"border-width:5px;border-radius:0px\" srcset=\"https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/\u56fe\u72472-1.png 4000w, https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/\u56fe\u72472-1-300x169.png 300w, https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/\u56fe\u72472-1-1024x576.png 1024w, https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/\u56fe\u72472-1-768x432.png 768w, https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/\u56fe\u72472-1-1536x864.png 1536w, https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/\u56fe\u72472-1-2048x1152.png 2048w\" sizes=\"(max-width: 4000px) 100vw, 4000px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-large-font-size\">During the draft, I was trying to get closer to the game page of<em>\u6050\u6016\u306e\u4e16\u754c (World of Horror)<\/em> by Panstasz. So I referenced the typography of its game characters and created the very first version. However, I realised that the scale of the PowerPoint wasn&#8217;t enough to support the effect I wanted, as the background would have been forced to be cropped out for the most part, resulting in a lack of information on the context, so the initial version was discarded.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"450\" src=\"https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-253-800x450-1.webp\" alt=\"\" class=\"wp-image-645\" style=\"border-width:5px\" srcset=\"https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-253-800x450-1.webp 800w, https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-253-800x450-1-300x169.webp 300w, https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-253-800x450-1-768x432.webp 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center has-large-font-size wp-block-paragraph\"><em>\u6050\u6016\u306e\u4e16\u754c (World of Horror)<\/em> by Panstasz<\/p>\n\n\n\n<h4 class=\"wp-block-heading has-text-align-center\">Reference:<\/h4>\n\n\n\n<figure class=\"wp-block-image alignwide size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"724\" src=\"https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/1000007384-1024x724.jpg\" alt=\"\" class=\"wp-image-540\" style=\"border-width:5px\" srcset=\"https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/1000007384-1024x724.jpg 1024w, https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/1000007384-300x212.jpg 300w, https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/1000007384-768x543.jpg 768w, https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/1000007384-1536x1086.jpg 1536w, https:\/\/sites.wsagames.com\/sl1c22\/wp-content\/uploads\/sites\/14\/2024\/12\/1000007384.jpg 2000w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-large-font-size\">After the first draft was discarded, I re-referenced the interactive fiction games I had played, and I found that the backgrounds and characters were dominating the screen, with the dialogue boxes all at the bottom of the screen, so I followed this typography and continued to work on the second until the final version.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center\">Others:<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-large-font-size\">For more information please go to:\n<ul class=\"wp-block-list\">\n<li class=\"has-large-font-size\"><a href=\"https:\/\/sites.wsagames.com\/sl1c22\/2025\/01\/11\/prototype-2\/\" data-type=\"link\" data-id=\"https:\/\/sites.wsagames.com\/sl1c22\/2025\/01\/11\/prototype-2\/\">Prototype<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Final Edition: Examples: Third Edition: Second Edition: First Edition: \u6050\u6016\u306e\u4e16\u754c (World of Horror) by Panstasz Reference: Others:<\/p>\n","protected":false},"author":15,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22,26,32],"tags":[],"class_list":["post-216","post","type-post","status-publish","format-standard","hentry","category-all-the-research-and-iteration-would-be-shown-here","category-ui-design-explanation","category-semester-1"],"_links":{"self":[{"href":"https:\/\/sites.wsagames.com\/sl1c22\/wp-json\/wp\/v2\/posts\/216","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.wsagames.com\/sl1c22\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sites.wsagames.com\/sl1c22\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/sl1c22\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/sl1c22\/wp-json\/wp\/v2\/comments?post=216"}],"version-history":[{"count":12,"href":"https:\/\/sites.wsagames.com\/sl1c22\/wp-json\/wp\/v2\/posts\/216\/revisions"}],"predecessor-version":[{"id":780,"href":"https:\/\/sites.wsagames.com\/sl1c22\/wp-json\/wp\/v2\/posts\/216\/revisions\/780"}],"wp:attachment":[{"href":"https:\/\/sites.wsagames.com\/sl1c22\/wp-json\/wp\/v2\/media?parent=216"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.wsagames.com\/sl1c22\/wp-json\/wp\/v2\/categories?post=216"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sites.wsagames.com\/sl1c22\/wp-json\/wp\/v2\/tags?post=216"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}