简单模式 7 公式/示例？

如何解决简单模式 7 公式/示例？

我最近发现了使用 Snes 模式 7 的伪 3d 效果，并想尝试在 Godot 引擎中复制它。我尝试在网上环顾四周，但所有内容要么以我无法理解的方式解释，要么以我不知道的编程语言进行解释。我还需要学习如何旋转区域，并将精灵作为角色或敌人放入，但我没有在这些上找到任何东西。有人可以解释这个公式，以及我如何实现它吗？

解决方法

好的，我想通了。我将解释两种设置。

在我们开始之前，让我解释一下我们将使用的着色器代码：

shader_type canvas_item;
uniform mat3 matrix;

void fragment()
{
    vec3 uv = matrix * vec3(UV,1.0);
    COLOR = texture(TEXTURE,uv.xy / uv.z);
}

这是一个 canvas_item 着色器，因此它旨在用于 2D。我们正在做的是将变换矩阵（作为 uniform 传递）应用于纹理坐标（UV）。我们将结果存储在 uv 变量中。我们将使用它来对使用此着色器的任何节点的纹理进行采样……但是我们需要使用 z 的 uv 来实现透视效果。为此，我们将 uv.xy 除以 uv.z。

但是，我想将它应用到纹理的中心。所以，让我在开头减去 0.5，然后在最后加上 0.5：

shader_type canvas_item;
uniform mat3 matrix;

void fragment()
{
    vec3 uv = matrix * vec3(UV - 0.5,(uv.xy / uv.z) + 0.5);
}

还有一件事。我不喜欢在极端值上我们看到反转的图像。因此，我会这样处理：

shader_type canvas_item;
uniform mat3 matrix;

void fragment()
{
    vec3 uv = matrix * vec3(UV - 0.5,1.0);
    if (uv.z < 0.0) discard;
    COLOR = texture(TEXTURE,(uv.xy / uv.z) + 0.5);
}

这里有一个给无分支爱好者的替代方案（不知道是不是更好）：

shader_type canvas_item;
uniform mat3 matrix;

void fragment()
{
    vec3 uv = matrix * vec3(UV - 0.5,(uv.xy / uv.z) + 0.5);
    COLOR.a *= sign(sign(uv.z) + 1.0);
}

此处的 sign(uv.z) 将是 -1.0、0.0 或 1.0。

然后 sign(uv.z) + 1.0 将是 0.0、1.0 或 2.0。

最后 sign(sign(uv.z) + 1.0) 将是 0.0 或 1.0（如果您愿意，可以改用 clamp(sign(uv.z),0.0,1.0)）。因此，COLOR.a *= sign(sign(uv.z) + 1.0) 在 0.0 为负的任何地方都将 alpha 乘以 uv.z。

注意：我在片段着色器中操作 UV 坐标而不是在顶点着色器中操作的原因是因为 Godot 正在为 2D 做仿射纹理映射。这会导致失真。这是一种解决方法。

第一个设置只是一个精灵。使用您想要的任何纹理设置 Sprite，并将材质设置为新的着色器材质，并在着色器中使用我在开始时显示的代码。

Godot 将为您提供编辑材料资源中 uniform mat3 matrix 下的 Shader Param 的选项。默认情况下，它将是单位矩阵，在编辑器中看起来像这样：

x 1  y 0  z 0
x 0  y 1  z 0
x 0  y 0  z 1

您可以使用它来应用旋转、缩放、剪切或透视变换。 *我建议从改变z列（最右边的）的零开始，控制透视：

x 1  y 0  z 3d_rotate_horizontal
x 0  y 1  z 3d_rotate_vertical
x 0  y 0  z scale

示例结果：

建议：不要使用一直延伸到边缘的纹理。当您应用透视时，着色器将读取超出边缘的内容，但默认它被钳制，这会导致拉伸纹理边缘的任何像素。

顺便说一句，如果您将图像导入为 Image（而不是默认的 Texture），您可以将 Sprite 纹理设置为 ImageTexture，这将为您提供一些额外的控制关于纹理的显示方式，包括启用 mipmap、抗锯齿过滤器以及在其边缘之外重复纹理（镜像和非镜像）。

第二个更复杂的设置是针对多个对象。这也是适用于 TileMap 的设置。您将需要这种树结构：

- Sprite2D
  +- Viewport
     +- Camera2D
     +- target

将 Sprite2D 放在我们想要看到的位置，使用我在开始时显示的着色器代码为其提供着色器材质。 顺便说一句，这也应该与 TextureRect 一起使用，以防您在 UI 中需要它。

不要为 Sprite2D（或 TextureRect）设置纹理。您将附加一个如下所示的脚本：

extends Sprite

func _ready():
    var viewport = $Viewport
    yield(get_tree(),"idle_frame")
    yield(get_tree(),"idle_frame")
    texture = viewport.get_texture()

如果需要，将 Sprite 更改为 TextureRect。

此代码引用 Viewport 节点，等待两帧（以确保 Viewport 纹理可用），然后获取纹理并将其分配给自身。

您需要为视口设置您想要的大小。另外我建议设置Transparent Bg和V Flip。 Camera2D 可以保留其默认值。

最后，“目标”是您想要显示的任何内容。它可以是一个或多个二维节点。我建议将其设为另一个场景，这样就可以轻松地独立于此设置对其进行编辑（Viewport 的任何子项在编辑器中都将不可见）。

示例结果：

是的，我们可以在 Godot 中使用实际 3D 存档相同的效果，没问题。但我们没有。我们选择使用 2D 工具实现这种效果并做其他事情，不是因为它们容易，而是因为它们很难。

此答案中使用的纹理属于公共领域 (CC0)，来自 Kenney。