作者：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:///share/init?surl=WCr-68Pf7CJLjZ1aZhr10Q
提取码：d2xq
虽然Shader Graph大大降低了门槛，但是很多节点光是看一看还是没法理解掌握的，于是很多同学说深入很难。但是如果一个事物从入门到掌握都很容易的话，不也就意味着也容易被替代么？
——照例的分割线——
欢迎加入游戏开发群欢乐搅基：1082025059
,
