海外这个新游好玩?手把手带你实战一个!

引言

哈喽大家好,我是亿元程序员,一位有着8年游戏行业经验的主程。

上周有小伙伴在交流群分享了一款海外的热门宝藏新游:

群里瞬间炸开了锅,很多小伙伴看了之后都觉得好玩:

居然 有这么多小伙伴觉得海外这个新游好玩?

手把手带你实战一个!

言归正传 ,本期带大家一起来看看,完成一个3D方块拼图的核心实战流程!

本文实战完整源码可在文末获取,小伙伴们自行前往,有体验链接。

1.先看看游戏长啥样

我们可以看出,游戏的核心玩法:

  • 场景:格子地图和围墙。
  • 主角:贴有各种生动有趣图片的色彩丰富的方块散件。
  • 规则:和拼图游戏相似,将方块散件复原,即可完成消除,触发后续动画效果。
  • 胜负:将所有散件复原即可获得胜利,没在限定时间内完成则失败。

了解游戏核心之后,下面我们就开始实战。

2.资源准备

首先是地图 ,这类型的地图其实很常见,特别在一些华容道类型的游戏,实现方式3D和伪3D的都有。

这里 非常感谢小伙伴提供的3D游戏地图素材,如果他出现在评论区,我会给他点赞:

非常好用的围墙素材:

其次就是方块 ,那么问题来了,如果这些模型一个价值两碗大米饭,那么我们需要给美术妹子多少碗大米饭?

没有妹子怎么办?大家不必担心,我的模型就是大家的模型。

3.地图

地图包括地板和围墙部分:

  • 地板 : 主要就是m*n的格子拼接起来,我们只需要计算好每个格子的位移,即可完成地板的创建。

  • 围墙 : 小伙伴提供的素材非常好用,我们只需要找到放置围墙的坐标,然后修改子节点的xy即可把格子围起来:

效果如下:

4.方块

首先是方块的映射,因为方块类型众多,我们需要通过配置拿到对应的模型,笔者采用坐标命名对应:

**什么意思?**举个例子,在9*9的方块中,左下角为原点,那么:

  • 单个格子 :坐标就是0,加载0模型。

  • 两个格子 :坐标就是01,加载01模型。

  • 凹格子 :坐标就是01235,加载01235模型。

其次 就是模型上面贴的图片,往模型上贴图片通常有两种方法,一是通过替换模型的UV贴图,这样对原素材的尺寸和格式比较高的要求。

笔者主要采用的另外一种方案,就是往模型上面贴片:

其中 的关键在于收集每个格子生成正面贴图数据(UV + 位置) ,最终通过动态Mesh生成,由于篇幅较长,详情可看源码:

5.编辑器

编辑器的最主要目的就是为了加快关卡产出进程,为了宠粉,笔者花了心思设计:

编辑器的开发思路主要包括:

  • 地图 :可以配置地图的行列。

  • 导入图片 :快速选择关卡图片。

  • 图层管理 :一般每个关卡图片会比较多,图层管理主要是为了解决每个图片的宽高和底色。

  • 位置调整 :包括图片的拆分和整体移动。

  • 系统操作 :包括配置的导入和导出。

6.其他细节

1.模型选框

思路 :根据方块的cellRects计算外轮廓,对外轮廓做圆角处理,把轮廓拆成若干线段,生成3D网格。

2.编辑器导出数据

为了简单编辑到预览的流程,笔者将图片数据也放到了关卡配置里面,整个游戏只需要这么一张图片即可。

其实 不建议这么做,因为原作为了做出更好的效果,同一张图,出了4套尺寸:

更多细节可通过源码查看。

结语

本文实战完整源码 已集成到亿元Cocos小游戏实战合集2.0,内含体验链接,已经拥有的小伙伴可以直接更新。

海外BLOCK拼图目前几乎进化到完全体了,为什么国内这种玩法题材还是不温不火?


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

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

推荐文章:

亿元Cocos小游戏实战合集1.0

老板说最近这款游戏很火让我抄,可是我连玩都玩不明白...

这款值68亿的游戏,你不实战一下吗?安排!

小伙伴说我的拼图游戏用Mask不能合批...

俄罗斯方块谁不会做......啊?流沙版?

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

老板说拼图游戏太卷了,让我用Cocos做个3d版本的...

敢不敢挑战用Cocos3.8复刻曾经很火的割绳子游戏?

相关推荐
M ? A2 小时前
Vue slot 插槽转 React:VuReact 怎么处理?
前端·javascript·vue.js·经验分享·react.js·面试·vureact
a1117762 小时前
演唱会3D选座网页(HTML 开源)
前端·3d·html
ZC跨境爬虫2 小时前
3D 地球卫星轨道可视化平台开发 Day10(交互升级与接口溯源)
前端·javascript·3d·自动化·交互
恋猫de小郭2 小时前
WasmGC 是什么?为什么它对 Dart 和 Kotlin 在 Web 领域很重要?
android·前端·flutter
新酱爱学习2 小时前
从一次 OpenClaw 请求抓包,聊聊 Skill 的运行原理
前端·人工智能·mcp
慕斯fuafua2 小时前
CSS——弹性盒子
前端·css
M ? A2 小时前
Vue Transition 组件转 React:VuReact 怎么处理?
前端·javascript·vue.js·经验分享·react.js·面试·vureact
小江的记录本2 小时前
【分布式】分布式一致性协议:2PC/3PC、Paxos、Raft、ZAB 核心原理、区别(2026必考Raft)
java·前端·分布式·后端·安全·面试·系统架构
huangql5202 小时前
CSS布局 (三):浮动——从文字环绕到多列布局
前端·javascript·css