-

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
















