-
%27%20fill-opacity%3D%27.5%27%3E%3Cellipse%20fill%3D%22%23b06b3a%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(-330.22002%2063.32086%20-146.98483%20-766.52991%201015.5%20764.6)%22%2F%3E%3Cellipse%20fill%3D%22%23000003%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(-181.66666%20-2076.45942%20408.05028%20-35.69977%201897.2%20457.3)%22%2F%3E%3Cellipse%20fill%3D%22%23061119%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(-111.60801%201769.27183%20-289.1108%20-18.2375%20157.5%20750.8)%22%2F%3E%3Cellipse%20fill%3D%22%23486159%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(167.94477%2094.97372%20-346.75452%20613.17606%20824.5%204.2)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
From image to probes
Maybe instead of matching the ambient lighting and adding multiple spotlights, there was a way to turn the actual AI generated image into lighting probe data. That would make the realtime 3D meshes match the environments absolutely perfectly!
-
%22%20transform%3D%22translate(3.9%203.9)%20scale(7.79297)%22%20fill-opacity%3D%22.5%22%3E%3Cellipse%20fill%3D%22gray%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22rotate(167%2068.8%2043.6)%20scale(40.89333%2020.28189)%22%2F%3E%3Cellipse%20fill%3D%22%230b0b0b%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22rotate(-98.2%20172.9%20-35)%20scale(33.03348%20118.78942)%22%2F%3E%3Cellipse%20fill%3D%22%23080808%22%20cx%3D%2281%22%20cy%3D%228%22%20rx%3D%22106%22%20ry%3D%2213%22%2F%3E%3Cpath%20fill%3D%22%23090909%22%20d%3D%22M-32.5%20128l39-55.7%2068%2047.7-39%2055.7z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
Creating a steam page
I have never created a Steam page for a game before. I have made some art assets for one, but I never did the actual setup. Now it was time to learn.
-
%27%20fill-opacity%3D%27.5%27%3E%3Cellipse%20fill%3D%22%23d8efb0%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(925.18081%20-392.5199%20233.78142%20551.0296%201983%204.3)%22%2F%3E%3Cellipse%20fill%3D%22%23182a36%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(241.5707%20371.34004%20-483.2963%20314.40247%20342%20353.5)%22%2F%3E%3Cellipse%20fill%3D%22%23112300%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22rotate(-95.8%201495.7%20-350.6)%20scale(225.41939%20851.67613)%22%2F%3E%3Cellipse%20fill%3D%22%23c36932%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(-1286.2275%20311.17118%20-66.45843%20-274.70624%20730%20991.5)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
Depth of field
I got a comment at work about the characters not matching perfectly with the slightly blurry backgrounds. I thought if some depth of field was at all possible as the backgrounds are not really 3D and might have some blur baked in.
-
%27%20fill-opacity%3D%27.5%27%3E%3Cellipse%20fill%3D%22%23dbeba8%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22rotate(-31.1%20621.2%20-1131.7)%20scale(532.54849%20637.72773)%22%2F%3E%3Cpath%20fill%3D%22%23000208%22%20fill-opacity%3D%22.5%22%20d%3D%22M-58.4%20789.1l1212.5%20394-165.9%20510.5-1212.5-394z%22%2F%3E%3Cellipse%20fill%3D%22%2332271d%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(377.58863%20-245.11598%20631.1717%20972.28772%202391.9%20905.3)%22%2F%3E%3Cellipse%20fill%3D%22%23b66323%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(61.04865%20-254.28593%201299.58578%20312.00294%201742.2%201069.4)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
Very experimental grass system
For scenes that have fluffy grass, I felt that the grass could be extra fluffy. Some sort of “fur” setup. It was not that easy.
-
%27%20fill-opacity%3D%27.5%27%3E%3Cellipse%20fill%3D%22%23001302%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(505.10499%20110.78311%20-311.75527%201421.4183%20297.5%20646.8)%22%2F%3E%3Cellipse%20fill%3D%22%2374baa3%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(-290.41442%20517.51242%20-348.18047%20-195.38977%201411%20724.6)%22%2F%3E%3Cpath%20fill%3D%22%2382606c%22%20fill-opacity%3D%22.5%22%20d%3D%22M2120.5%201006L958.7-146.5%202564.4%2014.2z%22%2F%3E%3Cellipse%20fill%3D%22%23127b5a%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(98.56037%20-1210.463%20240.9223%2019.61678%20817.2%20455.2)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
AI Assisted Gamedev: Adding reflections
With the pipeline I currently had set up, it is easy to add 3D characters on top of 2D images with shadows and interactive lighting. But what about reflective surfaces? Let’s go!
-

