【游戏开发实战】Unity使用ShaderGraph制作一个Loading水球(能量球 | UI | 2D | 特效 | URP)_林新发的博客-程序员宝宝_unity水材质球

技术标签: unity  Unity3D  ShaderGraph  URP  Loading水球  游戏  

本文最终效果
请添加图片描述

一、前言

嗨,大家好,我是林新发。
有同学私信问我如何做2D水球的效果,
在这里插入图片描述
其实我看网上已经有人写了对应的教程了,今天我们就一起动手来做一个吧~

二、ShaderGraph入门

我之前写过一篇文章:《ShaderGraph使用教程与各种特效案例:Unity2020(持续更新)》
或许可以作为大家入门ShaderGraph的参考
在这里插入图片描述
本文就直接进入Graph节点制作环境了~

三、ShaderGraph制作2D Loading水球

注:本文我使用的Unity版本为2021.1.9f1c1Universal RP版本为11.0.0,如果你使用的版本与我不同,可能会略有差别
在这里插入图片描述

1、创建Unlit Shader Graph

我们要做的是2D的效果,不需要光照,所以我们创建一个Unlit Shader Graph
在这里插入图片描述

取名叫LoadingBall好了,
在这里插入图片描述

2、创建一个圆

ShaderGraph节点中,在Procedural/Shape菜单下,可以看到几何图形节点,如下
在这里插入图片描述

我们创建一个圆形(Ellipse节点),

注: Ellipse是椭圆的意思,当WidthHeight相等时,它就是一个圆,所以当你想要一个圆的时候,不是搜索Circle,而是搜索Ellipse哦~

在这里插入图片描述

接一个Slider,方便调整大小,
请添加图片描述

3、从下到上填充的效果

思考:我们该如何表达一张图片从下到上填充的效果呢?
这个问题我们分解成两个问题:
1、纹理坐标的上下左右用什么来表达?
2、填充效果的上下部分的边界怎么表达?

先回答第一个问题,在纹理坐标中,我们使用的是UV坐标系UV的值范围是 0 ~ 1,画个图,
在这里插入图片描述
通过UV坐标,我们就可以对纹理的任意像素进行采样,所以,我们想表达从左到右,其实就是U01,想表达从下到上,就是V01
ShaderGraph中,有个UV节点,通过它我们就可以访问UV了,
在这里插入图片描述
因为我们要的是从下到上,所以我们只需要V轴的信息,我们可以使用SplitUV的输出做分离,分离后,U的值对应SplitRV的值对应SlplitG,所以我们把G取出来,使用Preview节点预览一下,

在这里插入图片描述
到这里,我们就得到了V01的效果了,
在这里插入图片描述
现在解决第二个问题,上下部分的边界怎么表达?
这个问题,首先要明白边界是什么,边界就是一个阈值,比如上面我们 01这个范围,我定义 0.35为阈值,比它小的表示边界以下,比它大的表示边界以上。
ShaderGraph中如何表达呢?这里就要用到Step节点了,我们新建一个Step节点,
在这里插入图片描述
In大于等于Edge时,Step输出1,否则输出0
我们把刚刚的V值作为StepEedge,然后使用一个Slider作为In,也就是说我们把In作为上下边界的阈值,我们通过In就可以控制边界了。
如下,这样我们就表现出从下到上填充的效果了

请添加图片描述

4、填充效果与圆相乘

我们把第3步得到的填充效果与第2步的圆相乘,即可得到一个填充圆的效果啦~
请添加图片描述

5、填充边界波浪效果

上面的边界效果是平平的,没有波浪起伏的效果,现在我们要给这个边界制作一个波浪起伏的效果。
换句话说,我们要给StepIn做一个扰动,做扰动第一个想到的就是噪声,在ShaderGraph中,噪声有好几种,
在这里插入图片描述

大家根据需求选择,这里我使用Gradient Noise噪声,
在这里插入图片描述
我们把把噪声与Slider相加,可以看到扰动颗粒过细了,导致边界被撕裂了,
在这里插入图片描述
我们可以调整噪声的Scale,如下
请添加图片描述
我们要让边界水平动起来,我们可以给噪声UVV加一个随时间变化的Offset,用到TimeTill And Offset节点,
在这里插入图片描述

