{"id":6791,"date":"2026-03-11T10:32:05","date_gmt":"2026-03-11T10:32:05","guid":{"rendered":"https:\/\/sites.wsagames.com\/hl1d23\/?p=6791"},"modified":"2026-05-12T16:28:36","modified_gmt":"2026-05-12T16:28:36","slug":"animation-menu-ui","status":"publish","type":"post","link":"https:\/\/sites.wsagames.com\/hl1d23\/animation-menu-ui\/","title":{"rendered":"Menu UI"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"6791\" class=\"elementor elementor-6791\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-07f6730 e-flex e-con-boxed e-con e-parent\" data-id=\"07f6730\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-7c04fe7 e-con-full e-flex e-con e-child\" data-id=\"7c04fe7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9881afc elementor-widget elementor-widget-heading\" data-id=\"9881afc\" 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\">Menu UI Implementation<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4d7efe8 elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"4d7efe8\" 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>When creating the main menu, I first designed the menu prototype in Figma.<\/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-46989d6 elementor-widget elementor-widget-image\" data-id=\"46989d6\" 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 fetchpriority=\"high\" decoding=\"async\" width=\"1102\" height=\"650\" src=\"https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/03\/Snipaste_2026-05-11_11-55-40.png\" class=\"attachment-full size-full wp-image-6813\" alt=\"\" srcset=\"https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/03\/Snipaste_2026-05-11_11-55-40.png 1102w, https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/03\/Snipaste_2026-05-11_11-55-40-300x177.png 300w, https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/03\/Snipaste_2026-05-11_11-55-40-1024x604.png 1024w, https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/03\/Snipaste_2026-05-11_11-55-40-768x453.png 768w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/>\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-34b76ba elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"34b76ba\" 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 the buttons, I also designed two states in Figma: a normal state and a selected\/highlighted state. The normal version is more subtle, while the highlighted version appears when the player hovers over or selects a button. This makes it clearer which menu option is currently active.<\/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-592ae73 elementor-widget elementor-widget-image\" data-id=\"592ae73\" 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=\"978\" height=\"680\" src=\"https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/03\/Snipaste_2026-05-11_12-01-28.png\" class=\"attachment-full size-full wp-image-6815\" alt=\"\" srcset=\"https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/03\/Snipaste_2026-05-11_12-01-28.png 978w, https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/03\/Snipaste_2026-05-11_12-01-28-300x209.png 300w, https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/03\/Snipaste_2026-05-11_12-01-28-768x534.png 768w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/>\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-f72bb6e elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"f72bb6e\" 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 finishing the Figma design, I exported the UI assets and imported them into Unity as the visual assets for the main menu.<\/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-16ea7ab elementor-widget elementor-widget-heading\" data-id=\"16ea7ab\" 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\">Menu Scene Structure<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6299c41 e-con-full e-flex e-con e-child\" data-id=\"6299c41\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-df5d473 elementor-widget__width-initial elementor-widget elementor-widget-image\" data-id=\"df5d473\" 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=\"464\" height=\"400\" src=\"https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/03\/Snipaste_2026-05-11_12-06-15.png\" class=\"attachment-large size-large wp-image-6816\" alt=\"\" srcset=\"https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/03\/Snipaste_2026-05-11_12-06-15.png 464w, https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/03\/Snipaste_2026-05-11_12-06-15-300x259.png 300w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/>\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-b448891 elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"b448891\" 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>In Unity, I placed the main menu in a separate Menu scene. The menu structure mainly consists of a Canvas, background image, menu buttons, EventSystem, and MenuManager. All buttons, including Start Game, Continue, Settings, Credits, and Quit Game, are placed under the Canvas, making it easier to manage their layout and interaction logic.<\/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-fc13114 elementor-widget elementor-widget-heading\" data-id=\"fc13114\" 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\">Menu Button Interaction<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5174526 elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"5174526\" 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 menu buttons are Unity UI Buttons. The main buttons include:<br \/>Start Game<br \/>Continue<br \/>Settings<br \/>Credits<br \/>Quit Game<\/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-06f1830 elementor-widget elementor-widget-image\" data-id=\"06f1830\" 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=\"530\" height=\"519\" src=\"https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/03\/Snipaste_2026-05-11_12-10-47.png\" class=\"attachment-full size-full wp-image-6817\" alt=\"\" srcset=\"https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/03\/Snipaste_2026-05-11_12-10-47.png 530w, https:\/\/sites.wsagames.com\/hl1d23\/wp-content\/uploads\/sites\/53\/2026\/03\/Snipaste_2026-05-11_12-10-47-300x294.png 300w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/>\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-2fab500 elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"2fab500\" 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 menu buttons use Unity UI Button\u2019s Sprite Swap transition for interaction feedback. Each button has a default image, and a highlighted image is assigned in the Highlighted Sprite field. When the player hovers over or selects a button, Unity automatically switches it to the highlighted version, making the menu interaction clearer visually.<\/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-6200240 elementor-widget elementor-widget-heading\" data-id=\"6200240\" 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\">Start Game and Quit Logic<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0bf4ce8 elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"0bf4ce8\" 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 menu functions are controlled by MenuManager, which uses a simple MenuSimple script to handle button actions.<\/p><p>The main method is LoadPlaytest():<\/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-a54aa51 elementor-widget elementor-widget-code-highlight\" data-id=\"a54aa51\" 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>public void LoadPlaytest()\r\n{\r\n    SceneManager.LoadScene(\"Playtest Scene\");\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-358cb6d elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"358cb6d\" 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>When the player clicks Start Game, Unity calls this method and loads the main Playtest Scene.<\/p><p>The quit function is handled by QuitGame():<\/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-c89da08 elementor-widget elementor-widget-code-highlight\" data-id=\"c89da08\" 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>public void QuitGame()\r\n{\r\n    Application.Quit();\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>\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>Menu UI Implementation When creating the main menu, I first designed the menu prototype in Figma. For the buttons, I also designed two states in Figma: a normal state and a selected\/highlighted state. The normal version is more subtle, while the highlighted version appears when the player hovers over or selects a button. This makes &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/sites.wsagames.com\/hl1d23\/animation-menu-ui\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Menu UI&#8221;<\/span><\/a><\/p>\n","protected":false},"author":44,"featured_media":6821,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[36],"tags":[],"class_list":["post-6791","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\/6791","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=6791"}],"version-history":[{"count":14,"href":"https:\/\/sites.wsagames.com\/hl1d23\/wp-json\/wp\/v2\/posts\/6791\/revisions"}],"predecessor-version":[{"id":6931,"href":"https:\/\/sites.wsagames.com\/hl1d23\/wp-json\/wp\/v2\/posts\/6791\/revisions\/6931"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/hl1d23\/wp-json\/wp\/v2\/media\/6821"}],"wp:attachment":[{"href":"https:\/\/sites.wsagames.com\/hl1d23\/wp-json\/wp\/v2\/media?parent=6791"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.wsagames.com\/hl1d23\/wp-json\/wp\/v2\/categories?post=6791"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sites.wsagames.com\/hl1d23\/wp-json\/wp\/v2\/tags?post=6791"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}