【实现100个unity特效之12】Unity中的冲击波 ——如何使用ShaderGraph制作一个冲击波着色器

news/2024/10/11 3:19:28/

最终效果

在这里插入图片描述

文章目录

  • 最终效果
  • 新增LitShaderGraph
  • 圆环扭曲效果
  • 优化冲击波效果
  • 屏幕全屏冲击波
  • 圆形冲击波
  • 最终连线图
  • 代码控制
  • 补充
  • 源码
  • 完结

新增LitShaderGraph

在这里插入图片描述

圆环扭曲效果

让我们从一个UV节点开始
在这里插入图片描述

创建一个Vector2变量RingSpawnPosition表示冲击波生成位置,在X和Y上将其默认值设置为0.5,因为我们正在使用范围从零到一的UV坐标,所以0.5是中心
在这里插入图片描述

将生成位置减去UV,重新定向UV,以生成环形效果
在这里插入图片描述

现在让我们拖动它进入一个Length节点,你可以把长度想象成大小,可以看到,现在围绕它的生成位置生成了圆环
在这里插入图片描述
接下来,创建一个Size大小浮点数,我们将使用它来控制影响的大小
在这里插入图片描述

把它拖到一个ADD加法和一个Subtract减法节点中,然后将它们组合回一个带有长度节点的Smoothstep平滑步长节点作为我们的输入,这为我们提供了圆环的基础
在这里插入图片描述
新增变量,我们需要它从-0.1开始,因为这里的大小不同,我们将其默认为0.5
在这里插入图片描述
将它挂钩到我们的加减节点
在这里插入图片描述

它还不是个圆环,因为我们需要首先通过将它插入一个减节点然后乘以反转这个平滑的步骤,所以我们现在终于有了我们的圆环效果
在这里插入图片描述

如果我们添加另一个UV节点,并将它添加到我们的圆环上
在这里插入图片描述
让我们将它插入我们的Sample Texture 2D主图UV输入样本节点并测试它
Sample Texture 2D节点,接收一个Texture2d类型的输入,输出这个Texture2d的RGBA,Unity它会自动根据这个reference上的值,从我们的精灵中尝试找到对应的纹理,而我们的主纹理里名称就是这个MainTex,就会自动找到主纹理
在这里插入图片描述
新增材质,放在一个背景图片上
在这里插入图片描述
通过修改修改WaveDistanceFromCenter查看冲击波效果
在这里插入图片描述

优化冲击波效果

可以看到它现在是以某种方式扭曲并不是我们想要的效果,回到我们的着色器,并回到我们开始的减法节点在这里,我们对其进行归一化(Normalize节点)
在这里插入图片描述

这里也是添加强度控制的好地方,所以让我们创建一个名为ShockWaveStrength的暴露浮动并将其默认为负0.1,如果您希望它看起来凸起,则必须为负值,让我们将其设为-5和5之间的滑块。
在这里插入图片描述

现在让我们将我们的强度乘以我们的Normalize节点
在这里插入图片描述

我们要将这两个节点相乘,重新连接输出
在这里插入图片描述
效果
在这里插入图片描述

屏幕全屏冲击波

要实现屏幕全屏冲击波,首先就要想办法获取相机渲染的内容

新增变量2D纹理称为CameraSortingLayerTexture,命名一定不能错,它和我们的主纹理MainTex命名一样,unity会按名称自己去查找获取相机渲染的纹理

重点:还有重点记得取消勾选Exposed,不然后续不会生效
在这里插入图片描述
替换之前的MainTex主纹理连线并输出效果
在这里插入图片描述
新建CameraSortingLayer排序层,无论你的游戏有多少层,它都是得排最高,这实际上意味着它将被渲染在其他所有东西之上现在
在这里插入图片描述

修改冲击波排序图层
在这里插入图片描述
不要忘记添加此层到你的2D灯光
在这里插入图片描述