Adding life to a simple 2D scene
The 2D locations can feel pretty static. Especially when there are no other characters around. But I want these scenes to be full of movement and life. Luckily the cyberpunk setting allows me to add all sorts of secondary movement into the frame!
-
%22%20transform%3D%22translate(3.6%203.6)%20scale(7.11719)%22%20fill-opacity%3D%22.5%22%3E%3Cellipse%20fill%3D%22%23cc6f8f%22%20cx%3D%22241%22%20cy%3D%2237%22%20rx%3D%2241%22%20ry%3D%2241%22%2F%3E%3Cellipse%20fill%3D%22%23100d0e%22%20cx%3D%2244%22%20cy%3D%22160%22%20rx%3D%22203%22%20ry%3D%2295%22%2F%3E%3Cellipse%20fill%3D%22%2300744a%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(40.0772%20-14.5869%2017.47958%2048.02476%20111.2%2012.6)%22%2F%3E%3Cellipse%20fill%3D%22%23535353%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22rotate(106.1%2077.3%2090.8)%20scale(51.6118%2040.89404)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
AI assisted 3D modeling: a cyborg
For a character that is “user facing” I wanted to make an over the top female robot. Someone that would have replaced waiters, clerks and all service professions in general.
-
%22%20transform%3D%22matrix(4%200%200%204%202%202)%22%20fill-opacity%3D%22.5%22%3E%3Cellipse%20fill%3D%22%233a3a3b%22%20cx%3D%22223%22%20cy%3D%22126%22%20rx%3D%2255%22%20ry%3D%22251%22%2F%3E%3Cellipse%20fill%3D%22%23d7d8d6%22%20cy%3D%22121%22%20rx%3D%22168%22%20ry%3D%22168%22%2F%3E%3Cellipse%20fill%3D%22%23868680%22%20cx%3D%2262%22%20cy%3D%22135%22%20rx%3D%2237%22%20ry%3D%2288%22%2F%3E%3Cellipse%20fill%3D%22%23f4f3f5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22rotate(-102.6%2015%20-.1)%20scale(45.38188%20135.93445)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
Modeling a robot with some added difficulty
After doing the first model, I wanted to make a robot. As there would be many robotic characters in the game’s story.
-
%27%20fill-opacity%3D%27.5%27%3E%3Cellipse%20fill%3D%22%2308a179%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(60.56775%20282.52333%20-368.57858%2079.0164%201945.3%2093.9)%22%2F%3E%3Cellipse%20fill%3D%22%2379746b%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22rotate(-111.6%20481.6%20-58.7)%20scale(516.42533%20227.92326)%22%2F%3E%3Cellipse%20fill%3D%22%23030000%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(-70.16175%20-224.1942%20155.27042%20-48.592%201200.5%2043.4)%22%2F%3E%3Cellipse%20fill%3D%22%23009d90%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(-14.38726%20-128.26528%20220.24608%20-24.70456%202044.4%2033.1)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
AI assisted portrait generation
I set out to see how I could use Midjourney to generate a portrait image for the bearded weirdo.
-
%27%20fill-opacity%3D%27.5%27%3E%3Cellipse%20fill%3D%22%23615c5e%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(-85.99911%20-643.9115%20315.70937%20-42.1653%201318.7%201037.2)%22%2F%3E%3Cellipse%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22rotate(-177.3%20128.3%20347.2)%20scale(408.0466%202254.57875)%22%2F%3E%3Cellipse%20fill%3D%22%23004c24%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(114.9543%20-450.98367%20359.4564%2091.62429%202540.4%201162.4)%22%2F%3E%3Cellipse%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(-125.29356%20-295.17312%20192.97747%20-81.91408%202513%20135.5)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
A brief test of AI voiceovers & icons
Short update on the progress: testing icons and VO
















