引言
哈喽大家好，我是亿元程序员，最近刷到不少贴纸玩法。
有的是往物品上贴小图案，有的是把贴纸一本本收集起来。
有的是让玩家在画面里疯狂贴、疯狂摆、疯狂装饰。
玩法不一定复杂，但有一个共同点：
贴上去的那一下，必须爽。
如果 只是Sprite一显示，透明度从0到1，功能当然也能跑。但它不像贴纸 ，更像图片突然出现了。
因此 ，我特意写了个会卷边的贴纸Shader教程，分享给大家。
言归正传 ，本期带大家看看，如何通过Shader将Sprite做成类似于贴贴纸的效果，大家记得三键三连。
本文贴纸Shader可在文末获取，小伙伴们自行前往。
先写个呆萌
为了更好地展示贴纸效果，我们先要搭建一个简单的工程，点击之后在鼠标位置显示一张图片。
1.资源准备
首先找几张可爱的卡通贴纸：
2.写代码
首先 新建一个StickerManager脚本，将我们的贴纸图片引入，并且添加上全局点击事件：
点击 之后，直接在鼠标点击的位置生成一个Sprite，并且贴上我们的贴纸图片：
这里有一个小点要注意：
点击事件 拿到的是屏幕坐标，我们的贴纸节点是在StickerManager下面创建的，所以需要通过convertToNodeSpaceAR转成本地坐标。
否则你点东边，贴纸可能跑西边；你点中间，贴纸可能开始自由发挥。
3.布置场景
首先添加一张纯色背景，不然背景黑黑的不好看，同时将上面脚本也拖到场景中：
然后将我们的贴纸图片拖到我们的脚本的属性栏：
4.效果演示
上面的步骤处理好之后，我们就可以运行游戏，往屏幕上贴纸了：
呆萌准备好之后，我们就可以制作我们的Shader效果了
贴纸Shader
上面的贴纸虽然有效果，但是缺少平时我们贴纸的"动画过程"，下面我们来实现一下。
我们希望它不是突然出现，而是：
先出现一点点，再从右上角卷边，最后慢慢贴平。
换句话说 ，普通版本只是"生成图片"，Shader版本才是"贴纸贴上去"。
1.准备Shader
首先 在资源管理器搜索sprite，复制一个builtin-sprite作为模板：
然后给他改个很像贴纸的名字：
2.使用Shader
依旧是 从编辑器引入这个Shader：
然后 给我们的Sprite安排上，记得要设置USE_TEXTURE，setProperty是传参到Shader接下来会讲：
3.使用参数
首先 要在开头接收我们脚本传入的参数，x为开始时间，y为动画时长。
然后 在顶点着色器声明一下传入变量，getStickerProgress是获取动画进度，范围统一成0~1：
4.顶点着色器
顶点着色器的关键在于，先让右上角轻轻抬起：
这段 看起来像魔法，其实不复杂，贴纸右上角的UV大概有这样的特征：x 接近 1, y 接近 0。
所以我们用：
scss
a_texCoord.x + (1.0 - a_texCoord.y)来找到右上角区域 ，再通过smoothstep做一个柔和过渡，这样不是只有一个点被抬起来，而是一小片区域被自然影响。
其中：
| 变量 | 作用 |
|---|---|
cornerMask |
找到右上角影响区域 |
liftIn |
动画开始时快速抬起 |
liftOut |
随着动画播放逐渐贴平 |
vec2(20.0, 28.0) |
控制抬起方向和幅度 |
最终的效果就是：贴纸刚出现时右上角会轻轻翘一下，然后慢慢落回去。
5.片元着色器
接下来 就到真正的重点了：卷边。
这其实 和之前"我要验牌"的原理差不太多，大家可以自行翻阅往期文章。
我们先固定一个起点和方向：
PEEL_CORNER_UV表示卷边从哪里开始。
当前 是vec2(1.0, 0.0)，也就是右上角。
PEEL_DIRECTION表示卷边方向。这里用的是一个斜向量，让卷边从右上角往内部斜着收回去。
然后根据动画进度算卷边距离：
这里有三个东西：
| 变量 | 作用 |
|---|---|
appear |
控制贴纸淡入 |
easedProgress |
让动画更自然 |
peelDistance |
控制卷边范围 |
peelDistance表示卷边从大到小、从卷到平。
6.换个方式理解
卷边最难理解的地方，是它不像普通遮罩那样简单。
因为纸片卷起来以后，会出现正面、背面和弯曲的边。
这里我们可以把卷边理解成：
纸片绕着一根看不见的小圆柱卷起来。
核心代码如下：
-
radius是卷起来的半径。 -
curlStartUV是卷边开始的位置。 -
alongCurl表示当前像素在卷边方向上走了多远。
有了这个距离，就可以判断当前像素属于哪个区域：
| 区域 | 显示内容 |
|---|---|
| 普通区域 | 贴纸正面 |
| 翻起区域 | 白色纸背 |
| 卷边区域 | 背面 + 正面 + 明暗 |
7.细节调整
贴纸要像纸，背面就一定要出现。
如果卷起来以后仍然只显示正面，那就不像贴纸，更像一张图片被硬拧了一下：
在翻起区域，我们采样背面的UV，并把颜色改成白色：
其次就是阴影效果，想要贴纸卷起来更加真实，我们必须加上亮暗变化：
8.最终效果
来个慢动作：
彩蛋
如果小伙伴们不想学，只想直接用，改效果，就改下面几个地方：
| 目标 | 修改位置 |
|---|---|
| 贴纸贴得更慢 | stickerAnim.y |
| 卷边更明显 | peelDistance = mix(1.5, 0.0, easedProgress) |
| 右上角翘得更高 | 顶点阶段vec2(20.0, 28.0) |
| 纸背更灰 | back.rgb = vec3(mix(0.97, 1.0, normalZ)) |
| 正面阴影更重 | front.rgb *= mix(0.85, 1.0, normalZ) |
如果想从别的角开始卷，就改这两个：
结语
玩家不一定知道你写了Shader，但他一定能感觉到贴上去那一下爽不爽。
本文实例工程 可通过点赞后私信 发送"贴纸"获取。
我是"亿元程序员"，一位有着8年游戏行业经验的主程。在游戏开发中，希望能给到您帮助, 也希望通过您能帮助到大家。
实不相瞒，想要个赞 和爱心 ！请把该文章分享给你觉得有需要的其他小伙伴。谢谢！
推荐文章：