【翻译】博客游戏项目Q1K3 – 制作

博客游戏项目
多米尼克 Szablewski，@phoboslab
— 2021 年 9 月 27 日，星期一
Q1K3 – 制作
这是我第三次参加 js13kGames 比赛。我在 2018 年凭借 Underrun 获胜，但我在 2019 年的参赛作品 Voidcall 完全没有提供任何引人注目的游戏玩法。

今年的主题是“太空”——我选择完全忽略它，而是决定在其 25 岁生日时向我最喜欢的游戏之一致敬：

1996 年的原始地震。

Q1K3 Play Q1K3 – 以 13kb 的 JavaScript 向 Quake 致敬

我是伴随着 Quake 系列长大的。和许多其他人一样，Quake 引擎的开放性将我吸引到了科技世界。在 2000 年代初期，我为 Quake 3 创建了地图，后来又修改了源代码。当我的 Oculus Rift CV1 到货时，我

做的第一件事就是将 Quake 移植

到它。

尤其是最初

的 Quake 已经老化得非常好。它仍然是一款非常漂亮的游戏，通过不断改进的引擎（如 Quakespasm）和雄心勃勃的模组（如 Arcane Dimensions 和 Alkaline）保持活力。

用代码、纹理、声音、音乐、武器、敌人和地图在 13kb 中捕捉 Quake 的精髓，既具有挑战性，又充满乐趣。

本文详细介绍了使其成为可能的一些技术。您可以在 github 上的源代码中跟进。

纹理
Q1K3 有 31 种不同的纹理。以 PNG 格式存储，它们的时钟大小约为 150kb。因此，简单地将纹理包含为图像文件是不可能的。

我最初修改了一个简单的 DSL，它允许我动态创建 Canvas 元素。令我惊讶的是，这产生了一些非常令人信服的结果，只有一点随机噪音和一些浮雕矩形。

// 使用一个简单的库来创建一个纹理
// 一个带有四个铆钉的金属面板 (rect) (rectMultiple)
质地（）
    // x, y, 宽度, 高度, 颜色
    .rect(1, 1, 30, 30, 0x444f)

    // start_x, start_y, 宽度, 高度, inc_x, inc_y, 颜色
    .rectMultiple(4, 4, 3, 3, 21, 21, 0x111a)

    // 添加两层棕色和黑色噪声
    .噪音（0x5206）
    .噪音（0x0006）

    // 提交到 WebGL
    。创造（）;
为了能够进一步压缩此代码并获得一些即时的视觉反馈，我决定为这些纹理构建一个编辑器。

TTT – Tiny Texture Tumbler TTT – Tiny Texture Tumbler 的截图

这将生成一个包含所有值的原始数组，而不是上面的代码。您可以将此纹理定义数组传递给 ttt() 函数以接收画布元素数组：

// 创建两个纹理并将它们附加到文档中
ttt([
    [32,32,13135,0,1,1,30,30,65528,8,13135,2,52419,1,2,5,2],
    [32,32,13135,1,2,2,4,4,8,8,65524,5,8458,4,0,0,0,32,32,5]
]).map(canvas => document.body.appendChild(canvas));
此编辑器中的一个重要新增功能是能够将一种纹理绘制到另一个纹理上，甚至绘制到其自身上。我还添加了一个绘制文本的函数。总而言之，这个编辑器和库只支持 5 种不同的功能：

压花矩形
浮雕网格
噪音
文本
绘制上一个纹理
这足以为 Q1K3 创建最终的纹理集。纹理创建库和所有 31 个纹理的定义压缩后的大小约为 1.3kb。比原始 PNG 文件的 150kb 好得多，但仍然是允许的 13kb 的很大一部分。

Q1K3 纹理 最终的纹理集（摘录）。注意违反日内瓦公约。

地图
我想至少包括 Quake 中著名的 e1m1 关卡（第 1 集，地图 1）。动态生成关卡不仅对 3D 游戏来说非常困难，而且也不会让我达到这个目标。这意味着真实的地图数据必须存储在某个地方。

将所有几何体减少到轴对齐的块被证明是非常有效的。诚然，缺少的斜坡和缺少的细节让游戏看起来更像 Minecraft 而不是原始的 Quake，但这是绝对必要的牺牲。仅使用轴对齐的块不仅减少了所需的数据，而且使碰撞检测变得非常简单。

这些地图是使用出色的 TrenchBroom 关卡编辑器构建的。以前曾与各种风格的有点笨重的 Radiant 编辑器合作过，我对 TrenchBroom 说的再好不过了。真的，真的很好。为 Q1K3 构建地图是整个项目中最有趣的部分。

TrenchBroom Q1K3 E1M1 TrenchBroom Q1K3第一关截图

TrenchBroom 以 .map 格式保存关卡；它是当时所有 Quake Engine 游戏的事实标准。 .map 文件包含

“画笔”列表，其中每个画笔都是凸面对象。但是，画笔的几何形状不是由每个角的位置定义的，而是由延伸到无穷大的平面列表定义的。每个平面将（概念上）无限大的空间细分为内外两半。有了四个或更多这些细分，您最终会得到内部所有的其余部分：刷子。这也解释了为什么所有画笔都需要根据定义是凸的。

从历史上看，这种 .map 文

件格式被选择用于制作各种计算机