{"id":736,"date":"2024-07-22T22:49:14","date_gmt":"2024-07-22T22:49:14","guid":{"rendered":"https:\/\/abdoubouam.com\/?p=736"},"modified":"2024-07-23T10:43:03","modified_gmt":"2024-07-23T10:43:03","slug":"devlog-week-31","status":"publish","type":"post","link":"https:\/\/abdoubouam.com\/index.php\/2024\/07\/22\/devlog-week-31\/","title":{"rendered":"Devlog Week 31"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Interaction System V2<\/h2>\n\n\n\n<p>Most of this week was spent on revamping the interaction system. All 27 unit tests I have for the individual features passed.<br>I already mentioned this last week, but the reason I changed it is flexibility. Previously, it was an actor Blueprint class, so I either had to make one that has all the functionality I need and use it for everything, or create several types and add code that handles each of them individually. That of course is very cumbersome. I already had 4 classes for different objects : static objects, skeletal meshes, camera that follows you, and spinning ceiling fan, and each of them implement a different interface function.<br>The new method uses an actor component class instead, which means I can attach it to any actor of any type and it will work. One challenge I had (aside from readapting the code) is how to find actors with interaction. Checking if an actor has an interaction component (using &#8220;get component by class&#8221; and checking if the return is valid) has some performance concerns, especially if an actor has many components, so instead I made the component add a specific tag (eg. &#8220;Interaction_Amenzu&#8221;) on BeginPlay, and then I just checked if an actor has that tag instead when needed.<br>I also modified the old interaction blueprints to add the component and copy settings from the old interaction system variables to the new one, which means all the existing interactive actors work fine with the new system. This only applies to existing actors I didn&#8217;t want to modify. New actors will only contain the interaction component.<\/p>\n\n\n\n<p>I also cleaned up one particularly nasty part of the code. It doesn&#8217;t have any positive impact on performance. It&#8217;s just easier to maintain and modify. Here&#8217;s the before and after.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped 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\\\/2024\\\/07\\\/Before.jpg&quot;,&quot;figureClassNames&quot;:&quot;wp-block-image size-large&quot;,&quot;figureStyles&quot;:null,&quot;imgClassNames&quot;:&quot;wp-image-738&quot;,&quot;imgStyles&quot;:null,&quot;targetWidth&quot;:2203,&quot;targetHeight&quot;:1377,&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=\"1920\" height=\"1200\" 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=\"738\" src=\"https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/Before-1920x1200.jpg\" alt=\"\" class=\"wp-image-738\" srcset=\"https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/Before-1920x1200.jpg 1920w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/Before-300x188.jpg 300w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/Before-768x480.jpg 768w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/Before-1536x960.jpg 1536w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/Before-2048x1280.jpg 2048w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/Before-1000x625.jpg 1000w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/Before-230x144.jpg 230w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/Before-350x219.jpg 350w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/Before-480x300.jpg 480w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><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\">Before<\/figcaption><\/figure>\n\n\n\n<figure data-wp-context=\"{&quot;uploadedSrc&quot;:&quot;https:\\\/\\\/abdoubouam.com\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/After.jpg&quot;,&quot;figureClassNames&quot;:&quot;wp-block-image size-large&quot;,&quot;figureStyles&quot;:null,&quot;imgClassNames&quot;:&quot;wp-image-746&quot;,&quot;imgStyles&quot;:null,&quot;targetWidth&quot;:1906,&quot;targetHeight&quot;:1053,&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=\"1906\" height=\"1053\" 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=\"746\" src=\"https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/After.jpg\" alt=\"\" class=\"wp-image-746\" srcset=\"https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/After.jpg 1906w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/After-300x166.jpg 300w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/After-768x424.jpg 768w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/After-1536x849.jpg 1536w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/After-1000x552.jpg 1000w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/After-230x127.jpg 230w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/After-350x193.jpg 350w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/After-480x265.jpg 480w\" sizes=\"(max-width: 1906px) 100vw, 1906px\" \/><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\">After<\/figcaption><\/figure>\n<\/figure>\n\n\n\n<p>And a zoomed out overview of the entire interaction system<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;uploadedSrc&quot;:&quot;https:\\\/\\\/abdoubouam.com\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/overview-scaled.jpg&quot;,&quot;figureClassNames&quot;:&quot;aligncenter size-large&quot;,&quot;figureStyles&quot;:null,&quot;imgClassNames&quot;:&quot;wp-image-739&quot;,&quot;imgStyles&quot;:null,&quot;targetWidth&quot;:2560,&quot;targetHeight&quot;:1634,&quot;scaleAttr&quot;:false,&quot;ariaLabel&quot;:&quot;Enlarge image&quot;,&quot;alt&quot;:&quot;&quot;}\" data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1225\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"http:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/overview-1920x1225.jpg\" alt=\"\" class=\"wp-image-739\" srcset=\"https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/overview-1920x1225.jpg 1920w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/overview-300x191.jpg 300w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/overview-768x490.jpg 768w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/overview-1536x980.jpg 1536w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/overview-2048x1307.jpg 2048w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/overview-1000x638.jpg 1000w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/overview-230x147.jpg 230w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/overview-350x223.jpg 350w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/overview-480x306.jpg 480w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><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\">Interaction system overview<\/figcaption><\/figure><\/div>\n\n\n<p>One last change I made was the way branching was handled for &#8220;Multi-Choice\/Question&#8221; &#8220;Go To&#8221; and &#8220;Go To Milestone&#8221;. It was previously using line numbers (eg. &#8220;Go To <em>29<\/em>&#8220;), so if I needed to add or remove any line then I had to edit all the line numbers for those. Now it uses label instead (eg. &#8220;Go To <em>key_found<\/em>&#8220;). I can add and remove and move lines around more freely. It should have been made this way from the beginning, but it&#8217;s better late than never.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">&#8220;Look at&#8221; functionality<\/h2>\n\n\n\n<p>I wanted to make the flashlight follow the camera, which game me the idea to attach it to the head bone and also make the player character move their head to look in the direction the camera is looking at. The result looks a lot more natural than the player character just standing there and not reacting. I added some lag to it too and adjusted some values until it felt natural. Here you can see it in action (the red sphere is just to help with visualization)<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video controls src=\"http:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/look_at.mp4\"><\/video><figcaption class=\"wp-element-caption\">&#8220;Look At&#8221; with lag<\/figcaption><\/figure>\n\n\n\n<p>I encountered a bug that happens with low FPS, where at low enough FPS (~5 or lower) the algorithm causes overshooting instead lagging, and the character just shakes their head. It looks like they&#8217;re showing disapproval for abysmal performance. I actually fixed it, but then I decided to unfix it because it&#8217;s funny. It&#8217;s my pet bug lol<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video controls src=\"http:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/head_shake_disapproval.mp4\"><\/video><figcaption class=\"wp-element-caption\">head shake of disapproval<br><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Python scripting<\/h2>\n\n\n\n<p>I looked at methods to automate tasks in Unreal Engine. Things like making sure all interactive objects have data sets properly set up, list interactive objects, make sure interactive objects generate overlap events&#8230;etc. I found some documentation about python, and I spent an afternoon trying to make it work. It wasn&#8217;t easy and there was very little documentation and online resources, but I got at least to do a &#8220;proof of concept&#8221;. This video shows a script that adds an identifier and a tag to actors with the interactive component. In the future I will make more scripts to help with error checking and validation for the interactive objects.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video controls src=\"http:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/07\/SetIdentifierPythonScript.mp4\"><\/video><figcaption class=\"wp-element-caption\">Python script test<\/figcaption><\/figure>\n\n\n\n<p>Finally, I fixed some minor bugs with the demo build and added WASD controls, and started working on the main menu and settings menu. The initial version should be ready this week.<\/p>\n\n\n\n<p>Thanks for reading, and I hope to see you again next week.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Interaction System V2 Most of this week was spent on revamping the interaction system. All 27 unit tests I have for the individual features passed.I already mentioned this last week, but the reason I changed it is flexibility. Previously, it was an actor Blueprint class, so I either had to make one that has all the functionality I need and use it for everything, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":746,"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\/736"}],"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=736"}],"version-history":[{"count":4,"href":"https:\/\/abdoubouam.com\/index.php\/wp-json\/wp\/v2\/posts\/736\/revisions"}],"predecessor-version":[{"id":749,"href":"https:\/\/abdoubouam.com\/index.php\/wp-json\/wp\/v2\/posts\/736\/revisions\/749"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/abdoubouam.com\/index.php\/wp-json\/wp\/v2\/media\/746"}],"wp:attachment":[{"href":"https:\/\/abdoubouam.com\/index.php\/wp-json\/wp\/v2\/media?parent=736"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/abdoubouam.com\/index.php\/wp-json\/wp\/v2\/categories?post=736"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/abdoubouam.com\/index.php\/wp-json\/wp\/v2\/tags?post=736"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}