{"id":1259,"date":"2026-03-25T19:56:13","date_gmt":"2026-03-25T19:56:13","guid":{"rendered":"https:\/\/sites.wsagames.com\/yy8y24\/?p=1259"},"modified":"2026-03-25T21:27:21","modified_gmt":"2026-03-25T21:27:21","slug":"game-menu-system","status":"publish","type":"post","link":"https:\/\/sites.wsagames.com\/yy8y24\/2026\/03\/25\/game-menu-system\/","title":{"rendered":"Game Menu System"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong>The video shows game menu system:<\/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-18-22-05-03.mp4\"><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Menu UI:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"614\" src=\"https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-18-220211-1-1024x614.png\" alt=\"\" class=\"wp-image-1264\" srcset=\"https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-18-220211-1-1024x614.png 1024w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-18-220211-1-300x180.png 300w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-18-220211-1-768x461.png 768w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-18-220211-1-1536x921.png 1536w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-18-220211-1-2048x1228.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">First, I create a new level, menu in this new level.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I added a canvas panel; all content will be displayed within this panel. I inserted an image as the background, stretching it to fill the entire canvas panel, which means that when displayed, the image will fill the entire screen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I have added three buttons and positioned them in the centre of the screen. These three buttons are all contained within the same vertical container, which means they are the same size and aligned.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I have added text boxes beneath each button to display text. I have also added a text box in the centre of the screen; this is the game\u2019s title.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Three buttons blueprint:<\/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-18-220224-1-1024x612.png\" alt=\"\" class=\"wp-image-1265\" srcset=\"https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-18-220224-1-1024x612.png 1024w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-18-220224-1-300x179.png 300w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-18-220224-1-768x459.png 768w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-18-220224-1-1536x918.png 1536w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-18-220224-1-2048x1224.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">I have added Blueprints to each of the three buttons. The Blueprint for the \u2018Start Game\u2019 button is designed so that when the player clicks the button, a level opens directly. I have entered the name of the initial room as the level name.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The concept behind the button blueprint for the game settings is as follows: when the player clicks the button, the blueprint is triggered; once triggered, the game settings panel appears on the screen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Blueprint logic for the \u201cEnd Game\u201d button is as follows: when the player clicks the button, the \u201cLook at Image\u201d event is triggered; when the Blueprint is triggered, the game closes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Level Blueprint:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img 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-18-220233-1-1024x611.png\" alt=\"\" class=\"wp-image-1266\" srcset=\"https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-18-220233-1-1024x611.png 1024w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-18-220233-1-300x179.png 300w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-18-220233-1-768x458.png 768w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-18-220233-1-1536x917.png 1536w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-18-220233-1-2048x1222.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">This is the blueprint for the Menu level. The idea behind the blueprint is that when the level begins, the blueprint is triggered, and once triggered, the contents of the Canvas panel (the start menu) are displayed on the screen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Retrieve the player controller, display the mouse cursor on the screen, and allow the player to click.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Game setting UI:<\/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-18-210922-1-1024x611.png\" alt=\"\" class=\"wp-image-1269\" srcset=\"https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-18-210922-1-1024x611.png 1024w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-18-210922-1-300x179.png 300w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-18-210922-1-768x458.png 768w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-18-210922-1-1536x916.png 1536w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-18-210922-1-2048x1221.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The approach to creating the game settings UI is as follows: first, create a canvas panel so that all content is displayed within it. I used the same background image and added a blur effect to it. I placed a blank image in the centre of the screen and reduced its opacity. I added three text boxes to the image, labelled \u2018Game Settings\u2019, \u2018Sound Settings\u2019 and \u2018Resolution\u2019.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I have added a slider next to the \u2018Sound Settings\u2019 text box, which players can adjust to control the settings. I have added a combo box next to the \u2018Resolution\u2019 text box, allowing players to select different options. A \u2018Return to Main Menu\u2019 button has been added below the image.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>UI Blueprint\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-18-220245-1-1024x611.png\" alt=\"\" class=\"wp-image-1271\" srcset=\"https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-18-220245-1-1024x611.png 1024w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-18-220245-1-300x179.png 300w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-18-220245-1-768x458.png 768w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-18-220245-1-1536x916.png 1536w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/03\/\u5c4f\u5e55\u622a\u56fe-2026-03-18-220245-1-2048x1221.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Blueprint logic for the \u2018Return to Home\u2019 button: The blueprint is triggered when the player clicks the button. Once triggered, the canvas panel is removed. This causes the main menu\u2019s canvas panel to be displayed again.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The concept behind the ComboBoxstring blueprint: it is triggered when the player selects a different option. It retrieves the resolution variable; when the player selects a resolution, three different resolution options are displayed. If the condition matches the selected option, that option is triggered; if not, it moves on to the next option.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The video shows game menu system: Menu UI: First, I create a new level, menu in this new level. I added a canvas panel; all content will be displayed within this panel. I inserted an image as the background, stretching it to fill the entire canvas panel, which means that when displayed, the image will [&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-1259","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\/1259","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=1259"}],"version-history":[{"count":8,"href":"https:\/\/sites.wsagames.com\/yy8y24\/wp-json\/wp\/v2\/posts\/1259\/revisions"}],"predecessor-version":[{"id":1274,"href":"https:\/\/sites.wsagames.com\/yy8y24\/wp-json\/wp\/v2\/posts\/1259\/revisions\/1274"}],"wp:attachment":[{"href":"https:\/\/sites.wsagames.com\/yy8y24\/wp-json\/wp\/v2\/media?parent=1259"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.wsagames.com\/yy8y24\/wp-json\/wp\/v2\/categories?post=1259"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sites.wsagames.com\/yy8y24\/wp-json\/wp\/v2\/tags?post=1259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}