{"id":1124,"date":"2025-01-12T01:12:11","date_gmt":"2025-01-12T01:12:11","guid":{"rendered":"https:\/\/sites.wsagames.com\/pv2g23\/?p=1124"},"modified":"2025-01-13T01:42:26","modified_gmt":"2025-01-13T01:42:26","slug":"hud-and-ui-concepts","status":"publish","type":"post","link":"https:\/\/sites.wsagames.com\/pv2g23\/2025\/01\/12\/hud-and-ui-concepts\/","title":{"rendered":"HUD and UI Concepts"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">In my game, I have come to realise after looking at a few RPGs, that not many of them have UIs. The vital things that are necessary to the game (such as the inventory), can be found in the pause menu. I think that following what most narrative RPGs will work out visually for my game as well. However, I still want to layout my main menu in an eye catching way for the player, the main menu&#8217;s buttons should compact and shouldn&#8217;t be far away from each other as this can make the player look at too many places at once.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1366\" height=\"1063\" src=\"https:\/\/sites.wsagames.com\/pv2g23\/wp-content\/uploads\/sites\/28\/2025\/01\/image-10-edited.png\" alt=\"\" class=\"wp-image-1126\" srcset=\"https:\/\/sites.wsagames.com\/pv2g23\/wp-content\/uploads\/sites\/28\/2025\/01\/image-10-edited.png 1366w, https:\/\/sites.wsagames.com\/pv2g23\/wp-content\/uploads\/sites\/28\/2025\/01\/image-10-edited-300x233.png 300w, https:\/\/sites.wsagames.com\/pv2g23\/wp-content\/uploads\/sites\/28\/2025\/01\/image-10-edited-1024x797.png 1024w, https:\/\/sites.wsagames.com\/pv2g23\/wp-content\/uploads\/sites\/28\/2025\/01\/image-10-edited-768x598.png 768w\" sizes=\"(max-width: 706px) 89vw, (max-width: 767px) 82vw, 740px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Above, I have come up with a few placements for the main menu. I was reviewing a few previous years GDDs and how they came up with their HUDs, UIs etc was that, they all stayed relatively minimal. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"395\" src=\"https:\/\/sites.wsagames.com\/pv2g23\/wp-content\/uploads\/sites\/28\/2025\/01\/image-11-1024x395.png\" alt=\"\" class=\"wp-image-1129\" srcset=\"https:\/\/sites.wsagames.com\/pv2g23\/wp-content\/uploads\/sites\/28\/2025\/01\/image-11-1024x395.png 1024w, https:\/\/sites.wsagames.com\/pv2g23\/wp-content\/uploads\/sites\/28\/2025\/01\/image-11-300x116.png 300w, https:\/\/sites.wsagames.com\/pv2g23\/wp-content\/uploads\/sites\/28\/2025\/01\/image-11-768x296.png 768w, https:\/\/sites.wsagames.com\/pv2g23\/wp-content\/uploads\/sites\/28\/2025\/01\/image-11.png 1483w\" sizes=\"(max-width: 706px) 89vw, (max-width: 767px) 82vw, 740px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Then, I did a couple of sketches of what the pause menu could look like as well. The second layout was heavily inspired by<em> Paper Lily<\/em> by Leef6010<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Feedback<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">I asked two people for their feedback for these concepts and how I can improve on these designs;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>&#8220;I think it&#8217;s a good thing that you want to keep your menu screen buttons close together, whenever I play games, I find it a bit annoying when buttons are spaced out. Although it&#8217;s a small design choice, it keeps my sanity in check.&#8221;<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>(In regards to the pause menu) &#8220;I think you should try to develop the second concept more. The first one is minimalistic- it can be good but I think for your game it would be nice if you had a more intricate design.&#8221;<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Finalised text layouts<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/sites.wsagames.com\/pv2g23\/wp-content\/uploads\/sites\/28\/2025\/01\/NEAM-menu-1024x576.jpg\" alt=\"\" class=\"wp-image-1127\" srcset=\"https:\/\/sites.wsagames.com\/pv2g23\/wp-content\/uploads\/sites\/28\/2025\/01\/NEAM-menu-1024x576.jpg 1024w, https:\/\/sites.wsagames.com\/pv2g23\/wp-content\/uploads\/sites\/28\/2025\/01\/NEAM-menu-300x169.jpg 300w, https:\/\/sites.wsagames.com\/pv2g23\/wp-content\/uploads\/sites\/28\/2025\/01\/NEAM-menu-768x432.jpg 768w, https:\/\/sites.wsagames.com\/pv2g23\/wp-content\/uploads\/sites\/28\/2025\/01\/NEAM-menu-1536x864.jpg 1536w, https:\/\/sites.wsagames.com\/pv2g23\/wp-content\/uploads\/sites\/28\/2025\/01\/NEAM-menu.jpg 1920w\" sizes=\"(max-width: 706px) 89vw, (max-width: 767px) 82vw, 740px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Finally, I came up with this as the main title screen. The point of this concept is to show where the text could go. I also added Nola&#8217;s hat as what is currently being selected.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/sites.wsagames.com\/pv2g23\/wp-content\/uploads\/sites\/28\/2025\/01\/Pause-menu-NEAM-1024x576.jpg\" alt=\"\" class=\"wp-image-1130\" srcset=\"https:\/\/sites.wsagames.com\/pv2g23\/wp-content\/uploads\/sites\/28\/2025\/01\/Pause-menu-NEAM-1024x576.jpg 1024w, https:\/\/sites.wsagames.com\/pv2g23\/wp-content\/uploads\/sites\/28\/2025\/01\/Pause-menu-NEAM-300x169.jpg 300w, https:\/\/sites.wsagames.com\/pv2g23\/wp-content\/uploads\/sites\/28\/2025\/01\/Pause-menu-NEAM-768x432.jpg 768w, https:\/\/sites.wsagames.com\/pv2g23\/wp-content\/uploads\/sites\/28\/2025\/01\/Pause-menu-NEAM-1536x864.jpg 1536w, https:\/\/sites.wsagames.com\/pv2g23\/wp-content\/uploads\/sites\/28\/2025\/01\/Pause-menu-NEAM.jpg 1920w\" sizes=\"(max-width: 706px) 89vw, (max-width: 767px) 82vw, 740px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">And here&#8217;s the mock up of the pause menu! I would also like to state that the back ground for the pause menu will be the current game the player is playing, but blurred.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In my game, I have come to realise after looking at a few RPGs, that not many of them have UIs. The vital things that are necessary to the game (such as the inventory), can be found in the pause menu. I think that following what most narrative RPGs will work out visually for my &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/sites.wsagames.com\/pv2g23\/2025\/01\/12\/hud-and-ui-concepts\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;HUD and UI Concepts&#8221;<\/span><\/a><\/p>\n","protected":false},"author":29,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1124","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/sites.wsagames.com\/pv2g23\/wp-json\/wp\/v2\/posts\/1124","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.wsagames.com\/pv2g23\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sites.wsagames.com\/pv2g23\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/pv2g23\/wp-json\/wp\/v2\/users\/29"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/pv2g23\/wp-json\/wp\/v2\/comments?post=1124"}],"version-history":[{"count":4,"href":"https:\/\/sites.wsagames.com\/pv2g23\/wp-json\/wp\/v2\/posts\/1124\/revisions"}],"predecessor-version":[{"id":1235,"href":"https:\/\/sites.wsagames.com\/pv2g23\/wp-json\/wp\/v2\/posts\/1124\/revisions\/1235"}],"wp:attachment":[{"href":"https:\/\/sites.wsagames.com\/pv2g23\/wp-json\/wp\/v2\/media?parent=1124"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.wsagames.com\/pv2g23\/wp-json\/wp\/v2\/categories?post=1124"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sites.wsagames.com\/pv2g23\/wp-json\/wp\/v2\/tags?post=1124"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}