{"id":1309,"date":"2023-03-30T14:57:18","date_gmt":"2023-03-30T14:57:18","guid":{"rendered":"https:\/\/oneiricworlds.com\/en\/?p=1309"},"modified":"2023-03-30T15:02:44","modified_gmt":"2023-03-30T15:02:44","slug":"saves-ocean-trailer","status":"publish","type":"post","link":"https:\/\/oneiricworlds.com\/en\/2023\/03\/saves-ocean-trailer\/","title":{"rendered":"Ocean, Saves &#038; Trailer"},"content":{"rendered":"\n<p>Hello everyone,<\/p>\n\n\n\n<p>Yes, I&#8217;m trying to post a bit more regularly these days. I hope I&#8217;ll stick to it. So here&#8217;s the summary of what I did this month:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Saves<\/h4>\n\n\n\n<p>As I had some friends test the game, I had to rework the save system. When something went wrong during testing, the save file became corrupted, so I needed a way to fix it so that players could keep playing on the next session. I migrated the old binary save system to a newer and more flexible one without breaking the current tester saves. Now, it&#8217;s based on textual JSON, which is easy to update and debug, and surprisingly faster than the old system. Of course, I&#8217;ll have to encrypt it when releasing the game.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Ocean<\/h4>\n\n\n\n<p>After this big (and quite invisible to the player) technical part, I wanted to &#8220;rest&#8221; a little bit, and I started to work on something very fun &amp; visible: the ocean. It&#8217;s been years since I last worked on it (check this 10-YEAR-OLD <a href=\"https:\/\/oneiricworlds.com\/en\/index.php\/2013\/06\/23\/steven-the-seagull\/\" class=\"ek-link\">previous post<\/a>), and with the feedback of players and internet comments, I decided to add geometrical waves to it. Until now, it was perfectly flat, even if there were a few normal maps.<\/p>\n\n\n\n<p>So I became a &#8220;tech artist&#8221; for a few days, and I added many improvements to the waves:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>vertex displacement with various layers of movement<\/li>\n\n\n\n<li>color variations<\/li>\n\n\n\n<li>moving foam on the ocean surface<\/li>\n\n\n\n<li>splashing foam at the wave top<\/li>\n\n\n\n<li>little particle splashes on top of waves too (I had to code a 3D gradient ascent to put them in good places)<\/li>\n\n\n\n<li>hue variation based on a fake depth (super useful for the design of one level particularly)<\/li>\n\n\n\n<li>sparkles reacting to bloom on certain angles reflecting the moon or the sun<\/li>\n<\/ul>\n\n\n\n<p>I wanted the ocean to be gorgeous, and to call the player for exploration, because it&#8217;s a big selling point of the game! And here&#8217;s how it looks like now:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/oneiricworlds.com\/en\/wp-content\/uploads\/2023\/03\/20230327_223634.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/oneiricworlds.com\/en\/wp-content\/uploads\/2023\/03\/20230327_223634-1024x576.jpg\" alt=\"\" class=\"wp-image-1312\" srcset=\"https:\/\/oneiricworlds.com\/en\/wp-content\/uploads\/2023\/03\/20230327_223634-1024x576.jpg 1024w, https:\/\/oneiricworlds.com\/en\/wp-content\/uploads\/2023\/03\/20230327_223634-300x169.jpg 300w, https:\/\/oneiricworlds.com\/en\/wp-content\/uploads\/2023\/03\/20230327_223634-768x432.jpg 768w, https:\/\/oneiricworlds.com\/en\/wp-content\/uploads\/2023\/03\/20230327_223634-1536x864.jpg 1536w, https:\/\/oneiricworlds.com\/en\/wp-content\/uploads\/2023\/03\/20230327_223634-1320x743.jpg 1320w, https:\/\/oneiricworlds.com\/en\/wp-content\/uploads\/2023\/03\/20230327_223634.jpg 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">The Ocean at night<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/oneiricworlds.com\/en\/wp-content\/uploads\/2023\/03\/20230327_223858.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/oneiricworlds.com\/en\/wp-content\/uploads\/2023\/03\/20230327_223858-1024x576.jpg\" alt=\"\" class=\"wp-image-1313\" srcset=\"https:\/\/oneiricworlds.com\/en\/wp-content\/uploads\/2023\/03\/20230327_223858-1024x576.jpg 1024w, https:\/\/oneiricworlds.com\/en\/wp-content\/uploads\/2023\/03\/20230327_223858-300x169.jpg 300w, https:\/\/oneiricworlds.com\/en\/wp-content\/uploads\/2023\/03\/20230327_223858-768x432.jpg 768w, https:\/\/oneiricworlds.com\/en\/wp-content\/uploads\/2023\/03\/20230327_223858-1536x864.jpg 1536w, https:\/\/oneiricworlds.com\/en\/wp-content\/uploads\/2023\/03\/20230327_223858-1320x743.jpg 1320w, https:\/\/oneiricworlds.com\/en\/wp-content\/uploads\/2023\/03\/20230327_223858.jpg 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">The Ocean at dawn<\/figcaption><\/figure>\n\n\n\n<p>And here it is in motion:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Ocean shader\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/3iXwYisxSR4?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>If you can&#8217;t see the video above, check it out here: <a href=\"https:\/\/youtu.be\/3iXwYisxSR4\" class=\"ek-link\">https:\/\/youtu.be\/3iXwYisxSR4<\/a><\/p>\n\n\n\n<p>But I had 2 main constraints:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>at the moment, I dont want to rewrite all the gameplay moves on the ocean, so I had to make it visually interesting without breaking the existing gameplay code<\/li>\n\n\n\n<li>the world is cyclic, which means the ocean has to be continuous from one map edge to the other. Indeed, the player &#8220;teleports&#8221; from one side of the map to the other when she gets out of it, and the ocean MUST be tilable so that the teleport can&#8217;t be spotted. This involves using smart texture &amp; mask scaling to hide the trick, but also hide obvious repetitions.<\/li>\n<\/ul>\n\n\n\n<p>While working on the ocean, I also took the time to remove the black outline on the foam and later on all visual effects. That was disturbing and didn&#8217;t match the art direction for the game. But I had to set up a different render stack for the whole game. I think it&#8217;s for the better in the end.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Trailer<\/h4>\n\n\n\n<p>Following the previous post, I created a trailer for the game prologue. This time, I composed the music first, thinking about what would appear in the trailer. I think it&#8217;s a better approach, and the final video is now available on the <a href=\"https:\/\/store.steampowered.com\/app\/2320250\/Zefyr_Prologue\/\" class=\"ek-link\">Steam page<\/a>, or here below:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Zefyr : A Thief&#039;s Melody Trailer\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/JR2WZQqH-p0?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>If you can&#8217;t see the above video, check it out here: <a href=\"https:\/\/youtu.be\/JR2WZQqH-p0\" class=\"ek-link\">https:\/\/youtu.be\/JR2WZQqH-p0<\/a><\/p>\n\n\n\n<p>Sadly, I worked on the ocean AFTER the trailer, so it&#8217;s the old version that we can see in it. Anyways, I&#8217;ll have to update the trailer one day or the other&#8230;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Others<\/h4>\n\n\n\n<p>While testing the game, I corrected many things, including bugs, dialogs, level design, and puzzle design.<\/p>\n\n\n\n<p>That&#8217;s it for this month! I hope this was interesting.<\/p>\n\n\n\n<p>Peace \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hello everyone, Yes, I&#8217;m trying to post a bit more regularly these days. I hope I&#8217;ll stick to it. So here&#8217;s the summary of what I did this month: Saves As I had some friends test the game, I had to rework the save system. When something went wrong during testing, the save file became [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1313,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[52,50,49,51,19],"class_list":["post-1309","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news","tag-devlog","tag-ocean","tag-shader","tag-techart","tag-video"],"_links":{"self":[{"href":"https:\/\/oneiricworlds.com\/en\/wp-json\/wp\/v2\/posts\/1309","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oneiricworlds.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/oneiricworlds.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/oneiricworlds.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/oneiricworlds.com\/en\/wp-json\/wp\/v2\/comments?post=1309"}],"version-history":[{"count":6,"href":"https:\/\/oneiricworlds.com\/en\/wp-json\/wp\/v2\/posts\/1309\/revisions"}],"predecessor-version":[{"id":1319,"href":"https:\/\/oneiricworlds.com\/en\/wp-json\/wp\/v2\/posts\/1309\/revisions\/1319"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oneiricworlds.com\/en\/wp-json\/wp\/v2\/media\/1313"}],"wp:attachment":[{"href":"https:\/\/oneiricworlds.com\/en\/wp-json\/wp\/v2\/media?parent=1309"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oneiricworlds.com\/en\/wp-json\/wp\/v2\/categories?post=1309"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oneiricworlds.com\/en\/wp-json\/wp\/v2\/tags?post=1309"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}