How to Create a Dripping Liquid Effect in the Unity Engine

While working on our game Plash, we wanted to implement a dripping liquid effect in the Unity Engine that would show paint dripping from the top to the bottom of the screen without getting in the way of the UI. Having never done it before, we experimented with a few techniques using shaders but we couldn’t get the desired result until we discovered Trails in the Unity Particle System. As shown in the animation below, we got exactly what we were aiming for. In this tutorial we will show you how you can do this in very simple steps.

Create a Basic Dripping Liquid Effect

Let’s start by making a simple dripping effect that flows vertically along the screen.

Create a Unity Project

First we need to create a new Unity project. I’m using Unity Editor version 2021.3.16f1 and Unity Hub version 3.4.1. These are the latest versions as of the writing of this blog. To create a new project, open the Unity Hub and click on New Project. Select the 3D Core template, give your project a name and a location, then click on Create Project.

Add a Simple UI

Once the project is created, In the object hierarchy, select Main Camera. In the inspector, set its position to x = 0, y = 0 and z = -150. This will center the camera and move it back a bit to make space for the UI and the particle system. Change the camera’s projection from Perspective to Orthographic to avoid perspective distortion since the UI is in 2d.

Right click the gizmo in the top right and click on Back to switch to the back view. 

Create a UI Canvas by right clicking inside the object hierarchy panel and select UI -> Canvas. Rename it to Main Menu Canvas by right clicking it and selecting Rename. Select Main Menu Canvas and in the Inspector, set the Render Mode to World Space because later we will modify the z value of some objects and therefore we need depth. Set the x, y, and z positions to 0 so that the main menu is visible to the camera. Set the width to 1120 px and the height to 611 px. I’m only setting specific width and height values so that you can compare results while working through this tutorial. Otherwise,  you can adjust them as you wish.

Double click Main Menu Canvas to focus the view on the canvas. Right click Main Menu Canvas and select UI -> Panel to add a background panel to the canvas and rename it to Background. Select Background and in the inspector, click the white rectangle next to Color and set the color to a dark gray shade, I set the red, green and blue values to 152. Set the alpha to 255 to give the panel a solid color and remove the transparency. 

We need to increase the size of the orthographic camera in order to capture the UI elements. Click the 2D button (highlighted in the gif below) in the top bar to get a better view of the canvas and camera edges. Then click on Main Camera and increase the size of the orthographic camera until the borders of the camera get close to the canvas edges but do not go beyond. I increased the size to around 246.

Let’s add a simple banner and text, right click Main Menu Canvas and select UI -> Panel and name it Banner. Select the Banner panel and in the inspector, set Top to 130 and Bottom to 370 to make the banner narrower. Set the Color’s alpha to 255 to make it opaque.

Now to add a text inside the banner, right click Banner and select UI -> Text – TextMeshPro and rename it Banner Text. You might get a window asking you to import TextMeshPro, click Import TMP Essentials and wait for it to finish importing.

Select Banner Text and in the Inspector set the text to Main Menu and center the text horizontally.

Now we add 2 buttons. Right click Main Menu Canvas and select UI -> Button – TextMeshPro and name it Play Button. Set the x, y and z position values to 0. In the Hierarchy, Expand the Play Button, select “Text (TMP)”, then set the text to Play in the inspector. Repeat this step again but this time set the y position to -60, name the button Quit Button and set its text to Quit. Now you should have something like this:

Add the Particle System

Now we add the particle system. To make things easier, click the Game tab and drag it until you can split the view vertically into two sections, then release the mouse button to apply the view.

Right click the Hierarchy and select Effects -> Particle System and name it Dripping Particles. Set its position to x = 0, y = 310, and z =  -50. We move it above the canvas in the y-axis to hide where the trails start, giving the impression that the trail is coming from above. We move it back a bit in the z-axis to avoid particles rendering behind the UI canvas. Select Dripping Particles and in the inspector set the following values:

1. Set Start Lifetime to 20. This will decide how many seconds one trail will flow downwards until it’s reset and starts again from the top.
2. Set Start Speed to -40. This sets the speed of the trail movement. We set a negative value to make it flow downwards.
3. Set Simulation Space to World. Later we will display the trails behind the banner and the two buttons. In order to do this, we need to give the particle system a z position value which is why we need to set the simulation space to world space.

Scroll down to the Emission settings and set the Rate over Time to 0.3. This controls how many particles are emitted per second. Increase this value if you want to see more trails on screen.

Scroll down to the Shape settings, change the Shape to Rectangle.

Scroll down to the Trails settings, click the checkbox next to Trails and set the Width over Trails to 5. You can play around with this value to change the thickness of the trail.