修改URP配置,在这里看到一个相机排序层纹理选项,它通常默认设置为禁用,让我们将其更改为除冲击波层外的最上面的排序层,我这里是Player层
注意:如果选了CameraSortingLayer,会一直会自己渲染自己,且应该会很卡,影响性能,所以切记不要选错了
在这里插入图片描述
在这样做之后,你应该立即看到我们的冲击波层渲染了一些东西,但这不是我们想要的,他基本上只是把我们场景视图内容放在Sprite之上的快照,而我们要显示相机显示的内容
在这里插入图片描述

我们要的是显示当前的屏幕位置到底是什么,用屏幕位置节点(Screen Position)替换之前的UV节点
在这里插入图片描述

将冲击波尺寸大概贴合屏幕即可
在这里插入图片描述
查看效果
在这里插入图片描述

圆形冲击波

目前可以看到,冲击波不是一个完美的圆圈,这是因为我们的屏幕尺寸
比如我在1920x1080尺寸上播放,通过计算比例
在这里插入图片描述
也就是说,x拉伸了1.777,但是如果我们直接y轴剩余这个拉伸量,肯定不合理,因为我们屏幕的尺寸是会变化的
这里可以通过Screen节点,获取屏幕宽高值,使用Divide节点,屏幕宽除以屏幕高

将UV通过Split切割,其中R就是x坐标,g就是y坐标,R乘以这个比例
在这里插入图片描述
效果
在这里插入图片描述

最终连线图

在这里插入图片描述

代码控制

将冲击波挂载在相机下
在这里插入图片描述

新增脚本,注意:如果你让它在那里一直处于开启状态,因为它会渲染两次,浪费性能,所以我们控制在需要时实际禁用和启用它

/// <summary>
/// 冲击波
/// </summary>
public class RippleEffect : MonoBehaviour
{[SerializeField] private float _shockWaveTime = 0.75f; // 冲击波持续时间private Coroutine _shockWaveCoroutine; // 冲击波效果的协程引用private Material _material;private static int _waveDistanceFromCenter = Shader.PropertyToID("_WaveDistanceFromCenter"); // 波从中心点的距离的Shader属性IDprivate static int _ringSpawnPosition = Shader.PropertyToID("_RingSpawnPosition");private void Awake(){_material = GetComponent<SpriteRenderer>().material;}// 公共方法,用于触发冲击波效果public void CallShockWave(Vector2 pos){if (_shockWaveCoroutine != null){StopCoroutine(_shockWaveCoroutine); // 如果已有协程在运行,先停止它}// 将世界坐标转换为视口坐标(UV坐标) 视口坐标是一个单位矩形,左下角是(0,0),右上角是(1,1)Vector3 viewportPos = Camera.main.WorldToViewportPoint(pos);Vector2 uvPos = new Vector2(viewportPos.x, viewportPos.y);_material.SetVector(_ringSpawnPosition, uvPos); // 设置位置_shockWaveCoroutine = StartCoroutine(ShockWaveAction(-0.1f, 1f)); // 启动新的协程来实现冲击波效果}// 冲击波效果的协程方法private IEnumerator ShockWaveAction(float startPos, float endPos){Debug.Log(111);_material.SetFloat(_waveDistanceFromCenter, startPos); // 设置初始值float elapsedTime = 0f; // 初始化经过时间while (elapsedTime < _shockWaveTime){elapsedTime += Time.deltaTime; // 累加经过时间float lerpedAmount = Mathf.Lerp(startPos, endPos, elapsedTime / _shockWaveTime); // 计算插值量_material.SetFloat(_waveDistanceFromCenter, lerpedAmount); // 设置材质属性yield return null; // 等待下一帧}gameObject.SetActive(false);}
}

调用

public RippleEffect rippleEffect;//触发冲击波
public void PlayRippleEffect(Vector2 pos)
{rippleEffect.gameObject.SetActive(true);rippleEffect.CallShockWave(pos);
}

配置
在这里插入图片描述
通常你可以选择在二段跳调用它,比如我们实现在人物冲刺时启动它,pos传入的就是人物世界坐标,效果
在这里插入图片描述

补充

输出圆环其实有更加方便的方式
我们可以用极坐标的特性,直接分离出一个从中间开始的渐变,R就是中间黑,四周白的渐变
在这里插入图片描述

源码

整理好了会分享出来

