{"id":2432,"date":"2024-11-26T15:36:37","date_gmt":"2024-11-26T15:36:37","guid":{"rendered":"http:\/\/luxregina.com\/portfolio\/?p=2432"},"modified":"2024-11-26T15:46:32","modified_gmt":"2024-11-26T15:46:32","slug":"drakkenridge-vr-a-peek-into-dungeon-design-and-tech","status":"publish","type":"post","link":"http:\/\/luxregina.com\/portfolio\/drakkenridge-vr-a-peek-into-dungeon-design-and-tech\/","title":{"rendered":"[Drakkenridge VR] A peek into Dungeon design and tech"},"content":{"rendered":"<h2><span style=\"color: #00ccff;\">drakkenridge vr<\/span> | A peek into Dungeon design and tech<\/h2>\n<p id=\"ember52\" class=\"ember-view reader-text-block__paragraph\">I&#8217;ve regularly posted updates giving a sneak-peek in my process for the creation of VR mobile-friendly assets on Twitter\/X (<a class=\"zpeZuNgEWZXUHvjXxvENrtcVxHAUOzWxDM \" href=\"http:\/\/x.com\/luxregina\" target=\"_self\" rel=\"noopener\" data-test-app-aware-link=\"\">@luxregina<\/a>) or more recently on BlueSky (<a class=\"zpeZuNgEWZXUHvjXxvENrtcVxHAUOzWxDM \" href=\"http:\/\/luxregina.bsky.social\" target=\"_self\" rel=\"noopener\" data-test-app-aware-link=\"\">luxregina.bsky.social<\/a>) but the short format isn&#8217;t the best for deeper dives&#8230;<\/p>\n<h2 id=\"ember53\" class=\"ember-view reader-text-block__heading-2\">DrakkenRidge?<\/h2>\n<p id=\"ember54\" class=\"ember-view reader-text-block__paragraph\">Since I&#8217;ve never really posted here, let&#8217;s quickly recap: after shipping Stones of Harlath (2021) and Shock Troops (2022), I&#8217;ve started working on the next project (with <a id=\"ember55\" class=\"ember-view\" href=\"https:\/\/www.linkedin.com\/in\/simeonacker\/\">Simeon Acker<\/a> ).<\/p>\n<p id=\"ember56\" class=\"ember-view reader-text-block__paragraph\">DrakkenRidge is an ambitious VR RPG that features loads of different locations, with a low-poly\/pixel art graphic treatment. As we get closer to release, I&#8217;ll post more about the game itself and its design.<\/p>\n<p id=\"ember57\" class=\"ember-view reader-text-block__paragraph\">You can check some of the other environments on my ArtStation &gt; <a class=\"zpeZuNgEWZXUHvjXxvENrtcVxHAUOzWxDM \" href=\"http:\/\/artstation.com\/luxregina\" target=\"_self\" rel=\"noopener\" data-test-app-aware-link=\"\">artstation.com\/luxregina<\/a><\/p>\n<p id=\"ember58\" class=\"ember-view reader-text-block__paragraph\">In the meantime, quick gameplay video here &gt; <a class=\"zpeZuNgEWZXUHvjXxvENrtcVxHAUOzWxDM \" href=\"https:\/\/youtu.be\/esEdOCGAjm0?si=7VF1DGb0ReWnp9t1\" target=\"_self\" rel=\"noopener\" data-test-app-aware-link=\"\">https:\/\/youtu.be\/esEdOCGAjm0?si=7VF1DGb0ReWnp9t1<\/a><\/p>\n<h2 id=\"ember59\" class=\"ember-view reader-text-block__heading-2\">Setting up the mood<\/h2>\n<p id=\"ember60\" class=\"ember-view reader-text-block__paragraph\">At this point, the Dwarven Forge being the penultimate dungeon, I have a whole bunch of assets that can be repurposed, allowing me to block out my dungeon relatively quickly.<\/p>\n<p id=\"ember61\" class=\"ember-view reader-text-block__paragraph\">Each dungeon in Drakkenridge has a mood, a particular color palette, and it&#8217;s own &#8220;dramatic&#8221; lighting. I wanted the forge to leverage tones of yellows and reds, and I knew a lot of that would be due to the lighting scenario caused by lava and fire, a light coming from below, so I decided to experiment with lighting scenarios on a previously completed dungeon, a dwarven mine, happening to share some assets with the Forge.<\/p>\n<p id=\"ember62\" class=\"ember-view reader-text-block__paragraph\">This is not something I usually do, but as mentioned before, because how late it is in production, I have now a lot of assets handy to prototype my levels before actually modeling the proper level assets.<\/p>\n<div class=\"reader-image-block reader-image-block--full-width\">\n<figure class=\"reader-image-block__figure\">\n<div class=\"ivm-image-view-model \">\n<div class=\"ivm-view-attr__img-wrapper \"><img decoding=\"async\" id=\"ember63\" class=\"ivm-view-attr__img--centered reader-image-block__img evi-image lazy-image ember-view\" src=\"https:\/\/media.licdn.com\/dms\/image\/v2\/D4E12AQHx0Ne0E9ypjQ\/article-inline_image-shrink_1000_1488\/article-inline_image-shrink_1000_1488\/0\/1732544757210?e=1738195200&amp;v=beta&amp;t=TCRFWE7g6O6PmOdDjpttWnPxoba93zs3J3VQS_bjNhk\" alt=\"\" \/><\/div>\n<\/div><figcaption class=\"reader-image-block__figure-image-caption display-block full-width text-body-small-open t-sans text-align-center t-black--light\">Above: the Dwarven Mine dungeon, Below: the same, but with the Dwarven Forge lighting scenario<\/figcaption><\/figure>\n<\/div>\n<h2 id=\"ember64\" class=\"ember-view reader-text-block__heading-2\">Building the dungeon<\/h2>\n<p id=\"ember65\" class=\"ember-view reader-text-block__paragraph\">At this point, I&#8217;m starting to have a very good idea of the look I want for that new dungeon and start working on the low-poly models. Not much to say, I can write more about the modeling aspect if needed but it&#8217;s pretty straight-forward, aside the Atlasing process which I will cover later in this article.<\/p>\n<p id=\"ember66\" class=\"ember-view reader-text-block__paragraph\">As I create the assets, I bring them in Unity and quickly mock them into a concept environment (something that won&#8217;t survive in the game, and is not implemented in prefabs, etc) just to check how all the assets are working together, the cool stuff I can make by combining them, what&#8217;s missing, etc&#8230;<\/p>\n<div class=\"reader-image-block reader-image-block--resize\">\n<figure class=\"reader-image-block__figure\">\n<div class=\"ivm-image-view-model \">\n<div class=\"ivm-view-attr__img-wrapper \"><img decoding=\"async\" id=\"ember67\" class=\"ivm-view-attr__img--centered reader-image-block__img evi-image lazy-image ember-view\" src=\"https:\/\/media.licdn.com\/dms\/image\/v2\/D4E12AQG5oU2lBCshrQ\/article-inline_image-shrink_1500_2232\/article-inline_image-shrink_1500_2232\/0\/1732546144242?e=1738195200&amp;v=beta&amp;t=4KzcIT02-FdKQ8wFeIve2tBd0fWLOIxDe3vC6pe77NA\" alt=\"\" \/><\/div>\n<\/div><figcaption class=\"reader-image-block__figure-image-caption display-block full-width text-body-small-open t-sans text-align-center t-black--light\">A visual &#8220;player Zoo&#8221; of some sort, meant to test how the various assets can be combined together.<\/figcaption><\/figure>\n<\/div>\n<p id=\"ember68\" class=\"ember-view reader-text-block__paragraph\">Once I feel I have most of the needed assets, I then start implementing them more correctly this time, breaking them intro prefabs in Unity, creating groups, etc.<\/p>\n<p id=\"ember69\" class=\"ember-view reader-text-block__paragraph\">I also use this sequence to refine some of my lighting. At this point, assets are not UVed yet, though&#8230;<\/p>\n<div class=\"reader-image-block reader-image-block--full-width\">\n<figure class=\"reader-image-block__figure\">\n<div class=\"ivm-image-view-model \">\n<div class=\"ivm-view-attr__img-wrapper \"><img decoding=\"async\" id=\"ember70\" class=\"ivm-view-attr__img--centered reader-image-block__img evi-image lazy-image ember-view\" src=\"https:\/\/media.licdn.com\/dms\/image\/v2\/D4E12AQGScYwBK6OTFQ\/article-inline_image-shrink_1000_1488\/article-inline_image-shrink_1000_1488\/0\/1732546255714?e=1738195200&amp;v=beta&amp;t=3h6xsVSu86mdwDF7znNleJ37qCulTdlTpI5HbPjqCWk\" alt=\"\" \/><\/div>\n<\/div><figcaption class=\"reader-image-block__figure-image-caption display-block full-width text-body-small-open t-sans text-align-center t-black--light\">Starting to build the actual dungeon, with a secondary lighting pass.<\/figcaption><\/figure>\n<\/div>\n<h2 id=\"ember71\" class=\"ember-view reader-text-block__heading-2\">Atlasing the UVs<\/h2>\n<p id=\"ember72\" class=\"ember-view reader-text-block__paragraph\">This is the part people are often curious about. I&#8217;ve posted about it in threads on X, and even made a short video showing the process &gt; <a class=\"zpeZuNgEWZXUHvjXxvENrtcVxHAUOzWxDM \" href=\"https:\/\/youtu.be\/G1BsghZD-08?si=XzpR-S2z2Hs7W9Tx\" target=\"_self\" rel=\"noopener\" data-test-app-aware-link=\"\">https:\/\/youtu.be\/G1BsghZD-08?si=XzpR-S2z2Hs7W9Tx<\/a><\/p>\n<p id=\"ember73\" class=\"ember-view reader-text-block__paragraph\">The question often are &#8220;How big are your Atlases?&#8221; and &#8220;What if you cannot fit everything into one Atlas?&#8221;<\/p>\n<p id=\"ember74\" class=\"ember-view reader-text-block__paragraph\">For how big they are, well it depends on all the atlases together, the variance of assets sizes, the texel density that often needs to be precisely preserved because of the pixel art (disparity in texel density would be VERY visible with my pixelated textures).<\/p>\n<div class=\"reader-image-block reader-image-block--full-width\">\n<figure class=\"reader-image-block__figure\">\n<div class=\"ivm-image-view-model \">\n<div class=\"ivm-view-attr__img-wrapper \"><img decoding=\"async\" id=\"ember75\" class=\"ivm-view-attr__img--centered reader-image-block__img evi-image lazy-image ember-view\" src=\"https:\/\/media.licdn.com\/dms\/image\/v2\/D4E12AQECuXaWOutctg\/article-inline_image-shrink_1000_1488\/article-inline_image-shrink_1000_1488\/0\/1732547040449?e=1738195200&amp;v=beta&amp;t=eCa4fkY0L8X5uxnjHQP_D3ZRJoDrHXPmFuCnFTH86pE\" alt=\"\" \/><\/div>\n<\/div><figcaption class=\"reader-image-block__figure-image-caption display-block full-width text-body-small-open t-sans text-align-center t-black--light\">Atlas#1 combines all the &#8220;small&#8221; items into one 2K atlas.<\/figcaption><\/figure>\n<\/div>\n<p id=\"ember76\" class=\"ember-view reader-text-block__paragraph\">If all assets cannot fit in one Atlas, then I create another \ud83d\ude42 In short, a level can be composed of several atlases. For now, the Dwarven Forge is composed of 5 Atlases, most being 2K resolution, except for one that holds very large assets that is 4K (again, texel\/pixel density needs to match).<\/p>\n<div class=\"reader-image-block reader-image-block--full-width\">\n<figure class=\"reader-image-block__figure\">\n<div class=\"ivm-image-view-model \">\n<div class=\"ivm-view-attr__img-wrapper \"><img decoding=\"async\" id=\"ember77\" class=\"ivm-view-attr__img--centered reader-image-block__img evi-image lazy-image ember-view\" src=\"https:\/\/media.licdn.com\/dms\/image\/v2\/D4E12AQHp_J2_Y7upZw\/article-inline_image-shrink_1000_1488\/article-inline_image-shrink_1000_1488\/0\/1732547235695?e=1738195200&amp;v=beta&amp;t=whieBVa24J9rnCJ2THpL-4Uqc2VYBLbI32W-yjXGPsQ\" alt=\"\" \/><\/div>\n<\/div><figcaption class=\"reader-image-block__figure-image-caption display-block full-width text-body-small-open t-sans text-align-center t-black--light\">Color-coded atlases in the level (the 5th one isn&#8217;t shown because it&#8217;s not implemented yet)<\/figcaption><\/figure>\n<\/div>\n<p id=\"ember78\" class=\"ember-view reader-text-block__paragraph\">In the example below, you have 3 atlases present: n, n+1 and n+2&#8230; the density between n and n+1 is identical&#8230; n+2 atlases big items, like large rocks, etc&#8230; and I deemed it OK that the density would be 2 to 1 (so the pixels on the rocks are larger)<\/p>\n<div class=\"reader-image-block reader-image-block--full-width\">\n<figure class=\"reader-image-block__figure\">\n<div class=\"ivm-image-view-model \">\n<div class=\"ivm-view-attr__img-wrapper \"><img decoding=\"async\" id=\"ember79\" class=\"ivm-view-attr__img--centered reader-image-block__img evi-image lazy-image ember-view\" src=\"https:\/\/media.licdn.com\/dms\/image\/v2\/D4E12AQFrWhmSkTJE6A\/article-inline_image-shrink_1500_2232\/article-inline_image-shrink_1500_2232\/0\/1732552219981?e=1738195200&amp;v=beta&amp;t=P5nOiBPj2QodhWuo8_4GcZ7DYOBxZY0DW5aXcXnmbCo\" alt=\"\" \/><\/div>\n<\/div>\n<\/figure>\n<\/div>\n<h2 id=\"ember80\" class=\"ember-view reader-text-block__heading-2\">Finishing and polishing<\/h2>\n<p id=\"ember81\" class=\"ember-view reader-text-block__paragraph\">This part is pretty straight-forward (at least, to me!) I can write more about it if this article resonates with people \ud83d\ude42 In short, the rest of the time is spent painting the actual pixel-art textures, while set-dressing for tertiary level of detail, while adjusting the lighting, then correcting the textures, etc &#8211; rinse and repeat!<\/p>\n<p id=\"ember82\" class=\"ember-view reader-text-block__paragraph\">I&#8217;ll leave you guys with some &#8220;work-in-progress&#8221; screenshots showing some parts of the dungeon I&#8217;ve been working on the last couple days.<\/p>\n<p><img decoding=\"async\" id=\"ember96\" class=\"ivm-view-attr__img--centered  reader-image-block__img evi-image lazy-image ember-view\" src=\"https:\/\/media.licdn.com\/dms\/image\/v2\/D4E12AQEYhly-4UWGCQ\/article-inline_image-shrink_1000_1488\/article-inline_image-shrink_1000_1488\/0\/1732548401155?e=1738195200&amp;v=beta&amp;t=R2HAL7aWPCDkwNHUhEoGf5jgsFpYUy0c8tw8Yt3d0bk\" alt=\"\" \/><\/p>\n<p id=\"ember83\" class=\"ember-view reader-text-block__paragraph\">Cheers!<\/p>\n<div class=\"sharedaddy sd-sharing-enabled\"><div class=\"robots-nocontent sd-block sd-social sd-social-icon sd-sharing\"><h3 class=\"sd-title\">Share this:<\/h3><div class=\"sd-content\"><ul><li class=\"share-facebook\"><a rel=\"nofollow noopener noreferrer\" data-shared=\"sharing-facebook-2432\" class=\"share-facebook sd-button share-icon no-text\" href=\"http:\/\/luxregina.com\/portfolio\/drakkenridge-vr-a-peek-into-dungeon-design-and-tech\/?share=facebook\" target=\"_blank\" title=\"Click to share on Facebook\"><span><\/span><span class=\"sharing-screen-reader-text\">Click to share on Facebook (Opens in new window)<\/span><\/a><\/li><li class=\"share-linkedin\"><a rel=\"nofollow noopener noreferrer\" data-shared=\"sharing-linkedin-2432\" class=\"share-linkedin sd-button share-icon no-text\" href=\"http:\/\/luxregina.com\/portfolio\/drakkenridge-vr-a-peek-into-dungeon-design-and-tech\/?share=linkedin\" target=\"_blank\" title=\"Click to share on LinkedIn\"><span><\/span><span class=\"sharing-screen-reader-text\">Click to share on LinkedIn (Opens in new window)<\/span><\/a><\/li><li class=\"share-print\"><a rel=\"nofollow noopener noreferrer\" data-shared=\"\" class=\"share-print sd-button share-icon no-text\" href=\"http:\/\/luxregina.com\/portfolio\/drakkenridge-vr-a-peek-into-dungeon-design-and-tech\/\" target=\"_blank\" title=\"Click to print\"><span><\/span><span class=\"sharing-screen-reader-text\">Click to print (Opens in new window)<\/span><\/a><\/li><li class=\"share-end\"><\/li><\/ul><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>drakkenridge vr | A peek into Dungeon design and tech I&#8217;ve regularly posted updates giving a sneak-peek in my process for the creation of VR mobile-friendly assets on Twitter\/X (@luxregina) or more recently on BlueSky (luxregina.bsky.social) but the short format isn&#8217;t the best for deeper dives&#8230; DrakkenRidge? Since I&#8217;ve never really posted here, let&#8217;s quickly [&hellip;]<\/p>\n<div class=\"sharedaddy sd-sharing-enabled\"><div class=\"robots-nocontent sd-block sd-social sd-social-icon sd-sharing\"><h3 class=\"sd-title\">Share this:<\/h3><div class=\"sd-content\"><ul><li class=\"share-facebook\"><a rel=\"nofollow noopener noreferrer\" data-shared=\"sharing-facebook-2432\" class=\"share-facebook sd-button share-icon no-text\" href=\"http:\/\/luxregina.com\/portfolio\/drakkenridge-vr-a-peek-into-dungeon-design-and-tech\/?share=facebook\" target=\"_blank\" title=\"Click to share on Facebook\"><span><\/span><span class=\"sharing-screen-reader-text\">Click to share on Facebook (Opens in new window)<\/span><\/a><\/li><li class=\"share-linkedin\"><a rel=\"nofollow noopener noreferrer\" data-shared=\"sharing-linkedin-2432\" class=\"share-linkedin sd-button share-icon no-text\" href=\"http:\/\/luxregina.com\/portfolio\/drakkenridge-vr-a-peek-into-dungeon-design-and-tech\/?share=linkedin\" target=\"_blank\" title=\"Click to share on LinkedIn\"><span><\/span><span class=\"sharing-screen-reader-text\">Click to share on LinkedIn (Opens in new window)<\/span><\/a><\/li><li class=\"share-print\"><a rel=\"nofollow noopener noreferrer\" data-shared=\"\" class=\"share-print sd-button share-icon no-text\" href=\"http:\/\/luxregina.com\/portfolio\/drakkenridge-vr-a-peek-into-dungeon-design-and-tech\/\" target=\"_blank\" title=\"Click to print\"><span><\/span><span class=\"sharing-screen-reader-text\">Click to print (Opens in new window)<\/span><\/a><\/li><li class=\"share-end\"><\/li><\/ul><\/div><\/div><\/div>","protected":false},"author":1,"featured_media":2435,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"sharing_disabled":false,"switch_like_status":false,"spay_email":"","jetpack_publicize_message":""},"categories":[28,29,1],"tags":[],"jetpack_featured_media_url":"https:\/\/i2.wp.com\/luxregina.com\/portfolio\/wp-content\/uploads\/2024\/11\/drakkenBreakdown1.png?fit=960%2C960","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p5xnSl-De","jetpack-related-posts":[],"_links":{"self":[{"href":"http:\/\/luxregina.com\/portfolio\/wp-json\/wp\/v2\/posts\/2432"}],"collection":[{"href":"http:\/\/luxregina.com\/portfolio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/luxregina.com\/portfolio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/luxregina.com\/portfolio\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/luxregina.com\/portfolio\/wp-json\/wp\/v2\/comments?post=2432"}],"version-history":[{"count":5,"href":"http:\/\/luxregina.com\/portfolio\/wp-json\/wp\/v2\/posts\/2432\/revisions"}],"predecessor-version":[{"id":2438,"href":"http:\/\/luxregina.com\/portfolio\/wp-json\/wp\/v2\/posts\/2432\/revisions\/2438"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/luxregina.com\/portfolio\/wp-json\/wp\/v2\/media\/2435"}],"wp:attachment":[{"href":"http:\/\/luxregina.com\/portfolio\/wp-json\/wp\/v2\/media?parent=2432"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/luxregina.com\/portfolio\/wp-json\/wp\/v2\/categories?post=2432"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/luxregina.com\/portfolio\/wp-json\/wp\/v2\/tags?post=2432"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}