研发 3D 引擎顺便做了个开源游戏案例,Cocos 宝藏同事竟在我身边!

作者:youyou COCOS 2022-08-17
说实话,本来只是想做个练手小游戏,结果停不下来了。

——《iles》制作人/程序 youyou

这周五(8月19日)上午10:00,全新的 3D 跑酷闯关+建造游戏源码《iles》将上线 Cocos Store,部分核心源码已升级到将于明日发布的 v3.6,让大家可以借此体验一下全面进化后的 Cocos Creator。此外,《iles》也将同步上线 Steam,欢迎玩家在 Steam 商店免费下载体验(链接见文末)!

《iles》主要由我和 Canvas 这俩引擎组的冤种小伙伴在工作之余一起开发,研发周期近4个月,我负责渲染管线的搭建和渲染效果的实现,Canvas 负责游戏框架和玩法,美术模型和音乐大多是外包出去做的,其他都靠我俩补上。

可能大家还记得之前的 cyberpunk 和 Lake,这两个 Demo 都侧重展示引擎的渲染能力,能和场景互动的部分比较少,很多用户都在留言说「什么时候能进去跑一跑」。于是我们想到:为什么不直接加入 Gameplay 内容,做个游戏案例出来呢?

《iles》由此诞生。借助这个案例,我们希望能让用户更加深入引擎所构建的世界,看到更多场景细节;更重要的是,作为引擎开发者,我们自己也能亲身体验一下用 Cocos Creator 开发游戏的完整流程,以此发现引擎的不足和痛点,为之后的迭代提供参考。

而选择 Steam 平台,主要是因为 Steam 是我们还没怎么涉及的一块宝地。本次我们测试了游戏上线 Steam 的全流程,包括接入 Steam Greenworks、上线 Mac + Windows 双平台、接入创意工坊等,踩了不少坑,最终也都一一解决。


接下来,我将着重从玩法设计、渲染效果、发布 Steam 三个方面,带大家走进《iles》的开发幕后。


立项之初,摆在我们面前的第一个问题就是:要做一款什么类型的游戏呢?

我们希望这个案例是偏轻量、同时又带点竞技性的。从这个角度出发,我们选择了「跑酷闯关」这一方向,并尽可能简化游戏操作,让角色跟着鼠标跑动。为了提升竞技趣味,我们又为跑动增加了一点惯性,给游戏操作稍微上了点难度。


游戏的玩法非常简单,玩家通过鼠标移动和点击控制角色的跑动和跳跃,在50个海岛上花式跑酷,收集糖果并躲避各种陷阱,成功通关后将根据糖果数量和所用时间进行评分。

除了闯关,《iles》还有一个「建造」模式。玩家可以在关卡编辑器中自由建造海岛、设计关卡。支持 UGC 内容,接入创意工坊是为了以最小代价延长《iles》的寿命,而且我们也想看一看玩家们能创建出什么样富有创意的地图——Canvas 就搭了个阿尼亚出来。


《iles》的主角是一只鸡。确定角色形象的过程既费脑洞又费时间,当时我们一直想要做点不一样的形象出来,结果给自己挖了个大坑。鸡还是挺难设计的,Panda 建议我们可以「大胆创作」,加入一些夸张元素。

Panda 给出的草图

然后我们发散思维,尝试了很多不同的设计。


最后经过内部讨论,脱颖而出的是下面这一只——


我个人更喜欢它的雨伞,这把雨伞是主角的重要道具,可以带着主角飞翔滑行。如果有预算的话,我们想把这雨伞做出来当作周边送给大家(疯狂暗示)。



我们在《iles》渲染效果的实现上花了很长时间,下面和大家分享一些迭代过程中的产物,看看现在游戏所呈现的效果是如何一步一步做出来的。

最早期原型阶段,我们用了一些简单的白模来搭建场景,之后的场景都是在此雏形上逐步优化而来。


在水边缘的实现上,我也尝试了多种方案,比如深度检查、手动制作模型面、射线检测生成模型面、特效等,但这些方式或多或少都有缺点,无法满足项目需求。我们希望能根据用户的编辑动态生成水波纹,并且波纹可以延伸出物体的表面,同时还得保证渲染效率。最后我选择了 SDF 的实现方式,用户编辑的时候将生成一张 SDF 图,在渲染水面的时候读取这张 SDF 图生成波纹。


水波纹 SDF 贴图

添加飞鸟、瀑布,优化地块后,渐渐有了一点海的氛围。


将海的颜色由「浅海」调整为「深海」,增加一点神秘感,再加入水面波浪和波光点缀,看起来有那么点意思了。


