{"id":1068,"date":"2025-12-07T15:50:50","date_gmt":"2025-12-07T05:50:50","guid":{"rendered":"https:\/\/nonlinearexperience.com\/?p=1068"},"modified":"2025-12-14T08:00:57","modified_gmt":"2025-12-13T22:00:57","slug":"log-1-8-12-25-14-12-25","status":"publish","type":"post","link":"https:\/\/nonlinearexperience.com\/index.php\/2025\/12\/07\/log-1-8-12-25-14-12-25\/","title":{"rendered":"Log 2 &#8211; 8.12.25-14.12.25"},"content":{"rendered":"\n<p class=\"has-medium-font-size\">STAGE: Pre-production &#8211; Game Design and Promotion<\/p>\n\n\n\n<p>KEEP DRAWING AND BONING UP ON JS&#8230;<\/p>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">Mon 8 Dec &#8211; Sun 14th Dec<\/h2>\n\n\n\n<p>Focus of the week: game as user interface &#8211; how screen design conveys game information &#8211; visual cues to guide player&#8230; &#8211; from the reading, playing and planning&#8230;<\/p>\n\n\n\n<span class=\"zp-InText-zp-ID--7544373-UNS452E4--wp1068 zp-InText-Citation loading\" rel=\"{ 'pages': 'np', 'items': '{7544373:UNS452E4}', 'format': '(%a%, %d%, %p%)', 'brackets': '', 'etal': '', 'separator': '', 'and': '' }\"><\/span>\n\n\n\n<p><\/p>\n\n\n\n<p class=\"has-large-font-size\">Mon<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Reading and analysis<\/li>\n\n\n\n<li>Llanos, S. C., &amp; J\u00f8rgensen, K. (2011, January 1). <em>Do Players Prefer Integrated User Interfaces? A Qualitative Study of Game UI Design Issues<\/em>. Proceedings of DiGRA 2011 Conference: Think Design Play. <a href=\"https:\/\/doi.org\/10.26503\/dl.v2011i1.514\">https:\/\/doi.org\/10.26503\/dl.v2011i1.514<\/a><\/li>\n\n\n\n<li>Fagerholt, E., Lorentzon, M., &amp; Bj\u00f6rk, S. (2009). <em>Beyond the HUD &#8211; User Interfaces for Increased Player Immersion in FPS Games<\/em>.<\/li>\n\n\n\n<li><\/li>\n\n\n\n<li><\/li>\n\n\n\n<li>user interface design principles &#8211; as applied to video game design\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.justinmind.com\/ui-design\/game\">https:\/\/www.justinmind.com\/ui-design\/game<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/dev.to\/uicraft_by_pratik\/mastering-uiux-game-design-a-comprehensive-guide-be8\">https:\/\/dev.to\/uicraft_by_pratik\/mastering-uiux-game-design-a-comprehensive-guide-be8<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/docs.monogame.net\/articles\/tutorials\/building_2d_games\/19_user_interface_fundamentals\/\">https:\/\/docs.monogame.net\/articles\/tutorials\/building_2d_games\/19_user_interface_fundamentals\/<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/punchev.com\/blog\/10-essential-ui-design-principles-every-designer-should-know\">https:\/\/punchev.com\/blog\/10-essential-ui-design-principles-every-designer-should-know<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>ok, i am NOT talking about User Interface &#8211; I am talking about how game world is designed to convey narrative information etc. from a sprite perspective&#8230;<\/li>\n\n\n\n<li><\/li>\n\n\n\n<li>use of size\/detail\/placement\/texture\/tone\/colour etc.<\/li>\n<\/ul>\n\n\n\n<p>Examples<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>for player stats &#8211; change sounds of sprites to convey status &#8211; an example is in Links Awakening &#8211; power-ups that have limited expiry time use a special music piece whist active, then it finishes when the power-up runs out. It&#8217;s an effective way to indicate the time limit &#8211; and the music is quite hyped, adding to the sense of urgent clock tickery.<\/li>\n\n\n\n<li>Links awakening &#8211; once you leave the first house, in search of the beach to the south, the level design supports the path you need to take &#8211; the path stands out and is made VERY obvious to the player<\/li>\n\n\n\n<li>There is a heirarchy of <\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>take aways\n<ul class=\"wp-block-list\">\n<li>I am a big fan of having the game world convey as much of he information as possible<\/li>\n\n\n\n<li>The heirarchy of importance in a game screen &#8211; how these things read etc&#8230; this can also be contextual, so needs to be carefully balanced&#8230;<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p class=\"has-large-font-size\">Tues<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Project work 1<\/li>\n\n\n\n<li>At least enough to <\/li>\n\n\n\n<li>developing a visual style\n<ul class=\"wp-block-list\">\n<li>what are the immovable constraints<\/li>\n\n\n\n<li>what do we need to draw from<\/li>\n\n\n\n<li>i like the way in b and w graphics they slowly meld from the black describing the texture to white describing it<\/li>\n\n\n\n<li>purposes &#8211; in game &#8211; cutscenes<\/li>\n\n\n\n<li>https:\/\/twinwingames.com\/guide-to-2d-game-art\/<\/li>\n\n\n\n<li>look at analysis of things i like as well as devligs by those that inspire &#8211; pedro medeiros<\/li>\n\n\n\n<li>how do they handle detail and readability in backgrounds, scenes, etc. characters, props &#8211; size, detail, animation, scenes etc. textures, tone etc. scale<\/li>\n\n\n\n<li>https:\/\/www.patreon.com\/posts\/gamedev-city-97987324<\/li>\n\n\n\n<li>patreon<\/li>\n\n\n\n<li>I ike a style where everything is doing something &#8211; nothing is superfluous&#8230;<\/li>\n\n\n\n<li><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>4 colours (255 &#8211; 100%, 170 &#8211; 67%, 85 &#8211; 33%, 0) &#8211; after looking at the graphics in \n<ul class=\"wp-block-list\">\n<li>Creating depth in textures etc.\n<ul class=\"wp-block-list\">\n<li>Foreground use only three colours\n<ul class=\"wp-block-list\">\n<li>black for shadows and outline (yeah, I know, not a fan of them&#8230;)<\/li>\n\n\n\n<li>dark grey for base<\/li>\n\n\n\n<li>light grey for highlights<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Midground use only three colours\n<ul class=\"wp-block-list\">\n<li>dark grey for shadows and outline (yeah, I know, not a fan of them&#8230;)<\/li>\n\n\n\n<li>light grey for base<\/li>\n\n\n\n<li>white for highlights<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Background use only light grey<\/li>\n\n\n\n<li>actual background is white<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>This logic applies to <\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p class=\"has-large-font-size\">Wed<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Game play &#8211; continue with current game and notes etc.<\/li>\n\n\n\n<li>Play for an hour &#8211; make notes<\/li>\n<\/ul>\n\n\n\n<p>The Legend of Zelda &#8211; Link&#8217;s Awakening &#8211; screen composition and graphics<\/p>\n\n\n\n<p>look at context and purpose of graphics &#8211; heirarchy, use of texture and tone to convey important information &#8211; in a way, it follows user interface design principles&#8230;<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Takeaways for Subliminor<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><\/li>\n<\/ul>\n\n\n\n<p class=\"has-large-font-size\">Thu<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Project work 2 &#8211; Pre production &#8211; <\/li>\n<\/ul>\n\n\n\n<p class=\"has-large-font-size\">More detailed sketches for intro cutscene<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>mock up the Intro Cutscene properly &#8211; more high fidelity pen and paper&#8230;<\/li>\n\n\n\n<li>Focusing more on the compositions&#8230;<\/li>\n\n\n\n<li><\/li>\n\n\n\n<li>break down the intro into the parts<\/li>\n\n\n\n<li>The approach &#8211; shape &#8211; light &#8211; detail (this bit depends on the purpose and context &#8211; e.g. if its in the background &#8211; consider limiting this, possibly to 0<\/li>\n\n\n\n<li>storm clouds &#8211; side on view &#8211; start with a series of circles &#8211; on mass, they have a flow because they are in a group- light from above\/behind top left &#8211; \n<ul class=\"wp-block-list\">\n<li>pedro says: Start by thinking in groups of spheres with a flat base<\/li>\n\n\n\n<li>calm clouds &#8211; side on view &#8211; limit detail as it is in the background<\/li>\n\n\n\n<li>rain &#8211; side on view<\/li>\n\n\n\n<li>wind whisps &#8211; side on view<\/li>\n\n\n\n<li>sea mist flurries &#8211; side on view<\/li>\n\n\n\n<li>waves on beach &#8211; 3\/4 view &#8211; these are distant, only need to be a few curved lines&#8230;<\/li>\n\n\n\n<li>rock with logo &#8211; side on view<\/li>\n\n\n\n<li>calm scene of the bay &#8211; headland in distance &#8211; side on view &#8211; refer to initial sketch &#8211; <\/li>\n\n\n\n<li>calm scene of the bay &#8211; the main rock bits&#8230;3\/4 view<\/li>\n\n\n\n<li>top half of character from behind &#8211; 3\/4 view<\/li>\n\n\n\n<li>sparkly\/glinty sand &#8211; side on view<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Aiming for the style that has as few outlines as possible &#8211; e.g. transitioning from one shade to another doesn&#8217;t have an outline (I mean, why do that???)<\/li>\n\n\n\n<li>Get reference&#8230;<\/li>\n\n\n\n<li><a href=\"https:\/\/saint11.art\/blog\/pixel-art-tutorials\/#Clouds\">https:\/\/saint11.art\/blog\/pixel-art-tutorials\/#Clouds<\/a><\/li>\n\n\n\n<li>Interestingly, the b.g clouds here are just the thing I think: <a href=\"https:\/\/saint11.art\/blog\/pixel-art-tutorials\/#Ruins\">https:\/\/saint11.art\/blog\/pixel-art-tutorials\/#Ruins<\/a><\/li>\n\n\n\n<li>This is the one for the character: <a href=\"https:\/\/saint11.art\/blog\/pixel-art-tutorials\/#TopDownWalkCycle\">https:\/\/saint11.art\/blog\/pixel-art-tutorials\/#TopDownWalkCycle<\/a> and this one: <a href=\"https:\/\/saint11.art\/blog\/pixel-art-tutorials\/#TopDownRun\">https:\/\/saint11.art\/blog\/pixel-art-tutorials\/#TopDownRun<\/a><\/li>\n\n\n\n<li>2 tone<\/li>\n\n\n\n<li>QR code of subliminor.com<\/li>\n<\/ul>\n\n\n\n<p class=\"has-large-font-size\">Fri<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Project work 3 &#8211; mockup website &#8211; it will be charcoal black &#8211; with a square in the middle &#8211; that is the &#8216;game screen&#8217; &#8211; it will be 2x scale ()<\/li>\n\n\n\n<li>also add in links to discord channel and nlx dev blog<\/li>\n\n\n\n<li>geeze i am rusty on css and html! yikes!<\/li>\n<\/ul>\n\n\n\n<p class=\"has-large-font-size\">Sat<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Finish off tasks or, if done &#8211; start another task&#8230;<\/li>\n\n\n\n<li><\/li>\n\n\n\n<li>do the tutorial<\/li>\n\n\n\n<li>icon\/logo &#8211; design to work at small scale&#8230;<\/li>\n<\/ul>\n\n\n\n<p class=\"has-large-font-size\">Sun<\/p>\n\n\n\n<p>A quick catch up session<\/p>\n\n\n\n<p>Takeaways<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Today is making the web page!!!<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p class=\"has-large-font-size\">The doing&#8230;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Hour 1 &#8211; document and update log of things done (this page)<\/li>\n\n\n\n<li>Hour 2 &#8211; add tasks to the next one&#8230; (include a link to it from here&#8230;)<\/li>\n<\/ul>\n\n\n\n<p>HOUR 3 and 4 &#8211; Tutorial\/learning thing &#8211; do that tute in the GBStudio world building book<\/p>\n\n\n\n<p>Lesson for the week &#8211; <\/p>\n\n\n\n<p class=\"has-large-font-size\">QUESTIONS<\/p>\n\n\n\n<p>keep adding them, and keep rolling them over&#8230;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>develop initial style guide as a starting point &#8211; develop a starter style guide &#8211; link to pinterest<\/li>\n\n\n\n<li>set up pipeline &#8211; 1. work on local machine &#8211; using VScode 2. commit to gitlab &#8211; 3. posted on site<\/li>\n\n\n\n<li>mockup intro cutscene in aesprite<\/li>\n\n\n\n<li><\/li>\n\n\n\n<li>tidy up the game design doc<\/li>\n\n\n\n<li>create icon for discord etc. &#8211; a shape that reads properly<\/li>\n\n\n\n<li>examples of multiple ways of accessing game world data &#8211; not necessarily the SAME game rendered for different devices and platforms &#8211; but ways of accessing the game world using different APPS on the SAME device\/platform&#8230;<\/li>\n\n\n\n<li>looking at ways of interacting with the gameworld &#8211; via handheld devices &#8211; what are some solutions from different games?<\/li>\n\n\n\n<li>how could i incorporate paper mechanics and cutouts?<\/li>\n\n\n\n<li>build in 30 mins of drawing activity every day please! and then, on to watercolour etc.<\/li>\n\n\n\n<li>add in a place to capture questions\/tasks that need to be investigated\/done and can be added to the list every week&#8230;<\/li>\n\n\n\n<li><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>STAGE: Pre-production &#8211; Game Design and Promotion KEEP DRAWING AND BONING UP ON JS&#8230; Mon 8 Dec &#8211; Sun 14th Dec Focus of the week: game as user interface &#8211; how screen design conveys game information &#8211; visual cues to guide player&#8230; &#8211; from the reading, playing and planning&#8230; Mon Examples Tues Wed The Legend [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-1068","post","type-post","status-publish","format-standard","hentry","category-dev-log"],"_links":{"self":[{"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/posts\/1068","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=1068"}],"version-history":[{"count":16,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/posts\/1068\/revisions"}],"predecessor-version":[{"id":1097,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/posts\/1068\/revisions\/1097"}],"wp:attachment":[{"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/media?parent=1068"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/categories?post=1068"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/tags?post=1068"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}