cocos开发的《我的世界》已经上线微信小游戏啦~分享一下主要技术点

摘要

本文介绍了用cocos creator3.x开发的《我的世界》小游戏版《像素空间3d》的主要内容和涉及到的技术概述。:sparkles:

欢迎大家扫码体验:heart_eyes:
(体验前,也可以先看看下方游戏实录视频)
87cb0c4f4cd12bd969a85802d9a0808

前言

22年末,我参加了cocos论坛的第五期征文,有幸凭借此作品获得了最终大奖:华为平板,再次感谢官方大佬们的认可!让我能够投入更多的精力来完善此作品。期间经历了多次重构优化优化优化,真是“朝发夕拾”。

晒一下第五期征文的奖品,哈哈哈:smile:

游戏介绍

《像素空间3D》是一款仿照《我的世界》用cocos creator3.7.1开发的一款小游戏。目前包体2.5M。游戏中,实现了诸如地形随机、地图随机、体素物理、体素亮度、流水、合成、熔炉、战斗等等功能。虽然相较于《我的世界》还有缺少非常多的内容和功能,不过还是可以进行一番探索和生存了。虽然性能还有一些缺陷,不过还是可以跪求体验的:rofl:,虽然…

下方视频是手机录屏,试玩的体验版(自动播放:rofl:,不要打我~)
《像素空间3D》微信小游戏实录演示

核心技术简介

体素空间

我所理解的体素非常简单,就是给定任意一个坐标,对其进行Math.floor就可以获得其所在方块的坐标。以此建立起整个3D像素空间

地形随机

  • 地形随机是用的npm里的一个柏林噪声函数(perlin-simplex),将其改成typescript形式进行使用。其可以进行2d和3d的随机。返回-1到1之间的渐变随机数,(r+1)*0.5就可以返回0~1。地形的起伏用的noise2d,矿洞、矿物的生成用的noise3d。
  • 每构造一个噪声对象,需要传递一个随机对象,用来构造最初的随机数。使用的是cocos的pseudoRandom函数构造随机对象。只需要给一个世界种子即可。世界种子基于某局游戏是一定的,所以就能保证每次进入都是相同的地形。

地图随机

游戏里主要使用了岛域的方式来划分地图,256*256范围为1个岛域。每个岛域内是一组定义好的地貌。岛域的随机是用pseudoRandom生成噪声二维数组来实现的,基于不同的世界种子,生成不同的数组。也能保证每次进入都是相同的岛域。不过因为版本的变化,可能会增加不同的岛域地貌,所以缓存了已经修改过的岛域,没有修改过的岛域就会随着版本对地貌的影响而改变。

地形展示视频
用cocos实现《我的世界》之雪、山洞、湖泊

体素存储

  • 整个游戏空间里,主要有chunk(区块)和block(方块)两个概念。区块包含方块。在刚开始的版本里,方块也会是一个具体的对象。这导致了大量对象的创建,在pc上经过优化还能接受,不过到了小游戏平台,就完全不好使了。所以最后进行重构,block在chunk里用多个arraybuffer进行存储,包含类型arraybuffer,亮度arraybuffer等。结合上微信小游戏的sharedarraybuffer,就可以利用worker进行大量数据的处理和共享。
  • 每一个chunk是一个对象。为了只用一维数组来存储所有chunk。使用了螺旋曲线的算法,给定chunk坐标,算出唯一id。然后写了一下给定长度,反解坐标的函数。我感觉很多需要用二维数组去存储对象的地方,都可以使用这种方式来减少数组的创建。

小游戏worker

  • 大量的block数据,如果只是在主线程里进行运算,想要在小游戏里刷新地图时保持60帧那是很困难的。所以使用了微信小游戏的worker。核心是构造sharedArrayBuffer,然后主线程和worker线程可以共享这部分数据。在worker里进行各种随机,水流,光照,面优化,网格构造等功能,主线程直接读取buffer里的数据即可。但是数据量还是很大,一个面优化经常需要耗费worker的好几帧,一次日夜更替更是耗费1秒以上。所以在体验的过程中,会有效果延迟的现象。还在努力研究中。(上线后,发现微信小游戏ios正式版sharedarraybuffer无法正常传递,研究未果,所以只得暂时关掉IOS小游戏的worker功能,导致IOS在体验的地图刷新的时候,会有强烈的卡顿感。等到研究明白了,再加回来~)
  • 在开发过程中,需要保证可以本地pc测试,也可以打包到微信小游戏。所以需要worker做的功能是在项目的assets目录里编写的,在项目外增加了worker的单独目录,编写入口文件,引入assets里的相关文件,最后通过tsc打包到build-template/wechatgame/workers里。因为小游戏worker不认识cc,所以和cc相关的功能都需要抽出去(只是worker用到的功能,不是所有功能)。比如vec类就需要自己复制出来一些用到的函数,自己构造类。

