Everything to Know About the Properties of Water FX in Games

When you think of water FX, what’s the first thing that comes to your mind?

There’s a good chance you think of environment levels like the underwater worlds of Mario, something like Moana's kaleidoscopic wonder of color and animation, the water-bending abilities in Avatar: The Last Airbender, or you think of something simple like Legend of Zelda: The Wind Waker. Either way, water often plays an integral part of a game or show's plot. It's significant to the player and viewer in some way or another. 

Water effects in games are almost always stylized to some point. Even if photoreal water is the goal, artistic choices are still made to find the right look and style for water based on the needs of a project. Also, the game engine itself could impact various technical properties in how water works so the water is adapted to look and act in certain ways.

Water splash by Kees Klop / VFX Apprentice

Water has historically been one of the most challenging yet beautiful FX throughout gaming history. Thousands of artists and developers have all tried hundreds of different techniques to simulate water for environments, character powers, and general effects. Let's dive into a rich ocean of all things water FX. 

What Are the Properties of Water VFX artists should know?

While it might seem obvious, water looks, feels, and reacts in very particular ways. Most people are already very familiar with some sort of body of water native to them. Let's talk about a few of these defining characteristics. 

• Transparency: Water is generally translucent, but in games water surfaces are often times not. You usually can't see what is below until you jump in. This divides the level in a segment under and above the water to avoid having to render both at the same time.
• Refraction: Water refracts light, bending and distorting the images of objects seen through it. Recreating this in a game can become quite complex which is why most games try to avoid big environments that are seen through a water surface.
• Reflection: Clean water reflects the surrounding environment, including the sky, terrain, and objects. By using water caustics textures games recreate the look of water reflecting light without having to calculate accurate light reflections.
• Waves: Waves might be the easiest distinguishing detail of water, as nothing else really moves like a wave. In games you can make waves as simple or complex as you want. You can overlap a few normal maps on a flat plane and call it a day or you can go all out with simulated vertex displacement.

Overall, the properties of water in video games are designed to create a realistic and immersive environment that enhances the player's experience, not necessarily distracting them.

If you'd like to dive into an evolution of water FX, check out this great video from Ghostcharm. 

Approaching the Design of Water

When it comes to defining the look of water for a project, you can often strip everything down with sketches, style frames, or flipbooks focused on the line and fill of the shape. Then further define the look by adding depth with a separate background color, add shadows, and finish off your design with a touch of foam. 

Water splashes by Sjors de Laat / VFX Apprentice.

From there it's all about diving into the movement of splashes, dissipation, viscosity, and light. As you progress through a project you will take your stylized frames and apply them to a variety of animations, including water falls, flows, pitch waves, impacts, ripples, and bubbles. 

Water fling by Chris Graf / VFX Apprentice.

Want to take a really deep dive into Water FX? Check out the 2D and 3D elemental courses included with VFX-A All Access. 

What Makes a Great 2D Water Effect? 

Good 2D water effects in video games have several key characteristics that make them stand out and feel believable. Here are some factors to consider when creating 2D water effects. 

• Realistic movement: Water should move in a way that is believable and consistent with its environment. This includes waves, ripples, and other disturbances caused by wind, currents, or objects in the water.
• Dynamic interaction: It should definitely interact with objects in the scene in a natural and realistic way. This can include splashes, foam, and other effects that are generated when objects move through the water. Foam is an easy detail that immediately sells the effect of water. 
• Depth and transparency: The water should have a sense of depth and transparency. This can be achieved using shaders and post-processing effects to simulate reflections and refraction.
• Lighting and shadows: It should reflect and refract light in a way that is consistent with its environment. This includes creating realistic shadows and highlights that change as the lighting in the scene changes.
• Sound effects: Sound effects can add to the realism of water effects by simulating the sound of water moving and splashing. Everyone knows what water splashing or washing up on a shore sounds like. 
• Performance: 2D water effects are typically already optimized for performance, ensuring that they don't negatively impact the game's frame rate or cause other technical issues. Flipbooks will take up texture space, but that's often not an issue. You start to run into problems when you use too much transparency or complex simulations for "realistic" water.

Overall, good 2D and 3D water FX should create a sense of immersion and realism for the player, while still being optimized for performance and gameplay. 

If you want a step-by-step tutorial on how to hand draw water elements, what to consider with shape, and how to think about transparency, be sure to watch this tutorial and follow along with the article.

Water Simulations and Effects

