Cocos Creator 如何制作拼图游戏,支持无规则形状!

Stella981
• 阅读 624

预览效果

Cocos Creator 如何制作拼图游戏,支持无规则形状!   

实现思路

    假设一张图,按照 row 行 col 列分成 count(=row * col) 份,由 count 份碎片组成,每个碎片有自己特定的形状,把所有碎片都拼接在一起,组成完整的拼图,就完成了一张图的拼接内容。

    其中每个碎片,使用特定形状的遮照,挡住背景,实现部分显示效果。

碎片的遮照

    碎片考虑到是特殊形状,我这个实现方式,有个要求,就是碎片四周凸起的高度,都要是一样的,没有凸起的位置,使用透明边补充起来,这样是为了方便计算位置,算法也通用,只要给出几行几列,背景图的大小,就都可以使用这种方法。

Cocos Creator 如何制作拼图游戏,支持无规则形状!

     比如上图,上下左右四个方向的红色箭头所标记的宽度,需要保持一样,这样的话,算上透明边,每张遮照图都是等宽高的图了,至于凸起或者凹陷的部分,根据需要去调整就行,只要保证凸起和凹陷的高度一致即可。

碎片的显示

    有了上一步的碎片遮照,就只需要使用 Mask 来控制显示背景图的位置即可,比如本demo 中的背景图,如果需要显示左上角的那个碎片,适当移动背景图的位置,就能像下图这样进行显示。

Cocos Creator 如何制作拼图游戏,支持无规则形状!

    打开背景遮照的效果,就是想要显示的碎片区域了,如下图绿色区域。

Cocos Creator 如何制作拼图游戏,支持无规则形状!

    以上,就是每一张碎片的实现方式了。

整体布局

    根据碎片的显示大小,背景拥有碎片数量,计算每一个碎片对应的坐标位置,即可计算出碎片应该在坐标点,比如本 demo 中,红线相交的位置,就是碎片的位置。

Cocos Creator 如何制作拼图游戏,支持无规则形状!

吸附效果实现

    松开鼠标以后,遍历碎片可能在的所有位置,选择一个离拖动碎片距离最近的点,通过 moveTo 移动到对应坐标点,即可实现吸附效果,操作过程中,注意父节点的变化以及坐标点的变换,如果没有计算对,就可能会出现闪烁的效果。

Cocos Creator 如何制作拼图游戏,支持无规则形状!

碎片容器实现

    根据当前碎片在容器内的大小,计算出碎片加入或移出容器,所在的位置。

Cocos Creator 如何制作拼图游戏,支持无规则形状!

    加入时,加入位置后的所有节点往后移动一个碎片的位置。

Cocos Creator 如何制作拼图游戏,支持无规则形状!

    移出时,移出位置后的所有节点,需要往前移动一个碎片的位置。

Cocos Creator 如何制作拼图游戏,支持无规则形状!

    这样就实现了容器内,添加、移出碎片的动画效果了。

Cocos Creator 如何制作拼图游戏,支持无规则形状!

获取源码

    关注公众号,发送【拼图】,获取 demo 的源码 !!!

如果觉得有用,欢迎关注公众号,分享更多的人 !!!

Cocos Creator 如何制作拼图游戏,支持无规则形状!

本文分享自微信公众号 - 一枚小工(caizj_cn)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
郜小超 郜小超
2年前
js二维数组重新转化 Echarts中遇到的数据问题
后台返回的数据需要重新整合vararr1,1,1,2,2,2,3,3,3,4,4,4,5,5,5varnewArrayarr0.map(function(col,i)returnarr.map(function(row)returnrowi;));
Wesley13 Wesley13
2年前
MySQL 中的 COUNT 的使用经验
COUNT(_)vsCOUNT(COL):他们在逻辑上是不同的。在MySQL中,COUNT(COL)是不会统计NULL列的。例如下面这张pet表,COUNT(_)与COUNT(owner)是不同的:ForExampleselectfrompet;
Wesley13 Wesley13
2年前
MySQL学习——操作表
MySQL学习——操作表摘要:本文主要学习了使用DDL语句操作表的方法。创建表语法1createtable表名表定义选项表选项;表定义选项用来创建定义表的结构,由列名(col\_name)、列的定义(column\_definition)以及可能的空值说明、完
Wesley13 Wesley13
2年前
使用伸缩盒布局创建一个三列布局每一列占用`col
\使用伸缩盒布局创建一个三列布局每一列占用\col{n}\/12份基于父级容器的宽度\Answer设置\.row\类的父级容器为\display:flex;\样式然后使用\flex\缩写形式属性给每一列子元素设置一个\flexgrow\值使得每一列可以按照设置的比例自动协调宽度
Stella981 Stella981
2年前
Python之DataFrame更改列名及重排列顺序
日常在处理数据的时候,经常需要对dataframe进行重排,只取其中几列或者更改列名等操作;有两个相似的方法reindex和rename,与此记录一下常见的用法,并标注一下区别:rename:重命名,就是对col列进行命名的修改,他只改变col的名字,相当于起了个别名,原来叫col1,以后叫col2,inplaceTrue,用来保存更改,即更改了原
Wesley13 Wesley13
2年前
mysql 未定义主键,mysql 如何处理?
InnoDB会自动帮你创建一个不可见的、长度为6字节的row\_id,而且InnoDB维护了一个全局的dictsys.row\_id,所以未定义主键的表都会共享该row\_id,每次插入一条数据都把全局row\_id当成主键id,然后全局row\_id加1。该全局row\_id在代码实现上使用的事bigintunsigned类型,但实际上只给row\_
Stella981 Stella981
2年前
300行代码不到的javafx框架tornadofx拼图游戏优化版
不知道为什么分成9份的时候无法移动,请高手指教分成36份的时候程序有可能卡住没反应分成4份的时候有可能无法成功恢复原图!(https://oscimg.oschina.net/oscnet/d21962a202c0c166fd9a71f84462c1c313f.jpg)importjavafx.application.
Wesley13 Wesley13
2年前
MySQL学习笔记(8)——添加列
添加单列ALTERTABLEtb\_nameADD\COLUMN\col\_namecolumn\_definition\FIRST|AFTERcol\_name\其中FirstAfter可以定义添加的列的位置。比如:ALTERTABLEuser1ADDpassword
Stella981 Stella981
2年前
Python计算大文件行数方法及性能比较
如何使用Python快速高效地统计出大文件的总行数,下面是一些实现方法和性能的比较。1.readline读所有行使用readlines方法读取所有行:defreadline_count(file_name):returnlen(open(file_name).readlines())