动态网格

  • 之前版本动态网格只使用了一个submesh,不能同时构造土地和流水,所以重构版本里变成了多个submesh。抽离出了基础组件,可以适用于各种体素的动态网格现显示。不同的submesh使用meshrenderer上对应的material。并且重写了包围盒,避免更新时多余的Vec3类的创建。
  • 动态网格在渲染的时候,需要提供typearry,如果变化频繁,可以只用一个相对较大的arraybuffer,然后用slice来截取数据,避免每次申请空间。
  • 玩家角色手中持有的物品,也大量使用了动态网格。比如下图的火把,就是由动态网格实现的。其流程是在aseprite里用像素画好道具,再用脚本导出像素,然后拷贝到项目里,优化面后使用。这样就可以减少使用建模工具、创建材质的时间和消耗。(这个脚本完全是gpt整的)

火把道具,用动态网格实现
image

体素物理

  • 新版本增加了水的浮力和阻力,使用的是简化的浮力加速度(重力加速度*实体淹没高度比/密度)和阻力加速度(水的粘度*实体速度)公式。
    具体效果可以看下面的视频:

用cocos实现《我的世界》之浮力与第三人称弹簧臂

  • 关于射线检测,之前版本使用的是八叉树来查找射线碰撞的方块。后来一想,不需要啊。虽然方块是多,但是都是均匀整齐排布的。我使用了一种步进式的检测方法,步骤是由射线原点开始,查看是否处在空气块里,如果不是则直接返回。如果是则,用cocos的intersect.rayAABB方法获得aabb内的射线距离射线方向最近面的距离,然后将射线原点按照射线方向移动这么远的距离,然后步进一个非常小的数,然后再进行检测,直到返回找到,或者超出检测范围。这样的话会省去非常多八叉树的创建和更新成本。检测性能也非常高!:muscle:

光照系统

  • 这个使用的是预计算光照,假设太阳光始终从上到下,计算所有块的基础日照亮度。然后再迭代计算所有非太阳光亮度的块,迭代过程中逐步减小亮度阈值,直到所有块的亮度设置完成。即使掉光头发优化,性能仍然一般,将就能跑。
  • 在破坏、放置实体方块或者光源时,会BFS查找所有被影响的方块,再次迭代亮度。这个进行优化后,性能还可以接受。
  • 针对亮部和暗部的对比,使用了自定义无光照shader。随着24小时变化,改变主光源位置,在shader里用法线和光源方向进行点乘,再叠加到主颜色里。这会导致一个问题,就是明明太阳光是从上到下,但是亮暗部却一直在变化。没有找到性能又好,效果又好的招式。:sob:
  • 阴影,除了预计算的阴影,动态阴影暂时没有。在预计算过程中,不同的块的透光度不一样,光线从一个块穿过的时候,因为透光度的不同,光线经过的三个块可能不一样,从上到下照射太阳光的时候,比如经过了树叶,树叶不是完全透光,就会导致下方变暗,最终到地面上,就会相对暗一些,就呈现除了阴影。
  • 角色在不同的地方,身上的亮度是不一样的。比如夜晚,在没有光源的地方,很黑,靠近光源就会亮。但是角色的shader是无光照,我用的是instancedAttribute,每0.1秒检测一下当前角色所在方块的亮度,然后设置到shader里,最后同亮暗功能一起加成。
    可以看下方视频了解光照系统:

用cocos实现《我的世界》之熔炉火把与日夜

海、湖泊及流水

  • 海是区块的表面高度到海平面的所有块会被设置为海水。
  • 湖泊是检测区块的最低点,然后用BFS查找空气区域。
  • 湖泊的水量是一定的,水会往空的块进行流动,水量为1的水无法流动。流动是在worker里每1秒一次执行当前区块的流水检测。
  • 海水的水量是无穷的,只要附近有空气块,就会被海水填满。
  • 水面的渲染,是通过查询每个顶点周围的4个方块的水量求平均值,设置成块的渲染高度,最后还要乘以一个缩放,来让水面低于方块,看起来更真实一些。
  • 水下的效果是屏幕后处理,检测摄像机的位置是否有水,如果有则shader里乘上一定的蓝色。
    可以看下方视频了解流水功能:

