{"id":293,"date":"2025-07-01T15:47:41","date_gmt":"2025-07-01T05:47:41","guid":{"rendered":"https:\/\/nonlinearexperience.com\/?p=293"},"modified":"2025-07-10T17:01:11","modified_gmt":"2025-07-10T07:01:11","slug":"the-knowledge-ui","status":"publish","type":"post","link":"https:\/\/nonlinearexperience.com\/index.php\/2025\/07\/01\/the-knowledge-ui\/","title":{"rendered":"UI"},"content":{"rendered":"<h1 class=\"wp-block-post-title\">UI<\/h1>\n\n\n<p class=\"wp-block-paragraph\">Principles:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>should be quick and easy to achieve task<\/li>\n\n\n\n<li>should be obvious WHERE we are and how to get where we want<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">This are the elements:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>menus<\/li>\n\n\n\n<li>text boxes<\/li>\n\n\n\n<li>HUD<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Use React to handle UI<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/jslegenddev.substack.com\/p\/why-use-react-for-game-development\">https:\/\/jslegenddev.substack.com\/p\/why-use-react-for-game-development<\/a><\/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 loading=\"lazy\" title=\"How to Use React.js for Game Development - Tutorial\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/w4EAML-8zGk?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\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I do like the alpha insettion options on the SNES &#8211; where you scroll off the left hand of the page, and loop back around.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Cues from Apple HUI guidelines are useful<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Inventory<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Well, this below is not a solution, but rather, a rant about how badly inventory systems are invariably done&#8230;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.gamedeveloper.com\/design\/inventory\">https:\/\/www.gamedeveloper.com\/design\/inventory<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This is interesting:<\/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 loading=\"lazy\" title=\"How to Design a good INVENTORY SYSTEM - Indie Game Development- DEVLOG #2\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/KyFcGYX7bKw?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\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Combining items etc.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">grid inventory &#8211; like diablo<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">weighted inventory &#8211; the witcher<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/pablo.gg\/en\/blog\/coding\/creating-a-dialog-box-with-react-for-a-phaser-game\">https:\/\/pablo.gg\/en\/blog\/coding\/creating-a-dialog-box-with-react-for-a-phaser-game<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/pablo.gg\/en\/blog\/coding\/how-to-create-a-top-down-rpg-maker-like-game-with-phaser-js-and-react\">https:\/\/pablo.gg\/en\/blog\/coding\/how-to-create-a-top-down-rpg-maker-like-game-with-phaser-js-and-react<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Diegetic UI<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">I really like this idea<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">but, needs to be designed with this as the base line&#8230; go HUDless&#8230;<\/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 loading=\"lazy\" title=\"The Power of Diegetic UI\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/TYkoGVYMMuY?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\"><\/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 loading=\"lazy\" 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\"><a href=\"https:\/\/icewyrmgames.github.io\/research\/user-interface-design-in-video-games\">https:\/\/icewyrmgames.github.io\/research\/user-interface-design-in-video-games<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Principles: This are the elements: Use React to handle UI https:\/\/jslegenddev.substack.com\/p\/why-use-react-for-game-development I do like the alpha insettion options on the SNES &#8211; where you scroll off the left hand of the page, and loop back around. Cues from Apple HUI guidelines are useful Inventory Well, this below is not a solution, but rather, a rant [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"wp-custom-template-nlx-the-knowledge-page","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-293","post","type-post","status-publish","format-standard","hentry","category-the-knowledge"],"_links":{"self":[{"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/posts\/293","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/comments?post=293"}],"version-history":[{"count":6,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/posts\/293\/revisions"}],"predecessor-version":[{"id":479,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/posts\/293\/revisions\/479"}],"wp:attachment":[{"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/media?parent=293"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/categories?post=293"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/tags?post=293"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}