用 Cocos Creator 搭建一个《我的世界》!上线微信

近几年,以《我的世界》(Minecraft)为代表的沙盒建造游戏风靡全球。在这个自由度极高的沙盒世界中,玩家可以随心所欲地创造自己的天地,实现天马行空的创意和想法。

大家好,我是董密!我的游戏已经上线微信,感谢晓衡哥的邀请,在此给大家做个技术分享。

660d6ef360a4a03e45c5d7660a01ee43.jpeg

去年在 Cocos Creator 3.6.2 中复刻了一版《我的世界》,当初主要实现的功能包括:生成地形;方块创建与销毁;角色移动、碰撞、重力和简单动画;地形延展;快捷物品栏等。目前已经完成游戏主要玩法功能,已经上线微信小游戏像素空间3D。

b37cba1bb0a42a9dd3352b923a821661.gif

025a1bc62933d4b13e6f21ecaf58fdba.gif

实现效果

生成地形

基础概念

  • 块:最小的地形单元,尺寸为 1X1X1。

  • 面:构成块的元素,1个块最多有6个面,最少可以一个不拥有。

  • 区块:尺寸为 16X16X100 。由块组成。在各象限依次排开。

地形随机

地形随机生成使用的是2维柏林噪声函数。输入 x 和 z 坐标,获得 y 坐标作为地表高度,然后从设定的最低高度到地表高度创建填充块。目前简单地设定小于0为水,等于0为沙,其余为泥土草。最底层铺上石头,中间填充泥土。

53ea2ac334837182d5a1ecd57882797c.jpeg

随机洞穴

洞穴随机使用的是3维柏林噪声。输入 x、y、z 坐标,如果超过设定阈值,并且在地表之下、底层之上,则判断为空气块。如果是空气块就不需要再填充泥土块了。这样一来我们就有了基础的洞穴(没有矿的洞穴…)。

ba8e1b052c74909b08b0618af4375104.jpeg

b3839d07ffc9c84566fed37e8d30b12d.jpeg

随机杂草和树

随机杂草和树直接用的纯随机。当2维柏林噪音对每个坐标处理后,则进行杂草和树的随机判断。还是设定一个阈值,超过则判断为随机杂草或者树(树是由许多块组成的固定形状)。

b55854145f736ef2c232a3a8090d003d.png

地形网格生成

上面的内容都是生成的虚拟的对象。在场景中渲染的块,我前后尝试了两种方法去实现。

1、系统默认块+instancing。

使用 setInstancedAttribute 函数来区分不同的块。这个方法的实现效果其实还挺不错的,但缺点是实例和面很多。

2、动态网格,也是现在的做法。

这个应该是 v3.6 的新增功能,正好用上试试。

对每个区块创建一个动态网格。由于目前还没处理好更新,每次增删块都是整个区块重新构建网格数据,所以每次刷新附近的区块的时候,会有一点卡顿。

使用动态网格可以进行面优化,只创建没有相邻的面。但是进行面优化也要遍历所有块,目前还未达到性能最优,之后也将持续优化。


此外,这里还配置了每种块的每个面的 UV 值,用于显示不同的纹理。

*一个性能优化:方块很多,每个方块是一个类,在类里没有用 vec3 类、而是用了数字来表示坐标,这样占用的内存会少很多。

方块创建与销毁

如果是用的默认块,创建和销毁就很简单粗暴了。但是转到动态网格后,每次增删都需要进行数据重构,对整个动态网格的数据基于虚拟数据重新构造一遍。

方块的选中

这里简单使用了八叉树来管理附近的块,使用射线 AABB 相交检测判断鼠标聚焦的是哪个块。

接着还需要知道聚焦的是哪个面。一开始是用的6个 AABB 来判断,后来发现内置的检测函数里其实已经计算了到备选面的距离,复制过来,找到最小距离的就是当前面了。

e316a999fce9e9956a03f5aad86d83c6.png

选中框

选中框前后尝试了4种方法。

1、使用摄像机的几何渲染。

bebdd807af475f4b460c0c97e908793c.png

这个方法的缺点是无法完全遮挡,被遮挡的边会半透显示。

2、使用 shader。

a000f18a3825e2e9c8ff8f83f13e4392.jpeg

判断 UV 是否在边缘范围,如果是则显示边框颜色。这个方法的缺点是边框近看比较粗、远看比较细,效果不是很美丽。

3、使用 cube 的 Primitive 线条描边。

bb7d586bf19788b3a2daee09023a9add.png

因为默认的 cube 的顶点顺序是左下、右下、左上、右上,所以如果用 line_list 或者 loop 无法形成一个完整的框。

4、静态网格,也是目前的做法。

这个方案就可以按照自己的想法设置顶点顺序了,改成左下、右下、右上、左上。因为我觉得《我的世界》里每次都是框住一个块,没有只框住聚焦的面来得好,所以最后我选择只创建4个顶点的边框。使用 line 渲染模式,也能满足对边框粗细的显示需求。

方块的纹理

2f7d3167821328b6f580345be87e83d7.png