完结

赠人玫瑰,手有余香!如果文章内容对你有所帮助,请不要吝啬你的点赞评论和关注,以便我第一时间收到反馈,你的每一次支持都是我不断创作的最大动力。当然如果你发现了文章中存在错误或者有更好的解决方法,也欢迎评论私信告诉我哦!

好了,我是向宇,https://xiangyu.blog.csdn.net

一位在小公司默默奋斗的开发者,出于兴趣爱好,最近开始自学unity,闲暇之余,边学习边记录分享,站在巨人的肩膀上,通过学习前辈们的经验总是会给我很多帮助和启发!php是工作,unity是生活!如果你遇到任何问题,也欢迎你评论私信找我, 虽然有些问题我也不一定会,但是我会查阅各方资料,争取给出最好的建议,希望可以帮助更多想学编程的人,共勉~
在这里插入图片描述


http://www.ppmy.cn/news/1506359.html

相关文章

element时间段选择器或时间选择器 只设置默认起始时间或者结束时间,不显示问题

element时间段选择器或时间选择器 只设置默认起始时间或者结束时间&#xff0c;不显示问题 <div v-for"(item,index) in [a,b]":key"item"><el-date-pickerv-if"b"v-model"value1[item]"type"datetimerange"value-…

eclipse启动springboot项目指定启动配置文件-spring.profiles.active

sh命令启动项目&#xff1a; nohup java -Dloader.path"lib/" -jar springboot.jar --spring.profiles.activedev >>out.log 2>&1 & eclipse启动springboot项目指定启动配置文件 --spring.profiles.activezj

OpenCV 读取 MP4 视频

在 C 中结合 OpenCV 库来读取 MP4 视频文件是一个常见的任务。以下是一个简单的示例程序&#xff0c;说明了如何使用 OpenCV 的 VideoCapture 类来打开一个 MP4 文件并逐帧显示每一帧。 VideoCapture::VideoCapture(const string& filename)&#xff1b;参数&#xff1a;f…

从人工智能神经网络出发

今天与豆包聊天&#xff0c;聊了当前深度学习中的神经网络。 1、跟他多次沟通后&#xff0c;对GPT中的神经网络总结了如下几个关键要点&#xff1a; &#xff08;1&#xff09;GPT是一种基于深度学习的语言模型&#xff0c;它使用线性代数和神经网络来模拟人工神经元。 &…

Java面试题--JVM大厂篇之破解 JVM 性能瓶颈:实战优化策略大全

目录 引言: 正文: 1. 常见的JVM性能问题 频繁的GC导致应用暂停 内存泄漏导致的内存不足 线程争用导致的CPU利用率过高 类加载问题导致的启动时间过长 2. 优化策略大全 2.1 代码层面的优化 2.1.1 避免不必要的对象创建 2.1.2 优化数据结构的选择 2.1.3 使用并发工具…

GPT-5:未来已来,你准备好了吗?

GPT-5 一年半后发布&#xff1f;对此你有何期待&#xff1f; IT之家6月22日消息&#xff0c;在美国达特茅斯工程学院周四公布的采访中&#xff0c;OpenAI首席技术官米拉穆拉蒂被问及GPT-5是否会在明年发布&#xff0c;给出了肯定答案并表示将在一年半后发布。此外&#xff0c;穆…

Linux 文件系统、动静态库

个人主页&#xff1a;仍有未知等待探索-CSDN博客 专题分栏&#xff1a; Linux 目录 一、文件系统 1、了解磁盘的存储结构 1.基本知识 2.磁盘中盘片为什么高速旋转&#xff1f; 3.磁头为什么要左右摇摆&#xff1f; 4.如何找到一个指定位置的扇区&#xff1f; 5.文件在磁盘…

网络安全知识讲解

引言 随着互联网的普及和信息化的深入&#xff0c;网络安全已经成为现代社会的一个重要议题。网络安全涉及保护网络和数据免受未经授权的访问、攻击、修改和破坏。本文将系统地讲解网络安全的基本概念、常见威胁、主要技术、最佳实践以及发展趋势&#xff0c;帮助读者全面了解…