请教喵哥不规则拼图怎么实现

如何实现那种不规则拼图
1、不规则区域的裁剪
2、不规则区域的点击

2赞

@iwae

简单点 美术出碎块模版 裁剪,如果自己裁剪 很难绘制出这种立体效果

你必须得到多边形区域的顶点数组。1.先将多边形区域视为矩形区域,每个区域的顶点数组就是矩形的4个顶点。2.然后扭曲矩形的每一个边(给边增加顶点,并将新增顶点按顺序加入顶点数组),此时可以将矩形的边都扭曲成相同的曲线,3.给每个顶点增加随机偏移。
你得到每个区域的多边形数据就可以做碰撞检测了
然后你还需要写shader,绘制多边形图像,这个shader论坛里有人发过,你可以用现成的

点击那块有什么好思路吗

全部用遮罩,简单粗暴。

碰撞检测,判断点是否在多边形内,百度搜素

如果是我做,我会用shader实现不规则裁剪和不规则点击测试。这种拼图图案,边缘处是不是折线,用多边形判定的话,多边形的形状设置会耗费很多时间。
简单点的做法是让美术做好裁切好的图,点击则用读取计算具体像素点是否为透明

shader实现思路:
1将uv * 行列数,然后取小数部分,网格化
2对uv用三角函数扭曲边界线,这里思路不难,但是要对称交错地扭曲有点绕
3在边界线上加上一个圆,做sdf的融合
这三步走完后,一个拼图的网格线就形成了
4用顶点数据设置单块拼图的id,将图的uv扩大一些,保证能将扭曲的边缘覆盖到,然后判定在当前土块区域内的显示像素,不在其内的输出透明。自定义顶点数据比较麻烦,这一步可以用颜色数据来代替


稍微花时间尝试了一下,完成了前面2步

1赞

没法实现,目前cocos没这么大的能力

无解~~~要么就学习一下深层的东西,否则没法实现

不现实,碰撞检测是需要提前知道图片大小,需要在cocos编辑器勾勒出所有的边界,但是如果别人不清楚图片的大小(动态大小),从而导致不能提前知道图片的边界,也就无法使用碰撞检测了。
那么使用像素判断是否可以?也不行,我试过,因为camera在进行像素判断2个挨的很近的按钮图片时候是不行的(具体怎么不行,你可以自己实现一下就知道了)
所以cocos目前的功能很局限

想简单点儿,大图叠下面,上面只是带透明的两种状态的小图片,点击不用考虑不规则,用矩形就行了

https://juejin.cn/post/7011404248780898311
https://cloud.tencent.com/developer/article/1637511

降智游戏。

厉害厉害,我打算用图块模版的数据映在图片上,其他区域置为透明;点击采用透明度检测

这种想过,感觉mask消耗比较大

法子还是有不少的,只是那种实现起来效果最好

主要是我希望实现任意图片制作拼图