unity 特效shader下载_【ShaderGraph】塞尔达神庙栅栏特效

ae8082b1de0ae96146530fd8a953b40b.png

哈喽艾瑞巴蒂,我是yumir。

用ShaderGraph做了几个简单的效果之后,我需要实践一个稍微复杂一点的效果,于是干脆把塞尔达神庙里面导师的栅栏实现一下吧。

一、效果分析

看似复杂的特效实际上都是很多个简单的部分的组合,就像复杂的世界是由最简单的分子构成的,所以遇到复杂效果第一件事就是分析,我将该粒子特效分为三个阶段两个状态,首先是默认状态,内容是:

  1. 栅栏内漂浮的光点。
  2. 闪烁的镂空符文。
  3. 浮光流动的光栅栏。

423de73f950765ea058fef1461ad2148.gif

再来是触发状态,先是林克触碰符文之后发生以下变化:

  1. 浮出发光实心符文。
  2. 光圈放大。
  3. 光点随光圈向外飞出。

32c28a8561cb581d86ae8b350a760c49.gif

接着进入第三阶段出现栅栏发亮并爆破的效果。当破碎的栅栏消失整个特效动画也结束了。

76232b6a160926090895b0f75b2abb3f.gif

二、第一阶段

1、栅栏内漂浮的光点。

首先是粒子系统的参数,这个粒子是整个效果中最简单的。

714b0dafa4478e8a4adba88bcedfa4c5.png

新建一个ShaderGraph,并新建对应的材质球,拖拽到粒子上(这个操作讲了很多次,后文就直接说明ShaderGraph是怎么做的吧- -)

这个粒子用的Shader我在之前的文章用过就是那个让粒子发光的Shader,可以设置贴图和颜色,也可以被粒子系统更改颜色(VertexColor),其实只是把这几个属性相乘后输出颜色和透明度,简单常用的Shader。

8deaa6acacde0b140b6f0fb26c82c19f.png

注意要修改这两个位置的数值,默认新建的ShaderGraph这里的设置为不透明和0.5,需要自行修改。(本文所有的Shader都是)

e29ec27d0060087d9861c457ebcf5277.png

该粒子用到了一个从中心往外渐变的圆形透明贴图,因为之前做导师消失效果的时候用的是绿色所以我还是用了绿色,可以自己改颜色(所有颜色都可以改)。

3ee6443103d33d8aef5449c812d88024.png

效果:

e6f5696da60f7d7fbc48eb4054958629.gif

2、闪烁的镂空符文。

粒子系统的参数如下,利用循环和颜色渐变做出呼吸灯的效果。

6f75dd4792d80d046632f71e2fca1f3c.png


用到的Shader和上一个特效一样,贴图是我自己画的一个镂空的小鱼:

ba87a46634a5e0a58001a163276f2e33.png

效果:

cfc2521723c05ec4c317e6dd3375200e.gif

3、浮光流动的光栅栏。

该粒子的渲染模式是Mesh,使用了一个没有顶部和底部的模型,模型已经打包到文末的相关资源包中,当然你要自己用建模软件做也不难,在第三阶段还有两个栅栏特效,也是同样的设置。

e8408220f43276c8188452bfbcadd05c.png

这部分的ShaderGraph又由两个部分组成,一个是栅栏,另一个是栅栏上的浮光,并且栅栏在第三阶段也有使用,所以做完栅栏的效果之后记得复制两份再进入下一步。

栅栏

利用UV的X轴上的值的sin值,由于UV的x值是0~1,需要使用Multiply增加sin图的频率,得到了一个黑白相间的竖线图像,用Subtract(或者Add)调整栅栏间的间距。

再利用Lerp根据前面运算的结果判断每个像素位的颜色。最后是粒子Shader固定操作。

1a37592d24a75c3292493225d8bac8d7.png

栅栏上的浮光

在上一篇文章提到过,在ShaderGraph中有三个噪声节点可以用来实现很多看似复杂的特效,稍有了解的同学应该能知道现在需要做的就是利用Voronoi制作一个水流波纹的纹理。

新建一个Voronoi节点并将细胞密度调整到合适大小,我使用了一个时间节点使该纹理UV的y轴不断变化,通过Multiply控制移动的方向和速度,为了效果更好一点又实用这个时间节点的值修改Angle Offset的值使细胞有更多的律动。

最后将纹理图输出到Power(乘方),因为输入值使0~1所以值不为1的像素位自乘次数越多越接近0,1永远为1.

5e8be1ec49de82b014f57ddf24903eed.png

将结果与栅栏的黑白纹理相乘得到一个只有白线部分带有光斑的纹理,对纹理上色后与原来的彩色栅栏纹理相加,就完成了。

