创建网页游戏的5个基本要素

想象一下，为玩家提供一种快速且无障碍的游戏体验，无需像移动市场下载或账户注册这样的障碍。通过浏览器或嵌入到本地应用程序中的网页视图，随时随地与玩家见面的能力触手可及，基于网络游戏的可能性是无穷无尽的。

最近，我们在网络平台上，尤其是移动平台上，看到玩家参与度激增，这一趋势没有减缓的迹象。在2023年，全球浏览器游戏市场产生了大约150.3亿美元的收入。尽管主机和移动游戏类型不断增长，预计到2028年，该细分市场的年收入将增加到223.3亿美元。

这本综合电子书将帮助有抱负的创作者和经验丰富的开发者深入了解使用Unity Web构建高性能网页游戏的五个基本要素。它包括对热门标题的幕后观察，例如 准备，开始，烹饪！, Kasama:觉醒、SquadBlast 和 Project Prismatic 在网络上诞生。

它涵盖了以下见解：

1.优先考虑规划和原型设计

2.构建动态用户界面

3.创建一个连贯的视听体验

4.优化优化优化

5.拥抱多个网络平台

1.优先考虑规划和原型设计

网络平台的一个主要好处是您可以快速与世界各地的玩家分享您的游戏。然而，为了确保良好的体验，您的游戏需要建立在坚实的设计基础上。

勾勒愿景

设定清晰的愿景有助于在整个开发过程中指导团队。斯特拉特顿工作室希望在性能和视觉保真度方面推动浏览器游戏的界限。他们的目标是在网络环境中提供一种与传统平台相媲美的最佳玩家体验。

“这个愿景是我们在原型设计和迭代过程中保持一致的锚点，帮助我们在整个开发过程中做出一致且有目的的选择，”斯特拉特顿工作室的常务董事乔希·洛弗里奇说。

创建游戏的第一步是确保他们能够实现他们设想的生动环境，同时保持良好的性能，特别是考虑到他们所针对的中端硬件的限制。这为游戏其余部分的开发提供了坚实的技术基础。

“我们首先构建了一个具有较大绘制距离的测试场景，这使我们能够评估是否能够渲染对游戏美学至关重要的浓密植被、多样地形和复杂细节，”洛弗里奇说。利用新的WebGPU图形API，我们测试了场景，以确保它不仅看起来如我们所愿的那样丰富，而且在不同设备上表现良好。

从头开始测试

一开始，ULTRAHORSE团队专注于开发他们的主要游戏机制。他们想要确定这个跑酷射击类的多人游戏方面，以确保它既有趣又吸引人。他们从更大的屏幕、游戏机和个人电脑开始，以获得基本的感觉。

从那里，我们迅速转向了玩家测试。即使在我们早期的测试版本中，我们也通过像Antidote这样的服务将其展示给在线玩家，并在伦敦的WASD博览会等活动中进行早期测试，"首席执行官兼联合创始人Anatolijs Ropotovs说。"这使我们能够验证我们的核心机制，并立即获得关于什么有效、什么无效的反馈。

PIGIAMA KASAMA团队呼应了快速原型制作和早期测试想法的理念。创建Kasama:觉醒开始于定义角色和编写叙事大纲。他们希望故事、主角和游戏玩法能够深度连接。他们首先在Gravity Sketch VR中创建了一个简单的3D环境，然后将其移入Unity中构建和测试他们的主要谜题机制。

这种实践方法使他们能够在投入过多时间之前，看看机械是否运作良好。一旦他们对机制和故事充满信心，他们决定将游戏制作成一个解谜冒险，这感觉就像是他们想要创造的体验的完美契合。

我们在测试过程中进行多次迭代，直到团队对交互的有效性感到自信。一旦我们确定了核心游戏玩法，就开始了概念艺术的制作，确保它与游戏的故事和整体氛围相一致，”PIGIAMA KASAMA的联合创始人Paride Stella说。

