-
%22%20transform%3D%22translate(3.2%203.2)%20scale(6.41406)%22%20fill-opacity%3D%22.5%22%3E%3Cellipse%20fill%3D%22%23cecece%22%20cx%3D%22215%22%20cy%3D%2216%22%20rx%3D%22100%22%20ry%3D%2252%22%2F%3E%3Cellipse%20fill%3D%22%23191919%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(234.14731%20100.99523%20-22.83957%2052.95125%20105.7%20123)%22%2F%3E%3Cellipse%20fill%3D%22%23e9e9e9%22%20cx%3D%22237%22%20cy%3D%226%22%20rx%3D%2229%22%20ry%3D%2218%22%2F%3E%3Cellipse%20fill%3D%22%230a0a0a%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(87.7036%2013.42054%20-4.66404%2030.4796%201.3%20106.6)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
Using AI as inspiration for UI design
All throughout the project, I have been slightly tweaking the UI from time to time. Now that I have a better understanding of the functionality of the UI, a more polished look and feel begun to creep into my mind.
-
%27%20fill-opacity%3D%27.5%27%3E%3Cpath%20fill%3D%22%23877d80%22%20fill-opacity%3D%22.5%22%20d%3D%22M594.5%20781.8l615.7-1066.5%20305.5%20176.4L900%20958.2z%22%2F%3E%3Cellipse%20fill%3D%22%230c0d0c%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22rotate(111.3%2016%20181.7)%20scale(1635.58581%20266.7246)%22%2F%3E%3Cellipse%20fill%3D%22%23090a09%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(201.1592%20-502.93733%20229.51147%2091.7974%201553.3%20578.2)%22%2F%3E%3Cellipse%20fill%3D%22%23c94e78%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(-132.29924%2022.13239%20-13.22771%20-79.07039%201291.4%2031)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
Rendering custom shadows with URP shader graph & apartment ext location
As I upgraded the render pipeline for the game, I noticed that my custom shadow rendering shaders turned pink. It was time to transition from custom HLSL shading for the environments to a more modern shader graph based approach.
-
%22%20transform%3D%22translate(3.2%203.2)%20scale(6.41406)%22%20fill-opacity%3D%22.5%22%3E%3Cellipse%20cx%3D%2254%22%20cy%3D%22123%22%20rx%3D%2262%22%20ry%3D%2262%22%2F%3E%3Cellipse%20fill%3D%22%23bbc4c8%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(-35.37116%2017.03288%20-29.03578%20-60.29684%20242.2%2024)%22%2F%3E%3Cellipse%20fill%3D%22%23e27d3a%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(29.257%2062.9224%20-40.30222%2018.7393%2039%200)%22%2F%3E%3Cellipse%20fill%3D%22%23252d32%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(27.40548%20-49.34658%2054.63044%2030.33996%20132.8%20104.3)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
Additional effects for the apartment scene
I have been working on the apartment for absolutely forever! I have begun to approach this room as a vertical slice for the game. This post is about some of the features I added this week: simulated cool air mist and fluorescent light flicker.
-
%27%20fill-opacity%3D%27.5%27%3E%3Cellipse%20fill%3D%22%23797979%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(120.67978%20311.13104%20-324.85222%20126.00187%201034%2069.6)%22%2F%3E%3Cpath%20fill%3D%22%233b3b3b%22%20fill-opacity%3D%22.5%22%20d%3D%22M1741.4%20843.4L-99.4%20824.2%209.6-99.4z%22%2F%3E%3Cellipse%20fill%3D%22%233c3c3c%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(-200.43328%20-71.37108%20237.53014%20-667.06212%201473.4%20479.3)%22%2F%3E%3Cellipse%20fill%3D%22%233e3e3e%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(225.52157%20147.01566%20-126.7759%20194.47384%20454.7%20143.6)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
PDA part 1 – interface
Adventure creator has support for objective lists and documents. I figured why not integrate them into the game as well? The player could be able to receive some text messages like in Cyberpunk 2077 and have a list of to-do’s for keeping the objective clear.
-
%27%20fill-opacity%3D%27.5%27%3E%3Cellipse%20fill%3D%22%23902147%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22rotate(-6.1%204593.3%20-7398)%20scale(407.27139%20192.48383)%22%2F%3E%3Cellipse%20fill%3D%22%23000f0a%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(-1297.59747%20995.68155%20-127.9279%20-166.71889%201333.7%20792.3)%22%2F%3E%3Cellipse%20fill%3D%22%23000f0a%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(-344.7309%204.1896%20-1.42758%20-117.46503%203.2%20746.5)%22%2F%3E%3Cpath%20fill%3D%22%23000d09%22%20fill-opacity%3D%22.5%22%20d%3D%22M1733.3-177l94.3%20484.9-283.4%2055-94.2-484.8z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
Maglev transit system
Way back when I did the maglev scene, it was just a scene void of any connection to anything in the game. I just knew I needed one so I made it. Now I returned to the scene to add the transit functionality to it that it required.
-
%22%20transform%3D%22translate(3.2%203.2)%20scale(6.41406)%22%20fill-opacity%3D%22.5%22%3E%3Cellipse%20fill%3D%22%23b8bed7%22%20cx%3D%2259%22%20cy%3D%2216%22%20rx%3D%22148%22%20ry%3D%2231%22%2F%3E%3Cellipse%20fill%3D%22%23424d2d%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(157.35625%20-108.7711%2025.4919%2036.87846%20188.4%2082.3)%22%2F%3E%3Cellipse%20fill%3D%22%23ffaa43%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22rotate(63.8%20-94.1%2069)%20scale(55.0252%2072.64994)%22%2F%3E%3Cellipse%20fill%3D%22%23e7e7e8%22%20cx%3D%2262%22%20rx%3D%2231%22%20ry%3D%2233%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
Upgrading the main character
I had planned to keep the characters far away from the camera, as they were not the best quality. But as I have been working on these scenes the main character creeps closer and closer. So I needed to make him look better.
-

