{"id":759,"date":"2024-07-29T21:43:22","date_gmt":"2024-07-29T21:43:22","guid":{"rendered":"https:\/\/abdoubouam.com\/?p=759"},"modified":"2024-07-30T13:08:15","modified_gmt":"2024-07-30T13:08:15","slug":"devlog-week-32","status":"publish","type":"post","link":"https:\/\/abdoubouam.com\/index.php\/2024\/07\/29\/devlog-week-32\/","title":{"rendered":"Devlog Week 32"},"content":{"rendered":"\n<p>A quick summary of this week&#8217;s development<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Accessibility<\/h2>\n\n\n\n<p>I tested a &#8220;one handed&#8221; mode, using only the mouse. It&#8217;s just an experiment for the moment.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video controls src=\"http:\/\/abdoubouam.com\/wp-content\/uploads\/one_handed.mp4\"><\/video><figcaption class=\"wp-element-caption\">One-handed mode gameplay<\/figcaption><\/figure>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"543\" src=\"http:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/layout.jpg\" alt=\"\" class=\"wp-image-752\" srcset=\"https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/layout.jpg 1280w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/layout-300x127.jpg 300w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/layout-768x326.jpg 768w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/layout-1000x424.jpg 1000w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/layout-230x98.jpg 230w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/layout-350x148.jpg 350w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/layout-480x204.jpg 480w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" \/><figcaption class=\"wp-element-caption\">One-handed Layout<\/figcaption><\/figure><\/div>\n\n\n<p>I posted the video on twitter and I got some great feedback and tips. I noted things down and I&#8217;ll work on it more in the future. I got told to have a look at <a href=\"https:\/\/learn.microsoft.com\/en-us\/gaming\/accessibility\" data-type=\"link\" data-id=\"https:\/\/learn.microsoft.com\/en-us\/gaming\/accessibility\">Microsoft&#8217;s accessibility guidelines<\/a>, which is a great resource and very well written. Special Thanks to <a href=\"https:\/\/twitter.com\/Black1976\" data-type=\"link\" data-id=\"https:\/\/twitter.com\/Black1976\">Antonio I. Mart\u00ednez<\/a> and <a href=\"https:\/\/twitter.com\/AdamKosATP\">Adam Kosakowski<\/a> for the help.<\/p>\n\n\n\n<p>I also improved the way the high visibility and alternative font is handled, now it&#8217;s much easier to switch between the two (or any other style). There is no visual or mechanical change.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1224\" height=\"1070\" src=\"https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/GV-KL5co.jpg\" alt=\"\" class=\"wp-image-762\" srcset=\"https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/GV-KL5co.jpg 1224w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/GV-KL5co-300x262.jpg 300w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/GV-KL5co-768x671.jpg 768w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/GV-KL5co-1000x874.jpg 1000w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/GV-KL5co-230x201.jpg 230w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/GV-KL5co-350x306.jpg 350w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/GV-KL5co-480x420.jpg 480w\" sizes=\"(max-width: 1224px) 100vw, 1224px\" \/><figcaption class=\"wp-element-caption\">High visibility mode<\/figcaption><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\">Settings<\/h2>\n\n\n\n<p>I thought I&#8217;d make the settings and menus in 3D space. So instead of having a regular menu, the player is spawned in a corridor. You can go inside the &#8220;graphics&#8221; or &#8220;controls&#8221; or &#8220;level select&#8221; rooms, or just start\/load a game by interacting with the appropriate object (can be a button, screen, computer, lever&#8230;etc). This uses the already existing dialog and interaction system, but with an added function that executes console commands depending on which option you pick.<\/p>\n\n\n\n<p>Here is a working proof of concept<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-1 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"720\" data-id=\"754\" src=\"https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/1-1.jpg\" alt=\"\" class=\"wp-image-754\" srcset=\"https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/1-1.jpg 1280w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/1-1-300x169.jpg 300w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/1-1-768x432.jpg 768w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/1-1-1000x563.jpg 1000w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/1-1-230x129.jpg 230w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/1-1-350x197.jpg 350w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/1-1-480x270.jpg 480w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" \/><figcaption class=\"wp-element-caption\">Overview of the settings<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"720\" data-id=\"755\" src=\"https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/2-1.jpg\" alt=\"\" class=\"wp-image-755\" srcset=\"https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/2-1.jpg 1280w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/2-1-300x169.jpg 300w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/2-1-768x432.jpg 768w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/2-1-1000x563.jpg 1000w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/2-1-230x129.jpg 230w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/2-1-350x197.jpg 350w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/2-1-480x270.jpg 480w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" \/><figcaption class=\"wp-element-caption\">VSync disabled<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"720\" data-id=\"756\" src=\"https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/3-1.jpg\" alt=\"\" class=\"wp-image-756\" srcset=\"https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/3-1.jpg 1280w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/3-1-300x169.jpg 300w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/3-1-768x432.jpg 768w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/3-1-1000x563.jpg 1000w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/3-1-230x129.jpg 230w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/3-1-350x197.jpg 350w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/3-1-480x270.jpg 480w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" \/><figcaption class=\"wp-element-caption\">Post Processing Quality set to high<\/figcaption><\/figure>\n<\/figure>\n\n\n\n<p>The settings are stored in the game instance and set up when the level loads. The only requirement is that it&#8217;s a console command, but creating custom ones (eg. for the high visibility font) is straightforward.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Proximity fading:<\/h2>\n\n\n\n<p>I added proximity fading to the player material, to hide the model if it gets too close to the camera. This is especially useful when the player is close to a wall and obstructs the view.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video controls src=\"http:\/\/abdoubouam.com\/wp-content\/uploads\/dither.mp4\"><\/video><figcaption class=\"wp-element-caption\">Proximity Fading<br><\/figcaption><\/figure>\n\n\n\n<p>This also helps when the player is talking with an NPC while standing in front of the custom camera.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure data-wp-context=\"{&quot;uploadedSrc&quot;:&quot;https:\\\/\\\/abdoubouam.com\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/dithering_off.jpg&quot;,&quot;figureClassNames&quot;:&quot;wp-block-image size-large&quot;,&quot;figureStyles&quot;:null,&quot;imgClassNames&quot;:&quot;wp-image-750&quot;,&quot;imgStyles&quot;:null,&quot;targetWidth&quot;:1280,&quot;targetHeight&quot;:720,&quot;scaleAttr&quot;:false,&quot;ariaLabel&quot;:&quot;Enlarge image&quot;,&quot;alt&quot;:&quot;&quot;}\" data-wp-interactive=\"core\/image\" class=\"wp-block-image size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"720\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" data-id=\"750\" src=\"https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/dithering_off.jpg\" alt=\"\" class=\"wp-image-750\" srcset=\"https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/dithering_off.jpg 1280w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/dithering_off-300x169.jpg 300w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/dithering_off-768x432.jpg 768w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/dithering_off-1000x563.jpg 1000w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/dithering_off-230x129.jpg 230w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/dithering_off-350x197.jpg 350w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/dithering_off-480x270.jpg 480w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge image\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"context.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"context.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Without Fading<\/figcaption><\/figure>\n\n\n\n<figure data-wp-context=\"{&quot;uploadedSrc&quot;:&quot;https:\\\/\\\/abdoubouam.com\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/dithering_on.jpg&quot;,&quot;figureClassNames&quot;:&quot;wp-block-image size-large&quot;,&quot;figureStyles&quot;:null,&quot;imgClassNames&quot;:&quot;wp-image-751&quot;,&quot;imgStyles&quot;:null,&quot;targetWidth&quot;:1280,&quot;targetHeight&quot;:720,&quot;scaleAttr&quot;:false,&quot;ariaLabel&quot;:&quot;Enlarge image&quot;,&quot;alt&quot;:&quot;&quot;}\" data-wp-interactive=\"core\/image\" class=\"wp-block-image size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"720\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" data-id=\"751\" src=\"https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/dithering_on.jpg\" alt=\"\" class=\"wp-image-751\" srcset=\"https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/dithering_on.jpg 1280w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/dithering_on-300x169.jpg 300w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/dithering_on-768x432.jpg 768w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/dithering_on-1000x563.jpg 1000w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/dithering_on-230x129.jpg 230w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/dithering_on-350x197.jpg 350w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/dithering_on-480x270.jpg 480w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge image\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"context.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"context.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">With fading<\/figcaption><\/figure>\n<\/figure>\n\n\n\n<p>I used dithered masking instead of actual blended transparency because it&#8217;s more reliable, more performant, and doesn&#8217;t cause rendering issues with other transparent objects. The downside is the visual effect, especially with TAA, but it can be improved by switching to MSAA instead, which is exposed in the settings.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Player character<\/h2>\n\n\n\n<p>I worked a little bit more on the player model, and this time I imported it to Unreal and replaced Manny with it. It looks decent, but there is still a lot of work remaining on it.<\/p>\n\n\n\n<p>The animations and skeleton don&#8217;t look great, they&#8217;re too &#8220;actiony&#8221;. So I think I&#8217;ll scrap those and start again from scratch with my own rig and animations.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1821\" height=\"1080\" src=\"http:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/model.jpg\" alt=\"\" class=\"wp-image-753\" srcset=\"https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/model.jpg 1821w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/model-300x178.jpg 300w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/model-768x455.jpg 768w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/model-1536x911.jpg 1536w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/model-1000x593.jpg 1000w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/model-230x136.jpg 230w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/model-350x208.jpg 350w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/model-480x285.jpg 480w\" sizes=\"(max-width: 1821px) 100vw, 1821px\" \/><figcaption class=\"wp-element-caption\">Robot model sketch<\/figcaption><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\">Misc:<\/h2>\n\n\n\n<p>I fixed the few bits of code that remained, and then fully tested the demo with the new interaction system. Everything works correctly.<br>I made new builds to test on the Steam Deck. Everything looks and works correctly.<br>More minor bug fixes.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>That&#8217;s all for week 32. Thanks for reading, and I&#8217;ll see you next week!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A quick summary of this week&#8217;s development Accessibility I tested a &#8220;one handed&#8221; mode, using only the mouse. It&#8217;s just an experiment for the moment. I posted the video on twitter and I got some great feedback and tips. I noted things down and I&#8217;ll work on it more in the future. I got told to have a look at Microsoft&#8217;s accessibility guidelines, which [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":753,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"_links":{"self":[{"href":"https:\/\/abdoubouam.com\/index.php\/wp-json\/wp\/v2\/posts\/759"}],"collection":[{"href":"https:\/\/abdoubouam.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/abdoubouam.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/abdoubouam.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/abdoubouam.com\/index.php\/wp-json\/wp\/v2\/comments?post=759"}],"version-history":[{"count":4,"href":"https:\/\/abdoubouam.com\/index.php\/wp-json\/wp\/v2\/posts\/759\/revisions"}],"predecessor-version":[{"id":764,"href":"https:\/\/abdoubouam.com\/index.php\/wp-json\/wp\/v2\/posts\/759\/revisions\/764"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/abdoubouam.com\/index.php\/wp-json\/wp\/v2\/media\/753"}],"wp:attachment":[{"href":"https:\/\/abdoubouam.com\/index.php\/wp-json\/wp\/v2\/media?parent=759"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/abdoubouam.com\/index.php\/wp-json\/wp\/v2\/categories?post=759"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/abdoubouam.com\/index.php\/wp-json\/wp\/v2\/tags?post=759"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}