{"id":372,"date":"2024-04-08T20:21:40","date_gmt":"2024-04-08T20:21:40","guid":{"rendered":"https:\/\/abdoubouam.com\/?p=372"},"modified":"2024-04-08T20:21:40","modified_gmt":"2024-04-08T20:21:40","slug":"devlog-week-16","status":"publish","type":"post","link":"https:\/\/abdoubouam.com\/index.php\/2024\/04\/08\/devlog-week-16\/","title":{"rendered":"Devlog week 16"},"content":{"rendered":"\n<p>This week I experimented a bit more with dream mechanics and visuals. Since those will be a significant enough part of the game and story, I am giving it some attention it deserves.<\/p>\n\n\n\n<p>One of the main aspects of dreams is inconsistency : layouts don&#8217;t make sense, you don&#8217;t remember how you got there, some objects appear and disappear when you&#8217;re not looking, signs don&#8217;t say the same things&#8230;etc.<\/p>\n\n\n\n<p>The first &#8220;tool&#8221; I developed for this is a blueprint that changes which object out of a bunch is visible when you&#8217;re not looking. It&#8217;s just an actor that gets a list of all its attached actors (children, in a way), then every tick (set to 0.1seconds, to save performance) it checks if the player is looking at the object. If not, it hides all the objects except for one.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"http:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/04\/shuffle_objects.mp4\"><\/video><\/figure>\n\n\n\n<p>This example is more obvious, but I can use it for more subtle things, like an exit sign saying &#8220;exist&#8221; or &#8220;text&#8221; or anything like that. It doesn&#8217;t even have to be a static mesh, it could be decals, lights, custom blueprint actors, or a mix.<br>Right now each object has an equal probability of being chosen, but I&#8217;m planning on making it select one object and give it an arbitrary probability. An example use case : have one in a thousand chance of a poster being upside down.<\/p>\n\n\n\n<p>Another example of dream weirdness is the clock showing a different time when you&#8217;re not looking. I programmed the arrows to work correctly. I also added a useless functionality you won&#8217;t notice unless you stare at it for long enough : the clock is functional and the arrows move in real-time by default. I made it initially because I wanted the arrows to spin fast, but I didn&#8217;t really like that, so I changed the speed back to normal.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"http:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/04\/clock.mp4\"><\/video><\/figure>\n\n\n\n<p>Speaking of the grandfather clock, that&#8217;s a new model I&#8217;ve made this week. 8,570 Triangles and one 4K texture set<\/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\\\/04\\\/1.jpg&quot;,&quot;figureClassNames&quot;:&quot;wp-block-image size-full&quot;,&quot;figureStyles&quot;:null,&quot;imgClassNames&quot;:&quot;wp-image-375&quot;,&quot;imgStyles&quot;:null,&quot;targetWidth&quot;:1280,&quot;targetHeight&quot;:1280,&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=\"1280\" height=\"1280\" 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=\"375\" src=\"https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/04\/1.jpg\" alt=\"\" class=\"wp-image-375\" srcset=\"https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/04\/1.jpg 1280w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/04\/1-300x300.jpg 300w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/04\/1-1024x1024.jpg 1024w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/04\/1-150x150.jpg 150w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/04\/1-768x768.jpg 768w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/04\/1-1000x1000.jpg 1000w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/04\/1-230x230.jpg 230w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/04\/1-350x350.jpg 350w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/04\/1-480x480.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\">Grandfather Clock<\/figcaption><\/figure>\n\n\n\n<figure data-wp-context=\"{&quot;uploadedSrc&quot;:&quot;https:\\\/\\\/abdoubouam.com\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/1w.jpg&quot;,&quot;figureClassNames&quot;:&quot;wp-block-image size-full&quot;,&quot;figureStyles&quot;:null,&quot;imgClassNames&quot;:&quot;wp-image-376&quot;,&quot;imgStyles&quot;:null,&quot;targetWidth&quot;:1280,&quot;targetHeight&quot;:1280,&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=\"1280\" height=\"1280\" 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=\"376\" src=\"https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/04\/1w.jpg\" alt=\"\" class=\"wp-image-376\" srcset=\"https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/04\/1w.jpg 1280w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/04\/1w-300x300.jpg 300w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/04\/1w-1024x1024.jpg 1024w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/04\/1w-150x150.jpg 150w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/04\/1w-768x768.jpg 768w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/04\/1w-1000x1000.jpg 1000w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/04\/1w-230x230.jpg 230w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/04\/1w-350x350.jpg 350w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/04\/1w-480x480.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\">Grandfather Clock Wireframe<\/figcaption><\/figure>\n<\/figure>\n\n\n\n<p>And finally, the thing I spent most my time on : the twisty train. I went through 3 different methods. The first one was just a static &#8220;pre-twisted&#8221; train model. I couldn&#8217;t find a way to affect gravity, so instead I just froze the player at the starting point and made the train move back and rotate accordingly instead. A friend said it&#8217;s like a treadmill, and I find that analogy perfect. It&#8217;s the version you saw earlier in the video showcasing the clock.<\/p>\n\n\n\n<p>I quickly figured it&#8217;s not easy to work with, especially placing props and such, it&#8217;s very inflexible. Also it&#8217;s very static, and I wanted some more movement, so I switched to another method : have normal non-twisted geometry, then rotate it in a shader with a texture, with the strength of twisting depending on how far an object is from world origin. I still kept the treadmill part of it, I just removed the rotation that compensated for the &#8220;pre-twisting&#8221;. I used fully baked lights, because lights can&#8217;t be manipulated with vertex shader, so they do not rotate nor move.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"http:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/04\/Twist-Revamp.mp4\"><\/video><\/figure>\n\n\n\n<p>There wasn&#8217;t really any reason for keeping the &#8220;treadmill&#8221; part other than it being already there. I just didn&#8217;t really think too much about it. I did end up removing it afterwards, and now the player is actually moving around the environment and not the other way around. The twisting strength is determined by the distance from camera, and it no longer relies on the player being at world origin.<br>The final look will probably change, at least a little bit, but this is what I have now.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"http:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/04\/train_revamp_2.mp4\"><\/video><\/figure>\n\n\n\n<p>There are still some issues with the lights not following the twists, but I mitigated that a little bit by making the lights fade with distance, so it&#8217;s not as visible.<\/p>\n\n\n\n<p>I&#8217;m still playing with baked lighting. Lumen practically halves the FPS. the only thing that&#8217;s stopping me right now is the player not casting shadows on the train. I think there&#8217;s a way to only bake indirect lighting, and leave direct light and shadow maps dynamic, maybe that&#8217;s the difference between static vs stationary ? I haven&#8217;t looked into it in depth, I&#8217;ll investigate this week.<br>In the meantime, here&#8217;s a preview of the train props and modules<\/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\\\/04\\\/train1.jpg&quot;,&quot;figureClassNames&quot;:&quot;wp-block-image size-large&quot;,&quot;figureStyles&quot;:null,&quot;imgClassNames&quot;:&quot;wp-image-384&quot;,&quot;imgStyles&quot;:null,&quot;targetWidth&quot;:1293,&quot;targetHeight&quot;:834,&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=\"1024\" height=\"660\" 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=\"384\" src=\"https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/04\/train1-1024x660.jpg\" alt=\"\" class=\"wp-image-384\" srcset=\"https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/04\/train1-1024x660.jpg 1024w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/04\/train1-300x194.jpg 300w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/04\/train1-768x495.jpg 768w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/04\/train1-1000x645.jpg 1000w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/04\/train1-230x148.jpg 230w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/04\/train1-350x226.jpg 350w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/04\/train1-480x310.jpg 480w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/04\/train1.jpg 1293w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><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><\/figure>\n\n\n\n<figure data-wp-context=\"{&quot;uploadedSrc&quot;:&quot;https:\\\/\\\/abdoubouam.com\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/train2.jpg&quot;,&quot;figureClassNames&quot;:&quot;wp-block-image size-large&quot;,&quot;figureStyles&quot;:null,&quot;imgClassNames&quot;:&quot;wp-image-385&quot;,&quot;imgStyles&quot;:null,&quot;targetWidth&quot;:1536,&quot;targetHeight&quot;:742,&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=\"1024\" height=\"495\" 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=\"385\" src=\"https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/04\/train2-1024x495.jpg\" alt=\"\" class=\"wp-image-385\" srcset=\"https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/04\/train2-1024x495.jpg 1024w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/04\/train2-300x145.jpg 300w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/04\/train2-768x371.jpg 768w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/04\/train2-1000x483.jpg 1000w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/04\/train2-230x111.jpg 230w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/04\/train2-350x169.jpg 350w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/04\/train2-480x232.jpg 480w, https:\/\/abdoubouam.com\/wp-content\/uploads\/2024\/04\/train2.jpg 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><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><\/figure>\n<\/figure>\n\n\n\n<p>That&#8217;s all for this week, thanks for reading!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This week I experimented a bit more with dream mechanics and visuals. Since those will be a significant enough part of the game and story, I am giving it some attention it deserves. One of the main aspects of dreams is inconsistency : layouts don&#8217;t make sense, you don&#8217;t remember how you got there, some objects appear and disappear when you&#8217;re not looking, signs [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":389,"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\/372"}],"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=372"}],"version-history":[{"count":9,"href":"https:\/\/abdoubouam.com\/index.php\/wp-json\/wp\/v2\/posts\/372\/revisions"}],"predecessor-version":[{"id":388,"href":"https:\/\/abdoubouam.com\/index.php\/wp-json\/wp\/v2\/posts\/372\/revisions\/388"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/abdoubouam.com\/index.php\/wp-json\/wp\/v2\/media\/389"}],"wp:attachment":[{"href":"https:\/\/abdoubouam.com\/index.php\/wp-json\/wp\/v2\/media?parent=372"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/abdoubouam.com\/index.php\/wp-json\/wp\/v2\/categories?post=372"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/abdoubouam.com\/index.php\/wp-json\/wp\/v2\/tags?post=372"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}