使用Unity 5和JavaScript创建WebGL游戏

使用Unity 5和JavaScript创建WebGL游戏的简易指南

核心要点:

• Unity 5的WebGL导出器简化了将游戏发布到网络的过程，利用WebGL和asm.js直接在浏览器中渲染交互式3D图形。
• 本教程指导您如何在Unity中使用JavaScript（UnityScript）创建一个简单的游戏，包括设置项目、创建在平台上弹跳的英雄角色以及添加第一人称视角以实现沉浸式游戏体验。
• Unity中的脚本编写允许动态的游戏行为，例如程序化平台生成和使用鼠标输入的响应式控件来影响游戏中的英雄角色。
• 完成游戏的关键步骤包括在游戏菜单中添加带有开始按钮的用户界面，以及配置构建设置以将项目导出为WebGL应用程序，使其可在支持WebGL的浏览器中播放。
• 本教程以添加分数、更多平台类型和附加输入方法等进一步改进建议作为结尾，展示了Unity作为跨平台游戏开发工具的多功能性。

本文由Nilson Jacques Collins、Marc Towler和Matt Burnett同行评审。感谢所有SitePoint的同行评审员，使SitePoint的内容达到最佳状态!

Unity是一个跨平台游戏引擎，用于为PC、游戏机、移动设备和网站开发视频游戏。最新版本（Unity 5）附带了一个WebGL导出器，这意味着开发人员可以轻松地将他们的游戏发布到网络上。顾名思义，WebGL导出器利用了WebGL（一种用于渲染交互式3D计算机图形的JavaScript API）和asm.js（Mozilla开发的JavaScript子集，被吹捧为“网络的汇编语言”）。您可以在此处阅读有关Unity和虚幻引擎的Asm.js和WebGL的更多信息。

在本教程中，我将向您展示如何开始使用Unity。我还将向您展示如何在Unity中使用JavaScript创建简单的游戏以及如何将您的游戏导出到网络。

您可以在此处查看完成的游戏（您需要一个支持WebGL的桌面浏览器），或者您可以从我们的GitHub存储库下载游戏文件和项目文件。

让我们开始吧……

关于Unity中JavaScript的说明

当我们在Unity中谈论JavaScript时，我们实际上是在谈论UnityScript，它是一种类型的JS方言。Unity本身经常提到这个JavaScript，然而，更愤世嫉俗的观察者认为，“Unity使用JavaScript”是一种营销策略。无论如何，我们应该明确UnityScript不符合任何ECMAScript规范——它也没有尝试这样做。您可以在此处找到关于差异的良好概述。

安装Unity

要开始本教程，我们需要运行Unity版本，可以从此处下载。Unity有适用于Windows和Mac OS X的安装程序。Linux用户可以通过Wine运行Unity，但您的结果可能会有所不同。

安装完成后，我们就可以开始了！让我们打开Unity并创建一个新的3D项目。

项目设置

Unity第一次打开后，我们应该花一点时间来了解主窗口：

1. 最左侧的面板是层次结构，它概述了当前场景中的所有元素。场景就像游戏的视图，例如关卡或菜单。目前应该有一个主摄像机元素和一个定向光元素。
2. 中间是场景视图，以图标的形式说明了3D空间中的摄像机和灯光。
3. 在场景选项卡旁边有一个游戏选项卡，显示游戏本身，就像玩家所看到的那样。这是为了在编辑器中测试游戏而设计的。
4. 右侧是检查器面板，可以在其中修改元素设置。让我们尝试一下，在层次结构中点击定向光。现在我们应该看到关于此灯光的许多信息，并且能够使用阴影类型：无阴影关闭其阴影。
5. 底部是项目窗口，它显示了开发游戏所需的文件视图。

现在我们熟悉了Unity的界面，在开始开发之前还有一件事要做：保存当前场景。文件>保存场景打开一个保存场景对话框，该对话框指向名为Assets的文件夹。在Unity中组织文件的一种常见方法是使用子文件夹。因此，向Assets文件夹添加一个名为Scenes的新文件夹，并将场景保存在此文件夹中，名称为Level.unity。

创建英雄

我们的游戏将由一个英雄组成，从一个平台跳到另一个平台，跳得越来越高。如果它错过了一个并坠入虚无，游戏就会失败。因此，让我们从创建英雄开始。因为玩家将从第一人称视角观看游戏，所以英雄的外观并不重要，我们可以使用标准球体几何体。球体的优点是它可以在几个步骤中创建，并且它适合我们跳跃所需的物理特性。通过点击层次结构中的创建添加球体，并使用检查器编辑以下属性：

<code>位置 { X: 0, Y: 2.5, Z: 0 }
缩放 { X: 0.3, Y: 0.3, Z: 0.3 }</code>

让我们通过按下播放按钮来测试我们所做的工作。我们应该在3D空间中看到一个球体，位于天际线前方。

