Godot viewpoint(视口)


viewport

  • Godot viewpoint(视口)
  • 2D分屏
  • 布局viewport
  • 添加摄像机
  • 添加代码
  • 添加小地图


2D分屏

布局viewport

viewport是显示游戏画面的地方。
将viewport视为投屏的屏幕,将摄像机摄影的画面投上屏幕显示。
一个viewport可以有多个摄像机,但只能设置一个为“当前”相机。

viewport没有位置信息(它不从spatial或canvasItem继承)。
viewportContainer,一个Control节点,类似于HboxContainer,VBoxContainer容器。用于容纳一个viewport,viewport可以依赖于viewportContainer自动设置大小,也可以手动设置大小。

box2d 开发桌球 2d桌球如何全屏_viewport


这里我用一个HboxContainer,包含两个viewportContainer,使他们并排显示。

box2d 开发桌球 2d桌球如何全屏_viewport_02


如何做到呢?1.选择viewport节点,然后点击“布局”---->“整个矩形”,填充整个屏幕。

box2d 开发桌球 2d桌球如何全屏_viewport_03


2.选择viewportContainer1,在属性检查器勾选红色圈圈部分。viewportContained做同样的操作。

box2d 开发桌球 2d桌球如何全屏_box2d 开发桌球_04


这样屏幕就让两个容器瓜分了,让后添加viewport为viewportContainer1为其子节点,这样viewport的size属性将会自动设置,适配viewportContainer的大小了。当然也可以手动设置其size大小,下面在做小地图时会讲到。

你会想那些简单的项目没由看到viewport,也可以显示画面啊!
其实是因为我们的场景的根节点(通过get_node("/root")得到的那个节点)本身就是一个viewport,godot在游戏启动时会自动创建。

鉴于viewport渲染的画面取决于camera(或camera2D),那么简单的项目没有添加Camera,为什么能看到画面?
那是因为对于2D游戏来说,使用默认配置。2D编辑器中默认存在蓝色矩形充当摄像机。不过对于3D游戏来说Camera必须要有的,否则你看不到画面。

添加摄像机

为了让viewport显示任何画面,我们需要添加一个Camera2D.

box2d 开发桌球 2d桌球如何全屏_box2d 开发桌球_05


上图的World是要显示的场景,我们能它添加为viewport子节点。对于2D来说,viewport会显示添加到其中的任何2D节点。记住,camera2D应该✔ current 属性,这样viewport才能显示子节点摄像机的画面。

当我们运行场景时,会看不到任何东西,因为viewport没有任何“世界”可以渲染。

添加代码

viewport的world(3D)或world_2D属性表示了viewport环境源。他告诉摄像机要摄影的世界,而摄像机将摄影画面投上viewport,这样viewport将会呈现摄像机摄影的画面。
所以,在Node节点添加脚本:

extends Node

onready var viewport1 = $Viewports/ViewportContainer1/Viewport1
onready var viewport2 = $Viewports/ViewportContainer2/Viewport2
onready var camera1 = $Viewports/ViewportContainer1/Viewport1/Camera2D
onready var camera2 = $Viewports/ViewportContainer2/Viewport2/Camera2D
onready var world=$Viewports/ViewportContainer1/Viewport1/World

func _ready():
	viewport2.world_2d = viewport1.world_2d

场景树World在viewport实例化,这样运行场景时就可以看到World所呈现的世界。我想要viewport2也呈现这个世界,所以添加了viewport2.world_2d = viewport1.world_2d这代码。
现在应该两边都可以呈现相同的世界了,但是两个viewport显示相同画面,怎么才能显示不同的呢?
这时摄像机就起作用了,我要摄像机分别跟随着不同玩家走动,这样就可以显示它们各自画了。
在两个相机添加下面代码:

extends Camera2D
var target = null
func _physics_process(delta):
    if target:
        position = target.position

在Node节点_ready()继续添加:

func _ready():
    viewport2.world_2d = viewport1.world_2d
    camera1.target = world.get_node("Player_1")
    camera2.target = world.get_node("Player_2")

运行场景,这样就可以在两个屏幕分别呈现不同玩家的视角。

添加小地图

我想添加一个小地图,显示在屏幕底部,让玩家可以看到自己在场景中的位置,为此,我再添加一个viewportContainer,继续添加形成这样的结构:

box2d 开发桌球 2d桌球如何全屏_box2d 开发桌球_06

把viewport的大小手动设置为:320*200

box2d 开发桌球 2d桌球如何全屏_viewport_07


记住,把camera2D的当前属性勾选。然后选择viewponitContainer,在布局按钮选择:

box2d 开发桌球 2d桌球如何全屏_viewport_08


像这样,在我操作的时候出现了一些问题:

box2d 开发桌球 2d桌球如何全屏_box2d 开发桌球_09


正常情况时,viewportContainer的大小应该由子节点大小决定,现在viewport大小已经设置,但viewportContainer的大小没有适配大小,遇到这种情况,我是:

box2d 开发桌球 2d桌球如何全屏_viewport_10


先关闭显示,再打开,然后再重新布局。

把viewport的透明背景勾上,使其不显示黑边:

box2d 开发桌球 2d桌球如何全屏_viewport_11

camera2D节点的设置:

box2d 开发桌球 2d桌球如何全屏_视口_12

最后,为小地图添加代码,使其渲染同一个世界,在Node节点的_ready()继续添加:

$ViewportContainer/Viewport.world_2d=viewport1.world_2d

现在,运行场景,看起来不错!

box2d 开发桌球 2d桌球如何全屏_godot_13


练习资源下载,以提供基本的角色移动功能,只需关注屏幕分屏的实现: