{"id":2085,"date":"2025-03-21T13:14:36","date_gmt":"2025-03-21T13:14:36","guid":{"rendered":"https:\/\/sites.wsagames.com\/ab15g23\/?p=2085"},"modified":"2025-03-22T18:51:25","modified_gmt":"2025-03-22T18:51:25","slug":"ui-implementation","status":"publish","type":"post","link":"https:\/\/sites.wsagames.com\/ab15g23\/ui-implementation\/","title":{"rendered":"UI Implementation"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Joe had already set up a Testing scene in the project with greyboxes (below). The idea of the process I had was to replace the greyboxes\/placeholder sprites with the assets I imported into the asset folder.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"604\" src=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-72-1024x604.png\" alt=\"\" class=\"wp-image-2165\" srcset=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-72-1024x604.png 1024w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-72-300x177.png 300w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-72-768x453.png 768w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-72.png 1241w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">I sliced the sprites and tried to add the button sprite to the End Day button. This did not work as expected and I was getting a lot of stretching and distortion that wasn&#8217;t supposed to be happening. I tried resizing my assets back in Illustrator to a more standard resolution, but that didn&#8217;t seem to be the problem.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"732\" height=\"204\" src=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-68.png\" alt=\"\" class=\"wp-image-2158\" srcset=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-68.png 732w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-68-300x84.png 300w\" sizes=\"(max-width: 732px) 100vw, 732px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading has-text-align-center\">First Independent Attempt<\/h3>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1108\" style=\"aspect-ratio: 1968 \/ 1108;\" width=\"1968\" controls src=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/20250320-1048-19.5469562-1.mp4\"><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">While this did work to an extent, it was not at all the correct way to implement UI. I essentially set the background image to the mockup image and moved the scene objects around it to seem integrated. Before I did anything further, I waited to meet with Sophie in week 8 to get a rundown of the Unity UI basics.<\/p>\n\n\n\n<h2 class=\"wp-block-heading alignwide has-text-align-center\">Unity UI Basics with Sophie<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">First of all, huge thank you to her because this short 1-1 was super helpful and it turned out not to be the three headed beast I was expecting. She talked me through the steps in an empty scene as we reconstructed my mockup of the UI using the UI Unity Package.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">With her guidance I started from the top, working left to right, making sure everything was anchored properly to avoid scaling issues. In this practice section I got to experiment with images, panels and buttons, which is about everything I would need really. The most interesting thing was looking at layout groups and how it handles arranging UI elements.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"482\" src=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-71-1024x482.png\" alt=\"\" class=\"wp-image-2161\" srcset=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-71-1024x482.png 1024w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-71-300x141.png 300w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-71-768x361.png 768w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-71-1536x722.png 1536w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-71.png 1648w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">She also showed me how to properly fix the earlier issue with the button sprite looking weird &#8211; I needed to: <br>1. Slice and set the correct borders to the sprite in the sprite editor.<br>2. Change the image type to tiled and set the correct pixels per unit multiplier in the inspector.<\/p>\n\n\n\n<figure class=\"wp-block-gallery aligncenter has-nested-images columns-default wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"367\" height=\"423\" data-id=\"2160\" src=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-70.png\" alt=\"\" class=\"wp-image-2160\" srcset=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-70.png 367w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-70-260x300.png 260w\" sizes=\"(max-width: 367px) 100vw, 367px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"298\" height=\"217\" data-id=\"2159\" src=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-69.png\" alt=\"\" class=\"wp-image-2159\" \/><\/figure>\n<\/figure>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center\">Doing it on my own<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">I restarted the in the scene Joe had used as a test space, if everything works out we would move it into the scene used for playtest 2.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Before I started, I went back to Illustrator and made sure I had the components I may need to use.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"877\" src=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/TLB-UI-assets-02-Copy-1024x877.png\" alt=\"\" class=\"wp-image-2167\" srcset=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/TLB-UI-assets-02-Copy-1024x877.png 1024w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/TLB-UI-assets-02-Copy-300x257.png 300w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/TLB-UI-assets-02-Copy-768x658.png 768w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/TLB-UI-assets-02-Copy-1536x1316.png 1536w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/TLB-UI-assets-02-Copy-2048x1754.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">UI Assets<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Following the same process I did with Sophie, I started by setting up the background with the right colour, then creating the necessary elements and anchoring them in the right areas of the screen. It was a lot of fiddling about to understand the elements already on the scene.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-align-center\">Pressing Button Opens Panel<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">For both the weekly tasks and the character profiles buttons the idea is that pressing on them would open a new panel with information that could be closed by clicking again. First I played around with the dropdown feature but it wasn&#8217;t quite what I wanted so I watched a <a href=\"https:\/\/www.youtube.com\/watch?v=LziIlLB2Kt4\">tutorial<\/a>, which involved minimal scripting. I also colour coded the placeholder camp sprites to make it more obvious what was what, at this point Rosie had also sent in the asset for the scavenger camp.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video height=\"730\" style=\"aspect-ratio: 1210 \/ 730;\" width=\"1210\" controls src=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/camp-UI-1.mp4\"><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center\">Problems<\/h2>\n\n\n\n<figure class=\"wp-block-table alignwide\"><table><thead><tr><th>Problem<\/th><th>Fix<\/th><\/tr><\/thead><tbody><tr><td>Game would not advance past day 3 &#8211; button did not work.<\/td><td>&#8211; I accidentally deleted the pre-existing fail panel in the hierarchy<br>&#8211; I brought back the fail panel from an old scene<br>&#8211; Realised I needed to insert the fail panel and its button in the game manager<br>&#8211; Fixed<\/td><\/tr><tr><td>Impossible to complete the weekly task and finish the week.<\/td><td>&#8211; After importing the new sprites for the character cards I hadn&#8217;t put the chars in the right order so char bonuses were assigned to the wrong char<br>&#8211; Reassigned the correct ID number for each char to the corresponding camp in the controller<br>&#8211; Fixed<\/td><\/tr><tr><td>Vertical Layout Group component doesn&#8217;t work as expected: sprites become large empty red crosses<\/td><td><strong>No fix found<\/strong>* Will need to ask around<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Joe had already set up a Testing scene in the project with greyboxes (below). The idea of the process I had was to replace the greyboxes\/placeholder sprites with the assets I imported into the asset folder. I sliced the sprites and tried to add the button sprite to the End Day button. This did not [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[53],"tags":[],"class_list":["post-2085","post","type-post","status-publish","format-standard","hentry","category-ui-ux"],"_links":{"self":[{"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/posts\/2085","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/comments?post=2085"}],"version-history":[{"count":11,"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/posts\/2085\/revisions"}],"predecessor-version":[{"id":2200,"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/posts\/2085\/revisions\/2200"}],"wp:attachment":[{"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/media?parent=2085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/categories?post=2085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/tags?post=2085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}