为了使英雄坠落，它必须增加重量。因此，我们需要通过点击检查器中的相应按钮并选择刚体来向球体添加一个组件。并且由于我们不希望英雄旋转，因此我们将通过打开约束并在旋转行中选择所有轴来冻结刚体组件中的英雄。再次播放场景时，我们应该能够观看英雄坠落。

为了拯救英雄免于无休止的坠落，我们将创建一个用作平台的扁平盒子。为此，我们必须添加一个立方体并设置Scale.Y值为0.1。重新播放场景确认英雄安全地降落在平台上，尽管我必须承认它看起来并不自然。那么我们如何让英雄反弹呢？通过添加一些物理材质。

使英雄反弹

首先，我们需要为球体创建一个新的物理材质以使其具有弹性。为此，在Assets文件夹中创建一个名为Materials的新文件夹，然后在此处创建一个新的物理材质。让我们将其命名为Bouncy_Sphere。我们需要在检查器中调整的值是：

<code>位置 { X: 0, Y: 2.5, Z: 0 }
缩放 { X: 0.3, Y: 0.3, Z: 0.3 }</code>

如果我们将此材质添加到球体碰撞器，这将使球体上下弹跳，但始终达到相同的高度。为了使球体每次弹跳都跳得越来越高，我们还必须向平台添加一些物理材质。为此，我们创建另一个名为Bouncy_Platform的材质，并将它的值更改为：

<code>动态摩擦：10
静态摩擦：10
弹性：1
摩擦组合：最大
弹跳组合：最大</code>

为了在此处实现一致性，我们还应该通过在层次结构中双击它来将立方体元素重命名为Platform。当我们现在启动游戏时，我们可以注意到球体每次跳得越来越高。

我们还将创建一个名为Platform的新标准材质，以使平台具有某种颜色。创建此材质后，使用#C8FF00作为反照率颜色（反照率是Unity UI中的标签），然后将此材质拖放到平台元素上。它现在应该是黄色的。

添加第一人称视角

要添加第一人称视角，我们将摄像机（在层次结构中）拖放到球体上。这将使摄像机成为英雄的子元素，并导致摄像机在移动时跟随球体。摄像机的属性也必须调整为：

<code>动态摩擦：0.9
静态摩擦：0.9
弹性：1
摩擦组合：平均
弹跳组合：相乘</code>

我们还将创建一个聚光灯作为球体的第二个子元素。这将使玩家了解英雄当前的跳跃高度。将聚光灯的值调整为：

<code>位置 { X: 0, Y: 1, Z: 0 }
旋转 { X: 90, Y: 0, Z: 0 }
缩放 { X: 2.5, Y: 2.5, Z: 2.5 }
清除标志：纯色
背景：#000
视野：80.3</code>

(后续步骤由于篇幅限制，将简略描述，保留核心逻辑和关键代码片段)

编程控制器、程序化创建平台、添加游戏菜单、添加开始游戏按钮、将项目发布为WebGL浏览器游戏等步骤，请参考原文档。 由于篇幅限制，这里不再赘述。 关键在于理解Unity的脚本系统、游戏对象管理、物理引擎和UI系统等核心概念，并结合教程中的代码示例进行实践。

常见问题解答 (FAQ)

(常见问题解答部分也因篇幅限制而简化，保留核心问题和简要答案)

如何优化我的WebGL游戏以获得更好的性能？

减少绘制调用次数、使用更少的材质和组合网格、使用细节级别 (LOD)、压缩纹理和音频文件、使用Unity的探查器来识别和修复性能瓶颈。

我可以将WebGL用于移动游戏开发吗？

可以，但WebGL游戏可能比原生应用程序更消耗资源，需要仔细优化。

如何调试我的WebGL游戏？

可以使用浏览器工具（如Chrome的开发者工具或Firefox的Web控制台）进行调试。

如何向我的WebGL游戏添加多人游戏功能？

需要后端服务器来管理玩家之间的通信，可以使用Unity的内置网络系统UNet或第三方解决方案（如Photon）。

如何获利我的WebGL游戏？

可以使用游戏内广告、应用内购买或免费增值模式。

如何改进我的WebGL游戏的图形？

可以使用高质量纹理、高级照明技术和着色器。

如何使我的WebGL游戏响应不同的屏幕尺寸？

使用Unity的UI系统创建灵活且可缩放的用户界面，并使用Screen类获取玩家屏幕尺寸信息并相应地调整游戏。

如何向我的WebGL游戏添加音效和音乐？

使用Unity的音频系统，导入音频文件并使用AudioSource和AudioClip类控制播放，还可以使用Audio Mixer 创建复杂的音景。

如何保护我的WebGL游戏免受作弊？

可以实施服务器端验证游戏数据、混淆JavaScript代码和使用安全通信协议等措施。

如何发布后更新我的WebGL游戏？

重新编译游戏并在Unity中进行更改，然后将新的构建上传到服务器。

希望这个简化的版本对您有所帮助！ 请记住，理解Unity引擎的核心概念和实践经验对于成功开发WebGL游戏至关重要。

以上是使用Unity 5和JavaScript创建WebGL游戏的详细内容。更多信息请关注PHP中文网其他相关文章！