Coatsink如何将《准备，设置，烹饪！》的网页加载时间减少了25%

准备，设置，烹饪！ 是一款由 Coatsink 开发的 Messenger 合作餐厅管理游戏，该工作室曾开发过 侏罗纪世界余波和 变形金刚：战场。这是他们在首次涉足移动网页开发时学到的东西。

工作室如何将一款注定要在Messenger Rooms上运行的游戏从桌面转移到移动设备？

准备，设置，烹饪！最初是作为桌面网页游戏构建的，玩家可以从他们的PC或笔记本电脑加入视频通话。当Coatsink将开发重点转向移动设备时，他们与Meta和Unity合作，后者已有一个现有的战略合作伙伴关系，以使运行时在移动设备上工作。这是即将发布的 Unity 6 版本中 Unity Web 的主要更新之一，其中还包括对 WebAssembly 2023 的新增支持、对 WebGPU 的抢先体验以及 Emscripten 3.1.38 工具链的添加。明年，游戏开发者将能够利用Meta庞大的游戏生态系统，支持Unity的即时游戏平台。

测试一个新平台

我最喜欢准备，开始，烹饪！的是最小的点击播放时间。您正在 Messenger 中进行视频通话，只需按下一个按钮，所有人就会进入 Lobby，然后直接进入游戏。没有设置，"Coatsink的编程主管Ross Furmidge说。

由于这是Coatsink第一次开发网页游戏，目标是尽量充分利用该平台的工作流程。他们将其视为一个研发项目，以分析平台的可行性及其在移动网页开发中的实力。

团队主要是在现有功能的基础上进行构建。他们使用了现成的构建模块，包括Prefabs，涉及HUD、游戏管理器、网络、交互对象、Lobby和游戏说明，并添加了精致的功能，以更好地传达用户应该做什么。他们还加入了新的功能，如暂停、化妆品随机化、Lobby调整和消息传递、HUD更改、灵活的纵横比支持和难度平衡等。

“我们围绕多人游戏的方面构建和平衡了游戏，并在视频通话中与朋友一起玩得开心，”Furmidge解释道。当我们深入研究这个项目时，我们遇到了从桌面到移动设备的游戏常见挑战。我们必须专注于用户界面，特别是对于网页，我们必须考虑移动数据的下载时间，因为不能保证玩家连接到Wi-Fi。

结果

• 将游戏的加载时间减少了25%
• 减少了 WebAssembly (Wasm) 文件的大小 2.5%
• 缩短了游戏的传输和解包时间10%

创建动态用户界面方向

当Coatsink团队开始这个项目时，他们很快意识到在UI方面有很多需要考虑的因素。一开始，他们就关心确保玩家和非玩家视频通话用户都能参与。他们需要改进现有的观赛功能，以便在为其他用户提供积极的观看体验的同时，始终保持玩家在线。

“观赛体验在我们设计游戏的其他方面时始终是我们关注的重点，”Coatsink 的初级设计师 Kamil Bazydlo 解释道。“这并不是其他平台上所有游戏类型的常见功能，但由于玩家是在视频通话中，因此强调整个游戏中包容性的用户参与是很重要的。”

他们也开始早早关注屏幕方向。由于游戏最初是为桌面设计的，因此它是以横向模式构建的。当他们转向移动设备时，他们必须支持横向和纵向视角。在Messenger中，玩家像拿手机一样拿着屏幕，因为他们在视频通话中，所以如果手机旋转，摄像头就会横向移动，这并不理想。“这是我们在设计支持这一点的环境时一个重要的考虑因素，”Furmidge说。

重新思考游戏控制

准备，设置，烹饪！ 可以在各种设备上玩，这些设备具有不同的屏幕尺寸和纵横比，但游戏的视口不会跨越整个屏幕，因为它为元素（如 Meta 的视频源和平台控件）分配了空间。这些不是游戏应用程序本身的一部分，因此当开发人员在开发游戏时，它们不会出现在Unity编辑器中。

“我们在屏幕上放置任何 UI 元素时都必须考虑到这一点，”Bazydlo 说。我们大致了解了这些平台元素占用的屏幕空间，并与我们的质量保证团队合作，确定了要针对的最窄纵横比。

在移动设备上，设备特定的控件位于屏幕底部。由于游戏是以横向模式构建的，团队使用屏幕的底部来显示一些HUD元素，而不是用于关键的游戏输入。

当该游戏在美国进行软启动时，团队将Analytics直接集成到应用程序中，这对于识别玩家何时退出游戏至关重要。一开始，他们注意到用户在游戏加载之前就已经流失了。

“我们看到，当菜单有点繁忙并且其流向游戏的时间对于Lobby中的用户来说太长时，他们会很快退出。一旦他们进入游戏，大多数玩家就继续玩完整个游戏，”Furmidge说。“这是对我们至关重要的数据，Analytics在我们的许多决策中都是一个重要因素。”

