{"id":1029,"date":"2025-05-12T14:52:03","date_gmt":"2025-05-12T14:52:03","guid":{"rendered":"https:\/\/sites.wsagames.com\/sl1c22\/?p=1029"},"modified":"2025-05-15T13:44:20","modified_gmt":"2025-05-15T13:44:20","slug":"ui-arts","status":"publish","type":"post","link":"https:\/\/sites.wsagames.com\/sl1c22\/2025\/05\/12\/ui-arts\/","title":{"rendered":"UI Arts"},"content":{"rendered":"\n

Game Main Page UI<\/strong><\/h2>\n\n\n\n

At first, I didn\u2019t fully understand the role of a technical artist, but I decided to start with the UI. Following Olivia\u2019s suggestion, we chose to design the entire screen to resemble a monitor or an old television set.<\/p>\n\n\n\n

I went through many iterations, since UI design isn\u2019t really my strength. I kept adjusting the button placements, but none of the layouts looked quite right. In the end, I decided to go back to the original version\u2014a symmetrical layout without the button location indicator. Later on, with Youth\u2019s help, we turned it into a dynamic UI.<\/p>\n\n\n\n

\"\"
First and final version<\/strong><\/figcaption><\/figure>\n\n\n\n
\"\"
Second version<\/strong><\/figcaption><\/figure>\n\n\n\n
\"\"
Third Version<\/strong><\/figcaption><\/figure>\n\n\n\n
\"\"
First Draft<\/strong><\/figcaption><\/figure>\n\n\n\n
\"\"
Main game UI reference<\/strong><\/figcaption><\/figure>\n\n\n\n

Game Inventory UI<\/strong><\/h2>\n\n\n\n

Since we had an item called the “evidence bag,” I wanted the inventory to feel like a document folder or file pouch. So I searched for a Kraft texture to use as the background and drew several boxes on it to display the evidence.<\/p>\n\n\n\n

\"\"
Inventory in the game<\/strong><\/figcaption><\/figure>\n\n\n\n
\"\"
Evidence name<\/strong><\/figcaption><\/figure>\n\n\n\n
\"\"
Evidence introduction <\/strong><\/figcaption><\/figure>\n\n\n\n
\"\"
Evidence introduction of text-based item (notes)<\/strong><\/figcaption><\/figure>\n\n\n\n
\"\"
Item and evidence UI that is displayed in the game scene.<\/strong><\/figcaption><\/figure>\n\n\n\n
\"\"
The item and evidence UI is displayed in the inventory.<\/strong><\/figcaption><\/figure>\n\n\n\n
\"\"
Inventory reference<\/strong><\/figcaption><\/figure>\n\n\n\n

Dialogue UI<\/strong><\/h2>\n\n\n\n

I used the built-in dialogue system from Fungus, but customized the UI to better fit our game’s style.<\/p>\n\n\n\n

I initially designed a dialogue box myself, but it clearly didn\u2019t fit the overall tone of the game. So I asked Youth to help by drawing a new frame for it, the same one we used for the inventory UI.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"
The UI for dialogues that take place in the past is black.<\/strong><\/figcaption><\/figure>\n\n\n\n
\"\"
This is Theodore Horton\u2018s dialogue system, so there is no portrait or name<\/strong><\/figcaption><\/figure>\n\n\n\n
\n

Main character dialogue system setting.<\/p>\n<\/div>

\"\"<\/figure><\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"
The UI for dialogues that take place in the past is black.<\/strong><\/figcaption><\/figure>\n\n\n\n
\n

Normal narration dialogue system setting.<\/p>\n<\/div>

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

Narration with a choice dialogue system setting<\/p>\n<\/div>

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

Narration in the middle, usually used to show date, dialogue system setting<\/p>\n<\/div>

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

This was my initial concept for the dialogue box, but it was created at a very early stage of development, before we even had the full background art. As a result, this version was eventually scrapped.<\/p>\n\n\n\n

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

Others<\/strong><\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

The icons used to close the inventory and flip pages were actually downloaded from PowerPoint\u2019s built-in icon library. I have to say, that feature is surprisingly useful\u2014the icons are clean, minimal, and fit perfectly. As for the question mark on the mouse cursor, it\u2019s taken from the FoglihtenNo07<\/em> font.<\/p>\n\n\n\n

More Information:<\/h5>\n\n\n\n