适应障碍

在游戏开发中，Stratton Studios 经常会根据技术限制和原型制作过程中发现的更好想法来调整他们最初的愿景。

提炼以确保最佳结果是创造过程的一部分。例如，我们必须进行的一项重大改变涉及关卡设计，”Loveridge解释道。“最初，我们设想了更开放、自由的环境，但随着我们的进展，显然这种方法与我们正在实施的六边形瓦片遮挡剔除系统不兼容。”

为了保持性能，特别是在基于网络的环境中，他们通过大幅减少屏幕上的拓扑来优化渲染过程。这使他们将关卡设计重构为六角瓷砖象限，这帮助他们更好地管理可见性和剔除，然后专注于明确的瓶颈。这改善了游戏玩法，并确保游戏在各种设备上顺畅运行。这项调整对于平衡他们的创意愿景与技术性能要求至关重要。

虽然良好的规划可以减轻开发过程中出现的挑战的影响，但重要的是要记住，这并不能完全避免道路上的颠簸。

2.构建动态用户界面

虽然网络是接触全球玩家最便捷的平台，但并非所有浏览器都是平等的。在设计游戏的用户界面时，屏幕尺寸的变化、横屏与竖屏的方向以及承载游戏的应用程序的用户界面考虑都是需要牢记的方面。

始终将玩家体验放在首位

当Coatsink团队开始开发Ready, Set, Cook!时，他们很快意识到在用户界面方面有很多因素需要考虑。早期，他们关注确保玩家和非玩家视频通话用户都能参与。他们需要完善现有的观赛功能，以便在保持玩家在线的同时，为其他用户提供积极的观看体验。

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

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

克服用户界面挑战

ULTRAHORSE团队面临的最大挑战之一是创造一种游戏体验，无论是使用鼠标和键盘、控制器还是触摸屏，都能同样令人愉悦。这对他们构建一个真正跨平台游戏的愿景至关重要。

最初，我们尝试了不同的游戏风格，但我们发现许多传统射击游戏格式偏向于一种输入方式，而不是其他方式。这实际上是我们如何为SquadBlast设计横向卷轴射击游戏格式的，"Ropotovs说。我们意识到，二维平面允许使用鼠标进行精确瞄准，使用控制器进行直观移动，以及在移动设备上使用简单、自解释的触控控制。

在团队从PC转向移动网页开发时，出现了一个意想不到的挑战。最初，他们开发了一个完全打磨的PC体验，配备了用户体验中的悬停鼠标元素。这使他们能够创建一个丰富、详细的界面，充分利用更大的屏幕和精确的鼠标控制。他们使用工具提示、悬停状态和更复杂的菜单结构来向玩家传达信息和选项。

这导致了一些艰难的决定，关于展示哪些信息以及如何呈现这些信息。团队必须使用户界面更加自我解释，因为他们无法依赖于在PC上效果良好的悬停状态或复杂的工具提示。每个元素都必须一目了然，这迫使他们精炼视觉语言和图标。

根据屏幕空间进行调整

ULTRAHORSE团队在设计触控输入时也遇到了障碍。在电脑上，他们可以假设精确的光标控制，但在移动设备上，他们必须考虑到不太准确的手指点击和潜在的误点击。这使他们将触控目标做得更大，用户界面元素之间的间距更宽松，这进一步减少了他们一次可以显示的信息量。

他们还发现可扩展和灵活的用户界面组件的重要性。考虑到移动设备尺寸和纵横比的多样性，他们需要其用户界面能够平滑地适应不同的屏幕配置和DPI。这使他们开发出一个更强大的用户界面系统，该系统可以根据可用的屏幕空间自动调整。使用这种简化移动网页的过程有助于改善SquadBlast在所有平台上的用户界面。

重新思考游戏控制

