{"id":845,"date":"2024-12-04T01:09:24","date_gmt":"2024-12-04T01:09:24","guid":{"rendered":"https:\/\/sites.wsagames.com\/ea3g23\/?p=845"},"modified":"2025-01-11T22:09:47","modified_gmt":"2025-01-11T22:09:47","slug":"ui-ideas","status":"publish","type":"post","link":"https:\/\/sites.wsagames.com\/ea3g23\/2024\/12\/04\/ui-ideas\/","title":{"rendered":"UI Mockup, Ideas & Inspirations"},"content":{"rendered":"\n

These are some sketched UI concepts that I drew in my sketchbook. <\/p>\n\n\n\n

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

<\/p>\n\n\n\n

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

<\/p>\n\n\n\n

<\/p>\n\n\n\n

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

UI Inspiration: Fall Guys<\/h2>\n\n\n\n
\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n<\/figure>\n\n\n\n

I really love Fall Guys’ UI. It’s super colourful, pops out at you and generally feels like it’s trying to get the player excited for its fast-paced action. This is something I’d like to see in Oh, Rats! as I want the UI to be stimulating and engaging. My specific UI inspiration from Fall Guys is the Summary, Qualified screen and Menu Transitions. I love how fluid the menu transitions are – they’re so smooth like liquid! I’d love to see something like that in my game but more “pixelated”. The qualified screen UI would relate to something like winning a fight or a level. I like how it “pops out” at the player to alert them. I think overall, this is something that could help me establish my games’ identity. I want that vibrant playful essence of Fall Guys to add that energetic “kick” to the game. <\/p>\n\n\n\n

\n\n\n\n

Creating a UI scene in Blender (Normal Exploration UI)<\/h2>\n\n\n\n

On Thursday, I got some advice from Vanissa that I should show an example of my game UI. I wanted to be a bit extra with this project so I decided to create a scene in Blender so I could overlay the UI (like it would be in the game). I thought just drawing would be confusing for me, as I didn’t know how to start. Making the scene in Blender has proven to be way more fun, and I can use the models I created as intended. I posed the Rat to make them stand up like they were hiding in an alleyway, looking out to a city street. It took me some time to make the pose like I wanted it to, but the result was satisfactory.<\/p>\n\n\n

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

Making the pose<\/p>\n\n\n

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

I blocked out the colours on the pavement. I was going to create a custom texture, but then Blender’s texture was messing up for me, so I opted to use photos instead as a visualisation. In the final version of the game (published), all the texture would be done by hand. Can you see the vision here?<\/p>\n\n\n

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

Scene set-up<\/p>\n\n\n

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

Final scene set-up<\/p>\n\n\n\n

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

Final scene. It looks how I’d imagine the game but unpixelated.<\/p>\n\n\n\n

Image credits:
Pavement<\/a>
Graffiti Wall<\/a>
City Background<\/a><\/p>\n\n\n\n

\n\n\n\n

UI Iteration (Exploration Mockup)<\/h2>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n

Isolated UI<\/p>\n\n\n\n

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

I blocked out how the UI would be placed in the game. It’s really similar to the vision I had. However, this is absolutely not the be-all-end-all for the UI. If you are making my game, you can move around the UI, make it look more “bubbly” etc. Overall, I really like the the UI with the scene together, It feels like I’m in the game!<\/p>\n","protected":false},"excerpt":{"rendered":"

These are some sketched UI concepts that I drew in my sketchbook. UI Inspiration: Fall Guys I really love Fall Guys’ UI. It’s super colourful, pops out at you and generally feels like it’s trying to get the player excited for its fast-paced action. This is something I’d like to see in Oh, Rats! as…<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[],"class_list":["post-845","post","type-post","status-publish","format-standard","hentry","category-ideation-and-development"],"_links":{"self":[{"href":"https:\/\/sites.wsagames.com\/ea3g23\/wp-json\/wp\/v2\/posts\/845","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.wsagames.com\/ea3g23\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sites.wsagames.com\/ea3g23\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/ea3g23\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/ea3g23\/wp-json\/wp\/v2\/comments?post=845"}],"version-history":[{"count":26,"href":"https:\/\/sites.wsagames.com\/ea3g23\/wp-json\/wp\/v2\/posts\/845\/revisions"}],"predecessor-version":[{"id":2250,"href":"https:\/\/sites.wsagames.com\/ea3g23\/wp-json\/wp\/v2\/posts\/845\/revisions\/2250"}],"wp:attachment":[{"href":"https:\/\/sites.wsagames.com\/ea3g23\/wp-json\/wp\/v2\/media?parent=845"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.wsagames.com\/ea3g23\/wp-json\/wp\/v2\/categories?post=845"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sites.wsagames.com\/ea3g23\/wp-json\/wp\/v2\/tags?post=845"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}