{"id":1080,"date":"2025-01-13T21:03:37","date_gmt":"2025-01-13T21:03:37","guid":{"rendered":"https:\/\/abdoubouam.com\/?p=1080"},"modified":"2025-01-13T21:16:35","modified_gmt":"2025-01-13T21:16:35","slug":"devlog-week-55-56","status":"publish","type":"post","link":"https:\/\/abdoubouam.com\/index.php\/2025\/01\/13\/devlog-week-55-56\/","title":{"rendered":"Devlog Week 55-56"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Glitches and corruptions<\/h2>\n\n\n\n<p>I was messin around in Unreal, and while switching between Lumen and baked lighting the textures appeared corrupt. It looked good with the dream ASCII filter on top.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video controls src=\"http:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/lightmap_glitch.mp4\"><\/video><figcaption class=\"wp-element-caption\">Lightmap glitch + dream effect<\/figcaption><\/figure>\n\n\n\n<p>And I thought a bit about replicating the effect. The first thing that came to mind was to corrupt a PNG file by altering one of the bytes in the beginning, and it worked better than I expected. This is the result of changing *only one* byte. (I also added edited it in Affinity Photo by resaving as very low quality JPEG and then increasing the contrast and overlaying it on top of the original corrupted png)<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"540\" height=\"540\" src=\"http:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/corruptions_gif.gif\" alt=\"\" class=\"wp-image-1075\"\/><figcaption class=\"wp-element-caption\">Corrupted PNGs<\/figcaption><\/figure><\/div>\n\n\n<p>I also wrote a generic file corruptor (that&#8217;s somehow not my weirdest little program). You can control how the interval of bytes it leaves between each corrupt one. I applied it on a video and a sound individually then combined them together, and it looks like scratched VCDs\/DVDs.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video controls src=\"http:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/corrupted_video.mp4\"><\/video><figcaption class=\"wp-element-caption\">Corrupted video<\/figcaption><\/figure>\n\n\n\n<p>Here&#8217;s the python code if anyone is interested.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"647\" height=\"264\" src=\"http:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/corruptor.png\" alt=\"\" class=\"wp-image-1078\" srcset=\"https:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/corruptor.png 647w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/corruptor-300x122.png 300w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/corruptor-230x94.png 230w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/corruptor-350x143.png 350w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/corruptor-480x196.png 480w\" sizes=\"(max-width: 647px) 100vw, 647px\" \/><figcaption class=\"wp-element-caption\">File_corruptor.py<\/figcaption><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\">Blockouts<\/h2>\n\n\n\n<p>I worked on the blockouts a bit more. Not a lot has changed since last time, but I worked a bit more on the location of things (shops, cemetery, fields, forest&#8230;etc). I still didn&#8217;t implement them in the world, but I left a few cubes and text render actors as a reminder.<br>I also switched the lighting to a sunset to setup the mood for the beginning of the game. I re-enabled the NPC paths and chatter\/greeting. I&#8217;m actually surprised by how alive and busy this feels with just a bunch of NPCs walking around. Normally it wouldn&#8217;t be this busy, because most people are gathered in groups, at work, in the caf\u00e9, at home&#8230;etc. and only a few of them should actually be walking.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video controls src=\"http:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/blockout.mp4\"><\/video><figcaption class=\"wp-element-caption\">Blockout and lighting update<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Interaction System features<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Set Player Transform<\/h3>\n\n\n\n<p>I added a new component &#8220;set player transform&#8221;, which, as the name implies, set the player&#8217;s transform when an interaction starts.<br>It is meant to position the player in front of an NPC when you talk with them, and it should be hidden with a camera cut. It can be instant, or have a transition time if needed. Alternatively it can rotate the player toward the object\/NPC regardless of where you stand.<br>This only affects the player if the object has that component.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video controls src=\"http:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/set_player_rotation.mp4\"><\/video><figcaption class=\"wp-element-caption\">Set Player Transform<\/figcaption><\/figure>\n\n\n\n<p>While working on it I picked the wrong axis and interpolation method and forgot to account for scaling and had these funny bugs<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"http:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/bug1.mp4\"><\/video><\/figure>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"http:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/bug2.mp4\"><\/video><\/figure>\n\n\n\n<p>The scale bug was interesting so I tried it out. Maybe there will be an opportunity to use this as a mechanic in one of the dreams.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video controls src=\"http:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/smol.mp4\"><\/video><figcaption class=\"wp-element-caption\">You are now small<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Interactive Cutscenes<\/h3>\n\n\n\n<p>I wanted to have cutscenes that play while you&#8217;re talking\/interacting. Nothing impressive in the test, but I need this for some interactions.<br>A cutscene ends when the current interaction ends or when another cutscene is called, or when the cutscene itself is over. I need to find a way to make the cutscenes pause on the last frame, but maybe I&#8217;ll just leave a veeeeeeeeeeeeeery long empty chunk at the end of the cutscene&#8217;s timeline.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video controls src=\"http:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/cutscenes.mp4\"><\/video><figcaption class=\"wp-element-caption\">Interactive cutscenes<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Follow Spline<\/h3>\n\n\n\n<p>One last important feature I wanted was following an NPC while also talking. I did not know what would be the best way to do it. I was thinking about giving the player full movement control, but I don&#8217;t want players wandering and going where they shouldn&#8217;t go yet, and I didn&#8217;t like &#8220;hey come back here!&#8221; because I felt it was more annoying than not having control. So I ended up with this idea, where an NPC (or the player) can follow a spline, and another NPC or the player can follow them as they walk.<br>This is the first iteration : a target is spawned on the spline, and it advances if its follower (the player in the first half of the video, or the dog in the second) is close enough. When the target reaches the end it goes back to the beginning if &#8220;loop&#8221; is checked. Otherwise it stops there. You can see the target not advancing when I block the dog&#8217;s path.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video controls src=\"http:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/follow_spline.mp4\"><\/video><figcaption class=\"wp-element-caption\">Follow Spline v1<\/figcaption><\/figure>\n\n\n\n<p>The player moves without any input from my controller (except camera rotation)<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video controls src=\"http:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/player_follow_spline_no_input.mp4\"><\/video><figcaption class=\"wp-element-caption\">Look ma, no hands!<\/figcaption><\/figure>\n\n\n\n<p>In the second iteration I added the secondary pawn. It can be any NPC or the player.<br>In the following video the dog is the main pawn, and the player is the secondary following it. I also added an option to interrupt and trigger the spline following.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video controls src=\"http:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/follow_spline_2.mp4\"><\/video><figcaption class=\"wp-element-caption\">Follow Spline v2<\/figcaption><\/figure>\n\n\n\n<p>And finally I integrated it with the interaction system, so that it can be triggered from talking to an NPC. I also added an option to stop walking if you haven&#8217;t progressed through the conversation enough. The NPC can show you the town and introduce you to people.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video controls src=\"http:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/Follow_Spline_Demo.mp4\"><\/video><figcaption class=\"wp-element-caption\">Follow Spline (Full Demo)<\/figcaption><\/figure>\n\n\n\n<p>Here is the data table, used in lines 6, 13 and 16 to stop (notice the &#8220;stop&#8221; in the row &#8220;Extra C&#8221;).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1218\" height=\"528\" src=\"http:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/DT.png\" alt=\"\" class=\"wp-image-1072\" srcset=\"https:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/DT.png 1218w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/DT-300x130.png 300w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/DT-768x333.png 768w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/DT-1000x433.png 1000w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/DT-230x100.png 230w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/DT-350x152.png 350w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/DT-480x208.png 480w\" sizes=\"(max-width: 1218px) 100vw, 1218px\" \/><\/figure>\n\n\n\n<p>There are some bugs to fix and features to add, but the hard\/tedious part is over.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Misc<\/h2>\n\n\n\n<p>I tested the performance difference between C++ and Blueprints for the scrambling function. This is probably the worst case scenario for Blueprints, because it&#8217;s a lot of extremely small operations repeating hundreds of thousands of times. C++ did 1000x more iterations in a shorter amount of time.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"396\" height=\"91\" src=\"http:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/cpp_bp_time.jpg\" alt=\"\" class=\"wp-image-1071\" srcset=\"https:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/cpp_bp_time.jpg 396w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/cpp_bp_time-300x69.jpg 300w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/cpp_bp_time-230x53.jpg 230w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/cpp_bp_time-350x80.jpg 350w\" sizes=\"(max-width: 396px) 100vw, 396px\" \/><figcaption class=\"wp-element-caption\">C++ vs Blueprints performance<\/figcaption><\/figure><\/div>\n\n\n<p>Here is my code in Blueprints vs CPP.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-1 wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure data-wp-context=\"{&quot;uploadedSrc&quot;:&quot;https:\\\/\\\/abdoubouam.com\\\/wp-content\\\/uploads\\\/2025\\\/01\\\/cpp.jpg&quot;,&quot;figureClassNames&quot;:&quot;wp-block-image size-full&quot;,&quot;figureStyles&quot;:null,&quot;imgClassNames&quot;:&quot;wp-image-1076&quot;,&quot;imgStyles&quot;:null,&quot;targetWidth&quot;:1029,&quot;targetHeight&quot;:771,&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-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1029\" height=\"771\" 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=\"1076\" src=\"https:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/cpp.jpg\" alt=\"\" class=\"wp-image-1076\" srcset=\"https:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/cpp.jpg 1029w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/cpp-300x225.jpg 300w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/cpp-768x575.jpg 768w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/cpp-1000x749.jpg 1000w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/cpp-230x172.jpg 230w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/cpp-350x262.jpg 350w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/cpp-480x360.jpg 480w\" sizes=\"(max-width: 1029px) 100vw, 1029px\" \/><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\">C++<\/figcaption><\/figure>\n\n\n\n<figure data-wp-context=\"{&quot;uploadedSrc&quot;:&quot;https:\\\/\\\/abdoubouam.com\\\/wp-content\\\/uploads\\\/2025\\\/01\\\/bp-scaled.jpg&quot;,&quot;figureClassNames&quot;:&quot;wp-block-image size-full&quot;,&quot;figureStyles&quot;:null,&quot;imgClassNames&quot;:&quot;wp-image-1073&quot;,&quot;imgStyles&quot;:null,&quot;targetWidth&quot;:2560,&quot;targetHeight&quot;:598,&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-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"598\" 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=\"1073\" src=\"https:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/bp-scaled.jpg\" alt=\"\" class=\"wp-image-1073\" srcset=\"https:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/bp-scaled.jpg 2560w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/bp-300x70.jpg 300w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/bp-1920x449.jpg 1920w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/bp-768x179.jpg 768w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/bp-1536x359.jpg 1536w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/bp-2048x479.jpg 2048w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/bp-1000x234.jpg 1000w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/bp-230x54.jpg 230w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/bp-350x82.jpg 350w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2025\/01\/bp-480x112.jpg 480w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/><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\">Blueprints<\/figcaption><\/figure>\n<\/figure>\n\n\n\n<p>I fixed some bugs and made minor optimizations, and wrote a draft for a mini game.<br>I&#8217;m also trying to play more indie games, aiming for an indie game each two weeks at the very least. These two weeks I finished Resident Evil 5, replayed The Beginner&#8217;s Guide and a bit of Night in the Woods. I aim to play weird\/unusual\/unique games for inspiration and appreciation.<\/p>\n\n\n\n<p>That&#8217;s all for this devlog, thanks for reading, and I hope to see you soon!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Glitches and corruptions I was messin around in Unreal, and while switching between Lumen and baked lighting the textures appeared corrupt. It looked good with the dream ASCII filter on top. And I thought a bit about replicating the effect. The first thing that came to mind was to corrupt a PNG file by altering one of the bytes in the beginning, and it [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1074,"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\/1080"}],"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=1080"}],"version-history":[{"count":4,"href":"https:\/\/abdoubouam.com\/index.php\/wp-json\/wp\/v2\/posts\/1080\/revisions"}],"predecessor-version":[{"id":1087,"href":"https:\/\/abdoubouam.com\/index.php\/wp-json\/wp\/v2\/posts\/1080\/revisions\/1087"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/abdoubouam.com\/index.php\/wp-json\/wp\/v2\/media\/1074"}],"wp:attachment":[{"href":"https:\/\/abdoubouam.com\/index.php\/wp-json\/wp\/v2\/media?parent=1080"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/abdoubouam.com\/index.php\/wp-json\/wp\/v2\/categories?post=1080"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/abdoubouam.com\/index.php\/wp-json\/wp\/v2\/tags?post=1080"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}