用Game Maker Studio 2创建纸张行为

大家好，

我正在创建 False Echo 游戏时意外发现了使用表面创建纸张行为的方法。在这里我会尝试写出并展示我是如何做到的，希望这可以帮助到大家解决自己的问题。

目标

我要为玩家提供一个纸张区域，玩家或机器人可以在上面输入内容。我的灵感来自于Papers Please游戏。

在正常情况下，我会创建一个简单的表面，覆盖背景图和玩家输入的内容。但是，后来我想让纸张有一些动画效果。

首次尝试
我有两个选择：使用可绘制平面（spritesheet）的动画效果或利用序列（Sequences）。由于我对新版的GMS2不熟悉，所以我选择了可绘制平面。但结果并不是那么令人满意的。

旧的“揭露”动画效果

即使我能够让这看起来不错，图表也会非常大，而且我无法解决一个问题：如何让这看起来像是在纸张上写字或印字：

写字在纸张上，撕裂纸张

表面救援

我想在纸张上写字或印字，让它看起来像纸张一样柔软和弯曲。唯一的方法是使用表面并在上面直接绘制。

表面是游戏引擎中一个非常强大的工具。你可以调节许多参数并定义大量元素。但是创造表面是易事（几行代码），但利用其功能是另一回事。

三角形

这时我发现了 pr_trianglestrip 的强大工具。基本上，任何 3D 模型都是由三角形组成的。但我以为本游戏引擎是2D引擎，3D不太适合本游戏。然而，trianglestrip 提供了希望：如果我可以把纸张分成“网格”或三角形，我就可以做出矩形（一个矩形由两个三角形组成）。如果我能分出三角形，我就可以操纵顶点。所以我做了那样的事：

纸张的初始顶点和网格

我取了一个平面图像，计算了宽度和高度，创建了一个“网格”然后绘制内容到纸张上：

纸张前面的部分代码（https://preview.redd.it/3dwe0dwrudvg1.png?width=667&format=png&auto=webp&s=a76ca6a3bd62154efbc4bc953f6f626969fc97a4）

最棒的部分是你可以将你的表面视为输入并将其注入到三角形中，绘制它就像任何普通的图像一样。你可以设置如下流程：

  • 创建表面
  • 在表面上绘制内容
  • 创建三角形
  • 将表面作为顶点纹理

即使你可以改变表面时重新绘制整个内容，这也解决了一个问题。第二个问题更加棘手に，需要在鼠标跟随的同时让纸张保持完整，就像纸张一样弯曲。

为了让纸张可以随鼠标移动，弯曲，甚至翻转，我创建了一个折痕数据库，记录着折痕信息，当纸张稳定时，鼠标移动到折痕位置时，移动每个折痕的位置。

纸张的顶点位置和鼠标相对位置

我使用了技术艺术来解决：先让其美观，然后再转变为公式。

之后我开始在物体本身内发送信息（我在FSM中处理物体的行为，如当纸张稳定时，鼠标移动到纸张时等）当纸张跟随鼠标并移动顶点时。我在每个顶点上添加了编号（iNumber）。

由于我不是顶尖开发者，且不喜欢数学，更不喜欢三角学，所有我使用了 Tech Art：先让其美观，再在本体中转变为公式。

但当我这样做时，结果并不美观：
我做了一个超长纸张：
这就是一个过长的纸张

当没有任何限制时，这就是后果：
无限制的纸张

当有很大的限制时，这就是结果：
很硬的纸张

尽管如此，我还是成功的将纸张的随鼠标移动做的很流畅了。之后我只需指定纸张某一部分折皱的方向即可完成翻转。

纸张的翻转动画

这样我完成了纸张的跟随，弯曲，翻转的动画效果了。

总结

用表面创建-利用三角形-渲染顶点-顶点弯曲的过程解决了问题。结果一个“假装”3D的纸张，实际上就是一个三角形和表面的组合。

如果你尝试这种方案，注意：

1.性能考虑：在不使用时要清除和释放表面。

2.避免问题：将表面创建分至一个物体，表面操作分至一个物体。这样可以帮助你解决问题，并使你的代码更易于重用和修复。

3.可视化：这是关键。使用红色、绿色和蓝色点以及名称的顶点来调试你的功能。

4.将公式转移到另一个类：Step事件变大了，我不得不抽象出了部分代码并放入单独的脚本中。最终有数十个脚本，它们也得到了其他对象的采用。

5.有助于调试的快捷键：我设定了F9来开关调试，然后左上和右上键来移动三角形，数字键1-9来选择指数。

感谢各位，你们的鼓励给了我新的灵感。