SuperAPI AI 工具集

ui-containers

设计与创作

查看项目

更新于 10-16 22:43

技能介绍

用途

ui-containers 是一套面向 Godot 引擎的 UI 布局技能,用于指导使用容器节点(Container)构建响应式界面。它把容器自动布局、尺寸标志(size_flags)、锚点(anchors)和分割比例等要点整理为可复用的规则与示例代码,帮助开发者在窗口缩放、多分辨率适配等场景下保持 UI 结构稳定。

主要能力

  • 覆盖常用容器节点:HBoxContainer、VBoxContainer、GridContainer、MarginContainer、ScrollContainer。
  • 提供两个脚本:
    • responsive_layout_builder.gd:带有基于断点的响应式布局能力的容器构建器。
    • responsive_grid.gd:可自动调整列数的 GridContainer,根据可用宽度改变列数,适用于响应式背包界面与窗口缩放场景。
  • 总结容器使用中的常见反模式(NEVER 清单),并给出修正方向。

使用方式

资料中以代码片段展示具体用法,例如:

VBoxContainer 示例:自动垂直堆叠子节点(如 Play、Settings、Quit 按钮),并通过 add_theme_constant_override("separation", 10) 设置项间距。

响应式布局:在 _ready() 中通过 set_anchors_preset(Control.PRESET_FULL_RECT) 让 MarginContainer 填满父节点,并用 add_theme_constant_override 设置 margin_left、margin_right 等边距。

SizeFlags:通过 button.size_flags_horizontal = Control.SIZE_EXPAND_FILL、button.size_flags_vertical = Control.SIZE_SHRINK_CENTER 控制子节点在容器中的扩展方式。

参考链接为 Godot 官方文档的 GUI Containers 章节。

适用场景

  • 需要随窗口尺寸变化自适应的游戏 UI 布局。
  • 响应式背包、物品栏等网格界面。
  • 使用 Godot Control 节点体系搭建菜单、列表、带滚动区域的面板等。

限制与注意事项

资料中的 NEVER 清单指出以下限制:

  • 不要在容器内手动设置子节点的 position/size,容器会在布局时覆盖它(如 HBoxContainer 中设置 child.position = Vector2(10, 10) 无效),应改用 custom_minimum_size 或边距。
  • 不要忘记为需要扩展的子节点设置 size_flags,默认是 SHRINK;若要在 VBoxContainer 中填充,应设置 size_flags_vertical = SIZE_EXPAND_FILL。
  • 不要在不设置 columns 的情况下使用 GridContainer,默认 columns = 1 会变成垂直列表,应始终设置 columns。
  • 不要嵌套过多容器(例如 HBox 套 VBox 再套 HBox 达 10 层),会增加重排开销并难以调试,应扁平化或使用带自定义布局的 Control。
  • 不要跳过 separation 覆盖,默认 4px 间距会显得拥挤,应通过 add_theme_constant_override("separation", value) 调整。
  • 不要在缺少最小尺寸的情况下使用 ScrollContainer,否则会无限扩展而无法滚动,应设置 custom_minimum_size 或使用锚点。

其他信息(如是否收费、价格、平台支持范围等)暂未提供。