-
%27%20fill-opacity%3D%27.5%27%3E%3Cellipse%20fill%3D%22%23618e7e%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(-244.75949%2036.57955%20-69.49155%20-464.9788%20860%20356.7)%22%2F%3E%3Cellipse%20fill%3D%22%230f090a%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(158.6332%201617.86654%20-339.25642%2033.26438%201629%20617.5)%22%2F%3E%3Cellipse%20fill%3D%22%23140a0d%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(-274.95735%20-1549.09325%20284.99754%20-50.58583%20193.6%20464.8)%22%2F%3E%3Cellipse%20fill%3D%22%23097852%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(35.99976%20194.23732%20-424.00157%2078.58405%20888%20130.3)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
About the story
This week’s update will be about writing the story for the first episode.
-

AI generated, animated logo
Naturally the project also needed an AI generated animated logo! I used Midjourney to create the logo and After Effects to add in the text and handle the animation.
-
%27%20fill-opacity%3D%27.5%27%3E%3Cellipse%20fill%3D%22%23b3747d%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22rotate(76.5%20312%20767.8)%20scale(895.16941%20411.54715)%22%2F%3E%3Cellipse%20fill%3D%22%23000c07%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(-309.32378%20111.42576%20-600.40083%20-1666.7443%20249.2%20834.3)%22%2F%3E%3Cellipse%20fill%3D%22%23d17f76%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22rotate(148.7%20400.1%20225)%20scale(192.74208%20388.32413)%22%2F%3E%3Cellipse%20fill%3D%22%2346605c%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(-412.26038%20-293.87012%20158.14204%20-221.85208%20735.6%20738.8)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
AI powered fluid simulations
I took an upcoming AI powered fluid simulation tool for a test dive to see if it would allow me to add realistic, interactive smoke to the game.
-
%22%20transform%3D%22translate(4.1%204.1)%20scale(8.27344)%22%20fill-opacity%3D%22.5%22%3E%3Cellipse%20fill%3D%22%23b4b4b4%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(26.73448%2021.65338%20-51.49004%2063.5725%2094%2010)%22%2F%3E%3Cellipse%20fill%3D%22%23282828%22%20cx%3D%22162%22%20cy%3D%22102%22%20rx%3D%2272%22%20ry%3D%2266%22%2F%3E%3Cellipse%20fill%3D%22%23262626%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22rotate(-17%20161.7%20-772)%20scale(63.94423%2028.83786)%22%2F%3E%3Cellipse%20fill%3D%22%231d1d1d%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(-34.48342%20143.32143%20-22.01947%20-5.29793%209.1%209.4)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
Maglev train – an animated location
For the in-game overworld map I decided to create a maglev station. This would be a nice and simple location to create some nice animations in!
-
%27%20fill-opacity%3D%27.5%27%3E%3Cellipse%20fill%3D%22%2392273c%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(-651.32862%20-161.18754%2048.51848%20-196.0541%201355.5%20460.4)%22%2F%3E%3Cellipse%20fill%3D%22%23001c14%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(-291.19157%2079.115%20-201.34028%20-741.05535%2094.2%20466)%22%2F%3E%3Cellipse%20fill%3D%22%23395850%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22rotate(65.7%2039.7%20550.3)%20scale(561.16189%20189.51526)%22%2F%3E%3Cellipse%20fill%3D%22%235b0018%22%20fill-opacity%3D%22.5%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(5.3711%20171.03907%20-422.89822%2013.2802%201420.3%20110)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
Advanced animated neon lights material
This week, I decided to continue along the lines of the flickering screens. But this time I would tackle complex neon sign / light animations.
-
%22%20transform%3D%22matrix(6.75%200%200%206.75%203.4%203.4)%22%20fill-opacity%3D%22.5%22%3E%3Cellipse%20fill%3D%22%234f4f4f%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22rotate(-82.4%20119.2%20-55.5)%20scale(49.17751%2058.00786)%22%2F%3E%3Cellipse%20fill%3D%22%234e4e4e%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22rotate(-10.1%20407%20-8)%20scale(47.22937%2073.09596)%22%2F%3E%3Cellipse%20fill%3D%22%23121212%22%20cx%3D%2278%22%20cy%3D%2258%22%20rx%3D%2224%22%20ry%3D%22255%22%2F%3E%3Cellipse%20fill%3D%22%23101010%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22matrix(23.73696%20-1.05525%209.72978%20218.86345%20238%2034.3)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
Cadence
The walk animations for the characters have been pretty wonky for long enough! It was finally time to address the issues – or try to.
-
%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.
