不过我们看到现在水面波动幅度过大,
请添加图片描述

我们可以给噪声做一个Remap,把它的强度减弱,

在这里插入图片描述
此时波浪就温柔很多了,
请添加图片描述
到此,一个水球的雏形就出来了,
请添加图片描述

6、水球颜色

我们给水球加一个颜色,创建一个Color节点,与水球相乘,如下,
请添加图片描述

7、输出到片元着色器

把水球输出到Fragment(片元着色器)的Base Color上,另外通过Alpha Clip Threshold来做透明度剔除,如下,
在这里插入图片描述
注意Graph Settings中要开启Alpha Clip,规则是当Alpha大于Alpha Clip Threshold时显示像素,否则抛弃像素,从而得到Mask的效果,
在这里插入图片描述

8、再加一点点细节

最后,我们再加一点点细节,最终节点结构如下
在这里插入图片描述
预览一下效果,
请添加图片描述

四、应用到UI上

1、界面UI

我们使用UGUI制作一下简单的UI,其中,使用Image来显示水球,
在这里插入图片描述
因为现在还没有使用材质球,所以Image是一个白色的方块,
在这里插入图片描述

2、制作材质球

我们创建一个材质球,命名为LoadingBall,并让它使用上面的ShaderGraph
在这里插入图片描述
如下
在这里插入图片描述
把材质球赋值给Image
在这里插入图片描述
此时界面效果如下,
在这里插入图片描述

3、脚本控制进度

我们简单写个脚本做一下进度控制,代码如下

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)}%";
    }
}

其中我在ShaderGraph中把进度值的属性名命名为progress,代码中使用Shader.PropertyToID("progress")得到属性ID,再通过MaterialSetFloat方法冬天修改属性值,
在这里插入图片描述
LoadingBall脚本挂到水球的Image节点上,并赋值成员变量,如下,
在这里插入图片描述

4、运行效果

运行效果如下,
请添加图片描述

五、工程源码

本文工程源码我已上传到GitCode,感兴趣的同学可自行下载学习,
项目地址:https://gitcode.net/linxinfa/UnityLoadingBallSG
注:本文我使用的Unity版本为2021.1.9f1c1Universal RP版本为11.0.0,如果你使用的版本与我不同,可能会略有差别
在这里插入图片描述

好了,我是林新发,https://blog.csdn.net/linxinfa
一个在小公司默默奋斗的Unity开发者,希望可以帮助更多想学Unity的人,共勉~

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/linxinfa/article/details/123728565

智能推荐

cad隐藏图层命令快捷键_CAD关闭图层快捷键,隐藏显示的CAD图层_以喋喋的博客-程序员宝宝

