【包教包会】CocosCreator Assembler经典案例第二期——圆角矩形（支持原生、可合批、附Demo源码）

一、效果演示

二、如何获取

1、https://gitee.com/szrpf/RoundBox

2、解压，导入cocos creator（版本2.4.13），可以直接运行Demo演示

3、单独复制Demo中的RoundBox.ts到自己项目中

新建一个空节点并添加RoundBox组件，拖一张图片到SpriteFrame里就可以使用了，和cc.Sprite差不多。

三、算法思路

默认情况下，一张图片4个角，每个角1个顶点。

如上图，增加顶点数量，并且等间距圆弧分布，就可以实现圆角效果。

顶点数越多，圆角弧度越平滑，但计算量也越大，具体看项目需求。

属性面板设计如下：

可以单独设置每个圆角的可见性。

为了方便计算，可以把矩形拆成5块：中间、左下、右下、左上、右上
假设：
圆角半径 ：R
线段数量：S
有几个角可见：N
1）计算顶点数量和三角形数量

中间的顶点数 = 12，三角形数量 = 6

每个角顶点数 = S - 1（其余顶点都在中间的结构上，已经算过了）
三角形数量 = S

如果该角不可见，那么这个角：
顶点数 = 0（只是把中间结构的点移出去，并没有增加顶点数）
三角形数 = 0
因此，顶点数量 = 12 + N * (S - 1)
三角形数量 = 6 + N * S

2）计算顶点坐标
Step 1：计算图片左下、右下、左上、右上4个边缘

根据图片宽高、锚点很容易计算

Step 2：计算中间结构的顶点坐标

根据Step 1的结果，以及圆角半径，计算4个圆角圆心坐标
然后算出其余点坐标。

Step 3：计算圆角顶点坐标

由于每个圆角顶点均匀分布在90度圆弧上，因此夹角α = 90 / S
每个顶点坐标 = 上一个顶点绕圆心转α角度

根据任意点P绕O旋转的公式，计算圆角顶点坐标。

3）计算顶点UV

根据UV的定义，UV坐标系的原点O是图片左上角，坐标（Ox, Oy）UV（0, 0）
任意顶点P坐标（Px, Py）UV（Pu, Pv）

Pu = (Px - Ox) / 图片宽度
Pv = （图片高度 - Py - Oy) / 图片高度

4）计算顶点颜色

所有顶点颜色都 = 节点颜色就可以

5）计算顶点顺序

中间结构的点序是固定的，在纸上画一下就可以得到，不需要计算。
4个角的点序：从圆心开始逆时针排序

点序没有固定的规则，看个人喜好，但尽量有规律性，方便计算。
其余模块比较公式化，之前的教程已经实现过了，照搬过来就可以。

四、结束语

有不明白的，或者优化建议，可以留言评论，或给我发邮件！

包教包会，你会了吗？

创作不易，请多留言讨论，这样我会有动力发更多好玩的东西上来。

Gitee地址：水煮肉片饭 (szrpf) - Gitee.com

EMail地址：27185709@qq.com

推荐链接：

1、【包教包会】操控顶点的大师——CocosCreator Assembler保姆级教程

2、【包教包会】CocosCreator Assembler经典案例第一期——2D实现3D透视翻转

3、权重随机算法，解决游戏中一切可控随机（刷怪、掉宝、转盘、抽卡等等）

4、【包教包会】对CocosCreator拖尾组件MotionStreak做了全面优化

5、【包教包会】重写CocosCreator的按钮Button组件，动画、音效、回调逻辑优化