引言哈喽大家好我是亿元程序员相信大家都看或者听到过下面几句台词“我要验牌(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年游戏行业经验的主程。在游戏开发中希望能给到您帮助, 也希望通过您能帮助到大家。实不相瞒想要个赞和爱心请把该文章分享给你觉得有需要的其他小伙伴。谢谢推荐文章亿元Cocos小游戏实战合集老板说最近这款游戏很火让我抄可是我连玩都玩不明白…这款值68亿的游戏你不实战一下吗安排小伙伴说我的拼图游戏用Mask不能合批…俄罗斯方块谁不会做…啊流沙版最近很火的一个拼图游戏老板让我用Cocos3.8做一个…老板说拼图游戏太卷了让我用Cocos做个3d版本的…敢不敢挑战用Cocos3.8复刻曾经很火的割绳子游戏