用cocos实现《我的世界》之流水功能展示

背包、合成、熔炉

  • 所有背包的UI操作都继承自一个操作组件。即使像合成的目标格子就1个格子,那也是1个背包。背包可以选择是否支持放入和拿出。在所有当前打开的背包里,设置了一个当前激活背包变量,用来处理两个背包的交互。
  • 合成功能配置了一个对象,对象的每个key都是一个道具名,value都是一个函数,每次合成背包或者工作台进行了变化,就会遍历这个配置里是否有符合要求的key。具体的逻辑是遍历配置对象,对每个函数传入当前背包,函数自己判断是否符合合成要求,如果是,则返回合成数量。比如木棍的检测逻辑是背包里仅有两格有物品,并且物品上下排列,平且都是木板,如果都符合,就返回4,代表合成了4个木棍。
  • 熔炉的功能类似,也是配置燃料、材料和产品。数据很多都是问GPT得到的。
    可以看下方视频了解合成功能(熔炉功能视频在光照那里有):

用cocos实现《我的世界》之背包与合成

NPC和状态机

  • 目前生物NPC仅有羊和僵尸两种。不过也方便扩展。NPC现在分为三类:动物、怪物和特殊。动物现在就是羊,怪物现在就是僵尸,特殊现在就是船(对,我把船也变成了NPC,目前看没啥不好的,等发现不适合了再说)。
  • 现在设想的是所有动物公用1个材质和贴图,使用实例属性来设置材质偏移。怪物也是,特殊NPC也是。
  • 写了一个简单的注册状态机。每个动物自己注册想要的状态,比如闲呆,巡逻,逃跑,被击,死亡。注册状态时配置相关参数,然后每帧执行当前状态的逻辑,并判断是否结束跳到下一个状态。
    可以看下方两个视频来了解当前NPC:

用cocos实现《我的世界》之杀羊取肉
用cocos实现《我的世界》之AK47打僵尸

其它次要内容

  • 比如一个可以绘制ICON的画板,用graphics组件实现的。
  • 比如摄像机弹簧臂,每帧检测是否第三人称,检测最近并且小于最大摄像机距离的实体方块,然后设置摄像机位置。
  • 比如破坏粒子,是用体素物理来实现的。
  • 比如破坏裂缝,是用shader偏移贴图实现的。
  • 比如…好像也没啥了。哈哈哈。

其它基建

  • UI管理器,是基于prefab名称的UI管理器,管理加载,卸载,传参,关闭回调等基础逻辑,方便快捷。
  • 事件管理器,发布订阅模式的事件管理器,可以定义事件名称,回调参数,返回参数,在其它地方调用的时候,有很好的代码提示。

写在最后

欢迎大家加入我创建的微信群聊,一起探讨开发技术和游戏内容,共同成长!没事发发图,摇摇花手都是挺好的~~~
1682058004631

3赞

omg惊呆了

大家也可以加我个人微信~哈哈哈

:+1:太强了,除了首次进入游戏闪屏(看起来是报错,重启打开就好了),效果太出色了,我甚至很想在PC上用键鼠玩这款游戏

非常感谢您的反馈~我正在排查这个问题,很快就会更新下一版解决~

玩了一下挺有趣的,楼主太强了把!有个小问题跳跃在屏幕最右边区域没有提示我点了好几下才知道。

谢谢体验呀!这个跳跃应该再刚开始的粗糙的引导页面有。这个我之后再优化一下。着实看文字有点难以下咽。 :grin:

这个是真6,已经体验过了


电脑打开的,卡这了玩不了

在玻璃板上搓有点难受,有考虑上架 Steam 吗,在 PC 上用键鼠操作那才叫爽
我记得官方好像在 Steam 上发了个游戏 iles,是用 Electron 打包的

箱子还不能合成呢,这东西不可或缺啊 :grin:

存档并离开游戏的时候卡死了

牛逼就两个字 :scream:

感谢体验。之前没适配PC。后面处理一下。 :grin:

这个iles算是打脸作品了。并且我这个目前都是还原的原版我的世界,不方便上steam。。嘿嘿。

大佬,可以请教下worker具体要怎么用吗?

这个一句话说不清楚。之后有时间写文章详细说一下。不过最近加班像狗。

太厉害了,想进群膜拜呀,二维码扫不了了!!

那就加我微信。我再拉你进去。哈哈