Many water FX, especially when 2D, use flipbooks and frame-by-frame animations. When it comes to simulating waves, normal maps are used to create height or depth. The simplest form of water simulation used today is basically a flat surface with a few normal map textures that are combined to create the appearance of waves and ripples.

In traditional film and tv VFX, liquid simulations are modeled as a three-dimensional volumes, with a surface that can move and deform based on physical properties like waves, ripples, and turbulence. The simulation can take into account factors like wind to create a more lifelike and believable effect. 

When it comes to games, you typically want to avoid using volume-based calculations in real-time. This is why players are often only looking at the water surface, rather than a whole volume of simulated water.

It might seem like there’s a certain degree of randomness to how water moves and reacts to external factors. The human eye expects this level of randomness when they look at water, whether it's two dimensional or three. However, to completely contradict ourselves, the movement of water is influenced by a combination of factors, including the topography of the environment, gravity, wind, and other external forces.

The way water moves in a river, for example, is influenced by the shape of the riverbed, the amount of water flowing through the river, and the forces of friction and turbulence. However, there are also some predictable patterns of water movement that can be observed.

For example, water tends to flow downhill, and it follows the path of least resistance. In addition, the movement of water can be affected by tides, currents, and other natural phenomena. So like any aspect of designing FX for games, there needs to be a reason for why something moves a certain way.

Examples of Exceptional Water FX in Games

There are many great 2D and 3D water effects in video games that range in tone, style and overall look. Let’s discuss!

Sea of Thieves - Some of the best water in any game. The waves are just insane.

Firewatch - An excellent example of really nice calm water.

Witcher 3 -  Plenty of stand out moments with the water FX where they actually play with the translucency a lot.

League of Legends - VFX Apprentice Founder Jason Keyser had the pleasure of contributing to the Rise of the Elements update for League of Legends, working on various splashy VFX throughout the ocean version of the environment.

Donkey Kong Country: Tropical Freeze - The water in this game is incredibly dynamic, with waves that move in all directions and splashes that create a sense of impact. 

The Legend of Zelda: The Wind Waker - The water in this iconic video game is beautifully rendered, with its bright blue color, gentle waves, and subtle shading creating a serene and peaceful atmosphere. Given the significance of water to the game’s plot, if The Wind Waker had to get anything right, it was the water FX. 

Hollow Knight - The water in Hollow Knight is beautifully animated, with ripples and reflections that give it a realistic look, even while the game isn’t necessarily meant to be realistic.  

Ori and the Blind Forest - The water in Ori and the Blind Forest is gorgeously rendered, with waves and currents that create a sense of motion and depth 

Battlefield 2042 -  Great representations of realistic water FX, both for looks and optimization.

Celeste - The water effects in Celeste are simple yet effective, with the use of color and transparency to convey depth and movement 

Abzu - This might be the outlier here, and we felt compelled to mention it, but the game is built around convincing water FX. It's a stunning example of what care and devotion to water FX in a game can yield.  

A Hat in Time - The water in A Hat in Time is simple but charming, with a bright blue color and gentle waves that give it a serene and peaceful feel. Remember its important that your FX fit the overall tone of the game. 

Cuphead - The water in Cuphead is reminiscent of classic 1930s animation, with waves that move in a fluid, exaggerated motion. If you want to hear from one of the animators of The Cuphead Show, we recently sat down with someone who worked on it, 2D FX artist Milena Gonçalez! 

Rayman Legends - The water in Rayman Legends is beautifully animated, with waves that move in a realistic manner and reflections that add depth and dimension

So, aside from playing games, watching shows and movies, what is the best way to understand the art of creating beautiful water effects? By actually making them! Let's go over a few fundamental tips and tricks inside some of the programs you'll be using. 

Creating Basic Water FX in Unreal Engine 

There are several ways to create 2D water effects in Unreal Engine, depending on the desired level of realism and complexity. Here are some basic steps that can help you get started: 

• Create a new scene in Unreal Engine
• Add a water material to a sprite or plane mesh that will serve as the surface of the water. You can create a water material by using a combination of textures, shaders, and post-process effects such as reflections, refraction, and depth fade
• Set up a camera that will capture the water surface and the surrounding environment. This camera should be positioned above or at the water level, and should have a wide enough field of view to capture the entire scene
• Add water ripples or waves to the water surface using a particle system. You can use a combination of sprite particles and animated materials to create the illusion of movement and depth
• Add additional effects such as foam, splashes, and mist to enhance the realism of the water. You can use particle systems, decals, or mesh particles to create these effects
• Adjust the lighting and post-process settings to achieve the desired mood and atmosphere for the scene

