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

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 require 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?

To answer the first question first, in texture coordinates, we use the value range of UV坐标系, Uand Vthe value range is 0 ~ 1, draw a picture,

through the UVcoordinates, we can sample any pixel of the texture, so we want to express from left to right , in fact, it is Ufrom 0to 1, if you 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 we want from bottom to top, so we only need Vthe information of the axis, we can use Splitthe UVoutput to separate, after separation, Uthe value corresponds Splitto R, Vcorresponding to the value Slplitof G, so we Gtake it out and use the Previewnode to preview it,

At this point, we have obtained the effect Vfrom 0to to 1,

now to solve the second problem, 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 take it Inas the threshold of the upper and lower boundaries, we pass Inthe You can control the boundaries.
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 and the noise Slider. You can see that the disturbing particles are too fine, causing the boundary to be torn.

We can adjust the noise Scale. As follows,

we want to make the boundary move horizontally, we can Add a time-varying to the UVnoise , using the sum node,VOffsetTimeTill And Offset

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

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

At this time, the waves are much gentler. At this point

, the prototype of a water polo comes 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 also Alpha Clip Thresholddo transparency culling, as follows,

pay attention Graph Settingsto turn it on Alpha Clip, the rule is to display the pixel when it is Alphalarger than Alpha Clip Thresholdthe pixel, otherwise discard the pixel, so as to obtain Maskthe effect,

8. Add a little more detail

Finally, we add a little more details. The final node structure is as follows

. Preview the effect.

Fourth, apply to the UI

1. Interface UI

Let's use it to UGUImake a simple one UI. Among them, use is used Imageto display the water polo.

Because the material ball 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 study by themselves. The
project address is: https://gitcode.net/linxinfa/UnityLoadingBallSG
Note: The version I use in this article is, the Unityversion 2021.1.9f1c1is Universal RP, 11.0.0if the version you use is the same as mine different, may vary slightly

Alright, I'm Lin Xinfa, https://blog.csdn.net/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~UnityUnity