65.9K
CodeProject 正在变化。 阅读更多。
Home

基于 JavaScript 技术的 Raycast 引擎开发

André Marcos（顾问）
starIconstarIconstarIconstarIconstarIcon

5.00/5 (1投票)

2022年11月17日

Apache

10分钟阅读

viewsIcon

7362

这项工作提出了基于 JavaScript 技术开发 Raycast 引擎，以促进 3D 游戏开发。

1. 引言

受巴西和世界范围内玩家社区快速增长的激励，对生产力更高的游戏开发工具和低成本引擎的追求，在当前游戏开发中开辟了广泛的选择。

基于此场景，本文是一系列文章（Silva, Silva 和 Macario, 2022）的一部分，旨在促进技术和实践的验证，作为电子游戏开发的辅助机制。所有项目都具有实践性质，始终保持教学、实验的特点，并始终努力为计算机科学和游戏制作社区做出贡献。

2. 背景

光线投射是一种用于模拟与虚拟对象物理交互的简单技术，当我们看到环境中的某个物体并想知道它是如何移动或旋转时，我们会检查它是否与周围的其他物体发生碰撞，如果发生碰撞，我们会通过计算它与周围所有物体表面之间的交点来将其移开，然后我们可以相应地更新其位置，使其再次回到视野中，而不会破坏它仍在场景中的错觉。

如今，游戏创作常常会遇到一些障碍，例如可访问性，例如，一台机器无法满足引擎的最低要求，导致用户对游戏创作失去兴趣。

3. 目标和方法

这项工作的目的是开发一个足够轻便的 Raycast 引擎，可以在任何浏览器中运行，为浏览器提供一个新工具，您可以使用现有的 Raycaster 创建自己的游戏。为了创建游戏，我们通常使用 Unity 或 Unreal 等引擎，但我们并非总是拥有必要的处理能力来使其正常工作。

为了创建此应用程序，将使用 JavaScript、HTML5 (HyperText Markup Language)、CSS3 (Cascading Style Sheets) 以及 P5.JS 库 1.4.2 版和 P5.Play.JS 3 版进行图像实时渲染。

4. 使用代码

所提出的引擎允许您使用 HTML、CSS 和 JavaScript 元素轻松地向场景中添加和删除对象。为了方便播放过程，该脚本不需要后端服务器，这意味着它可以在您的桌面计算机或手机上离线使用，并且无论可用网络连接如何，都将按预期工作。为了验证引擎，创建了一个简单的原型级第一人称游戏。

为了模拟真实用例，使用该引擎创建了一个原型级游戏，其中包含一个实体作为用户，可以执行射击动画。在用户的计算机上运行 Windows 10 操作系统。

引擎开发和游戏创建中使用了以下工具

  • Visual Studio Code：简化的代码编辑器，支持调试、任务执行和版本控制等开发操作。
  • P5.JS 库：用于创意编码的 JavaScript 库，旨在让编码对艺术家、设计师、教育工作者、初学者和所有人来说都易于访问和包容！P5.JS 是免费和开源的，因为我们相信软件和学习工具应该对所有人开放。
  • P5.Play.JS 库：JavaScript 库，它使用 P5.JS 库的图形渲染。
  • GitHub Pages：静态网站托管服务，直接从 GitHub 上的存储库获取 HTML、CSS 和 JavaScript 文件，选择性地通过构建过程运行文件，并发布网站。
  • GitHub：基于 Git 版本控制系统的源代码托管平台。

最初，选择与可用于创建引擎的编程语言有关。经过选择后，得出结论，理想的语言将是 JavaScript，因为它轻巧且是解释型语言，非常适合项目构想。

然而，由于语言的一些困难，需要一些库的帮助，P5.JS，它使其他库同时工作，以及 P5.Play.JS，它添加了一些现成的函数以方便 2D 游戏的开发过程。从而使项目的实施成为可能，因为这些库以简单和优化的方式实现了开发。

图 1 显示了引擎的一些功能，例如更改屏幕分辨率和绘制场景的地面和天花板以及组成它的文件。

图 1. 构建的引擎代码片段

下一步是了解《德军总部 3D》游戏引擎的工作原理及其创建方式。与当前引擎不同，光线投射专注于为屏幕上可见的每个像素列投射光束，因此存在一个数学公式（如下）。

高度 = 缩放因子/距离

h = x/d

因此，该引擎是根据《游戏引擎黑皮书：德军总部 3D》（Fabien Sanglard，2017，第 136 页）一书提供的信息，利用 Raycaster 本身来创建游戏的。

一旦确定了开发引擎所需的元素，下一步就是建立创建引擎的环境。通过这种方式，创建了创建引擎所需的文件，主文件是 sckecth.js，该文件负责渲染 Raycaster 的所有功能。

代码 1. 用于部署测试模拟的 index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <meta charset="utf-8">

  </head>
  <body>
    <main>
    </main>
    <script src="sketch.js"></script>
    <script src="P5 JS/p5.js"></script>
    <script src="P5 JS/p5.play.js"></script>
    <script src="P5 JS/p5.sound.min.js"></script>
  </body>
</html>

4.1. 验证与测试

为了演示引擎的工作，它被上传到一个 GitHub 存储库的文件夹中，不久之后，在 GitHub Pages 上创建了一个页面，这是一个静态网站托管服务，它直接使用 GitHub 存储库中的 HTML、CSS 和 JavaScript 文件。

为了测试构建的引擎，创建了一个原型级游戏。创建的原型是引擎中的 FPS 游戏（第一人称射击），包含一些元素，其中一些是墙壁、带动画的武器和一个简单的敌人，所有这些都渲染在 Canvas 中。Canvas 是一个 HTML5 元素，旨在限定 HTML 页面中图形动态渲染的区域。在此图像（图 2）中，演示了原型的结果，可以看到一个敌人在两堵墙之间，墙壁上带有光线折射的错觉。