准备，开始，烹饪！ 可以在各种不同屏幕尺寸和纵横比的设备上进行游戏，但游戏的视口并没有延伸到整个屏幕，因为它为像Meta的视频源和平台控制这样的元素分配了空间。这些不是游戏应用本身的一部分，因此在开发者在Unity编辑器中工作时，它们不会显示出来。

“我们在屏幕上放置任何用户界面元素时必须考虑到这一点，”巴齐德洛说。我们大致了解了这些平台元素占用的屏幕空间，并与我们的质量保证团队合作，确定了最窄的宽高比目标。

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

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

我们看到，当菜单稍微繁忙，且其流入游戏的时间对大厅中的用户来说太长时，他们会迅速离开。一旦他们进入游戏，大多数玩家就继续完整地玩它，”Furmidge说。这对我们来说是重要的数据，分析在我们许多决策中是一个重要因素。

3.创建一个连贯的视听体验

通过利用先进的图形和动态音频，创作者可以提升游戏体验，无论浏览器所需的优化如何。虽然说起来容易做起来难，常见的瓶颈必须仔细考虑，但随着技术的发展，网络上高视觉和音频保真度的潜力比以往任何时候都更具前景。

实现更高水平的图形复杂性

斯特拉特顿工作室团队希望创造一款具有高视觉保真度和详细环境的游戏。这需要比WebGL所能提供的更多的图形处理能力和灵活性。

“WebGL虽然功能强大，但存在某些性能瓶颈和限制，例如缺乏计算着色器和GPU蒙皮，这将迫使我们在艺术愿景上做出妥协，”Loveridge说。

他们决定转向 WebGPU，以实现更高水平的图形复杂性，包括通过计算着色器实现更高级的阴影、光照效果和复杂的纹理。这使他们能够渲染密集、郁郁葱葱的环境，并在浏览器中保持一致的高帧率。

WebGPU的增强性能得益于进一步利用设备的图形卡，这对于提供他们设想的丰富、沉浸式体验至关重要，确保玩家能够享受游戏，体验到通常只在桌面和主机游戏中才能享受到的细节和流畅度。

管理性能和WebGPU

虽然 WebGPU 提供了 Stratton Studios 团队所需的先进功能，但它也带来了他们必须解决的一系列独特挑战，以保持他们的艺术愿景。在各种设备上优化性能是主要挑战之一。由于 WebGPU 仍然相对较新，确保一致的性能和兼容性需要进行大量的微调，并且他们还内置了一些安全措施。

另一个挑战是管理他们使用的着色器和渲染技术的复杂性。“虽然 WebGPU 允许更复杂的渲染技术，如 GPU 皮肤和计算着色器，但如果处理不当，也更容易出现性能瓶颈，”Loveridge 说。我们必须仔细优化我们的着色器，并对其进行精简，以确保我们能够提供高质量的视觉效果，而不会导致帧率下降或其他性能问题，例如垃圾收集（GC）峰值。

由于 WebGPU 相对较新，有时会导致团队出现意外行为，例如随机黑屏或 NaN 像素导致的光晕膨胀，特别是在不太常见的硬件配置上。为了克服这个问题，他们在不同设备和浏览器上投入了额外的时间进行严格测试，确保游戏在各个平台上表现一致，并且外观符合预期。

“为了应对这些挑战，我们实施了一个强大的性能监控系统，使我们能够在开发过程中实时检测和解决问题，”洛弗里奇说。WebGPU使我们能够实现我们的艺术愿景，但这需要仔细管理和致力于克服与前沿网络技术相关的障碍。

寻找光明

“良好的照明会带来巨大的不同，而在网络游戏中很难实现，”斯特拉说，PIGIAMA KASAMA团队希望确保照明质量与游戏的其他部分保持一致。

照明也是游戏机制的关键。团队利用它来创造紧张感，引导玩家移动，并突出游戏中的重要区域或物体。动态效果强调了故事中的关键时刻和过渡。我们希望尽可能使用烘焙光照。这是一种在通常不提供那种保真度的平台上营造高质量照明感知的方法，”联合创始人马泰奥·范钦解释道。