优化加载时间

Coatsink 的 Analytics 显示，如果游戏的文件大小过大且加载时间过长，用户将在到达主菜单或游戏玩法之前退出。

Coatsink 开发者 Andrei M. 专注于通过使用 Unity Build Settings 中的选项来减少文件大小。例如，他将代码优化设置为磁盘大小，使用了Brotli压缩格式，将IL2CPP代码生成设置为更快（更小）的构建，将托管剥离级别调高，等等。通过这些针对网络的优化，团队能够显著减少加载时间。

然后，他们使用了Unity的WebAssembly（Wasm）工具，该工具剔除未使用的Unity引擎部分，并输出一个优化的.wasm文件。通过减少这个文件的大小，设备在运行时需要压缩、传输和解压的内容就更少了。“这样，用户一旦下载完信息就可以直接进入游戏，”Furmidge解释道。

这些游戏优化实践导致减少了4 MB，相当于Wasm文件整体减少了2.5%。这转化为在转移和拆包时间上节省了10%。虽然4 MB听起来很小，但在大局中，它对在移动浏览器上运行的游戏产生了很大的影响。

减少文件大小

为了缩小文件大小，Coatsink团队使用了AssetBundles，这是一种包含特定平台非代码资产的存档文件。他们将它们托管在外部服务器上，然后在构建运行时下载它们，以帮助用户尽快进入游戏的Lobby。

他们还使用了Addressable Asset System来按需加载资产。这帮助他们将包拆分为游戏不同部分所需的组，并大大贡献了25%的加载时间减少。

“这样，我们为大厅准备了最少量的资产，以帮助玩家尽早进入，为每个级别准备了最少量的资产，并为不同级别准备了一些具有共同资产的通用包裹，”安德烈·M解释道。目标是尽可能减少下载的文件数量，因为HTTP/2并不是无处不在的，我们希望尽可能少地包含非必需的资产。

团队创建了一个工作流程，帮助他们检测用户在启动游戏时是使用移动设备还是桌面设备。在网页模板中，在加载期间，他们可以确定设备是否为移动设备，如果是，则会更改数据和资产目录以使用针对该平台优化的资产。

我们创建了自己的双重构建系统，产生了两个版本，但它们并不完全不同。它引用了不同的地图集，并改变了压缩类型和大小。这是基于相同代码库的两种不同的资产视图，"安德烈·M说。

应对独特的测试和调试挑战

在测试和调试游戏时，由于在Messenger应用程序中运行游戏而不是传统的网络浏览器，团队遇到了一些困难。虽然他们有可以在浏览器中运行的构建版本使用虚拟播放器，但他们仍然不得不深入研究那些只在Messenger中出现的错误。

“对于那些错误，我们创建了一个系统，可以在开发版本中将日志上传到我们的AWS服务器，然后我们可以读取这些日志，”Furmidge解释道。

团队还使用了网页浏览器开发工具来捕捉控制台中的错误并跟踪API调用。作为一名程序员，这对Furmidge来说是关键。

“在浏览器控制台中，您可以输入命令并尝试手动运行它们，”他说。“由于我们有一个外部 JavaScript 库，我们构建了一个在 JavaScript 和 Unity 之间的本机插件，我们可以在需要时访问它。”这被用来包装Meta JavaScript SDK，以便能够与他们的节点Multiplayer服务器通信，这是Unity正在努力在未来版本中作为一个包发布的功能。

为了加快开发速度，Andrei M. 还创建了自己的本地包装器来模拟他所需的Meta API调用。他解释说：“我专注于处理本地服务器配置、可编程响应和延迟的API调用。”

成为平台的自然延伸

Coatsink团队希望Ready, Set, Cook! 体验对Messenger用户来说是无缝的。从让玩家快速加入游戏会话到缩短加载时间，他们的最终目标是成为平台的有机延伸。

部分原因是提供直观的游戏体验，让玩家可以不受干扰地进步，在多个设备上玩耍，并在场边为他们的Friends加油。为此，团队在加载过程中加入了关于游戏功能的可滚动提示、方便的游戏指南动画和互动元素。这些功能帮助玩家在厨房中与Friends一起找到乐趣，同时管理混乱。

“我们希望自然地利用已经在使用Messenger的人，并为他们的视频通话体验增添色彩，”Coatsink的高级制作人Nick Taylor说。“与Meta和Unity的合作非常具有协作性，并为我们提供了充足的机会来实现这一点。”

扩展的可能性与Unity 6

Unity 6 专注于将快速、便捷的游戏创建工具直接交到您手中，无论您的玩家身在何处。在 Unity Hub 中下载 Unity 6。