引言
哈喽大家好，我是亿元程序员。
有许多小伙伴看了之前笔者发的拼图游戏实战之后，纷纷私信留言说到：
大佬，上次拿你的拼图游戏效果给我们老板看了一下，
老板说不仅效果没达到原版效果，而且效果太丑了…
怎么样改成和原版一样的圆角效果呢？
无独有偶：
说实话，笔者在做那期实战的时候，的确是偷工减料了，大家的吐槽也是合情合理！
于是打算在本期简单补充一下，并且更新到合集里面去，希望小伙伴们高抬贵手，有所收获。
言归正传，本期带大家一起来看看，在Cocos游戏开发中，如何实现拼图游戏中的圆角边框效果。
本文源工程可在文末获取，小伙伴们自行前往。
圆角边框怎么做？
通常圆角边框效果的实现有且不限于以下几种方法:
-
Shader : 通过自定义
Shader实现圆角效果。 -
美术妹子 : 准备各种形状的边框图，动态拼接配合裁剪。
-
Graphics组件 : 通过
Graphics组件和Mask组件实现。
根据笔者对以往文章的观察，小伙伴们好像不怎么喜欢Shader，再加上美术妹子已经够烦了。
本期我们就通过Graphics组件和Mask组件来实现看看。
Mask（遮罩）组件
Mask用于规定子节点可渲染的范围。
默认带有
Mask组件的节点会使用该节点的约束框（也就是属性检查器中Node组件的ContentSize规定的范围），创建一个矩形渲染遮罩，该节点的所有子节点都会依据这个遮罩进行裁剪，遮罩范围外的将不会渲染。
官方文档其实有比较详细的介绍：
道理我都懂，具体怎么使用？
自定义图形遮罩
下面我们一起来看下如何使用自定义图形遮罩。
1. Mask组件
首先通过右键->2D对象->Mask(遮罩)创建一个Mask组件。
创建之后，Creator会自动帮忙添加上必须的Graphics组件，同时我们需要将Mask的Type改成GRAPHICS_STENCIL 。
2. 子节点
因为Mask组件只会对它的子节点内容进行裁剪，我们需要将图片放到它的子节点下：
3. 画线组件
除了裁剪以外，我们还需要绘制对应的边框，于是我们需要再添加一个Graphics组件专门用来画线框。
4. 写代码
画线裁剪其实就是通过指定的画线区域，将指定区域裁剪出来。
裁剪代码如下：
边框的绘制也是同理：
5. 效果
裁剪的效果貌似已经有了，但是边框绘制的有点奇怪。
6. 多边形外扩
上面的问题由于我们都是通过相同的点位绘制出来的，导致没办法实现黑框->白边->图片的分层效果。
于是我们需要通过下面的方法实现框的内缩/外扩。
再次绘制：
就能得到我们想要的边框层叠效果。
说半天，这不还是直角的边框吗？？？
圆角边框
其实有了上面的过程，我们只需要在转角处，把直线变成弧线连接，就能简单实现圆角效果。
首先我们画线的路径上，按方向提前取一个点，然后在转角后按方向再取一个点(图中红点位置)，然后通过两点画一条圆弧。
画弧线我们可以通过quadraticCurveTo接口进行绘制，有小伙伴可能好奇为什么不使用现成的arc接口进行绘制，大家自己可以尝试一下。
效果如下：
终于看到圆角的边框了，那多个合并之后的效果呢？
合并效果
为了更好地看效果，我们需要调整一下点位：
如下图断开处：
效果如下：
效果还不错，就是内角地方不对，按照原来的效果，内角处应该是直角过渡，因此我们需要加入判断。
这样就大功告成了：
相信小伙伴通过上述原理，即可完成圆角拼图游戏的制作，最终效果如下：
效果演示
结语
最近盗版源码猖獗，希望大家能多多支持正版，理解创作者的不易。
谢谢大家！
本文完整源码可以点赞后通过私信roundedcorners获取。
圆角拼图已经更新至合集，可以通过亿元Cocos小游戏实战合集获取，感谢支持。
