-
%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!
-
%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.
