Home location – part 2: combining the scenes
In part 1, we used Midjourney and Photoshop to create the 2D locations, Now it is time to merge them together – in 3D.
-
%22%20transform%3D%22matrix(10%200%200%2010%205%205)%22%20fill-opacity%3D%22.5%22%3E%3Cellipse%20fill%3D%22%23fcfbff%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(34.44555%2096.38525%20-40.79972%2014.58075%20235%2037.5)%22%2F%3E%3Cellipse%20fill%3D%22%235e624b%22%20cx%3D%2262%22%20cy%3D%22101%22%20rx%3D%22137%22%20ry%3D%2252%22%2F%3E%3Cellipse%20fill%3D%22%23f2f2e0%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(-9.25616%2032.86624%20-64.83296%20-18.25898%2057%200)%22%2F%3E%3Cellipse%20fill%3D%22%23a8b345%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(-28.62882%20-.74633%201.31413%20-50.40923%2066.6%2067.8)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
Pixel art test: Photoshop (beta) AI tools
A new beta version of photoshop was recently released with generative ai tools (adobe firefly) natively supported directly in the app. I tried it with a simple pixel art scene.
-
%27%20fill-opacity%3D%27.5%27%3E%3Cellipse%20fill%3D%22%237d8082%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22rotate(177.5%20523.8%20276.6)%20scale(285.57292%20616.66257)%22%2F%3E%3Cpath%20fill-opacity%3D%22.5%22%20d%3D%22M49.5%201354L-203-239.5l686.7-108.8%20252.4%201593.4z%22%2F%3E%3Cellipse%20fill%3D%22%23b14511%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(-14.93403%20157.98549%20-231.35526%20-21.86951%201532.3%20409.8)%22%2F%3E%3Cellipse%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(149.68883%201038.76854%20-165.68006%2023.87486%203.4%20516.6)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
Home location – part 1: Adobe Firefly
Sometimes we need to have different spaces link together. This calls for a very accurate reconstruction of the locations. Here is my journey on connecting multiple AI generated rooms together.
-
%22%20transform%3D%22matrix(6.5%200%200%206.5%203.3%203.3)%22%20fill-opacity%3D%22.5%22%3E%3Cellipse%20fill%3D%22%235b5b5b%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(-43.49588%20-4.47032%203.55719%20-34.61117%2063.1%2065.9)%22%2F%3E%3Cellipse%20fill%3D%22%23595959%22%20cx%3D%22246%22%20cy%3D%2259%22%20rx%3D%2222%22%20ry%3D%2229%22%2F%3E%3Cellipse%20fill%3D%22%23585858%22%20cx%3D%22162%22%20cy%3D%2273%22%20rx%3D%2220%22%20ry%3D%2221%22%2F%3E%3Cellipse%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(-2.54661%20-25.97236%2027.33368%20-2.6801%200%20141.6)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
The labyrinth – part 1
The later part of the game features a classic labyrinth puzzle. This post is a step by step walkthrough how I used Midjourney and Stable diffusion to achieve the location and the compromises we needed to make along the way.
















