{"id":431,"date":"2024-11-29T02:15:46","date_gmt":"2024-11-29T02:15:46","guid":{"rendered":"https:\/\/sites.wsagames.com\/pe1n23\/?p=431"},"modified":"2025-02-20T11:01:33","modified_gmt":"2025-02-20T11:01:33","slug":"ux-controls-research-development","status":"publish","type":"post","link":"https:\/\/sites.wsagames.com\/pe1n23\/ux-controls-research-development\/","title":{"rendered":"UX &amp; Controls Research &amp; Development"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">This week&#8217;s classes were focused on User Experience and UI, as well as touching on designing control schema.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Game UI Design<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">All Game UI&#8217;s are an interface made up of several components that relay information to the player, usually to help them achieve goals.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">They can usually be seperated into 4 types: <strong>Diegetic<\/strong>, <strong>Non-Diegetic<\/strong>, <strong>Spatial<\/strong>, and <strong>Meta <\/strong>UI components. The following video by Extra Credits gives an entertaining rundown of the 4 types and their differences, but I will also try to sum them up succinctly.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Diegetic UI - Realistic, or Distracting? - Extra Credits\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/-auyB19Mc6U?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Diegetic <\/strong>UI components exist within the same game world the characters are in. Examples include the map and compass in Firewatch, the ammo display on the back of the assault rifle in Halo and the suit showing your health in Dead Space.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/sites.wsagames.com\/pe1n23\/wp-content\/uploads\/sites\/10\/2025\/01\/deadspace1-1024x576.jpg\" alt=\"\" class=\"wp-image-432\" style=\"width:692px;height:auto\" srcset=\"https:\/\/sites.wsagames.com\/pe1n23\/wp-content\/uploads\/sites\/10\/2025\/01\/deadspace1-1024x576.jpg 1024w, https:\/\/sites.wsagames.com\/pe1n23\/wp-content\/uploads\/sites\/10\/2025\/01\/deadspace1-300x169.jpg 300w, https:\/\/sites.wsagames.com\/pe1n23\/wp-content\/uploads\/sites\/10\/2025\/01\/deadspace1-768x432.jpg 768w, https:\/\/sites.wsagames.com\/pe1n23\/wp-content\/uploads\/sites\/10\/2025\/01\/deadspace1-1536x864.jpg 1536w, https:\/\/sites.wsagames.com\/pe1n23\/wp-content\/uploads\/sites\/10\/2025\/01\/deadspace1.jpg 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Diagram courtesy of <a href=\"https:\/\/www.giantbomb.com\/profile\/gamer_152\/blog\/markers-i-a-deep-dive-into-dead-spaces-ui\/249377\/\">gamer_152 on Giant Bomb.<\/a> I heavily recommend reading this analysis of Dead Space&#8217;s diegetic UI.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Non-Diegetic<\/strong> components, however, are the classical elements we are used to in games: Components displayed on &#8220;screen&#8221; over the game world, that do not exist there. Examples include the classic life bar and ammo counter you see in the corners of a lot of games.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Spatial<\/strong> UI components do not exist within the game&#8217;s world, i.e. the characters within the world cannot see them, however, they are visually placed within the game space, floating or overlayed over objects and areas within the world. Examples include outlines around enemies, button prompts floating above interactable objects and name tags above friendly characters.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Meta <\/strong>UI components are somewhat opposite to spatial ones, as they technically do exist within the game world, but are intended for the player to see and not the character, sitting in between the game world and the non-diegetic UI screen. The most famous example of this is the &#8220;bloody screen&#8221; seen in first-person games. While it is intended to look &#8220;real&#8221; and grounded within the game world, it solely exists for the player to tell them they have low health.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">While my game could technically benefit from diegetic UI elements to emphasize the hand-crafted look of the collage art, I don&#8217;t think it is strictly necessary as my gameplay will have a lot of arcade-like elements, and immersion within the world is not a high priority over accessibility, readability, and fun. As a result I will most likely mainly make use of <strong>spatial<\/strong> UI components, for example to provide feedback of where ablities are being casted, as well as a small amount of <strong>non-diegetic<\/strong> components, most likely displaying the &#8220;energy&#8221; (working name) the player has left to perform said abilities.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I drew the following quick mockup of what a UI design for my game could look like, but this would need further polishing before implementing within my GDD.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This week&#8217;s classes were focused on User Experience and UI, as well as touching on designing control schema. Game UI Design All Game UI&#8217;s are an interface made up of several components that relay information to the player, usually to help them achieve goals. They can usually be seperated into 4 types: Diegetic, Non-Diegetic, Spatial, [&hellip;]<\/p>\n","protected":false},"author":11,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24,17,28],"tags":[15],"class_list":["post-431","post","type-post","status-publish","format-standard","hentry","category-development","category-research","category-semester-1","tag-gameplay"],"_links":{"self":[{"href":"https:\/\/sites.wsagames.com\/pe1n23\/wp-json\/wp\/v2\/posts\/431","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.wsagames.com\/pe1n23\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sites.wsagames.com\/pe1n23\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/pe1n23\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/pe1n23\/wp-json\/wp\/v2\/comments?post=431"}],"version-history":[{"count":2,"href":"https:\/\/sites.wsagames.com\/pe1n23\/wp-json\/wp\/v2\/posts\/431\/revisions"}],"predecessor-version":[{"id":435,"href":"https:\/\/sites.wsagames.com\/pe1n23\/wp-json\/wp\/v2\/posts\/431\/revisions\/435"}],"wp:attachment":[{"href":"https:\/\/sites.wsagames.com\/pe1n23\/wp-json\/wp\/v2\/media?parent=431"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.wsagames.com\/pe1n23\/wp-json\/wp\/v2\/categories?post=431"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sites.wsagames.com\/pe1n23\/wp-json\/wp\/v2\/tags?post=431"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}