Home
Resume

Towerborne UI VFX

First, here's the functional result working in my test scene.

The first step was analysing the visual target and breaking it down into its elements and planning how each element would be achieved.

The first step was analysing the visual target and breaking it down into its elements and planning how each element would be achieved.

I built an Unreal material that displaced UV coordinates and perturbed a procedural radial gradient to get rays. This video is me walking through the system used to animate these rays. UMG animation is all Material Params.

Here are the curves I used to pertub and define the rays as well as some curves used to animate parameters for the UI VFX sequence.

Here are the curves I used to pertub and define the rays as well as some curves used to animate parameters for the UI VFX sequence.

Here is how the CSS comes into the material and drives a Curve Atlas Lookup for parameter animation.

Here is how the CSS comes into the material and drives a Curve Atlas Lookup for parameter animation.

This is an earlier example that shows CSS Values driving LERPs. Rather than piping in raw values, you can drive multiple effects/parameters with one CSS variable.

This is an earlier example that shows CSS Values driving LERPs. Rather than piping in raw values, you can drive multiple effects/parameters with one CSS variable.

Here is what the CSS animation would look like. Note how the parameter animation at the bottom are key values ion the 0 to 1 range....for the LERPs

Here is what the CSS animation would look like. Note how the parameter animation at the bottom are key values ion the 0 to 1 range....for the LERPs

Even though we were not using UMG in the pipeline at this point, we WERE able to use it as an animation authoring tool. This allowed animators to tune animations and pass keyframes directly to devs, rather than have the devs interpret a target.

Even though we were not using UMG in the pipeline at this point, we WERE able to use it as an animation authoring tool. This allowed animators to tune animations and pass keyframes directly to devs, rather than have the devs interpret a target.

Towerborne UI VFX

Towerborne shipped early access with Coherent UI being used for their UI. The developer wanted to figure out how to work with the CSS / Unreal material interface workflow for UI VFX. So I worked with the UI team to establish a test scene where I could explore the connection between Unreal and the Coherent UI system.

We used the end of mission victory screen as a basis for our investigation. The visual target for this screen had a specific effect based off the Light Burst filter in After Effects. I thought this was a good effect to reverse engineer for this system because it would require several parameters that needed to be animated and controlled via CSS/Coherent.

One of the major challenges with the existing pipeline was that you needed UI artists/animators who had expertise in CSS as well as Unreal Materials and such. My system strived to create a pocket where an Unreal artist could iterate on the visuals without having to be trained in the specialized Coherent UI pipeline. I achieved this by keeping the CSS animation scripts simple 0-1, start-end values that would drive a lookup on a Curve Atlas. This way, artists could tweak parameter animation with these curves instead of writing raw values in the CSS keyframes.

Report