乐高风格的分屏相机在戈多

Question

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

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

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

源代码可以在这里找到。

Answer 1

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

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

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

我不确定如何做边界。

若要进行拆分联接，您可能需要按边框的粗细移动控件形状，然后在摄像机彼此靠近时缩小该边框。使用玩家之间的距离来计算边框宽度。

分割边框也是两个玩家之间的一定角度，因此在对形状进行动画处理时，您需要使用该角度。这将使视口的连接看起来更顺畅。

控制代码：

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