引言
哈喽大家好，我是亿元程序员，相信大家都看或者听到过下面几句台词：
"我要验牌(
wò yāo yān pǎi)"。"牌没有问题"。
"给我擦皮鞋"。
如果要评选马年开年第一热梗，这几句台词估计能够遥遥领先。
为此 ，我特意写了一个Shader来"验牌"（蹭热度是吧？）。
言归正传 ，本期带大家一起来看看如何在Cocos游戏开发中，通过Shader实现卡牌的掀角(搓牌)效果，进行"验牌"。
本文源工程可在文末获取，小伙伴们自行前往。
什么是掀角（搓牌）效果？
卡牌从一个角 / 边开始，以卷曲、倾斜、透视变形的方式，从背面逐渐翻转为正面，过程中牌面局部先露出、整体渐进展开，模拟真实纸张的弯曲与光影变化。
还是不懂？我斥巨资买了一副扑克牌来演示给大家看：
原来如此，但是游戏中要它何用？
掀角（搓牌）效果有什么用？
掀角（搓牌）效果不是花里胡哨，是专门用来提升 "手感、悬念、运营数据" 的，在棋牌、卡牌游戏里属于非常实用的设计。
总的来说有以下几种常见用处：
- 提升真实手感 : 模拟现实里用手指搓开牌角偷看的动作，更像 "真打牌"，在棋牌和卡牌游戏中很常见。
- 制造悬念，强化情绪 ：不是一下子翻开，而是先露一点、再慢慢展开，在抽卡类游戏中很常见，常用作动画效果。
- 循序渐进 ：模拟翻书效果，逐渐展示全部内容，避免直白刷新，常用来展开新篇章。
好哦好哦，那要怎么实现呢？
掀角(搓牌)效果实战
这部分 会比较啰嗦，小伙伴们可以直接跳到末尾四键四连点赞分享收藏转发。
1.前期准备
首先 准备正反面的扑克牌，有条件的可以买扑克自己拍，我直接去找AI搭子:
然后 用CocosCreator3.8.7创建一个名叫woyaoyanpai的2D项目，将准备好的图片放到assets目录下，简单布置场景，此处小3埋下伏笔。
老规矩 ，我们先找到Shader的模板，为什么不用菜单生成？因为那不适用。
在资源管理器 ，搜索sprite找到内置的sprite的shader，然后复制到assets目录，改个名字woyaoyanpai。
2.初见端倪
Cocos Shader的固定格式通常分成以下3个部分:
- 声明参数和渲染状态 ：定义渲染配置（混合模式、深度测试、属性参数等）。
- 顶点着色器 ：决定每个顶点的位置和UV（纹理坐标）。
- 片元着色器 ：决定每个像素的最终颜色。
正如 笔者前面说过的，Shader入门阶段理解这三部分就足够上手，复杂效果可以结合AI辅助实现。。
下面我们将根据上面的三部分分别进行。
3.CCEffect（参数和渲染规则声明）
这部分 是"配置项"，小伙伴们不用深钻细节，重点看properties里的参数（脚本会给这些参数传值）：
具体如下：
| 参数名 | 作用 |
|---|---|
| faceTexture | 卡牌正面的贴图（比如牌面的花色 / 数字） |
| faceUVFlip | 正面贴图的翻转（比如牌面左右 / 上下反了，用这个修正） |
| touchPos | 手指 / 鼠标拖拽的位置（UV 坐标，0~1 范围） |
| cornerPos | 卡牌被掀起的角的位置（比如右下角是 (1,0)，UV 坐标） |
| radius | 卷曲的弧度（值越大，卷曲越明显） |
| paddingData | 扩充范围数据（x/y 是向四周扩的像素，z/w 是卡牌宽高） |
4.sprite-fs（片元着色器）
因为掀角（搓牌）主要在片元着色器实现，因此我们先来看看这部分。
片元着色器，粗暴地理解就是，它决定每个像素是什么颜色。
因此我们需要知道什么时候显示牌面，什么时候显示牌背才能知道显示什么颜色。
当卡片卷起来的时候，这里面涉及到一个数学模型叫"卷曲坐标系"。
其中具体的含义如下：
| 变量 | 含义 |
|---|---|
| dir | 卷曲方向(和我们理解的方向相反) |
| D | 拖拽距离(手指到角起点距离) |
| R | 圆柱半径(卷起来的圆柱半径) |
可以把卡牌卷曲理解成"绕一个圆柱滚起来"。
- D：表示当前拖拽长度
- 圆周公式：C = 2πR
- 我们只卷一部分，所以用 D ≈ πR（半圈）
因此 ： R ≈ D / π
这样就能根据拖拽距离动态算出卷曲半径。
建立 完成以后，我们可以算出来当前渲染像素点相对于"卷曲交界线"的垂直距离x(投影)，然后我们就能够根据x的值来进行分区，得出最终颜色。
为了 让小伙伴们更加容易理解，我给每一层叠加一层半透明的颜色(红、绿，蓝，黄)，方便大家理解。
5.sprite-vs（顶点着色器）
小伙伴可能会有疑问，什么时候应该在顶点着色器写，什么时候应该在片元着色器写。
先上一个简单的结论（其实后面还会涉及计算量问题，暂不讨论）：
- 顶点着色器（VS）：改"形状"。
- 片元着色器（FS）：改"像素颜色"。
那我们的效果有什么需要在顶点着色器完成的，直接给大家看下效果：
对于 一个Sprite，渲染范围就四个顶点，所以当像素出界后，无法正常显示。
因此我们需要在顶点着色器把范围扩大一下。
扩大 之后，图像会被拉伸，因此我们还要把UV缩回去，这样才能保证不变形。
6.最终效果
结语
"我要验牌"这个梗最近的确很火，终于是烧到了游戏开发。
适度玩梗益脑，沉迷玩梗伤身。
本文实例工程 可通过私信 发送"我要验牌"获取。
更多实战完整源码包含编辑器 已集成到亿元Cocos小游戏实战合集(已完结)，感谢小伙伴们对创作的支持。
我是"亿元程序员"，一位有着8年游戏行业经验的主程。在游戏开发中，希望能给到您帮助, 也希望通过您能帮助到大家。
实不相瞒，想要个赞 和爱心 ！请把该文章分享给你觉得有需要的其他小伙伴。谢谢！
推荐文章：