介绍
你好普京努。
在本文中，我们使用 Unity 的 ShaderGraph 功能移动的 2D 半色调着色器将产生。
因为我还没有写技术文章的经验，拼写错误、不正确的表达方式等。可能含有。
当你找到它时，评论或我的 Twitter (@putinu3)，如果您能与我联系，我将不胜感激。
这篇文章是如何创作的
半色调有时会以时尚的 UI 和阴影表情的形式出现，但当我对“我想做！”感兴趣时（我看过很多关于 3D 阴影的半色调文章……）
既然如此，我想我可以自己为 UI 创建一个半色调着色器，并在一篇文章中作为示例进行介绍。
如果您有兴趣，请看一看。
很重要的一点
- 在这篇文章中，仅关于如何为 UI 制作半色调着色器我专注于
- 我不会提及 3D 的半色调着色器。
- 关于
Canvas显示UI，Screen Space - Overlay这没用.-
只有
Screen Space - Camera可以正常工作。 - 详情如下。
-
只有
这次做什么
在本文中，我们将创建以下内容。
以下是此着色器的概述和属性：
| 属性名称 | 类型 | 解释 |
|---|---|---|
| MainTex | 纹理 2D | 保留Sprite 的纹理信息 |
| 粗糙度 | 漂浮 | 丸粗糙度 |
| 最大圆尺寸 | 漂浮 | 圆圈大小限制 |
| 隐藏偏移 | 漂浮 | 半色调消失的位置 |
| 隐藏距离 | 漂浮 | 直到半色调消失的距离 |
| 回转 | 漂浮 |
UV的旋转量 |
| 移动速度 | 漂浮 | 半色调移动速度 |
| 移动方向 | 矢量 2 | 半色调移动方向 |
环境
- Unity 2021.3.9f1 个人版
- 通用 RP 12.1.7
1. 什么是半色调？
半色调或半色调是灰度或彩色图像的可打印表示，带有有限数量颜色的小点图案（例如，白纸上的黑点）。它就是制作出来的。
通过调整圆圈（圆点）、阴影等的大小。颜色的深浅好像是在表达
好像主要是用来打印的，但是现在一种设计也用作
我也看到了一些将它用作游戏 UI 的一部分的例子。
您可以从下面的链接中使用半色调检查各种游戏 UI。
2. 准备
准备创建着色器的环境。
Unity 和 ShaderGraph 的基本操作没有涉及。
请相应地检查教程页面。2.1. 文件创建
首先，使用
2D (URP)创建一个新的 Unity 项目。项目启动后，在
Project窗口右击选择Create > Shader Graph > URP > Sprite Unlit Shader Graph新建文件。打开文件后，您将看到如下图所示的窗口。
2.2. 显示UI的排列
在
Hierarchy窗口中右键单击并选择UI > Image以创建将应用我们的着色器的游戏对象。
要使用Sprite，请自行准备或使用下面切换中的材料。精灵材质
它分为内侧（左）和外侧（右）。仅将着色器应用于内容（左）。
创建后，
Canvas将被创建为其父对象，选择它。并将Inspector窗口中的Canvas > Render Mode更改为Screen Space - Camera。
不要忘记将Main Camera附加到Render Camera。屏幕空间问题 - 覆盖
从 2022/9/18 开始，如果在 Unity2021.2 或更高版本中将
Render Mode的Canvas设置为Screen Space - Overlay，当您尝试将着色器应用于UI应该透明的部分不透明，变成黑色。有一个错误（？）。用
2D Object是没有问题的，但是用UI会出现上述问题，所以要小心。Unity论坛上也有关于这个问题的贴子，但目前没有任何改善，解决方法就是干脆使用
Screen Space - Camera。
2.3. 创建/附加材料
在
Project窗口中，选择之前创建的着色器文件，然后右键单击以使用从Create > Material应用的着色器创建Material。然后选择
Image以应用Hierarchy窗口中的着色器，并将刚刚创建的材质附加到Inspector窗口中的Material字段。
准备工作完成。3.逐个元素创建
首先，在制作这个半色调着色器时所需组件我认为
之后，我们将在 Unity 上实际创建着色器。这一次，我们将按照以下方式进行。
- 制作半色调形状
- 使保持纵横比成为可能（使它成为一个美丽的圆圈）
- 根据位置减小圆
- 旋转
- 移动
- 适合纹理
3.1. 创建半色调形状
创建半色调图案时，您需要注意以下几点：
- 尺寸变化
- 等间距（图案化）
- 移动
首先，关于“大小变化”，使用
Step函数，中心为1，外部为0。二值化你可以通过
中间为 1，外部为 0 的图像图像接下来，“等间距”意味着坚定不移使用
Voronoi节点生成Angle Offset0。
“移动”使用UV作为输入滚动似乎可以表达为
如下图所示放置，并将输出目的地连接到Alpha。Voronoi节点在每个圆的中心有一个黑色的0。因此，使用Step函数二值化后，使用One Minus节点反转值我让你。此外，对于
Call Density的Voronoi节点，可自由定制的粗糙度准备Roughness输入属性Float并连接它。当
Save Asset以迄今为止创建的状态执行时，它处于以下状态。粗糙度：5
3.2. 允许保留纵横比
当处理像上图那样垂直或水平长的
Sprite时，UV在0~1的范围内将被推迟.
结果，圆圈被水平绘制。为了解决以上问题，需要保持纵横比有。具体来说，当前只有
0~1范围的UV范围需要缩放以适应Sprite的纵横比。这里
Sprite的垂直长度设置为1固定的去做。
然后，找出水平长度相对于垂直长度的长度，然后比率乘以原来的UV。
现在UV变化范围你可以。
w,h, 和u0,v0u0, @987654413u, @987654413 @teeth,(u, v) = (\frac{w\cdot {u_0}} h, v_0)变成。
具体例子（垂直：100，水平：200）
例如，
Sprite的垂直长度为100，水平长度为200。
在这种情况下，如果将其代入上述公式，(u, v) = (2u_0, v_0)变成。简而言之，u轴方向（水平方向）倍增您将能够绘制漂亮的圆圈。
在 ShaderGraph 中，您可以使用
TexelSize节点获取纹理的垂直和水平长度。
这一次，我们将使用它来保持纵横比。
对于连接到Texture的MainTex属性，从图像左下角的+マーク中选择Texture 2D，并将名称创建为MainTex。确保属性中的
Reference名称为_MainTex。将前面的等式放入
ShaderGraph会得到下图。
保持纵横比的值从最右边的Vector 2节点输出。
通过将此输出值与Voronoi节点的UV连接，可以返回一个漂亮的圆圈。3.3.按位置减圆
这一次，通过使用
Step函数将Voronoi节点的输出值二值化来表示半色调。
还有，这改变边界值经过改变圆的大小我让它成为可能。所以要根据位置使圆变小，
UV取决于坐标为了能够改变二值化的边界值这看起来不错的样子。3.3.1. 直接连接UV
我将Step节点的UV输出连接到Step节点的Edge。
然后，如下图所示，创建了一个左端大小为0，右端大小为1的半色调。3.3.2. 设置上限
接下来，到圆的大小这样我们就可以设置一个上限去做。
您可以使用Clamp节点设置上限和下限。将它放在
UV和Step节点之间，并在Max上设置一个新的Float类型属性MaxCircleSize。
请随时使用Min。
这样，我们就可以限制Step节点的边界值。3.3.3. 可以调整消失位置
接下来，让我们调整半色调淡出的位置。
通过移动原
UV坐标的位置，调整半色调消失位置。
如下图，是移动边界值为0的位置的图像。
要更改位置，请使用Add节点添加偏移值去做。
这里要添加的偏移值被做成HideOffset的属性，以便以后可以自由更改。3.3.4. 使消失距离可调
最后，我希望能够调整半色调消失后的距离。
减小边界值的宽度，如下图所示。扩展指定倍数以便可以对其进行调整。
要表达这一点，请使用划分的Divide节点，待除数准备一个新属性HideDistance为
到此为止的排列完成后，通过调整附加shader的Material中的属性，可以在一定程度上实现类似半色调的调整。最大圆形尺寸：1
隐藏偏移：-0.7
隐藏距离：0.53.4. 旋转
从这里开始，到目前为止，我们将向内容添加旋转元素。
旋转可以像以前一样通过更改UV坐标来表示。对于旋转表示，使用
Rotation节点并将其连接在UV和Divide节点之间。
另外，此时将Rotation的值设为Rotation的属性，使其可以自由旋转。
通过如上排列它们，您可以创建一个倾斜的半色调，如下图所示。旋转：-0.2
3.5. 移动
最后让半色调工作。
这里，用于表示半色调的Voronoi节点的UV是滚动来表达运动。3.5.1. 暂时运行
为了表达运动，首先将某个点的
UV坐标为t 秒后的位置应该被考虑。
设起点为0，距离为d，移动速度为v，时间为t，d = vt可以写成
让我们把它放在图表上。首先，在
Move组中，准备一个通过将经过时间Time与新创建的移动速度属性MoveSpeed相乘获得的值。
然后将其添加到UV坐标的输出值，同时保持纵横比，并连接到Voronoi节点的UV。
如果在上述状态下从Save Asset保存，对角线半色调现在滚动。3.5.2. 给出运动方向
现在只能向一个方向移动.
因此，通过创建类型为Vector 2的新属性MoveDirection被赋予运动方向去做。这里需要注意的是移动速度已经设置是。
乘以MoveDirection的值时，使用正常化并且向量的大小应该是1。将以上所有内容放在一起，我们得到下图。
Normalize节点用于将运动方向的归一化向量与原始输出相乘。
然后，将那里获得的输出值重新连接到新的Add节点。对于
One Minus节点，运动方向调整从某种意义上说是这样安排的这里，如果
MoveDirection的值为(x, y)=(-1, 0)，向左移动你可以检查你在做什么。3.6.匹配纹理的形状
至此，大部分的调整已经完成。
从这里，附加的纹理符合形状做这项工作。首先，使用
Sample Texture 2D节点，将MainTex属性连接到Texture，得到纹理的形状和颜色。不需要在纹理中投影alpha值为
0的部分透明部分因此，输出到Alpha的值和Alpha 通道不透明度乘以
使用Multiply节点将alpha 通道与One Minus节点的输出相乘，然后拼接回Alpha，如下图所示。颜色可以通过将
Sample Texture 2D节点的RGBA连接到Base Color来表示。
如果你能做到这一点，你就完成了！
从Save Asset保存并确认，就是这次的目的遵循 UI 形状的半色调可以看到4.总结
这是使用
ShaderGraph创建移动二维半色调的过程。
我将简要总结到目前为止的步骤。
原创声明：本文系作者授权爱码网发表，未经许可，不得转载;
原文地址：https://www.likecs.com/show-308626380.html