图 2. 在等待状态模式下执行期间的一段时间内的打印序列

在此执行示例（图 2）中，可以可视化构建的场景，其中包含到位墙、敌人（目标）和导航机制，导航机制由一个循环算法组成，该算法从固定点（玩家的视角）扫描整个环境。

一旦用户启动引擎，就能看到他的游戏是如何形成的，已经添加了墙壁和动画，如图 3 所示。在此图像（图 3）中，表示了摄像机的移动以及单击键盘按钮时武器的切换，这两种机制都被制作成函数。

图 2. (a) 动画结果，(b) 光线折射结果和 (c) 屏幕上敌人结果

如图（图 3）所示，我们可以识别出游戏的更多特征，这些特征超出了场景和敌人的呈现以及与世界的交互。在这种情况下，可以看到玩家通过控制组件（键盘）的攻击命令与世界进行的交互。

  1. 在第一次打印中，玩家执行射击攻击；
  2. 在第二次打印中，玩家准备用刀攻击
  3. 在最后一次序列中，玩家手持武器处于待机状态（攻击位置）

所有呈现的序列都经过映射，以便可以从各种角度测试构建的引擎。

运行引擎时，用户将能够直接修改代码，上传自己的图像，还可以添加声音，Raycaster 已集成到引擎代码中，从而方便添加墙壁等。

在测试过程中，引擎运行良好，问题得到了解决，并且可以简单地添加墙壁和带图像的动画，从而使引擎轻巧且易于访问。两个主要优点是内容添加的简便性和可访问性，由于使用的编程语言，为引擎创建内容很简单，例如，要添加墙壁，创建了一个函数，其中需要创建一个任意大小的数组，类型为 1 表示添加墙壁，0 表示留空，原型展示了一些描述的例子，在图 3 中演示了墙壁的功能。

图 3. (a) 用于定义块（墙壁）位置的地图实现

4.2. 缺点与问题

引擎开发中最大的问题是寻找在 JavaScript 中开发并保持过程简单的方法。当找到 P5.JS 库时，这个问题得到了解决，该库使得渲染屏幕中的大多数对象成为可能。这使得所有部分的开发更清晰、更快、更轻。

在用这个库实现引擎后，代码行数显著减少，使其更容易理解。另一个问题是寻找一种为简单形状添加动画的方法。当添加 P5.Play.JS 库时，这个困难也得到了解决，该库允许将顺序图像添加到列表中，从而以循环形式创建动画。

5. 结论

通过为本项目开发所获得的学习和信息，我们能够理解引擎的运作方式以及深化 JavaScript 在开发中的应用。所获得的知识，例如 Web 开发和良好的编程实践，对于这项工作的开发是不可或缺的。

所使用的库对项目也至关重要，它们简化了大部分流程，主要用于在画布上渲染墙壁，后来添加了一个名为 _p5.collide2d.js_ 的库，简化了碰撞的创建。

除了所获得的所有知识之外，本项目的目的是为游戏开发者社区做出贡献，特别是对于那些对游戏创作充满热情和好奇的人。因为这个引擎与其他引擎相比轻巧而简单。作为未来的工作，这些结果有助于开发一个测试，用于在更完整的场景或游戏中验证引擎，从而允许探索该库的其他可能资源。

源代码库

参考文献

  1. Raycaster (2022). “一个基本的光线投射器 - Web API | MDN。” [在线]。可访问： https://mdn.org.cn/pt-BR/docs/Web/API/Canvas_API/A_basic_ray-caster. 。2022 年访问。
  2. McCarthy, L. L. (2022). “"P5.play".” [在线]。可访问： http://molleindustria.github.io/p5.play/docs/index.html. 。2022 年访问。
  3. McCarthy, L. L. (不带日期). (2022). “"P5.JS, 参考 | P5.js".” [在线]。可访问： https://p5js.org/reference/. 。2022 年访问。
  4. Psaikko, (2022). “"Raycast. 官方 GitHub 存储库".” [在线]。可访问： https://github.com/psaikko/raycast. 。2022 年访问。
  5. Raycaster. (不带日期)., (2022). “"Raycast. 官方 GitHub 存储库".” [在线]。可访问： https://threejs.org/docs/#api/en/core/Raycaster. 。2022 年访问。
  6. Sanglard, F. ., (2017). “游戏引擎黑皮书：德军总部 3D。” Ed CreateSpace Independent Publishing Platform, ISBN-10 1070515841, 第 1 版, 2017。
  7. Trekhleb, (2022). “javascript-algorithms。” [在线]。可访问： https://github.com/trekhleb/javascript-algorithms. 。2022 年访问。
  8. Vandevenne, (2022). “光线投射。” [在线]。可访问： https://lodev.org/cgtutor/raycasting.html. 。2022 年访问。
  9. Vic3PO (2022). “GitHub 上提供的项目源代码” [在线]。可访问：https://github.com/vic-3PO/Raycast-Engine-JavaScript。2022 年访问。
  10. Silva, J. C., Silva, A. M. 和 Macario, V., (2022). “探索由 Unity 引擎支持的 2D 电子游戏开发。” Codeproject，献给程序员！技术报告发布平台 [在线]。可访问：https://codeproject.org.cn/Articles/5346981/Exploring-electronic-game-development-2D-supported。。2022 年访问。

历史

  • 2022 年 11 月 10 日 - 文档创建
  • 2022 年 11 月 13 日 - 文本修订
  • 2022 年 11 月 16 日 - 修订和验证
  • 2022 年 11 月 17 日 - 文档提交
© . All rights reserved.