Task: Create Beer VFX for the accumulators in Beerfest
The final effect, seen left, is a combination of several layers of sprites and particle effects using custom shaders and a little bloom post processing to give it extra glow. It was created in Unity using Shadergraph, particle systems, and an animation controller.
Below is a breakdown of the shader used to make the main liquid and how the animations were set up. I was responsible for all VFX and animation, I did not create the art of the mug itself. The top level foam is a separate sprite with a different shader that I created but is not documented here.
Several other effects seen in this clip are also my work.
This is an overview of the Shadergraph. This is one of the more complicated shaders I've ever made.
At the top of the of the shader, using a custom interpolator, I am creating a reference point for the fill amount in the center of the game object relative to world position. The fill amount property is used in the animator to fill the beer glass to the desired amount per level.
Here is where that custom interpolator is used. It is being fed into a rotate node, which also has exposed properties for animation. The fill position is also the center of the white foam layer. The top and bottom lines of the foam are defined here. As of putting this together I see there is a left over property just hanging out there doing nothing. This is likely an artifact of iteration. Frequently when making something this complicated I am kind of just guessing how I think it will work and I am often wrong, but while troubleshooting, I sometimes disconnect things to test them then forget to go back and clean it up. I try not to make a habit of sloppy work but I am in fact human.
Here is where the visuals for the foam are created. This is a slightly modified but fairly common setup for a scrolling a voronoi.
Here we see a sampled texture of a gradient that is used to give the liquid more depth, sampling does tend to be more expensive than building than building procedurally, but for the sake of ease of use in the future I stayed with a sampled texture.
Below that section is the bubble's subgraph which takes in several parameters. It is further explained in the next section.
This is the bubbles subgraph, it takes the same bubble texture and samples it twice. Each sample is offset in the Y-axis at slightly different speeds which are set in the inspector. They are also both offset by a scrolling noise texture in the X-axis to give them a little wobble. They are also given an additional X-offset for animation so when the mugs are moved quickly the bubbles can react in a semi-realistic way.
This is the final look of the liquid shader in prefab mode.
The glow effects are a sprite highlight, which is just an outline of the mug with a scrolling noise texture over the top, and a few particle systems.
The scrolling noise texture is another custom shader built in Shadergraph but used in multiple places in the project.
The particle systems utilizer texture sheet animations, or more accurately flipbooks, to give the sparkles and bubbles a little more excitement.
All effects have exposed color properties and are nested prefab variants for maximum usefulness and efficiency.
Animation Set up
Each accumulator is setup as a prefab and is using the same animation controller and animations. Here inside the animator I am using two layers of animation, the base layer is used to set the level of the accumulator with an int parameter which is set through code, some of which I was involved in writing but is not shared here.
The second layer is used to blend the hit animation with any given level animation, this is preferable to having a separate hit animation at every level. This layer also handles a win animation which is seen in the video at the top of this page. It blends any level with the top level animation and turns on all the FX layers and celebrations.
This is just an example of the actual animation keys that are played when entering a level. As you can see the game object position and rotation are used to shake the mug but the exposed material parameters are also animated here.