关于拼图切割器
相关插件
相关插件：
◆Drill_PictureJigsawPuzzleCutter 图片 - 拼图切割器
该插件可以现场切割任意静态图片，然后将切割的拼图块，再绑定给其他图片对象。
简单来说就是： 原图片+切割板=切割后的多个拼图块图片 。
拼图切割器
定义
切割板： 指用于切割的图片资源。
切割规则： 指划分m*n个拼图块，每个拼图块中寻找黑色边缘，并切割分离，白色、透明、其它颜色，都会被忽略。
| 注意，切割板不是遮罩，规则是专门定的，与遮罩不一样。不透明的纯黑色才有切割效果，白色、透明、其它颜色，都不影响切割。 |
拼图块： 指通过切割板切割后的图片资源，拼图块通过插件指令绑定到图片。
拼图块数量： 指根据切割规则，拼图块的数量 = 横向切割数 * 纵向切割数。
（下图为3*3的数量）
| 必须是m*n这种矩阵的数目，与切割原理有关。可见后面章节：切割原理 。 |
切割原理
1）流程
切割流程如下图。
原图片 + 切割板 = 切割后的多个拼图块图片
你也可以走一遍 从零开始设计的流程，了解切割流程：切割图片并设置拼图块 。
2）切割板属性
除了切割板资源，还需要配置下列参数。
由于程序无法直接知道切割板是什么样的矩阵，
所以你需要额外告诉程序横向切了多少块，纵向切了多少块。
具体规则和细节可以看后面章节：切割规则 。
3）现场切割
切割后的拼图块，会被存放到临时容器中。
必须先切割，后绑定拼图块，否则指定图片没有任何图像。
插件指令如下图。
| 注意，现场切割的拼图块，无法保存到存档中。 |
切割规则
1）切割全过程说明
首先，如果原图与切割板大小不一致，则原图会被 拉伸缩放 为切割板的大小。
然后，切割板会分配m*n个拼图块。（类似下图的ps划分参考线版面）
每个拼图块的大小如下。
拼图块基础宽度 = 切割板宽度 ÷ 横向切割数
拼图块基础高度 = 切割板高度 ÷ 纵向切割数
每块碎片，都会从中心点出发，向周围寻找 黑色像素边缘。
如下图的每个红点。
每个像素点都搜索一遍，如果遇到黑色像素边缘，就停止向前搜索。
直到搜索全部的像素点，得到下图的红色区域。
（这个过程与PS的魔棒工具很像）
| 注意，中心点的位置不能涂黑，因为中心点是搜索的开始点，涂黑就直接结束搜索了。 |
根据上述的搜索方式，只要用ps中的黑色铅笔，围住切割片，就能算作一个拼图块。
并且，黑色铅笔要很细，只有一像素的厚度，刚好隔离上方和下方的拼图块区域。
并且每个拼图块，都有“切割板溢出厚度”，这个厚度为拼图块能扩展绘制的范围。
如下图的绿色方框，
里面的方框为拼图块的基础高宽，外面的方框为扩展后的范围。
因为厚度设置，切割边缘可以越过里面的方框，划分更大的区域。
如果没封住，会出现色彩溢出的问题，可见后面章节：2）必须封住画面 。
如果溢出厚度小了，会出现切割的问题，可见后面章节：3）调整切割溢出厚度 。
| 注意，切割板不是遮罩，规则是专门定的，与遮罩不一样。不透明的纯黑色才有切割效果，白色、透明、其它颜色，都不影响切割。 |
2）规则 - 必须封住画面
没封住切割片时，色彩内容会溢出。
3）规则 - 调整切割溢出厚度
切割溢出厚度不足时，会发现切割片小了。
4）规则 - 不要封住太多像素
封住太多时，会出现切割片漏风问题。
如下图，缺了一个角。
5）规则 - 错开交界处
此设置与 4）不要封住太多像素 一样。
四块拼图的交界处，会造成1像素的漏风。
只要把它们挪1像素，就不会漏风了。
从零开始设计（DIY）
切割图片并设置拼图块
1. 设置一个目标
2025年11月21日，作者我梦见自己买了个2000块的拼图要拼，画面好像是深蓝星空和纯白地狱。醒来后，我上网找了找，没找到。（可能因为2000块拼图对每块的细节要求极高，纯色拼图难度非常大，所以市面上没有这样的纯色拼图）
于是，我想起了自己示例里面的拼图还是普普通通的方形，和现实里的拼图，差别有点大……要像个拼图才行啊，于是开坑了插件。
2. 结构规划/流程梳理
》拼图切割器插件可以单独使用。
》新开一个工程来单独试试插件功能。
》需要遵循 切割规则 来画切割板，配置切割板属性。
》在游戏中测试即可。
3. 新建工程
由于插件可以单独使用，这里新建一个工程。
加上插件。
在img/picture文件夹下，放上切割板和切割用原图片。
（原图片可以为任意大小，切割时，图片大小会被缩放为切割板的大小）
4. 切割板绘制
切割板的图像可以自己画，但需要按照章节的规则：切割规则 ，用ps黑色铅笔来画。
但这里，作者我就用默认的切割板。
打开插件配置，切割板属性如下图。
》切割板中，一共有2*2块拼图，所以横向切割数为2，纵向切割数为2。
》切割板厚度，与每块拼图延伸出去的图像有关，默认20像素，需要时可以调大。
详细介绍可以看看： 调整切割溢出厚度 。
》拼图块可以设置描边，这里设置为 淡蓝色 的描边。
5. 事件指令设置
完成切割板设置后，在游戏编辑器中，新建一个事件。
事件指令执行对图片21的切割。
切割后，再建立图片22,23,24,25 。
用于存放获取拼图块。
存放拼图块后，就可以在游戏中测试，
得到下图的效果。
6. 切割动画细节
游戏测试中，可以看到拼图块瞬间出现，没有动画。
这是因为插件支持切割后立即赋值，不需要等待帧，所以才瞬间出现。
利用这个特性，
可以规划拼图块位置，与切割的中心位置正好重合。
就能实现无缝切割：
》原图片+切割板的图片 与 四块拼图的图像重合。
》隐藏 原图片+切割板的图片，看不出画面已经发生变化。
》移动四块拼图，形成切割分离的动画效果。