As you can see in the image above you might get a warning message saying “Assign a Trail Material in the Render Module”. To fix this, scroll down to the Renderer tab and set the Material to Default-ParticleSystem and Trail Material to Default-Line. Now the error message should be gone and the trails should have a white color.

In the Shape settings, increase the x value of the Scale section until the trails are spread across the width of the screen in the Game tab.

We now have a simple trail particle system that looks decent. However, if you look closely, you will notice that the trails render on top of the UI elements such as buttons and the banner. If this is the effect you’re looking for, then you can skip to the next section Making the Trails Look Nicer, otherwise, keep reading.

To fix this, we will have to separate the UI elements from the background canvas. Right click Main Menu Canvas and select Duplicate and name it Elements Canvas. In the Hierarchy, expand Main Menu Canvas and delete these three elements: Banner, Play button and Quit Button. Then expand the Elements Canvas and delete Background. Now you should have two canvases that look like this:

Select Elements Canvas and in the inspector set the z value of the position to -100. Since the particle system’s z position is -50, the UI elements now appear on top of the trails.

We now have a dripping liquid effect that does not obstruct the UI. However, it still looks a bit boring, so let’s make it more interesting.

Making the Trails Look Nicer

Change the Color

First let’s give the trails a better color. Select Dripping Particles and click the Start Color in the inspector. I will give it a blue color with RGB values of red = 0, green =  71 and blue = 255. You can choose any color you like.

Make the Trails Disappear Smoothly

Currently when a trail reaches the end of its lifetime, it abruptly disappears and starts flowing again from the top. To improve this, in the inspector, click the check mark next to Color over Lifetime and click on the Color box. Then follow these steps:

1. Select the handle on the bottom left and set the color to a dark gray value. Set the RGB values to 130.
2. Select the handle in the top left and set Location to 50%.
3. Select the top right handle and set Alpha to 0.

This will also give the trails the effect of a liquid dissipating over time as it starts with a dark color and slowly loses color as it flows down.

Add Noise to the Trails

Right now the trails flow in a straight, vertical line which is ok but can look better. We can add some noise to the trails. This will make it look like a drop of water moving down a windshield on a rainy day. To do this, select Dripping Particles and click the check mark next to Noise in the inspector. Then set the following values:

1. Click the Separate Axes checkbox and set the position value to x = 4, y = 0, z = 0.
2. Set the frequency to 2.
3. Uncheck the Damping checkbox.
4. Set Octaves to 4.

Change the Shape of the Trail End

We improved the path of the trail so it doesn’t move in a straight line. However, if you look at the end of the trail it looks flat which can be improved to look more realistic. To do this, we will need to give it a texture. In the project explorer, right click the assets folder and select Create -> Material and name it Drip Trail Material. Select it and in the inspector set Shader to Legacy Shaders -> Particles -> Alpha Blended.

Now we need to create a simple texture. We will need to use an image editing software, you can choose any one of your choice. I will be using Gimp version 2.10.32. Launch Gimp and create a new document by clicking File -> New. Set the width and height to 16 pixels, click Advanced Options and set “Fill with” to Transparency then click OK.

Press the Rectangle Select Tool until the menu is expanded then select Ellipse Select.

Click and drag anywhere in the canvas and in the Ellipse Select window in the left panel, set the x and y position to 0 and the width and height to 16.

Set the foreground color to white, select the Bucket Fill Tool, then click on the circle. This will fill the circular selection with a white color and you should have something like this:

Now select File -> Export and browse to the Assets folder of your Unity project. Name the file “Trail Texture.png” and click Export. Gimp will display a window with png settings, leave them as default and press Export. Make sure the texture is saved in png format to get transparency. Now open the Unity editor again and you should see the png texture in the Assets folder. Select it and set the Texture Type to “Sprite (2D and UI)” and click apply.

Select Drip Trail Material and drag the texture Trail Texture to the Particle Texture spot.

The final step is to apply the trail material to the particle system. Select Dripping Particles in the hierarchy and in the inspector, navigate to the Renderer settings and set the Material and Trail Material to the Drip Trail Material that we created.

And THAT’S IT!!!!! Now you should have a dripping liquid effect that looks like the animation at the start of this blog.

Conclusion

In this blog we implemented dripping liquid effect in the Unity engine using very simple steps without writing a single line of code. This shows how powerful the particle system is and how it can be used for many different effects. We only explored a few of the settings that you can tinker with in the particle system settings. I encourage you to play around with the settings and see how they alter the particles, that’s how we discovered trails in the first place! We implemented this effect in our own mobile game, if you’re interested, you can check it out in our game Plash. Hopefully you found this blog useful. If so, we would appreciate if you can share it with your friends and colleagues by clicking the “Tweet” link below.