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

引言

哈喽大家好,我是亿元程序员,一位有着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复刻曾经很火的割绳子游戏?

相关推荐
小月土星3 小时前
React Router 前端路由深度解析:从传统后端路由到现代 SPA 的完整演进
前端
程序员黑豆3 小时前
鸿蒙开发 Navigation 路由教程:从入门到实战
前端·harmonyos
用户938515635076 小时前
从零理解 React Router v6:每一个 API 都是怎么工作的
前端·javascript·全栈
用户059540174468 小时前
Redis缓存回滚踩坑实录:一个配置失误,让我在凌晨3点丢了3000条数据
前端·css
kyriewen8 小时前
别再这样写条件渲染了——你的React组件里藏着这5种定时炸弹
前端·javascript·react.js
IT_陈寒9 小时前
Redis缓存击穿把我坑惨了,原来这样设过期时间才靠谱
前端·人工智能·后端
用户938515635079 小时前
从"坐电梯"到"前端路由"——深入理解 Hash 路由原理
前端·typescript·全栈
梦想CAD控件9 小时前
网页端CAD的图形选择、编辑与夹点操作教程
前端·javascript·node.js
妙码生花9 小时前
从 PHP 到 AI + Golang,程序员自救转型手记(五十二):管理员权限检查中间件,AI 随意放行预闯大祸
前端·后端·go
月月大王的3D日记10 小时前
Three.js 入门系列(8):六种光源全解析 —— 关灯了,开光!
前端·javascript