本来是想直接找《我的世界》的纹理贴图的,但始终没看到非常合适的。所以一狠心,直接 PS 开干。使用 PS 的像素化,可以很方便地生成类似的纹理。将所有纹理放在一张512的图里,可以一起用。

破坏粒子

当方块被破坏,在其位置播放一个粒子动效。

这里使用的是 mesh 粒子,引擎自带的 cube。设置为重力模式,使用曲线来控制重力先小后大,让生成的粒子多待一会儿再下落。

然后自定义粒子材质,基于当前销毁的方块属性来设置材质的 offset。贴图使用的是和其它方块同一个贴图。

1e6fa407ad39949d68edf05bb9b453bc.png

角色移动、碰撞、

重力和简单动画

这部分花的时间最长,效果依然还有很多优化空间。

角色移动

方向键按下则记录移动方向,松开则重置方向。在 update 里基于移动方向进行移动。

node 的 translate 方法,第二个参数传0是本地坐标系,传1是世界坐标系。我用的是世界坐标系,需要对位移矢量按 y 轴进行旋转。

角色碰撞

利用八叉树检测附近块,然后用圆和多边形相交检测是否碰撞。如果碰撞则沿着移动矢量反方向移动,营造挡住的效果。

角色重力

利用物理公式 vt+0.5vtt 来进行角色垂直方向的位移。然后同样利用碰撞原理,检测是否有碰撞。如果碰撞则置重力加速度为0,速度为0,直到没有碰撞,恢复加速度。

因为是先水平碰撞矫正,所以执行重力位移后,如果有碰撞,肯定是嵌到土里了,可以进行矫正。

跳的时候,设置速度为一个正值,则可以实现跳跃。

现在的效果只是满足了基本的位移、碰撞和重力,但在连跳的感觉、碰撞的强度等方面,都还需要后续优化。

简单动画

角色在不做动作的时候,会有呼吸,手部会上下移动;在跑的时候,会有摄像机的晃动;在删除方块和添加方块的时候,会有手的动作。这些动画的实现都比较简单。

地形延展

因为使用的是柏林噪音,所以只要有了区块的坐标,就可以随机出自然的、连续的地形。

这部分是目前性能最吃紧的地方。只要判断到了别的区块,就会查找附近的25个区块,然后创建新的区块并替换旧区块到新区块的网格。

并且到了新区块,还要创建新的八叉树,非常卡顿。一开始的方案,是对基于中心区块的附近25个区块整体进行八叉树构建,所以每次到新的区块,都会有非常多的重复构建浪费。现在将八叉树构建限制到每个区块,在查询之前,先对区块进行一遍筛选,再对区块的八叉树进行查询,性能提升非常多。

快捷物品栏

这是属于 UI 的部分,难度不大。

监听键盘事件,然后切换单元格的状态。在需要的时候,调用推入物品和使用物品的接口来更新状态。此外还有和手的状态联动,在切换单元格的时候,如果单元格里有物品,则需要将手替换成物品模型。

难度在于绘制物品 ICON,目前暂时只有3个方块有 ICON。

结语

这个项目所用到的核心方案包括:八叉树查询用于场景管理、射线检测用于碰撞和交互、柏林函数用于地形随机、动态网格用于地形显示等。后续我将进行场景性能优化,增加资源、NPC、存档、红石等一系列内容。

项目进展我将更新在论坛,欢迎大家一起交流探讨:

https://forum.cocos.org/t/topic/143799

我正计划将项目分享到 Cocos Store 敬请期待!

如果你对 Cocos 游戏开发、技术、变现感兴趣,欢迎加晓衡微信:z6346289。

往期精彩

Cocos Creator是一款流行的跨平台游戏开发引擎,可以支持在多个平台上进行游戏开发,其中包括微信小程序平台。下面是关于Cocos Creator微信登录的详细说明。 1. 引入微信登录功能:在Cocos Creator中,可以通过引入微信官方提供的API实现微信登录功能。首先,需要在项目中添加微信登录的依赖库,然后在对应的脚本文件中引入相关的微信登录API。 2. 获取微信登录凭证:在用户点击微信登录按钮后,可以调用微信登录API来获取用户的微信登录凭证,凭证的获取需要通过微信授权,用户需要同意授权。凭证成功获取后,可以获取到用户的唯一标识openid和会话密钥session_key。 3. 与游戏服务器进行验证:获取到微信登录凭证后,可以将凭证传递给游戏服务器进行验证。游戏服务器可以通过调用微信提供的接口验证凭证的有效性,并获取用户的微信账号信息。验证成功后,可以将用户的游戏信息与微信账号进行绑定,并生成游戏内的唯一标识token。 4. 使用微信账号登录游戏:验证成功后,可以将生成的token返回给客户端,并保存在本地。下次用户再次打开游戏时,可以直接读取本地保存的token,并传递给游戏服务器进行验证。验证通过后,用户可以直接使用微信账号登录游戏。 通过以上步骤,我们可以在Cocos Creator中实现微信登录功能。当然,在实际开发中,还需要考虑到错误处理、登录状态的管理以及用户信息的更新等问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值