团队面临的最复杂挑战之一是在不加载场景的情况下过渡环境中的照明，并在灯光开启时创建动态照明变化。他们使用了一种自定义着色器，实时操控光照贴图，使一切看起来平坦，并给人动态光源的错觉。为了实现这一点，斯特拉说，关键是将游戏设计和环境设计作为一个整体过程来进行，而不是将其分开。每个元素都需要为其他元素服务。

他们使用Shader Graph 开发了自定义着色器，这在团队所称的“噩梦序列”中特别有用。它用黑色的污泥覆盖地图，同时中和光线，使环境呈现黑白色。

“当玩家打开灯光时，着色器会反转这一效果，创造出灯光被激活并清除照亮区域内黑色污垢的错觉，”范钦说。

由于资源有限，他们也做了一些艺术选择以提高表现。他们选择在黑暗区域工作以隐藏元素，这帮助他们优化了多边形和蒙皮网格的数量。“我们在较亮的区域添加了更多细节，”范钦说。

管理音频制作流程

在Kasama:觉醒，音频影响了从游戏节奏到环境和互动设计的一切。它还引导玩家，同时加深他们与故事的情感联系。PIGIAMA KASAMA团队创作并制作了与每集的情绪和节奏相匹配的原声带。他们还与配音艺术家合作，并雇佣了一位语言学家来创造一种语言。他们的目标是创造一种听觉体验，以增强游戏的沉浸感。

团队在实施之前，执行了严格的三阶段音频制作技术流程。

第一阶段：音频剪辑统一和混合/母带制作

第一阶段需要统一多个音频片段，特别是循环声音，如环境音景和游戏的原声带。这个过程扩展到某些一次性音效，这些音效被分层并合并成单一的音轨。这些修改是在混音和母带制作阶段整合的，确保统一的片段在不同播放环境中保持音频动态和整体平衡的一致性。这个阶段对于最小化不一致性和确保连贯的听觉体验至关重要，特别是对于需要在游戏中无缝过渡的循环序列。

第2阶段格式转换为优化压缩标准

在第二阶段，原始的高保真音频文件，通常为 .AIFF 和 .FLAC 格式，经过转换为 .OGG 格式。此转换以48 kHz的采样率和16位的位深度执行，遵循行业标准，以保持音频质量和性能效率之间的平衡。Vorbis压缩编解码器被使用，这使得文件大小显著减少，而不影响感知音频质量。

第3阶段:Unity 实现和微调

最终阶段涉及将处理过的音频文件集成到Unity中。这包括对适当加载方法的细致选择（例如，对于较长的曲目使用流式传输，或对关键音效进行预加载），以优化游戏过程中的性能。Vorbis压缩设置经过微调，以达到音频保真度和资源利用之间的最佳平衡。

此外，针对特定音频文件是否应以单声道或立体声处理，做出了谨慎的决定，这取决于它们在声音设计中的角色以及所需的游戏内空间化效果。

最终阶段实施的严格优化过程带来了显著的存储和性能提升。通过利用OGG格式并微调压缩设置，音频资产的总大小压缩到约10 MB。这标志着与估计的 500 MB（如果使用未压缩的 AIFF 文件）或 MP3 等效文件的 100MB 占用相比，减少了相当大的数量。这些结果不仅最小化了游戏的整体大小，还确保了在游戏过程中高效的内存使用和流畅的音频表现。

4.优化优化优化

为了避免玩家流失，您希望确保他们能够尽快进入您的游戏，并在整个过程中获得良好的体验。期望很高，时间至关重要，因此优化、测试和进一步优化是关键，以确保用户保持参与。

减少文件大小

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

他们还使用了可寻址资产系统按需加载资产。这帮助他们将包拆分为游戏不同部分所需的组，并大大促进了加载时间减少25%。