在绘制CAD图纸的时候,我们都知道图层分类是很常见的。在图层元素非常多的时候,隐藏不需要的图层,可以大大提高绘图效率。那么制图过程中,我们如何了解CAD关闭图层快捷键,隐藏显示的CAD图层呢?1.先启动运行CAD看图软件,点击菜单栏里的【打开文件】或是【打开图纸】选项图标。2.在弹出的【打开】弹窗中,找到我们需要的CAD图纸打开。3.同时可以选择是否勾选【文件夹和分类】(表示小树苗项目分类...

Linux网络编程-tcp缓存设置_linranguo的博客-程序员宝宝

记录下TCP缓存的各配置项以及缓存大小的计算公式。1.有关发送、接收缓存的配置内核设置的套接字缓存/proc/sys/net/core/rmem_default,net.core.rmem_default,套接字接收缓存默认值 (bit)/proc/sys/net/core/wmem_default,net.core.wmem_default,套接字发送缓存默认值

习题5-6 对称轴 UVa1595_XDU_Skyline的博客-程序员宝宝

1.题目描述:2.解题思路:判断是否对称只需要看x坐标,因此可以先将

mac安装docker、k8s,windows可参考,[Docker DeskTop]一招搞定,能减少你的上手工作量_mac 虚拟机安装k8s_力不竭!!!战不止!!!的博客-程序员宝宝

​ 使用docker desktop最方便的就是一些东西人家帮你装好了,你直接使用即可,省去了一些繁琐的步骤,例如windos安装虚拟机创建linux系统,在docker desktop里,一招即可创建一套linux环境。打开docker desktop,点击设置,配置到Docker Engine里的registry-mirrors属性里,这里算配置安装完成了,点击Apply&Restart 应用你的配置。注意版本问题,安装最新版本应该没啥问题,老得版本反而有问题。_1671465600

运维----firewalld策略修改_小白网管之路的博客-程序员宝宝_修改firewall

一、Firewalld简介Filewalld(动态防火墙)是redhat7系统中变更对于netfilter内核模块的管理工具,支持动态更新技术并加入了区域(zone)的概念,区域就是firewalld预先准备了几套防火墙策略集合(策略模板),用户可以根据生产场景的不同而选择合适的策略集合,从而实现防火墙策略之间的快速切换。二、firewalld与iptables的切换yum install ...

CentOS6.5 mini 安装和基本配置_ly923976094的博客-程序员宝宝

而且mini版和完整版的安装是有区别的,有些东西是自动默认安装的,像引导,主机名,分区 1。安装选择界面,这个选第一个 2。镜像完整性检查,一般都是跳过SKIP 3。欢迎界面,进入安装了 4。语言选择,这个是没有中文的,用默认的英文就行 5。键盘布局,用默认的us 

随便推点

解决Django出现OverflowError: Python int too large to convert to C long_Black leaves的博客-程序员宝宝

File "C:\Users\huaixiao\AppData\Local\Programs\Python\Python37-32\lib\site-packages\django\db\backends\utils.py", line 84, in _execute return self.cursor.execute(sql, params) File "C:\Users\huaixiao\AppData\Local\Programs\Python\Python37-32\lib\sit..

sklearn机器学习包常用函数(连载)_喜欢请人吃饭的程序媛的博客-程序员宝宝

做机器学习案例时,每个案例都会用到sklearn中不同的函数,导包时真的很头大!!!到底用哪个?为什么有的是model_selection?有的是feature_selection?有的是feature_extraction?有的是processing?本文就是为了解决自己的这个问题而写。(择日填坑)第一部分:收集整理函数名(完成)第二部分:每个函数的作用(未完成)第三部分:每个函数的应用...

JS基础--常用的BOM对象_一个菜鸟的前端之路的博客-程序员宝宝

BOM(Browser Object Mode)浏览器对象模型,是Javascript的重要组成部分。它提供了一系列对象用于与浏览器窗口进行交互,这些对象通常统称为BOM。一张图了解一下先1、window 对象——BOM核心window,顾名思义,窗口对象。它表示整个浏览器窗口,主要用来操作浏览器窗口。同时, window对象还是 ECMAScript 中的 Global 对象,因而所有全...

ipad+PDF Expert:买前生产力,买后生产力_Hecttttttttt的博客-程序员宝宝

ipad的正确使用方法:买前生产力,买后生产力前言软件:onedrivePDF ExpertScreenShot尾声前言无纸化时代,怎么能少得了ipad?听某童鞋说,买前生产力,买后爱奇艺。很多人买了ipad之后,纷纷表示:爱奇艺真香!于是就美滋滋地看起了爱奇艺,要么就是觉得学习嘛!还是电脑好用!这样是不对滴~作为学生的我们,要时时刻刻牢记,知识改变人生,多学习,才能赢取白富美。我觉得ip...

我与linux的第一次亲密接触,摸索着安装linux_weixin_34120274的博客-程序员宝宝

摸索中安装Linus系统 因为从来没有接触过,所以其中难免会遇到很多意外和差错,一来希望大家看到后给点意见,而来希望大家引以为戒,少犯些不必要的麻烦。 我用的是vmware的虚拟机,并且已经汉化了,现在手头上有redhat的安装镜像4个,也说不好是哪个版本的,所以只有挨个试了,这里选择新建虚拟机, 下一步 典型就可以了下一步 这里呢 版本一定要选对,现在Lin...

chrome官网下载win64离线安装包_github_39325328的博客-程序员宝宝

windows 64位:http://www.google.cn/chrome/browser/desktop/index.html?standalone=1&platform=win64standalone=1 指离线安装包platform=win64 指64位Windows 版本

推荐文章

热门文章

相关标签