{"id":532,"date":"2024-12-21T19:20:38","date_gmt":"2024-12-21T19:20:38","guid":{"rendered":"https:\/\/sites.wsagames.com\/et4g23\/?p=532"},"modified":"2024-12-22T23:58:22","modified_gmt":"2024-12-22T23:58:22","slug":"ui-hud","status":"publish","type":"post","link":"https:\/\/sites.wsagames.com\/et4g23\/2024\/12\/21\/ui-hud\/","title":{"rendered":"UI &amp; HUD"},"content":{"rendered":"\n<p class=\"has-background\" style=\"background-color:#dfdfdf\">A game\u2019s UI (User Interface) and HUD (Heads up Display) are essential to creating a good game experience, it provides the player with vital information and provides feedback for their actions.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">World Map<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"573\" src=\"https:\/\/sites.wsagames.com\/et4g23\/wp-content\/uploads\/sites\/27\/2024\/12\/image-32-1024x573.png\" alt=\"\" class=\"wp-image-592\" srcset=\"https:\/\/sites.wsagames.com\/et4g23\/wp-content\/uploads\/sites\/27\/2024\/12\/image-32-1024x573.png 1024w, https:\/\/sites.wsagames.com\/et4g23\/wp-content\/uploads\/sites\/27\/2024\/12\/image-32-300x168.png 300w, https:\/\/sites.wsagames.com\/et4g23\/wp-content\/uploads\/sites\/27\/2024\/12\/image-32-768x430.png 768w, https:\/\/sites.wsagames.com\/et4g23\/wp-content\/uploads\/sites\/27\/2024\/12\/image-32-850x475.png 850w, https:\/\/sites.wsagames.com\/et4g23\/wp-content\/uploads\/sites\/27\/2024\/12\/image-32.png 1273w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">HUD<\/h2>\n\n\n\n<p>Mock-up HUD, using the Witcher 3: Wild Hunt gameplay as a background:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"955\" height=\"533\" src=\"https:\/\/sites.wsagames.com\/et4g23\/wp-content\/uploads\/sites\/27\/2024\/12\/image-28.png\" alt=\"\" class=\"wp-image-585\" srcset=\"https:\/\/sites.wsagames.com\/et4g23\/wp-content\/uploads\/sites\/27\/2024\/12\/image-28.png 955w, https:\/\/sites.wsagames.com\/et4g23\/wp-content\/uploads\/sites\/27\/2024\/12\/image-28-300x167.png 300w, https:\/\/sites.wsagames.com\/et4g23\/wp-content\/uploads\/sites\/27\/2024\/12\/image-28-768x429.png 768w, https:\/\/sites.wsagames.com\/et4g23\/wp-content\/uploads\/sites\/27\/2024\/12\/image-28-850x474.png 850w\" sizes=\"(max-width: 955px) 100vw, 955px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Skill Tree<\/h2>\n\n\n\n<p>This is a mock-up of what the<strong> skill tree<\/strong> will look like in game, skills that are have links to them are locked until the skill before it is unlocked.  Starter skills, the large skills closer to the middle, are only available to be unlocked when the first area in the corresponding boss&#8217;s area is complete. For example, &#8216;Fire Ball&#8217; can only be unlocked after the first area of the Demon King&#8217;s region is completed.<\/p>\n\n\n\n<p>The larger the icon of the skill is, the better the skill is &#8211; however, this means that the skill costs more <strong>SP <\/strong>(Skill Points). Each skill element has its own corner in the skill tree, yet they all require <strong>SP<\/strong> to unlock.<\/p>\n\n\n\n<p><strong>Red <\/strong>&#8211; Fire Skills | <strong>Blue <\/strong>&#8211; Ice Skills | <strong>Purple <\/strong>&#8211; Shadow Skills | <strong>Green <\/strong>&#8211; Trickster Skills<\/p>\n\n\n\n<p>Skill Elements in a clockwise direction are <strong>weaker<\/strong>, whereas ones that are anti-clockwise are <strong>stronger<\/strong>. For example: Fire is strong against Ice (anti-clockwise) , Fire is weak to Shadow (clockwise).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"996\" height=\"985\" src=\"https:\/\/sites.wsagames.com\/et4g23\/wp-content\/uploads\/sites\/27\/2024\/12\/image-19.png\" alt=\"\" class=\"wp-image-533\" srcset=\"https:\/\/sites.wsagames.com\/et4g23\/wp-content\/uploads\/sites\/27\/2024\/12\/image-19.png 996w, https:\/\/sites.wsagames.com\/et4g23\/wp-content\/uploads\/sites\/27\/2024\/12\/image-19-300x297.png 300w, https:\/\/sites.wsagames.com\/et4g23\/wp-content\/uploads\/sites\/27\/2024\/12\/image-19-768x760.png 768w, https:\/\/sites.wsagames.com\/et4g23\/wp-content\/uploads\/sites\/27\/2024\/12\/image-19-850x841.png 850w\" sizes=\"(max-width: 996px) 100vw, 996px\" \/><\/figure>\n\n\n\n<p>These skills can be <strong>inspected <\/strong>in order to read the skill&#8217;s <strong>description<\/strong>, found out how many<strong> SP <\/strong>it <strong>costs<\/strong> before unlocking, and <strong>upgrading <\/strong>skills that are already unlocked.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"670\" height=\"516\" src=\"https:\/\/sites.wsagames.com\/et4g23\/wp-content\/uploads\/sites\/27\/2024\/12\/image-20.png\" alt=\"\" class=\"wp-image-534\" srcset=\"https:\/\/sites.wsagames.com\/et4g23\/wp-content\/uploads\/sites\/27\/2024\/12\/image-20.png 670w, https:\/\/sites.wsagames.com\/et4g23\/wp-content\/uploads\/sites\/27\/2024\/12\/image-20-300x231.png 300w\" sizes=\"(max-width: 670px) 100vw, 670px\" \/><\/figure>\n\n\n\n<p>These upgrade and skill descriptions can be found in the <a href=\"https:\/\/sites.wsagames.com\/et4g23\/2024\/12\/20\/skills\/\">skills<\/a> tab in the GDD.<\/p>\n\n\n\n<p>While unlocking skills, the player will be made to <strong>hold <\/strong>the unlock button, this is to ensure players don&#8217;t spend their SP accidentally. Furthermore, the use of SP can be <strong>un-done<\/strong> as long as the player hasn&#8217;t exited the skill tree. Lastly, when the player has finished using the skill tree, they will be prompted with<strong> &#8216;Are you sure?&#8217;<\/strong> to allow them to put one last thought into their expenditures.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A game\u2019s UI (User Interface) and HUD (Heads up Display) are essential to creating a good game experience, it provides the player with vital information and provides feedback for their actions. World Map HUD Mock-up HUD, using the Witcher 3: Wild Hunt gameplay as a background: Skill Tree This is a mock-up of what the&#8230;<\/p>\n","protected":false},"author":28,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-532","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>UI &amp; HUD - E-Jay Tripoli (Year 2 Archive)<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sites.wsagames.com\/et4g23\/2024\/12\/21\/ui-hud\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UI &amp; HUD - E-Jay Tripoli (Year 2 Archive)\" \/>\n<meta property=\"og:description\" content=\"A game\u2019s UI (User Interface) and HUD (Heads up Display) are essential to creating a good game experience, it provides the player with vital information and provides feedback for their actions. World Map HUD Mock-up HUD, using the Witcher 3: Wild Hunt gameplay as a background: Skill Tree This is a mock-up of what the...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sites.wsagames.com\/et4g23\/2024\/12\/21\/ui-hud\/\" \/>\n<meta property=\"og:site_name\" content=\"E-Jay Tripoli (Year 2 Archive)\" \/>\n<meta property=\"article:published_time\" content=\"2024-12-21T19:20:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-22T23:58:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/sites.wsagames.com\/et4g23\/wp-content\/uploads\/sites\/27\/2024\/12\/image-32-1024x573.png\" \/>\n<meta name=\"author\" content=\"et4g23\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"et4g23\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sites.wsagames.com\/et4g23\/2024\/12\/21\/ui-hud\/\",\"url\":\"https:\/\/sites.wsagames.com\/et4g23\/2024\/12\/21\/ui-hud\/\",\"name\":\"UI &amp; HUD - E-Jay Tripoli (Year 2 Archive)\",\"isPartOf\":{\"@id\":\"https:\/\/sites.wsagames.com\/et4g23\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sites.wsagames.com\/et4g23\/2024\/12\/21\/ui-hud\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sites.wsagames.com\/et4g23\/2024\/12\/21\/ui-hud\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sites.wsagames.com\/et4g23\/wp-content\/uploads\/sites\/27\/2024\/12\/image-32-1024x573.png\",\"datePublished\":\"2024-12-21T19:20:38+00:00\",\"dateModified\":\"2024-12-22T23:58:22+00:00\",\"author\":{\"@id\":\"https:\/\/sites.wsagames.com\/et4g23\/#\/schema\/person\/56387a1dc0de878bb33ce4c478f22963\"},\"breadcrumb\":{\"@id\":\"https:\/\/sites.wsagames.com\/et4g23\/2024\/12\/21\/ui-hud\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sites.wsagames.com\/et4g23\/2024\/12\/21\/ui-hud\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sites.wsagames.com\/et4g23\/2024\/12\/21\/ui-hud\/#primaryimage\",\"url\":\"https:\/\/sites.wsagames.com\/et4g23\/wp-content\/uploads\/sites\/27\/2024\/12\/image-32.png\",\"contentUrl\":\"https:\/\/sites.wsagames.com\/et4g23\/wp-content\/uploads\/sites\/27\/2024\/12\/image-32.png\",\"width\":1273,\"height\":712},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sites.wsagames.com\/et4g23\/2024\/12\/21\/ui-hud\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sites.wsagames.com\/et4g23\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"UI &amp; HUD\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/sites.wsagames.com\/et4g23\/#website\",\"url\":\"https:\/\/sites.wsagames.com\/et4g23\/\",\"name\":\"E-Jay Tripoli (Year 2 Archive)\",\"description\":\"A documentation of my work for Year 2 - Studying Games Design and Art at the University of Southampton\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/sites.wsagames.com\/et4g23\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/sites.wsagames.com\/et4g23\/#\/schema\/person\/56387a1dc0de878bb33ce4c478f22963\",\"name\":\"et4g23\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sites.wsagames.com\/et4g23\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/477d521b3b86e4ef27181bf784cd1a145a38c7d6a0154a478d3c858d26298bec?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/477d521b3b86e4ef27181bf784cd1a145a38c7d6a0154a478d3c858d26298bec?s=96&d=mm&r=g\",\"caption\":\"et4g23\"},\"url\":\"https:\/\/sites.wsagames.com\/et4g23\/author\/et4g23\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"UI &amp; HUD - E-Jay Tripoli (Year 2 Archive)","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/sites.wsagames.com\/et4g23\/2024\/12\/21\/ui-hud\/","og_locale":"en_US","og_type":"article","og_title":"UI &amp; HUD - E-Jay Tripoli (Year 2 Archive)","og_description":"A game\u2019s UI (User Interface) and HUD (Heads up Display) are essential to creating a good game experience, it provides the player with vital information and provides feedback for their actions. World Map HUD Mock-up HUD, using the Witcher 3: Wild Hunt gameplay as a background: Skill Tree This is a mock-up of what the...","og_url":"https:\/\/sites.wsagames.com\/et4g23\/2024\/12\/21\/ui-hud\/","og_site_name":"E-Jay Tripoli (Year 2 Archive)","article_published_time":"2024-12-21T19:20:38+00:00","article_modified_time":"2024-12-22T23:58:22+00:00","og_image":[{"url":"https:\/\/sites.wsagames.com\/et4g23\/wp-content\/uploads\/sites\/27\/2024\/12\/image-32-1024x573.png","type":"","width":"","height":""}],"author":"et4g23","twitter_card":"summary_large_image","twitter_misc":{"Written by":"et4g23","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/sites.wsagames.com\/et4g23\/2024\/12\/21\/ui-hud\/","url":"https:\/\/sites.wsagames.com\/et4g23\/2024\/12\/21\/ui-hud\/","name":"UI &amp; HUD - E-Jay Tripoli (Year 2 Archive)","isPartOf":{"@id":"https:\/\/sites.wsagames.com\/et4g23\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sites.wsagames.com\/et4g23\/2024\/12\/21\/ui-hud\/#primaryimage"},"image":{"@id":"https:\/\/sites.wsagames.com\/et4g23\/2024\/12\/21\/ui-hud\/#primaryimage"},"thumbnailUrl":"https:\/\/sites.wsagames.com\/et4g23\/wp-content\/uploads\/sites\/27\/2024\/12\/image-32-1024x573.png","datePublished":"2024-12-21T19:20:38+00:00","dateModified":"2024-12-22T23:58:22+00:00","author":{"@id":"https:\/\/sites.wsagames.com\/et4g23\/#\/schema\/person\/56387a1dc0de878bb33ce4c478f22963"},"breadcrumb":{"@id":"https:\/\/sites.wsagames.com\/et4g23\/2024\/12\/21\/ui-hud\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sites.wsagames.com\/et4g23\/2024\/12\/21\/ui-hud\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sites.wsagames.com\/et4g23\/2024\/12\/21\/ui-hud\/#primaryimage","url":"https:\/\/sites.wsagames.com\/et4g23\/wp-content\/uploads\/sites\/27\/2024\/12\/image-32.png","contentUrl":"https:\/\/sites.wsagames.com\/et4g23\/wp-content\/uploads\/sites\/27\/2024\/12\/image-32.png","width":1273,"height":712},{"@type":"BreadcrumbList","@id":"https:\/\/sites.wsagames.com\/et4g23\/2024\/12\/21\/ui-hud\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sites.wsagames.com\/et4g23\/"},{"@type":"ListItem","position":2,"name":"UI &amp; HUD"}]},{"@type":"WebSite","@id":"https:\/\/sites.wsagames.com\/et4g23\/#website","url":"https:\/\/sites.wsagames.com\/et4g23\/","name":"E-Jay Tripoli (Year 2 Archive)","description":"A documentation of my work for Year 2 - Studying Games Design and Art at the University of Southampton","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sites.wsagames.com\/et4g23\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/sites.wsagames.com\/et4g23\/#\/schema\/person\/56387a1dc0de878bb33ce4c478f22963","name":"et4g23","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sites.wsagames.com\/et4g23\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/477d521b3b86e4ef27181bf784cd1a145a38c7d6a0154a478d3c858d26298bec?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/477d521b3b86e4ef27181bf784cd1a145a38c7d6a0154a478d3c858d26298bec?s=96&d=mm&r=g","caption":"et4g23"},"url":"https:\/\/sites.wsagames.com\/et4g23\/author\/et4g23\/"}]}},"_links":{"self":[{"href":"https:\/\/sites.wsagames.com\/et4g23\/wp-json\/wp\/v2\/posts\/532","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.wsagames.com\/et4g23\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sites.wsagames.com\/et4g23\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/et4g23\/wp-json\/wp\/v2\/users\/28"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/et4g23\/wp-json\/wp\/v2\/comments?post=532"}],"version-history":[{"count":7,"href":"https:\/\/sites.wsagames.com\/et4g23\/wp-json\/wp\/v2\/posts\/532\/revisions"}],"predecessor-version":[{"id":594,"href":"https:\/\/sites.wsagames.com\/et4g23\/wp-json\/wp\/v2\/posts\/532\/revisions\/594"}],"wp:attachment":[{"href":"https:\/\/sites.wsagames.com\/et4g23\/wp-json\/wp\/v2\/media?parent=532"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.wsagames.com\/et4g23\/wp-json\/wp\/v2\/categories?post=532"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sites.wsagames.com\/et4g23\/wp-json\/wp\/v2\/tags?post=532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}