“这样，我们为游说团体提供了帮助玩家提前进入的最低资产量，为每个级别提供了最低资产量，并为不同级别提供了一些包含共同资产的常见包，”开发者安德烈·M解释道。目标是尽可能减少需要下载的文件数量，因为 HTTP/2 并不是无处不在，我们希望尽可能减少不必要的资源。

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

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

斯特拉特顿工作室在整个开发过程中能够显著减少文件大小和加载时间。最初，他们游戏的负载大约为400 MB，这对于基于网络的体验来说太大了。

“通过一系列优化，包括资产压缩、代码拆分和利用Unity的可寻址资产系统，我们成功将初始负载大小减少到29 MB，”洛弗里奇解释道。

这种大幅度的减少不仅显著缩短了加载时间，还使得Project Prismatic对更广泛的受众更加可及，确保了更快的初始加载和更流畅的整体玩家体验。

ULTRAHORSE团队在发布时将初始下载包的大小从200 MB减少到133 MB。他们将其分为21 MB的强制捆绑和112 MB的按需捆绑。“CPU负载时间比最开始快了三倍以上，”Ropotovs说。"剖析、优化和禁用不必要的捆绑是其中的重要部分。"

优化加载时间

斯特拉特顿工作室专注于减少有效载荷大小、改善资产交付和提高整体效率，以优化加载时间。团队使用Unity内置的资产压缩来最小化纹理、音频和其他资产的大小，以及一般的纹理图集。

他们为非必要资产实现了懒加载，这使得游戏能够首先加载关键组件，然后根据需要通过 Addressables 框架在后台逐步加载其他内容。

他们使用可寻址资产系统高效地按需管理和加载资产。这使他们能够在玩家在游戏中进展时动态加载资源，确保在任何给定时间只加载必要的数据。

Unity的云内容交付（CCD）框架帮助团队从地理位置更近的服务器交付资产。这减少了延迟，并加快了玩家在各地的下载时间，因为资产在后台加载。

他们确保在第一次加载后，资产被存储在播放器的设备上，从而允许后续加载时间大大加快。团队还将代码拆分为更小、更易于管理的块，以便仅在前期加载初始游戏所需的基本代码，并使额外的功能和模块异步加载。

测试和调试工具

为了应对他们在使用 WebGPU 时遇到的性能限制，Stratton Studios 团队使用了帧调试器来识别最占资源的元素，例如高分辨率纹理、复杂的着色器和广泛的绘制距离。从那里，他们实施了一系列旨在减少负载的优化，而不显著牺牲视觉质量。

“我们利用纹理图集来最小化纹理加载的数量，减少了不太关键区域的多边形数量，并使用了远处拓扑的哑光画作以节省渲染成本，”洛弗里奇说。我们还应用了细节层次（LOD）技术，以更有效地管理远处物体的渲染。

主要挑战在于在性能和视觉质量之间取得平衡。“通过专注于优化游戏中最苛刻的方面，并聪明地利用Unity中可用的工具，我们能够提供一种视觉丰富的体验，并在各种设备上表现良好，”Loveridge说。这种方法使我们能够实现艺术目标，同时确保游戏对所有玩家，无论其硬件如何，都是可访问和愉快的。

要调试Project Prismatic，团队还依赖于Unity Profiler来跟踪他们的性能指标，包括CPU和GPU使用率、内存分配和帧率。它帮助他们确定性能瓶颈并优化游戏性能，特别是在资源密集型领域。

最后，Unity Cloud Diagnostics 帮助他们收集来自现场用户的崩溃报告和异常。它为他们提供了对在开发过程中可能未被发现的问题的宝贵见解。

5.拥抱多个网络平台

我们从工作室专家那里反复听到的一个建议是“在玩家所在的地方与他们见面。”为网络开发为游戏玩家提供了一个简单、快速和便捷的游戏体验的机会。随着更多硬件选项、更快的连接速度以及更多玩家手中掌握的强大设备，考虑在各种网络平台上部署的所有选项变得尤为重要。