These are just the basic steps to create water effects in Unreal Engine. There are many other techniques and tools available that can help you create more advanced and realistic water effects, such as physics simulation, dynamic water volumes, and advanced lighting and shading techniques.

Creating Basic Water FX in Unity

In Unity, you can create water effects using a combination of built-in components and custom scripts. Here are the basic steps to create water effects in Unity:

• Create a new project in Unity, or open an existing one. 
• Add a Sprite Renderer component to a new GameObject to serve as the water surface
• Assign a water texture to the Sprite Renderer component to make the water look realistic You can use a pre-made texture or create your own in an image editing software.
• Add a Rigidbody2D component to the water GameObject to enable physics simulation, so that the water will react to other objects in the scene
• Create a new Physics Material 2D asset and assign it to the Rigidbody2D component to set the physical properties of the water, such as friction and bounciness
• Add a Box Collider 2D component to the water GameObject to define its boundaries and shape
• Create a new script to handle the water's movement and animation. This script should update the water's position and texture over time to simulate waves and ripples. You can use built-in Unity functions like Perlin noise or custom algorithms to generate the movement and animation
• Attach the script to the water GameObject and customize the settings to achieve the desired water effect
• Add any additional effects, such as particle effects, to enhance the realism of the water

This is just a basic outline, and there are many ways to customize and optimize 2D water effects in Unity.

Creating Basic Water FX in Blender

To create water effects in Blender, you can follow these steps:

• Create a new plane object by pressing Shift+A and selecting "Plane" from the menu
• Enter Edit Mode by pressing Tab, then press A to select all vertices and press X to delete them
• Add a new material to the plane by clicking on the "Material" tab in the Properties window and clicking the "New" button
• In the Material tab, set the Shader to "Emission" and set the Color to a light blue or turquoise color
• Add a "Wave" modifier to the plane by clicking on the "Modifiers" tab in the Properties window and selecting "Wave" from the list
• In the Wave modifier settings, adjust the Amplitude, Width, and Speed values to your liking to create a water-like effect
• Add a "Displace" modifier to the plane by clicking on the "Modifiers" tab and selecting "Displace" from the list
• In the Displace modifier settings, select the "Clouds" texture and adjust the strength to create a ripple effect on the water
• You can also add additional effects, such as foam or splashes, by creating new objects and adding materials with appropriate textures

With these steps, you should be able to create a basic water effect in Blender. Like always, you can play around and try whatever techniques and tricks you'd like to get the exact "look" you're going for. .

Creating Basic Water FX in After Effects

To create water effects in After Effects, you can follow these steps

• Create a new composition by clicking on "Composition" in the top menu bar and selecting "New Composition". Set the width and height to your desired size and duration
• Create a new solid layer by clicking on "Layer" in the top menu bar and selecting "New" and then "Solid". Choose a color for your solid layer
• Apply the "Wave Warp" effect to the solid layer by selecting it from the Effects & Presets panel or by going to "Effect" in the top menu bar and selecting "Distort" and then "Wave Warp"
• Adjust the settings of the Wave Warp effect to create a water-like effect. You can experiment with different values for the wave height, wave width, wave speed, wave direction, and wave type
• Apply the "Turbulent Displace" effect to the solid layer by selecting it from the Effects & Presets panel or by going to "Effect" in the top menu bar and selecting "Distort" and then "Turbulent Displace"
• Adjust the settings of the Turbulent Displace effect to add ripples or turbulence to the water. You can experiment with different values for the amount, size, and complexity
• Add a new adjustment layer by clicking on "Layer" in the top menu bar and selecting "New" and then "Adjustment Layer"
• Apply the "Fractal Noise" effect to the adjustment layer by selecting it from the Effects & Presets panel or by going to "Effect" in the top menu bar and selecting "Noise & Grain" and then "Fractal Noise"
• Adjust the settings of the Fractal Noise effect to add texture to the water surface. You can experiment with different values for the fractal type, complexity, contrast, and brightness
• Set the blending mode of the adjustment layer to "Overlay" or "Screen" to blend the fractal noise texture with the water layer

These are just very basic steps, but they should give you a solid foundation for creating water effects inside After Effects. 

More Suggested FX Reading:

• The 5 Must-Know Artistic Principles of Video Game Visual FX
• 3 Tips on Making Technically Sound and Sophisticated VFX
• What Tools Do You Need to Create Video Game VFX?

Learn how to Make VFX for Games and Animation