[Game development practice] Unity uses ShaderGraph to make a Loading water polo (Energy Ball UI 2D Special Effects URP)

Hits: 0

Article directory

The final effect of this article

I. Introduction

Hi, everyone, my name is Lin Xinfa.
A classmate privately asked me how to make 2Dthe effect of water polo.
In fact, I see that someone has already written a corresponding tutorial on the Internet. Today, let’s make one together~

2. Getting Started with ShaderGraph

I wrote an article before: “ShaderGraph usage tutorial and various special effects cases: Unity2020 (continuous update)”
may be used as ShaderGrapha reference for everyone to get started.
This article directly enters the Graphnode production environment~

3. ShaderGraph makes 2D Loading water polo

Note: The version I use in this article is , the Unityversion 2021.1.9f1c1is Universal RP, 11.0.0if the version you use is different from mine, it may be slightly different

1. Create Unlit [Shader] Graph

What we’re going to do is 2Dan effect that doesn’t need lighting, so we create one Unlit Shader Graph,

LoadingBallOkay , name it,

2. Create a circle

ShaderGraphIn the node, under the Procedural/Shapemenu, you can see the geometry node, as follows

We create a circle ( Ellipsenode),

Note: EllipseIt means ellipse. When the Widthsum Heightis equal, it is a circle, so when you want a circle, it is not a search Circle, but a search Ellipse~

One by one Slider, easy to resize,

3. The effect of filling from bottom to top

Thinking: How do we express the effect of filling a picture from bottom to top?
We decompose this question into two questions:
1. What is used to express the upper, lower, left, and right of the texture coordinates?
2. How to express the boundaries of the upper and lower parts of the filling effect?

Through the UVcoordinates, we can sample any pixel of the texture. Therefore, if we want to express from left to right, it is actually Ufrom 0to 1, and if we want to express from bottom to top, it is Vfrom 0to 1.
In ShaderGraph, there is a UVnode through which we can access the Usum V,
Because what we want is from bottom to top, so we only need Vthe information of the axis, we can use Splitthe UVoutput to separate, after separation, the Uvalue corresponds to the Splitvalue , so we take it out and use the node to preview ,R

At this point, we get the effect Vfrom 0to to 1,
Now to solve the second question, how to express the boundaries of the upper and lower parts?
For this question, we must first understand what the boundary is. The boundary is a threshold. For example, above we 0reach 1this range, and I define 0.35it as the threshold. A smaller value means below the boundary, and a larger value means above the boundary.
How to express it in ShaderGraph? The node is going to be used here Step, we create a new Stepnode,
When it Inis greater than or equal Edgeto, Stepoutput 1, otherwise output 0,
we take the Vvalue just now as Step, Eedgeand then use an Slideras In, that is to say, we use Inas the threshold of the upper and lower boundaries, we Incan control the boundary by passing.
As follows, so that we show the effect of filling from bottom to top

4. Multiply the fill effect with the circle

We multiply 3the filling effect obtained in the first 2step with the circle in the first step to get a filled circle effect~

5. Fill border wave effect

The above border effect is flat and has no undulating effect. Now we are going to make a wavy effect for this border.
In other words, we’re going Stepto Inmake aperturbation, the first thing that comes to mind when doing perturbation isnoise, in ShaderGraph, there are several kinds of noise,

You can choose according to your needs, here I use Gradient Noisenoise,
We add the noise to and we Slidercan see that the perturbed particles are too fine, causing the boundary to be torn,
We can adjust the noise Scaleas follows
We want to make the boundary move horizontally, we can add a time-varying , use and node to UVthe noise ,V And Offset

However, we see that the water surface fluctuates too much now,

We can make one for Remapthe noise and reduce its intensity,

Now the waves are much softer.
At this point, the prototype of a water polo came out.

6. Water polo color

We add a color to the water ball, create a Colornode, and multiply it with the water ball, as follows,

7. Output to the fragment shader

Output the water ball to the Fragment(fragment shader) Base Color, and do transparency culling through Alpha Clip Thresholdit, as follows,
Note Graph Settingsthat it should be turned on Alpha Clip. The rule is to display the pixel when it is Alphalarger than Alpha Clip Thresholdthe pixel, otherwise discard the pixel, and Maskthe effect obtained,

8. Add a little more detail

Finally, we add a little more detail, the final node structure is as follows
Preview the effect,

Fourth, apply to the UI

1. Interface UI

Let’s UGUImake a simple UIone using, among them, use Imageto display the water polo,
Because the shader has not been used yet, it Imageis a white square,

2. Make a material ball

We create a shader, name it LoadingBall, and let it use the above ShaderGraph,
as follows
Assign the shader to Image, and the
interface effect is as follows,

3. Script control progress

We simply write a script to do progress control, the code is as follows

using UnityEngine;
using UnityEngine.UI;

public class LoadingBall : MonoBehaviour
    [Range(0, 1)]
    public float progress = 0.5f;
    public Material mat;
    public Text progressText;

    private int propertyProgressID;

    void Start()
        propertyProgressID = Shader.PropertyToID("progress");

    void Update()
        mat.SetFloat(propertyProgressID, progress);
        progressText.text = $"{Mathf.Floor(progress * 100)}%";

Among them, I ShaderGraphnamed the attribute name of the progress value in the progresscode, and used it in the code to Shader.PropertyToID("progress")get the attribute ID, and then modified the attribute value through Materialthe SetFloatmethod of winter,
hung the LoadingBallscript on the Imagenode of the water polo, and assigned member variables, as follows,

4. Operation effect

The operation effect is as follows,

5. Project source code

I have uploaded the source code of the project in this article GitCode. Interested students can download and learn by themselves. The
project address is: https://gitcode.net/linxinfa/UnityLoadingBallSG
Note: The Unityversion I use in this article is 2021.1.9f1c1, if the version you use is the same as mine different, may vary slightlyUniversal RP11.0.0

Alright, I’m Lin Xinfa, /linxinfa , a developer who works
silently in a small company , I hope I can help more people who want to learn, and encourage each other~Unity

You may also like...

Leave a Reply

Your email address will not be published.