godot - godot中的乐高风格分屏相机

Question

我想拥有具有无缝过渡的乐高风格分屏相机。

任何人都有创建这样的东西的经验吗？我想为第二个玩家创建一个普通相机，然后为第二个玩家创建一个默认情况下不可见的相机。然后，当我想展示它时，我会绘制一个三角形来分割屏幕并将其纹理设置为相机#2 视图。

我找到了这个 Unity 实现，但我无法在 Godot 中实现它。我已经设法用它自己的相机创建了第二个视口，但由于某种原因，第二个相机的视图没有显示任何内容。我认为问题在于第二个视口的世界与主视口不同。

源代码可以在这里找到。

Answer 1

我只是设置了一个玩具项目来测试它，结果它比预期的要简单。

这是该过程的概述，然后是代码示例。

1. 添加一个主摄像头
2. 还有一个带树的辅助相机：控制>视口>相机
3. 使用 draw_* api 用 Control 绘制分屏的形状
4. 向 Control 添加一个着色器，该着色器采用纹理并在 SCREEN_UV 处绘制它
5. 从视口获取视口纹理
6. 每帧将视口纹理传递给控制着色器。
7. 通过动画和重绘控制形状来动画分割。

我不知道如何做边界。

要进行拆分连接，您可能必须将 Control 形状移动边框的厚度，然后在相机相互靠近时缩小该边框。使用玩家之间的距离来计算边界宽度。

分割边界也在两个玩家之间形成一个角度，因此在为形状设置动画时，您需要使用该角度。这将使视口的连接看起来更平滑。

控制代码：

extends Control

func _draw():
    # in this case animate tl and bml to get the 
    # rotating split like effect in the lego game
    var tl = Vector2()
    var tr = rect_size
    tr.y = 0
    var br = rect_size
    var bml = rect_size
    bml.x /= 2.0
    draw_polygon([tl, tr, br, bml, tl], [Color(), Color(), Color(), Color(), Color()], [])

func _process(d):
    material.set_shader_param('viewport', $Viewport.get_texture())

着色器代码：

shader_type canvas_item;

uniform sampler2D viewport;

void fragment(){
    COLOR=texture(viewport, SCREEN_UV);
}

我希望这可以帮助您入门！

Answer 2

这是一个包含许多部分的复杂效果，因此请注意。

我发现最简单的方法是使用您的视口和相机创建一个单独的场景，这将是您的主要场景，然后在其下添加您的游戏场景，如下所示：

Spatial
    Viewport1
        Camera1
    Viewport2
        Camera2
    GameScene

然后，您应该能够ColorRect使用着色器材质制作一个并从每个视口发送纹理：

shader_type canvas_item;
render_mode unshaded, cull_disabled;

uniform sampler2D viewport1;
uniform sampler2D viewport2;

void fragment() {
    vec3 view1 = texture(viewport1, UV).rgb;
    vec3 view2 = texture(viewport2, UV).rgb;

    vec3 col = vec3(0);

    // mix them in a satisfying way depending on distance and angle between cameras
    // float mixVal = <your formula here>
    // col = mix(view1, view2, mixVal)

    COLOR = vec4(col, 0.0); // this may not work in Godot shaders
}

这是一个很好的入门指南： https ://docs.godotengine.org/en/3.1/tutorials/viewports/using_viewport_as_texture.html