共计 3176 个字符，预计需要花费 8 分钟才能阅读完成。
一、iles 制作前后
Cocos 是由厦门雅基软件有限公司推出的开源游戏引擎，目前反对 2D 和 3D 游戏开发，不过最善于的还是 2D 游戏开发，3D 相干的引擎技术也是最近两年才提供的技术。2021 年年初，Creator 3.0 版本正式公布，将 2D 和 3D 两套产品进行合并，开始引擎一体化建设。Cocos Creator 进行了屡次版本迭代，立足 2D 应用领域、继续进行优化的同时，在 3D 方面也获得长足进步。
上面是官网开源的一款 3D 跑酷闯关 + 建造游戏《iles》，点击开启体验。《iles》次要由我和 Canvas 这俩引擎组的小伙伴在工作之余一起开发，研发周期近 4 个月，我负责渲染管线的搭建和渲染成果的实现，Canvas 负责游戏框架和玩法，美术模型和音乐大多是外包进来做的，其余都靠我俩补上。
借助这个案例，咱们心愿能让用户更加深刻引擎所构建的世界，看到更多场景细节；更重要的是，作为引擎开发者，咱们本人也能亲自体验一下用 Cocos Creator 开发游戏的残缺流程，以此发现引擎的有余和痛点，为之后的迭代提供参考。
而抉择 Steam 平台，次要是因为 Steam 是咱们还没怎么波及的一块宝地。本次咱们测试了游戏上线 Steam 的全流程，包含接入 Steam Greenworks、上线 Mac + Windows 双平台、接入创意工坊等，踩了不少坑，最终也都一一解决。
接下来，我将着重从玩法设计、渲染成果、公布 Steam 三个方面，带大家走进《iles》的开发幕后。
二、简略而又乏味的玩法
立项之初，摆在咱们背后的第一个问题就是：要做一款什么类型的游戏呢？
咱们心愿这个案例是偏轻量、同时又带点竞技性的。从这个角度登程，咱们抉择了「跑酷闯关」这一方向，并尽可能简化游戏操作，让角色跟着鼠标跑动。为了晋升竞技趣味，咱们又为跑动减少了一点惯性，给游戏操作略微上了点难度。
游戏的玩法非常简单，玩家通过鼠标挪动和点击管制角色的跑动和跳跃，在 50 个海岛上花式跑酷，收集糖果并规避各种陷阱，胜利通关后将依据糖果数量和所用工夫进行评分。
除了闯关，《iles》还有一个「建造」模式。玩家能够在关卡编辑器中自在建造海岛、设计关卡。反对 UGC 内容，接入创意工坊是为了以最小代价缩短《iles》的寿命，而且咱们也想看一看玩家们能创立出什么样富裕创意的地图——Canvas 就搭了个阿尼亚进去。
《iles》的配角是一只鸡。确定角色形象的过程既费脑洞又费时间，过后咱们始终想要做点不一样的形象进去，后果给本人挖了个大坑。鸡还是挺难设计的，Panda 倡议咱们能够「大胆创作」，退出一些夸大元素。
通过外部探讨，怀才不遇的是上面这一只鸡。
我集体更喜爱它的雨伞，这把雨伞是配角的重要道具，能够带着配角翱翔滑行。如果有估算的话，咱们想把这雨伞做进去当作周边送给大家。
三、迭代后的成果
咱们在《iles》渲染成果的实现上花了很长时间，上面和大家分享一些迭代过程中的产物，看看当初游戏所出现的成果是如何一步一步做进去的。
最晚期原型阶段，咱们用了一些简略的白模来搭建场景，之后的场景都是在此雏形上逐渐优化而来。
在水边缘的实现上，我也尝试了多种计划，比方深度查看、手动制作模型面、射线检测生成模型面、特效等，但这些形式或多或少都有毛病，无奈满足我的项目需要。咱们心愿能依据用户的编辑动静生成水波纹，并且波纹能够延长出物体的外表，同时还得保障渲染效率。最初我抉择了 SDF 的实现形式，用户编辑的时候将生成一张 SDF 图，在渲染水面的时候读取这张 SDF 图生成波纹。
增加飞鸟、瀑布，优化地块后，慢慢有了一点海的气氛。
接着丰盛一下海底的成果。游戏中的海岛地块是玩家本人构建生成的，水下海洋、石块、树木、珊瑚则都是围绕地块主动生成。优化天空盒，退出水面倒影后，根本就是当初大家在游戏中看到的样子了。
同时，《iles》中的高级成果根本都依赖于这个自定义渲染管线，为了能更不便调试和组织这个管线，我长期疾速实现了一个可视化编辑管线的性能，大家能够获取源码后一探外面的实现原理。当然，这是我为了《iles》长期做的，若想利用到本人的我的项目，还是把握了原理后依据本身需要定制更加得当。
除此之外，如果要论破费工夫最多的单个美术成果，其实是游戏的选关界面。咱们心愿编辑的关卡能在选关界面里直观地展示进去，为此尝试了多种计划。最开始是做在 UI Scroll View 外面的列表里。
之后开展成了网状结构，布局会更好看一点。
咱们还尝试过把每个关卡按地块排列生成简化的 3D 模型。一开始为了更能体现 3D 模型的成果，采纳了斜视角，然而看着有一点乱，并且远一点的关卡显示得没那么分明。
于是咱们改回了正顶视角，并在引擎 UI 小姐姐的倡议下把关卡底部的虚线改成了实底，最初的界面终于有了咱们本人的格调。能够看到，简体模型带有泡沫边缘，评星和岛名做了水底的折射成果，这里用到的技术和海面水成果是一样的。
四、公布 Steam 遇到的坑
咱们跑了一遍游戏打包和公布 Steam 的全过程，在接入 Steam 的创意工坊和数据接口等方面花了不少工夫。上面总结一下咱们遇到的坑点和解决办法，供同样想要公布 Steam 平台的小伙伴参考。
问题 1，上传的 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/
问题 2，测试 Steam 创意工坊，咱们调用上传接口的时候始终返回上传失败。
一开始咱们认为是 Steam 还没开权限或者是网络有问题，过了一段时间还是不行，我就翻了下源码，才发现它有个 ID 的参数必须要是 String 类型，而咱们测试传的是 Number。
参考链接：https://github.com/greenheartgames/greenworks/blob/12392db8e88ec9c0f6a1e244672992b972413e54/src/api/steam_api_workshop.cc#L193
问题 3，上架 Steam 提审的工夫。
Steam 审核时长在一周左右，审核通过并不代表内部立马就能下载到游戏，商店页面须要显示为「行将推出」状态至多两周，在这两周里玩家能够失常搜寻到这个游戏。另外还要注意下用户注册时长，新用户注册至多满 30 天后才可公布游戏。
问题 4，Steam 叠加层是必须反对的
必须反对快捷键「Shift + Tab」关上叠加层，Electron 主过程默认不会绘制每一帧，须要在启动项加一个命令来解决这个问题。
五、资源下载
Steam 体验地址：https://store.steampowered.com/app/2001150/iles/
源码下载：https://store.cocos.com/app/detail/4010/
《iles》源码已降级到 Cocos Creator 3.6，本周五，大家就可返回上方 Cocos Store 地址下载游戏的局部外围源码，包含整个可视化自定义渲染管线、游戏角色操作、开始场景等局部以及相干素材。
尽管商店默认设置了 99 块，然而只有你打到了「Baxstall Holm」这一关（主线第 15 关），游戏就会弹出一个二维码，扫码即可支付代金券收费兑换源码。通关难度其实不高，欢送大家多多体验并反馈，帮忙咱们做得更好！
最初的最初，我想借此机会向《iles》研发期间给予咱们帮忙的敌人表示感谢！也非常感谢各位开发者一路的关注和反对，心愿《iles》不负各位的期待。