跨平台微调

在与Spatial合作进行多平台网络发布时，PIGIAMA KASAMA团队采用了Universal Render Pipeline (URP)，该平台的首选管道。渲染管线的灵活性和效率对团队在网络平台上的部署尤为重要，因为跨平台兼容性和可定制性帮助他们轻松扩展。

性能可以针对每个平台进行优化，即使在低端设备上，开发者也可以使用自己的着色器。它是为了在未来表现良好而建造的。从空间平台的角度来看，随着我们开始支持未来版本的Unity，我们预计URP也将在那里得到支持，”Spatial的开发者关系负责人Jake Steinerman解释道。

Spatial的服务器为每个平台创建了单独的构建。他们对某些平台有不同的目标质量。“景深在WebGL上运行得很好，但我们发现它在某些移动设备上的性能较差，”范钦说。另一方面，Android 和 iOS 上的音频性能更好。我们本可以在 Android 上更好地使用滤波器和 EQ，这是一种允许开发者调整音频源中特定频率音量水平的音频工具，但这在 WebGL 上是行不通的。

他们调整了某些元素以符合每个平台的要求，而其他元素则专门为该平台进行了适配。“对于 WebGL，我们使用了更高分辨率的纹理，因为屏幕通常更大，并在较小的移动屏幕上使用了较低分辨率的纹理，”斯特拉说。总的来说，多平台发布非常顺利。

轻松渲染

斯特拉特顿工作室还利用URP在性能和可扩展性之间取得平衡。URP的一个关键特性是能够轻松创建自定义渲染管线通道。这种灵活性使团队能够微调渲染过程，以满足他们的特定需求，优化某些视觉效果，并实现自定义着色器，从而增强游戏的整体外观和感觉，而不影响性能。

我特别欣赏URP的模块化，这使我们能够根据目标平台的能力启用或禁用某些功能。这使得在保持一致的视觉体验的同时，优化游戏以适应不同设备变得更加容易，”Loveridge说。

受益于多平台发布

在多个平台上发布游戏有许多好处，尽管这在规划过程中可能会增加需要考虑的工作流程差异。

通过在网络和其他平台上提供SquadBlast，我们可以接触到更广泛的受众。玩家可以轻松地进入游戏，而无需下载或安装任何东西，这大大降低了进入的门槛，”Ropotovs说。

分销也是ULTRAHORSE团队的一个主要因素，拥有网络版本为团队打开了一个全新的渠道世界，否则他们将无法接触到这些渠道。

他们最初在自己的网络门户网站SquadBlast.com上推出了SquadBlast。这为他们提供了一个很好的测试平台，可以快速迭代，获得玩家的即时反馈，并进行快速改进。从那里，他们扩展到更大的网页游戏门户网站，如CrazyGames，这对团队来说是一个游戏改变者。

这些网站的覆盖面非常广泛——我们谈论的是每月数千万的活跃用户。通过在这些门户上放置SquadBlast，我们能够将我们的游戏展示给一个庞大的观众，这些观众可能是我们通过其他分发渠道永远无法接触到的，"Ropotovs解释道。

该团队还看到其他嵌入网页游戏的平台的机会，例如消息应用程序和社交媒体平台。正如Ropotovs所说，“这里的潜在影响是惊人的，而Unity 6对移动网页技术的显著优化将解锁一整代新的平台来整合游戏。”

结论

在这本电子书中，我们介绍了构建成功网页游戏的五个基本要素。我们向我们的专家询问了他们在开发网页时的最佳建议。

如果您正在考虑开发网络游戏，将您的游戏从其他平台移植到网络，或者仅仅是在寻找新信息，我们希望专家的见解对您有所帮助并能激发灵感。

与Unity 6扩展的可能性

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