{"id":940,"date":"2025-03-01T23:19:53","date_gmt":"2025-03-01T23:19:53","guid":{"rendered":"https:\/\/sites.wsagames.com\/et4g23\/?p=940"},"modified":"2025-05-11T19:11:54","modified_gmt":"2025-05-11T19:11:54","slug":"week-5-start-menu","status":"publish","type":"post","link":"https:\/\/sites.wsagames.com\/et4g23\/2025\/03\/01\/week-5-start-menu\/","title":{"rendered":"Start Menu"},"content":{"rendered":"\n

As the technical designer with a role heavily directed towards programming and Unity itself, it will often be my responsibility to implement art within Lament. Despite not creating the art for the game it is up to me to put assets into the game.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

To begin with the start menu, I created a new scene and named it ‘MainMenu’. With this new, empty scene I created four Buttons <\/strong>in the scenes hierarchy (called: ‘Start’, ‘Credits’, ‘Options’ and ‘Exit’). This created a ‘Canvas’ gameobject and automatically made these buttons children to it; this ‘Canvas’ gameobject acts as a renderer for all UI gameobjects within Unity. Within the ‘Canvas’ gameobject, I changed some values in the ‘Canvas Scaler’ component. Notably UI Scale Mode and Reference Resolution, these change would ensure that no matter what system opened the game, its UI would always scale accordingly to the size of a 16:9 aspect ratio screen – which is the most common aspect ratio.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Creating functional buttons<\/h2>\n\n\n\n

In order to make these buttons functional, they must call a script when they are activated (clicked on). Therefore I created a ‘MainMenu’ script and applied it onto the scenes ‘Main Camera’ – as this gameobject would always be present within the scene. For now, only the ‘Start’ and ‘Exit’ buttons needed to work for the playtest and, later in development, I would come back and add functionality to the ‘Credits’ and ‘Options’ buttons. Luckily for me, the ‘Start’ and ‘Exit’ buttons are extremely easy to code. Using the SceneManagement library <\/strong>in Unity, I only need one line of code in a PlayGame( ) method to start the game, as long as I place the scenes in the right order in the build settings <\/strong>of the project.<\/p>\n\n\n

\n
\"\"
The Build settings of the project and the MainMenu script<\/figcaption><\/figure><\/div>\n\n\n

Now that the methods for the ‘Start’ and ‘Exit’ buttons were made, I had to then call these methods whenever the button was pressed. For both of these buttons, I accessed the ‘Button’ component in the inspector and assigned both of them the appropriate method in the OnClick( ) drop down. PlayGame( ) for the start button and QuitGame( ) for the exit button.
This is the Button component for the ‘Start’ button:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Implementing artwork<\/h2>\n\n\n\n

After our Mechanics Designer, Aysa, completed the artwork and uploaded them to our group google drive, I was able to download and add them to the Start Menu scene. The assets consisted of:
– An two images for each button, a static and hover version
– A background image
– A title image
– A tree of sorrow image<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\n
\n

In order to add static art to the MainMenu scene, I created three Images (Create empty > UI > Image). I then changed the source image to whatever asset was required, whether it be the background image, the title image, or the tree of sorrow image<\/p>\n\n\n\n

\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n

For the buttons, the implementation of the static assets was a similar process, I just had to replace the source image with the corresponding button sprite. However, the process for the hover images was slightly different – in the Button component for the buttons, I changed the ‘Transition’ variable from ‘Animation’ to ‘Sprite Swap’. This would allow me to alter the sprite for ‘Highlighted Sprite’ to the hover version of the button sprite.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\n
\n
\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n\n\n\n
\n
\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n<\/div>\n\n\n\n

This was the result of this version of the Start Menu. Where, in this build of the project, the ‘Start’ button would open the Hub scene and the ‘Exit’ button would cause the application to close.<\/p>\n\n\n\n

\n\n\n\n
\"\"<\/figure>\n\n\n\n

After our UI Desiger, Ayse, developed the intro cutscene for the game, I changed what scene the start button takes the player to. Simply by reordering the scenes in the build settings of the game and making the intro cutscene be the scene after the main menu.<\/p>\n\n\n

\n
\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div>","protected":false},"excerpt":{"rendered":"

As the technical designer with a role heavily directed towards programming and Unity itself, it will often be my responsibility to implement art within Lament. Despite not creating the art for the game it is up to me to put assets into the game. To begin with the start menu, I created a new scene…<\/p>\n","protected":false},"author":28,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-940","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\nStart Menu - E-Jay Tripoli (Year 2 Archive)<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sites.wsagames.com\/et4g23\/2025\/03\/01\/week-5-start-menu\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Start Menu - E-Jay Tripoli (Year 2 Archive)\" \/>\n<meta property=\"og:description\" content=\"As the technical designer with a role heavily directed towards programming and Unity itself, it will often be my responsibility to implement art within Lament. Despite not creating the art for the game it is up to me to put assets into the game. To begin with the start menu, I created a new scene...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sites.wsagames.com\/et4g23\/2025\/03\/01\/week-5-start-menu\/\" \/>\n<meta property=\"og:site_name\" content=\"E-Jay Tripoli (Year 2 Archive)\" \/>\n<meta property=\"article:published_time\" content=\"2025-03-01T23:19:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-11T19:11:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/sites.wsagames.com\/et4g23\/wp-content\/uploads\/sites\/27\/2025\/03\/image-106.png\" \/>\n<meta name=\"author\" content=\"et4g23\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"et4g23\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sites.wsagames.com\/et4g23\/2025\/03\/01\/week-5-start-menu\/\",\"url\":\"https:\/\/sites.wsagames.com\/et4g23\/2025\/03\/01\/week-5-start-menu\/\",\"name\":\"Start Menu - E-Jay Tripoli (Year 2 Archive)\",\"isPartOf\":{\"@id\":\"https:\/\/sites.wsagames.com\/et4g23\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sites.wsagames.com\/et4g23\/2025\/03\/01\/week-5-start-menu\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sites.wsagames.com\/et4g23\/2025\/03\/01\/week-5-start-menu\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sites.wsagames.com\/et4g23\/wp-content\/uploads\/sites\/27\/2025\/03\/image-106.png\",\"datePublished\":\"2025-03-01T23:19:53+00:00\",\"dateModified\":\"2025-05-11T19:11:54+00:00\",\"author\":{\"@id\":\"https:\/\/sites.wsagames.com\/et4g23\/#\/schema\/person\/56387a1dc0de878bb33ce4c478f22963\"},\"breadcrumb\":{\"@id\":\"https:\/\/sites.wsagames.com\/et4g23\/2025\/03\/01\/week-5-start-menu\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sites.wsagames.com\/et4g23\/2025\/03\/01\/week-5-start-menu\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sites.wsagames.com\/et4g23\/2025\/03\/01\/week-5-start-menu\/#primaryimage\",\"url\":\"https:\/\/sites.wsagames.com\/et4g23\/wp-content\/uploads\/sites\/27\/2025\/03\/image-106.png\",\"contentUrl\":\"https:\/\/sites.wsagames.com\/et4g23\/wp-content\/uploads\/sites\/27\/2025\/03\/image-106.png\",\"width\":717,\"height\":524},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sites.wsagames.com\/et4g23\/2025\/03\/01\/week-5-start-menu\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sites.wsagames.com\/et4g23\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Start Menu\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/sites.wsagames.com\/et4g23\/#website\",\"url\":\"https:\/\/sites.wsagames.com\/et4g23\/\",\"name\":\"E-Jay Tripoli (Year 2 Archive)\",\"description\":\"A documentation of my work for Year 2 - Studying Games Design and Art at the University of Southampton\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/sites.wsagames.com\/et4g23\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/sites.wsagames.com\/et4g23\/#\/schema\/person\/56387a1dc0de878bb33ce4c478f22963\",\"name\":\"et4g23\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sites.wsagames.com\/et4g23\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/477d521b3b86e4ef27181bf784cd1a145a38c7d6a0154a478d3c858d26298bec?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/477d521b3b86e4ef27181bf784cd1a145a38c7d6a0154a478d3c858d26298bec?s=96&d=mm&r=g\",\"caption\":\"et4g23\"},\"url\":\"https:\/\/sites.wsagames.com\/et4g23\/author\/et4g23\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Start Menu - E-Jay Tripoli (Year 2 Archive)","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/sites.wsagames.com\/et4g23\/2025\/03\/01\/week-5-start-menu\/","og_locale":"en_US","og_type":"article","og_title":"Start Menu - E-Jay Tripoli (Year 2 Archive)","og_description":"As the technical designer with a role heavily directed towards programming and Unity itself, it will often be my responsibility to implement art within Lament. Despite not creating the art for the game it is up to me to put assets into the game. To begin with the start menu, I created a new scene...","og_url":"https:\/\/sites.wsagames.com\/et4g23\/2025\/03\/01\/week-5-start-menu\/","og_site_name":"E-Jay Tripoli (Year 2 Archive)","article_published_time":"2025-03-01T23:19:53+00:00","article_modified_time":"2025-05-11T19:11:54+00:00","og_image":[{"url":"https:\/\/sites.wsagames.com\/et4g23\/wp-content\/uploads\/sites\/27\/2025\/03\/image-106.png","type":"","width":"","height":""}],"author":"et4g23","twitter_card":"summary_large_image","twitter_misc":{"Written by":"et4g23","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/sites.wsagames.com\/et4g23\/2025\/03\/01\/week-5-start-menu\/","url":"https:\/\/sites.wsagames.com\/et4g23\/2025\/03\/01\/week-5-start-menu\/","name":"Start Menu - E-Jay Tripoli (Year 2 Archive)","isPartOf":{"@id":"https:\/\/sites.wsagames.com\/et4g23\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sites.wsagames.com\/et4g23\/2025\/03\/01\/week-5-start-menu\/#primaryimage"},"image":{"@id":"https:\/\/sites.wsagames.com\/et4g23\/2025\/03\/01\/week-5-start-menu\/#primaryimage"},"thumbnailUrl":"https:\/\/sites.wsagames.com\/et4g23\/wp-content\/uploads\/sites\/27\/2025\/03\/image-106.png","datePublished":"2025-03-01T23:19:53+00:00","dateModified":"2025-05-11T19:11:54+00:00","author":{"@id":"https:\/\/sites.wsagames.com\/et4g23\/#\/schema\/person\/56387a1dc0de878bb33ce4c478f22963"},"breadcrumb":{"@id":"https:\/\/sites.wsagames.com\/et4g23\/2025\/03\/01\/week-5-start-menu\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sites.wsagames.com\/et4g23\/2025\/03\/01\/week-5-start-menu\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sites.wsagames.com\/et4g23\/2025\/03\/01\/week-5-start-menu\/#primaryimage","url":"https:\/\/sites.wsagames.com\/et4g23\/wp-content\/uploads\/sites\/27\/2025\/03\/image-106.png","contentUrl":"https:\/\/sites.wsagames.com\/et4g23\/wp-content\/uploads\/sites\/27\/2025\/03\/image-106.png","width":717,"height":524},{"@type":"BreadcrumbList","@id":"https:\/\/sites.wsagames.com\/et4g23\/2025\/03\/01\/week-5-start-menu\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sites.wsagames.com\/et4g23\/"},{"@type":"ListItem","position":2,"name":"Start Menu"}]},{"@type":"WebSite","@id":"https:\/\/sites.wsagames.com\/et4g23\/#website","url":"https:\/\/sites.wsagames.com\/et4g23\/","name":"E-Jay Tripoli (Year 2 Archive)","description":"A documentation of my work for Year 2 - Studying Games Design and Art at the University of Southampton","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sites.wsagames.com\/et4g23\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/sites.wsagames.com\/et4g23\/#\/schema\/person\/56387a1dc0de878bb33ce4c478f22963","name":"et4g23","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sites.wsagames.com\/et4g23\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/477d521b3b86e4ef27181bf784cd1a145a38c7d6a0154a478d3c858d26298bec?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/477d521b3b86e4ef27181bf784cd1a145a38c7d6a0154a478d3c858d26298bec?s=96&d=mm&r=g","caption":"et4g23"},"url":"https:\/\/sites.wsagames.com\/et4g23\/author\/et4g23\/"}]}},"_links":{"self":[{"href":"https:\/\/sites.wsagames.com\/et4g23\/wp-json\/wp\/v2\/posts\/940","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.wsagames.com\/et4g23\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sites.wsagames.com\/et4g23\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/et4g23\/wp-json\/wp\/v2\/users\/28"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/et4g23\/wp-json\/wp\/v2\/comments?post=940"}],"version-history":[{"count":7,"href":"https:\/\/sites.wsagames.com\/et4g23\/wp-json\/wp\/v2\/posts\/940\/revisions"}],"predecessor-version":[{"id":1535,"href":"https:\/\/sites.wsagames.com\/et4g23\/wp-json\/wp\/v2\/posts\/940\/revisions\/1535"}],"wp:attachment":[{"href":"https:\/\/sites.wsagames.com\/et4g23\/wp-json\/wp\/v2\/media?parent=940"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.wsagames.com\/et4g23\/wp-json\/wp\/v2\/categories?post=940"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sites.wsagames.com\/et4g23\/wp-json\/wp\/v2\/tags?post=940"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}