GameJam Assets Megapost: Water Effects and More

My work on the University of Portsmouth Game Jam 2019 submission Fish Styx as my team’s VFX artist. I have revisited this project and decided to make visual upgrades the game’s assets. It took around 3 weeks of work to get this to a level of quality that I am happy with posting online, the following posts will explain how I made some of these effects.
Original Game:
Updated Game:
A lot of the textures I used for the water effects were first made in Substance Designer. These files are then sent through either a panner or a 4waychaos function node to produce the desired effect.
Material used for the bubble particles, makes use of refraction.
The size of the particles increase quickly towards the end of the particle’s life to mimic the bubbles popping.
The background bubbles makes use of a and radial gradient and have no refraction, this plus the fact that they are sprites instead of meshes was intended to save of on processing power and memory.
God ray material, makes use of a depth fade so that it does not cut off when clipping through the game’s floor.
These meshes are then placed in a particle system to mimic the effect of a moving background, this also allows the material to fade out to the end of the particles life via dynamic parameters.
Here is the material used for the water caustics effect, which is then used as a light function.
This is the material on a spot light in game.
In the next post I will cover how I made the post processing effect, which I am proud of :slight_smile:

1 Like

Breakdown of Post Processing Effect
The main focus of my work was the post processing material, making sure that game felt underwater without overpowering the colourful textures of the other assets. This was to match the Game’s Dia De Los Muertos theme and the colourful palette of that aesthetic.

The first component of this material was to mask the absolute world position and then subtract the value into different components to produce the following result.
A blue palette is then multiplied onto each shade of gray and then added to produce a darkening ocean effect. The same technique is applied to a red palette, which is then linearly interpolated with the blue palette with an offset scene depth to make it look like a red light is coming from the right of the screen. This red light effect is connected to some code in the enemy fish blueprint, so that the light grows more intense in colour when the player is close to death.
The same world position layers were also used to linearly interpolate the intensity of water distortion. Like the other Water Effects, the distortion was made with a panning material. In this case the result is multiplied by a texture coordinate node (UVs) to distort the visuals. The Scene’s base colour and normal textures that are blended into this material make use of those distorted UVs.
To make the watery post processing not overly dominant on other assets, 3 masks were made to distinguish these assets. The first mask was made from the base colour input, which took all the meshes and left only the background.
After blending in the current base colour, another mask was made, this time made from a normal map input. This mask was made to make the meshes pop out more.
The final “mask” made use of the custom depth value, something which can be uniquely applied to individual meshes. Any meshes with a high enough custom depth value are masked out from the blue colour but retain their original distortion effects.

For fun, I wanted to display the components of this shader individually and have them blend into each other over time (as shown in the video above). To achieve this I had to make use of a time node and tan node. Since there were 7 different components to this shader in total, they each had 14% of the total time dedicated to being shown. Clamp and lerp nodes were used to achieve this. Each lerp would linearly interpolate between consecutive components.

Rainbow scales and glowing paint effects were applied to the fish models to make them pop out to the player more. To prevent the entire mesh from glowing, the artists of my team were encouraged by me to make RGB maps alongside the main textures. The red components of the texture were used to make rainbow fish scales. The normal maps of the fish would be added onto a panning camera vector which is then fed into a rainbow gradient texture. The paint components are then multiplied by a timed sine node to produce a pulsing glow effect.
All the fish scale parts were made by me in substance designer for the artists to use in Substance Painter. They were achieved by modifying a spherical shape and then warping it with a starburst node to give it it’s rough edges.
This is then placed in a slope blur with a blurred fur texture to give them more detail.

The same techniques were applied to a shape mapper tool in order to make the fish scale flower patterns. Modifiable gradients were then applied to them so that the artists can control the colour of each scale. Masks were also generated to cut out the black background of the textures when using them in substance painter.


Another feature our group wanted to add was randomly generated skull textures. This was achieved with some blueprint logic and if statements. There were 3 patterns in total, so for those we had a random integer be generated. The colours were comprised of vector parameter values, where the RGB channels each had a randomized float between 0 and 1. These skulls were used for both the game’s pain objects and background.

To get the skulls in the background to float like they were underwater, they had to be placed in a particle system. The random variables of the skull texture were then determined by dynamic parameters instead.

These skulls were also randomly generated when used as items that would deal damage to the player in the game. They were given a panning red aura texture that was made in Substance Designer and brought into Unreal.

The final piece of work to be done on this revision was the addition of linear interpolation to the games camera and player character. One major problem with our game when it was submitted to the game jam website was the fact that everything felt stiff, the main character fish would snap into fixed angles when moving up and down and the camera would always be fixed onto the character.

This was solved with the implementation of float interpolation nodes. The max value of interpolation is always changing based on when the up and down movement keys are pressed, and when released the max value returns to 0.

This results in the player character having more smooth movement going up and down. The same technique was applied to the game camera to make movement feel more natural.

Final post I swear :sweat_smile:, I forgot to post about the updated background which now makes use of the random cell generator code made back during the game’s original development. This simply spawns more cells in the background and is offset by the width of each cell.

Art Station Posts:
Original Game Jam Upload:

Updated Game Jam Upload: