前言
UI相关的组件都在Control组件下
绘制具体的UI时,可以组合使用这些节点,通常的做法是:
- 在一个CanvasLayer节点中放置UI节点,作为一个独立的UI层
- 使用MarginContainer、GridContainer等布局容器组织UI节点
- 通过代码或UI节点的信号与属性关联,实现交互功能
- 利用Anchor和Pivot使UI节点自适应不同分辨率
- 使用Control中的主题及样式功能调整外观
- 导出为场景文件以便重复使用UI
通过合理运用这些UI节点,可以快速构建出功能丰富、交互友好的UI系统。
Godot中主要通过Control节点及其派生节点来绘制各种UI组件,常用的几个节点包括:
基本组件
- Control:所有UI节点的基类节点
- TextureRect:用于绘制图片的节点
- ColorRect:用于绘制颜色块的节点
- Label:用于绘制文本的节点
- Button:按钮节点,可以检测点击事件
- LineEdit:输入框节点,可以获取和设置文本
- CheckBox:复选框节点
- Slider:滑块节点
- MenuButton:菜单按钮节点
容器节点
- ScrollContainer:可滚动容器节点
- Panel:面板节点,用于包含一组控件
- MarginContainer:提供外边距的容器节点
- GridContainer:网格布局的容器节点
- TabContainer:标签页容器节点
CanvasLayer
CanvasLayer在Godot中主要用于UI元素的绘制。
它有以下几个主要作用:
- 提供一个独立的绘制层用于UI元素
CanvasLayer是一个独立的Control节点,它 allows你在一个独立的绘制层上绘制UI控件,不会与场景中其他Spatial节点混合在一起,这样可以保证UI元素总是绘制在场景内容的上层。 - 简化UI元素的绘制顺序管理
CanvasLayer中的节点默认会根据节点树的顺序绘制,后面的节点会绘制在前面节点的上层。这简化了UI元素的绘制顺序管理。不需要CanvasLayer,你需要手动管理控件的draw order。 - 提供一个不受摄像机影响的绘制层
CanvasLayer绘制的内容不会受到场景中摄像机的位置、缩放等变换的影响,这样可以保证UI内容始终按照设定的位置和大小绘制在屏幕上。 - 优化UI元素的渲染性能
CanvasLayer有独立的视锥体剪裁设置,可以避免对UI内容做不必要的渲染从而提升性能。 - 简化UI适配不同分辨率
通过Anchor和Margin设置,CanvasLayer中的控件可以轻松实现响应不同分辨率的自适应缩放和定位。
所以总结来说,CanvasLayer为Godot中的UI系统提供了独立的绘制层和坐标系统,可以更简单方便地管理UI元素的绘制和布局。对于UI开发来说是非常重要的功能。
注意
CanvasLayer一般作为其他UI相关组件的容器。
后添加的组件并不在上层显示要通过设置层级进行显示。
如图
内部布局设置
假如我们要设置整体背景
组件的层级如下
ColorRect设置如下
这样该组件就会和窗口同样大小了。