最近很火的一个拼图游戏,老板让我用Cocos3.8做一个...

引言

哈喽大家好,我是亿元程序员,最近有小伙伴求助笔者:

亿哥,是这样的,最近不是有一个比较火的拼图游戏吗?

很多 直播间都在播这款游戏,老板看到后,让我用Cocos3.8做一个...

这个拼图游戏,看似简单,实际上好像也不难,但是我不知道怎么下手,可以帮忙分析一下怎么实现吗?

好巧不巧,笔者也看到了这款游戏,正准备蹭下热点,并且加入到我的小游戏合集当中去。

言归正传 ,本期带大家一起来看看,如何在Cocos游戏开发中,实现一个目前很火的拼图游戏

本文源工程可在文末获取,小伙伴们自行前往。

什么是拼图游戏?

拼图游戏是一种将碎片化的组件拼接成完整图案的益智类游戏,核心玩法是让玩家通过观察、推理和动手操作,把打乱的零散拼块组合成预设的目标图像。

玩过拼图游戏的小伙伴都知道,游戏的过程是把散的图还原成一幅完整的图片。

但是,在开发这款游戏的第一步,我们需要把一幅完整的图片打散。

打散图片

看到这里,有小伙伴可能就跃跃欲试:

打散图片这个我懂!让美术妹子按照比例等比切割出来,然后把散图丢给我就好了,嘿嘿!

美术妹子:"我谢谢你!"

这样操作也不是不行,但是大概率会被美术妹子吐槽一番。

因为 很多时候,拼图的难度是由拼图的片数决定,图片输出时,并不能马上决定是拆成多少张,假如输出了3*3,结果策划觉得不合适又要改成4*4,这样美术妹子又得返工了,显然不合理。

于是,我们需要将完整的图片,在游戏中动态切割成指定数量的散图,这样才能减少美术的工作量。

动态纹理分割

拼图游戏中的动态纹理分割就是根据传入的纹理图片,按照指定的行列数动态切割并创建对应的拼图块。

在Cocos游戏开发中,通常可以通过以下几步:

1. 通过Rect 根据纹理需要拆解的数量,计算并通过行列指定裁剪区域。 2. 创建SpriteFrame 精灵帧,将纹理和裁剪区域赋值给它。 3. 将精灵帧 赋值给Sprite

这样 我们就成功将图片变成了拼图碎片,那怎么拼回去呢?

如何判断拼图完成

我们拼图拆分后,通常需要将碎片打散,打散前,我们需要记录拼图的正确顺序。

然后可以通过随机函数将拼图打散。

由于是随机打散,有可能打散后拼图已经差不多完成,导致游戏性降低。

因此我们可以通过随机多次并判断,直到拼图足够散,甚至我们可以通过配置去固定拼图的初试顺序,保证难度一致。

最后玩家通过拖拽拼图和指定拼图交换,直到所有拼图碎片都回到正确的位置之后,即可通关游戏。

既然如此简单,那这款游戏凭什么火?

与普通拼图不同的点

1. 拼图合并

当拼图局部拼正确时,会自动合并成一块整体,拖动时变成整体移动。

合并 的逻辑也比较简单,当相邻的拼图(左右、上下)处在同一行或者同一列时,他们的行或者列相差1则可以进行合并。

合并只需要将合并的拼图块分成同一个组,表示已经合并。

移动的时候 ,根据组ID拿到所有的拼图块,移动的时候整体按照偏移移动即可。

2. 拼图整体交换

由于上面的合并规则,移动时可能不再是一换一,而是多换多,从而导致拼图被"挤走"替换。

整体交换的逻辑相对复杂一点,需要找到拼图被挤走后,填充到哪个空位。

核心代码如下:

3. 其他

除了上述玩法规则的创新以外,其实还有很多其他火的特点。

  • 游戏简单 :拼图游戏适合下至3岁小孩、上至80老人都能很好的入手。
  • 反馈清晰:由于拼图自动合并成块的规则,玩家可以清晰地看到游戏的完成进度,吸引路人。
  • 适合直播 :游戏可以开启数字角标模式,方便观众在直播间与主播互动。

结语

拼图游戏和箭头游戏一样,有着天生的直播体质,错过了箭头游戏的小伙伴,可以尝试一下拼图游戏这个赛道哦。

小伙伴们,如果老板让你这么做,你会怎么做?

本文实战完整源码 已集成到亿元Cocos小游戏实战合集,内含体验链接。


我是"亿元程序员",一位有着8年游戏行业经验的主程。在游戏开发中,希望能给到您帮助, 也希望通过您能帮助到大家。

AD:笔者线上的小游戏《打螺丝闯关》《贪吃蛇掌机经典》《重力迷宫球》《填色之旅》《方块掌机经典》大家可以自行点击搜索体验。

实不相瞒,想要个爱心 !请把该文章分享给你觉得有需要的其他小伙伴。谢谢!

推荐文章:

亿元Cocos小游戏实战合集

Cocos游戏如何接入安卓穿山甲广告变现?

你知道和不知道的微信小游戏常用API整理,赶紧收藏用起来~

Cocos游戏如何快速接入抖音小游戏广告变现?

如何在CocosCreator3.8中实现割绳子游戏效果

如何在CocosCreator3.8中实现动态切割模型?

Cocos游戏开发中的贴花效果

相关推荐
EnCi Zheng8 分钟前
M5-markconv自定义CSS样式指南 [特殊字符]
前端·css·python
kyriewen12 分钟前
你的网页慢,用户不说直接走——前端性能监控教你“读心术”
前端·性能优化·监控
广州华水科技13 分钟前
北斗GNSS变形监测在大坝安全监测中的应用与优势分析
前端
前端老石人24 分钟前
前端开发中的 URL 完全指南
开发语言·前端·javascript·css·html
CAE虚拟与现实24 分钟前
五一假期闲来无事,来个前段、后端的说明吧
前端·后端·vtk·three.js·前后端
Sarvartha35 分钟前
三目运算符
linux·服务器·前端
晓晨的博客42 分钟前
ROS1录制的bag包转换为ROS2格式
前端·chrome
Wect1 小时前
LeetCode 72. 编辑距离:动态规划经典题解
前端·算法·typescript
donecoding1 小时前
别再让 pnpm 跟着 nvm 跑了!独立安装终极指南
前端·node.js·前端工程化
GISer_Jing1 小时前
AI全栈转型_TS后端学习路线
前端·人工智能·后端·学习