接着丰富一下海底的效果。游戏中的海岛地块是玩家自己构建生成的,水下陆地、石块、树木、珊瑚则都是围绕地块自动生成。优化天空盒,加入水面倒影后,基本就是现在大家在游戏中看到的样子了。



《iles》中的高级效果基本都依赖于这个自定义渲染管线,为了能更方便调试和组织这个管线,我临时快速实现了一个可视化编辑管线的功能,大家可以获取源码后一探里面的实现原理。当然,这是我为了《iles》临时做的,若想应用到自己的项目,还是掌握了原理后根据自身需求定制更加妥当。


除此之外,如果要论花费时间最多的单个美术效果,其实是游戏的选关界面。我们希望编辑的关卡能在选关界面里直观地展现出来,为此尝试了多种方案。

最开始是做在 UI Scroll View 里面的列表里,有点过于简陋和丑了。


之后展开成了网状结构,布局会更好看一点。


我们还尝试过把每个关卡按地块排列生成简化的 3D 模型。一开始为了更能体现 3D 模型的效果,采用了斜视角,但是看着有一点乱,并且远一点的关卡显示得没那么清楚。


于是我们改回了正顶视角,并在引擎 UI 小姐姐的建议下把关卡底部的虚线改成了实底,最后的界面终于有了我们自己的风格。可以看到,简体模型带有泡沫边缘,评星和岛名做了水底的折射效果,这里用到的技术和海面水效果是一样的。



我们跑了一遍游戏打包和发布 Steam 的全过程,在接入 Steam 的创意工坊和数据接口等方面花了不少时间。下面总结一下我们遇到的坑点和解决方法,供同样想要发布 Steam 平台的小伙伴参考。


上传的 Mac App 在 Steam 下载后打不开。之前我们都是通过 Steam Works 网页版 UI 上传的,不仅上传比较慢而且会打断 Mac App 里面 Electron 的 symlinks,查了挺久发现可以用命令行来上传,并且命令行上传是支持增量上传的,可以极大缩短上传时间。

参考链接:

https://trashmoon.com/blog/2022/automating-steam-releases-for-html-games-with-electron-forge-and-github-actions/


测试 Steam 创意工坊,我们调用上传接口的时候一直返回上传失败。一开始我们以为是 Steam 还没开权限或者是网络有问题,过了一段时间还是不行,我就翻了下源码,才发现它有个 ID 的参数必须要是 String 类型,而我们测试传的是 Number。

参考链接:

https://github.com/greenheartgames/greenworks/blob/12392db8e88ec9c0f6a1e244672992b972413e54/src/api/steam_api_workshop.cc#L193

上架 Steam 要注意一下提审的时间。Steam 审核时长在一周左右,审核通过并不代表外部立马就能下载到游戏,商店页面需要显示为「即将推出」状态至少两周,在这两周里玩家可以正常搜索到这个游戏。另外还要留意下用户注册时长,新用户注册至少满30天后才可发布游戏。


Early Access(抢先体验)的审核还是比较严格的,需要认真回答 Steam 提出来的那些问题,否则可能会被打回来很多次。

Steam 叠加层是必须支持的,必须支持快捷键「Shift + Tab」打开叠加层,Electron 主进程默认不会绘制每一帧,需要在启动项加一个命令来解决这个问题。


其实我们还有考虑接入 Steam 的排行榜系统,让玩家每一关都能看到通关时间的排名等,不过初步调研需要自己搭建服务器来跟 Steam 接口通信,暂时还是放弃了。


《iles》Steam 地址

https://store.steampowered.com/app/2001150/iles/

《iles》源码下载

https://store.cocos.com/app/detail/4010/

《iles》源码已升级到 Cocos Creator 3.6,本周五,大家就可前往上方 Cocos Store 地址下载游戏的部分核心源码,包括整个可视化自定义渲染管线、游戏角色操作、开始场景等部分以及相关素材。

虽然商店默认设置了99块,但是只要你打到了「Baxstall Holm」这一关(主线第15关),游戏就会弹出一个二维码,扫码即可领取代金券免费兑换源码。通关难度其实不高,欢迎大家多多体验并反馈,帮助我们做得更好!

《iles》成就系统

最后的最后,我想借此机会向《iles》研发期间给予我们帮助的朋友表示感谢!也非常感谢各位开发者一路的关注和支持,希望《iles》不负各位的期待。

《iles》制作团队


来源:COCOS

原文:https://mp.weixin.qq.com/s/jvbkLLuyJ6ep8hpPnRqX8w



最新评论
暂无评论
参与评论

商务合作 查看更多

编辑推荐 查看更多