五分钟做一个简单的响应式Godot GUI

Godot 五分钟做一个简单的响应式Godot GUI

做一个如下图所示的简单响应式GUI：

分解UI模型

我要做的最终GUI画面使这样的：

当在图纸上构思好自己的界面时，下一步要做的就是如何做出来？首先要分析该如何组成，该用什么容器组织。以上图为例：
整个界面上下左右都留白，第一想到的就是MarginContainer.利用Custom Constants或者Margin使UI距离屏幕边缘有一定距离。

插画在右侧，标志和菜单按钮，版本号在左侧，可以利用HBoxContainer并排它们。然后在右侧在添加个CenterContainer，使插画居中。

左侧的菜单按钮,logo,版本号垂直排列，可以用VBoxContainer纵向排列它们。而菜单按钮位于版本号和logo中间，可以使用VBoxContainer包含它们，然后将Alignment(对齐)更改为center。然后在垂直方向展开，已占用最大地方。这样即使屏幕压扁，菜单按钮还是会在中间，而logo和版本还是会分别在顶部和底部。

开始制作

新建场景，添加MarginContainer，命名为Mainmenu.

设置内边距，让内部元素与边框保持一定距离。

添加HBoxContainer，使插画和logo,菜单按钮，版本号横向排列。再将VBoxContainer和CenterContainer添加为HBoxContainer子节点。CenterContainer存放插画，VBoxContainer存放logo,菜单按钮，版本号，使它们纵向排列。

VBoxContainer添加5个TextureRect，把对应的图片拖放到Texture，并重命名。CenterContainer添加一个TextureRect并重命名，把插画拖到Texture属性。

此时如下图：

为了菜单按钮上下留白，再添加一个VBoxContainer，把菜单按钮包含再其中。

设置VBoxContainer的Size Flags，垂直方向展开以占用更多空间。

Alignment（对齐）属性为居中

此时：

这样就做完了，试试运行一下，并改变窗口大小。

项目下载：响应式GUI