570bc106384fdeb53b1efbdf247b1bf0.png

回到粒子系统调试材质球的参数:

20af7202c454f9ad86a6249db596810b.png

效果:

f5f070f973edf04adfe0ffb8683b739e.gif

三、第二阶段

1、浮出发光实心符文。

这个粒子是不循环的,透明度是在生命周期快要结束的时候才开始减淡,稍微有一点点放大的效果。

dd7cbd8b684c8dfacffb10bba3056bee.png

用的也是上面说到的粒子发光Shader,颜色是白色,贴图是我自己画的实心的鱼:

a356b52b7d4ee358ed85539d09d618d2.png

效果:

47009dcf7296c10910c9f140caa02fd3.gif

2、光圈放大。

同样是不循环粒子,和实心符文粒子同时发生,其他参数是根据实际情况微调的。

9b134b245859274ac121c58f37252eca.png

使用的还是简单粒子发光Shader,贴图是一个镂空的圆。

992daf35f6d366f0064684a5d7b2534f.png

效果:

8baf82feb6a8debf1ab2847591087a57.gif

3、光点随光圈向外飞出。

这个粒子用到了一个圆形发射器,需要速度变化和颜色变化,不循环。

d62e3140778606fa9dd614ca4e9c06e0.png

由于在粒子系统中设置了初始颜色所以在材质球上没有做颜色更改,偷懒没有做新的贴图直接用了第一个光点粒子的贴图,依旧是发光粒子Shader。

a4c649a21f73a2105b802250666b0cd5.png

效果:

3b0bd85783b8458f2a38e8eb74c85798.gif

四、第三阶段

1、逐渐发亮的栅栏。

这个粒子逐渐发亮的效果主要是来源于透明度变化(所以应该说是逐渐发白?)用到了开头说到的那个模型。

a7184798924defbdee2a63d3e3d33be7.png

之前复制的栅栏ShaderGraph在这里可以直接用,栅栏颜色不一样,其他的设置所有的栅栏是一致的:

bcaaa5c86e17d4678d2a70b2c58a17a2.png

效果:

e6dcf288e0c1111637afcf695367bd5d.gif

2、残留的栅栏消失。

栅栏炸裂后原地还有一些残留的栅栏,是渐渐消失的,也是用透明度调整:

4d8d688fa4e4132273a57539282b20ce.png

这里要用到之前复制的另一份栅栏ShaderGraph,我嫌两个颜色碍事把间隔的颜色直接设置为(0,0,0,0),通过简单运算将原本的栅栏抠空。

d5856eda08c560de61a6c07e03a32e38.png

这里的贴图也是自己随意画的,用来将原本的栅栏扣空,其他参数应该和原来的栅栏保持一致:

dba2413b6c660b5095676de791a86eb0.png

效果:

384cd9968129a25eb55ab24f4ac7095e.gif

3、栅栏爆破。

这个效果用到了九个粒子,每个粒子用到的属性一致只是数值需要调整,这里只列出其中一个。

这九个粒子分别在前、左、右由上至下分布,实用unity的Quad网格作为发射器形状:

b415449b9b730e3d063642261890ae5b.png

粒子的初始旋转角度还有速度也不一样:上层粒子底部向外,中层粒子不旋转,下层粒子顶部向外;上层和下层粒子的初始速度会比中层的粒子的初始速度稍微慢一点。

5f22833b892a0aea58bfac18587e85e0.png

粒子系统参数:

46dc7390483c231927cd7b0cda9256d8.png

栅栏破碎喷射的碎片粒子使用的贴图不是我自己画的,由于这个图是黑白的,所以直接用贴图的R值作为透明度,其他与普通粒子的Shader无异。

9a19237a93416d5da90bf08d86c8bb2c.png

在材质球上对颜色和贴图进行设置:

862662a74a42c7a0f053e3dd03f4273b.png

效果:

cba006fc09f2b6c206b55ce54700626a.gif

五、最终效果

默认状态:

8f89d02452b64c07955b0ed835ad0766.gif

触发状态:

2f17df577ba5a4366838a2a3f7614d0f.gif

相关的素材:

链接:https://pan.baidu.com/s/1V49SaVWIwun03l2yoemZ9w

提取码:7diz

完整项目:

链接:https://pan.baidu.com/s/1DqgSbOz4c1VqgnTCd-zCfA

提取码:gtpp

——分割线——

欢迎加入游戏开发群欢乐搅基:1082025059

对游戏开发感兴趣的童鞋可戳这里进一步了解:http://www.levelpp.com/

  • 1
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值