{"id":861,"date":"2026-05-18T15:55:22","date_gmt":"2026-05-18T15:55:22","guid":{"rendered":"https:\/\/sites.wsagames.com\/et4g23-yr3\/?p=861"},"modified":"2026-05-18T15:55:22","modified_gmt":"2026-05-18T15:55:22","slug":"implementing-ui-assets","status":"publish","type":"post","link":"https:\/\/sites.wsagames.com\/et4g23-yr3\/2026\/05\/18\/implementing-ui-assets\/","title":{"rendered":"Implementing UI Assets"},"content":{"rendered":"\n

While developing the UI, I asked Paula to create a minimum of two UI elements. One button and one panel, and explained the process of 9-slicing 2D assets so that she could understand how to create the panel (By showing her this video<\/a>).<\/p>\n\n\n\n

Menu UI<\/h3>\n\n\n\n

She then sent me quick drafts to ask if this would work in our game:<\/p>\n\n\n\n

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

Where I then told her this design would probably be better off in the corner to prevent any strange scaling effects:<\/p>\n\n\n\n

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

She also asked about these designs, but I told her the second asset wouldn’t be able to be scaled properly horizontally:<\/p>\n\n\n\n

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

Therefore she began finishing the first asset instead and sent it to me, so I began implementation on our: Pause menus, Popup prompts, Dialogue scenes etc.:<\/p>\n\n\n\n

\n
\n
\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button>
Panel asset<\/figcaption><\/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>
Button asset<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n

I then 9-sliced in Unity and used throughout the game:<\/p>\n\n\n\n

\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button>
9-Sliced this asset with the green lines<\/figcaption><\/figure>\n\n\n\n
\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button>
Pause menu with asset implemented<\/figcaption><\/figure>\n\n\n\n
\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button>
Dialogue with asset implemented<\/figcaption><\/figure>\n\n\n\n

Inventory UI<\/h3>\n\n\n\n

Furthermore, I also asked Paula to create a book asset for Kauri’s inventory. As I suggested the idea that it would simulate him writing down the star information that he learns from the village:<\/p>\n\n\n\n

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

After she sent me the asset, I began creating a prototype for it:<\/p>\n\n\n\n

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

Paper Prefab UI<\/h3>\n\n\n\n

We also needed an asset for the prompt when the player picks up a star information page:<\/p>\n\n\n\n

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

Paula then sent me some drafts that I had comments on:<\/p>\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

Which allowed me to implement it in the game, as pieces of paper that Kauri would pick up:<\/p>\n\n\n\n

\"\"
We replaced the font as the old ‘hand-written’ font was too difficult to read<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"

While developing the UI, I asked Paula to create a minimum of two UI elements. One button and one panel, and explained the process of 9-slicing 2D assets so that she could understand how to create the panel (By showing her this video). Menu UI She then sent me quick drafts to ask if this […]<\/p>\n","protected":false},"author":28,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[32],"tags":[],"class_list":["post-861","post","type-post","status-publish","format-standard","hentry","category-sprint-4"],"_links":{"self":[{"href":"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-json\/wp\/v2\/posts\/861","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-json\/wp\/v2\/users\/28"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-json\/wp\/v2\/comments?post=861"}],"version-history":[{"count":1,"href":"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-json\/wp\/v2\/posts\/861\/revisions"}],"predecessor-version":[{"id":881,"href":"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-json\/wp\/v2\/posts\/861\/revisions\/881"}],"wp:attachment":[{"href":"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-json\/wp\/v2\/media?parent=861"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-json\/wp\/v2\/categories?post=861"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sites.wsagames.com\/et4g23-yr3\/wp-json\/wp\/v2\/tags?post=861"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}