「萌新图形学」用ShaderGraph制作动森转场动效

作者：Yumir

哈喽大家好我是yumir~

不知道今天大头菜多少钱呢？

本篇文章使用Unity的图形化Shader编辑器Shader Graph实现动物之森中的转场动效，跟我一起轻松入门Shader，走向人生巅峰吧。

动森转场效果

这个效果简单又实用，但是因为unity并没有提供这种类型的遮罩，所以需要自己用Shader写一个，但Shader脚本对新手真的极其不友好啊，幸好现在有Shader Graph这个入门门槛极低的制作Shader的大宝贝了。

---------------------------------这里是萌新小课堂
---------------------------------

一、Shader

我们都知道的是Shader是着色器，在Unity中我们用C#脚本控制“做什么”，用Shader脚本控制“长相”，似乎是个很厉害的大佬才能用的东西。而我们平时使用Unity提供的部分Shader就可以了，甚至不需要手动设置，只需要新建材质球就可以了。

打开你的材质球你会发现，材质球的Inspector面板上有一个下拉菜单，选项名称就是“Shader”。Unity的资源文件中用右边这种花里胡哨的图标代表Shader。

在Shader文件中，会标识出文件在上图的下拉菜单中的路径与使用了该Shader的Material的面板上显示的可调试的变量，并编写其他相关的渲染逻辑。也就是说，Shader Graph实际上就是在帮我们编写这样的文件。

二、Shader Graph

首先请使用2019.1以上的Unity版本并新建URP项目。

在Project面板右键新建Sprite Unlit Graph，是不受光照的2DShader Graph。

打开新建好的Shader Graph ，界面如下图所示：

①面板有两个内容，一个是该Shader Graph的名称和路径（第二行灰色字体），一个是声明的字段（图中还未声明），点击+号新建新的字段。

②是一个输出节点，每种Graph都有各自类型的输出节点，常用的就是下图这四种，可以自己新建对比。

③是效果预览窗口，每次进行改动要点击④编译一下，才能运用到场景中。

在空白的位置按下鼠标右键或者键盘空格键，就可以新建新的节点，开始制作Shader了，节点之间通过鼠标左键拖动节点上的链接点就可以在节点之间连线，连着连着就做完了（So Easy~）。

最后我们想在脚本中控制Shader Graph中的字段进行一些变化，只需要获取到对应的材质球，在脚本中这样调用：

material.SetVector("_Pos", maskPos);

第一个参数是对应的字段名，就是这个位置：

那么现在你也会Shader啦！

-------------------------萌新课堂结束------------------------

三、动效实现

这个效果的实现思路其实很简单，首先这个效果本质上是动画，也就是我们其实就是在屏幕上每次画不同大小的透明圆形。

那么我们如何画这个透明的圆呢？只要以屏幕中心为圆心，每次计算屏幕上的像素点要画啥颜色的时候，判断该像素点距离圆心的距离是不是比半径大呀，如果比半径大的话就是满不透明，反之则是透明度为零，这样一个圆就出现了。

将这个半径提取出来作为公开的字段，在代码中修改其数值，就可以做到动画效果了。

Shader Graph的内容如下：

• 为了更加方便使用我将半径Radius的Mode设置为Slider滑动条，并在Shader中根据当前屏幕大小的最大值设置最大半径。
• 由于Screen Positions的值是0-1的float类型，所以需要和Screen的宽高分别相乘再组合成新的坐标值，才能和半径匹配。
• Step节点的功能是对比输入值的大小，并输出1或0（In>=Edge In=1，In<Edge In=0）

最终效果如下：

稍微进行改动丰富一下功能，可以用来做游戏中的引导效果。

篇幅有限，感兴趣的同学可以下载我的项目：

链接：
https://pan.baidu.com/share/init?surl=WCr-68Pf7CJLjZ1aZhr10Q

提取码：d2xq

虽然Shader Graph大大降低了门槛，但是很多节点光是看一看还是没法理解掌握的，于是很多同学说深入很难。但是如果一个事物从入门到掌握都很容易的话，不也就意味着也容易被替代么？

——照例的分割线——

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