SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsgodot-ui-designer

godot-ui-designer

Design & creation

View repository

Updated 10-15 22:13

About this skill

Godot UI Design Expert Skill

Important Note: All code examples in this skill are based on Godot 4.5 best practices, using GDScript syntax. Make sure to use it in a Godot 4.x environment, paying special attention to new features of Control nodes and the signal system.

Skill Overview

godot-ui-designer is an intelligent skill specifically for Godot game UI system development. It can automatically create a complete user interface system based on the user's natural language description, including the main menu, in-game HUD, settings interface, dialog boxes, responsive layouts, etc.

Core Features

📱 Responsive Layout System

  • Adaptive Layout: Supports different resolutions and screen ratios
  • Anchor System: Intelligent anchor positioning and layout management
  • Container Layout: GridContainer, HBoxContainer, VBoxContainer, etc.
  • Dynamic Adjustment: Runtime layout adjustment and adaptation

🎨 Visual Design System

  • Theme Management: Unified UI theme and style system
  • Animation Transitions: Smooth UI animations and transition effects
  • Particle Effects: UI special effects and visual feedback
  • Color Scheme: Coordinated color combinations and contrast

🎮 Game HUD Components

  • Status Display: Health bar, mana bar, experience bar, level display
  • Minimap System: Scalable minimap and marker system
  • Inventory: Draggable inventory and quick bar
  • Quest Information: Quest list, objective tracking, prompt information

📋 Menu System

  • Main Menu: Options such as game start, settings, exit
  • Pause Menu: Game pause, resume, restart, settings
  • Settings Interface: Graphics, audio, controls, gameplay settings
  • Character Selection: Character creation, selection, customization

How to Use

Create Game HUD

用户: "我需要一个像王者荣耀那样的游戏HUD，包含血条、蓝条、技能栏和地图"
系统: 自动实现：
- 顶部血条和蓝条显示
- 底部技能栏（4-6个技能）
- 右上角小地图系统
- 左上角角色信息和等级
- 击杀信息和连击提示

Design Main Menu

用户: "创建一个现代化的游戏主菜单，有背景动画和音效"
系统: 智能生成：
- 动态背景效果
- 渐显式菜单选项
- 悬停和点击动画
- 设置和关于对话框
- 背景音乐和音效集成

Settings Interface

用户: "做一个完整的设置界面，包含图形、音频、控制和游戏设置"
系统: 全面开发：
- 图形设置（分辨率、全屏、画质）
- 音频控制（主音量、音乐、音效）
- 控制配置（键位映射、手柄支持）
- 游戏性选项（难度、字幕、辅助功能）

Responsive Layout

用户: "确保UI在手机和平板上都能正常显示"
系统: 自动适配：
- 不同屏幕分辨率的布局调整
- 触控友好的按钮大小
- 平板模式的优化布局
- 横竖屏切换支持

Workflow

1. Requirements Analysis

# 分析UI需求
- 识别界面类型和功能
- 确定目标平台和屏幕尺寸
- 提取设计风格和交互要求

2. Architecture Design

# 设计UI架构
- 选择合适的Control节点类型
- 规划界面层次结构
- 设计数据绑定机制

3. Visual Design

# 创建视觉元素
- 设计配色方案和主题
- 创建图标和背景资源
- 配置字体和文字样式

4. Interaction Implementation

# 实现交互逻辑
- 添加按钮和事件处理
- 实现动画和过渡效果
- 配置输入和导航系统

MCP Tool Integration

UI Node Tools

  • create_node - Create UI nodes (Button, Label, Panel, etc.)
  • configure_node - Configure UI node properties
  • add_child_node - Add child UI nodes
  • style_node - Set UI node styles

Scene Management Tools

  • create_scene - Create UI scenes
  • instance_scene - Instantiate UI prefabs
  • save_scene - Save UI scenes
  • load_scene - Load UI scenes

Resource Management Tools

  • create_resource - Create UI resources (Theme, StyleBox, etc.)
  • import_asset - Import UI assets (icons, fonts, etc.)
  • configure_resource - Configure resource properties

Debugging and Testing Tools

  • play_scene - Test UI scenes
  • get_node_properties - Get UI node properties
  • set_node_property - Set UI node properties
  • simulate_input - Simulate user input testing

UI Component Library

Basic Components

# 智能按钮组件
class_name SmartButton extends Button
@export var hover_scale: float = 1.1
@export var click_sound: AudioStream
@export var animation_duration: float = 0.2

func _ready() -> void:
    mouse_entered.connect(_on_hover)
    pressed.connect(_on_pressed)

# 动态血条组件
class_name HealthBar extends ProgressBar
@export var animate_changes: bool = true
@export var animation_speed: float = 5.0
var target_health: float

func _process(delta: float) -> void:
    if animate_changes and value != target_health:
        value = move_toward(value, target_health, animation_speed * delta)

Advanced Components

# 小地图系统
class_name Minimap extends Control
@export var minimap_size: Vector2 = Vector2(200, 200)
@export var world_size: Vector2 = Vector2(1000, 1000)
var player_marker: TextureRect
var enemy_markers: Array[TextureRect]

func update_player_position(world_pos: Vector2) -> void:
    var minimap_pos = (world_pos / world_size) * minimap_size
    player_marker.position = minimap_pos

# 技能栏系统
class_name SkillBar extends HBoxContainer
@export var skill_count: int = 4
var skill_slots: Array[SkillSlot]

func _ready() -> void:
    for i in skill_count:
        var slot = SkillSlot.new()
        slot.skill_index = i
        add_child(slot)
        skill_slots.append(slot)

Layout System

Responsive Layout

# 自适应布局管理器
class_name ResponsiveLayout extends Control
@export var mobile_breakpoint: int = 768
@export var tablet_breakpoint: int = 1024

func _ready() -> void:
    get_tree().get_window().size_changed.connect(_on_screen_resized)
    _on_screen_resized()

func _on_screen_resized() -> void:
    var screen_size = DisplayServer.screen_get_size()
    var layout_type = _determine_layout_type(screen_size.x)
    _apply_layout(layout_type)

func _determine_layout_type(width: int) -> String:
    if width < mobile_breakpoint:
        return "mobile"
    elif width < tablet_breakpoint:
        return "tablet"
    else:
        return "desktop"

Dynamic Layout

# 动态网格布局
class_name DynamicGrid extends GridContainer
@export var min_columns: int = 2
@export var max_columns: int = 6
@export var item_size: Vector2 = Vector2(100, 100)

func _ready() -> void:
    custom_minimum_size = Vector2(min_columns * item_size.x, item_size.y)
    resize_children()

func resize_children() -> void:
    var available_width = size.x
    var columns = clamp(int(available_width / item_size.x), min_columns, max_columns)
    columns = columns

    for child in get_children():
        if child is Control:
            child.custom_minimum_size = item_size

Animation System

UI Animation Library

# UI动画管理器
class_name UIAnimationManager extends Node
var tween: Tween

func slide_in(node: Control, direction: Vector2, duration: float = 0.5) -> void:
    var start_pos = node.position - direction * 100
    var end_pos = node.position

    node.position = start_pos
    node.modulate.a = 0.0

    create_tween().parallel()\
        .tween_property(node, "position", end_pos, duration)\
        .set_trans(Tween.TRANS_CUBIC)\
        .set_ease(Tween.EASE_OUT)
    create_tween().parallel()\
        .tween_property(node, "modulate:a", 1.0, duration)

func bounce_effect(node: Control) -> void:
    var original_scale = node.scale
    create_tween().tween_property(node, "scale", original_scale * 1.2, 0.1)\
        .set_trans(Tween.TRANS_BACK)\
        .set_ease(Tween.EASE_OUT)
    create_tween().tween_property(node, "scale", original_scale, 0.2)\
        .set_trans(Tween.TRANS_BOUNCE)\
        .set_ease(Tween.EASE_OUT)

Theme System

Theme Management

# 主题管理器
class_name ThemeManager extends Node
@export var light_theme: Theme
@export var dark_theme: Theme
@export var current_theme: Theme

func _ready() -> void:
    apply_theme(current_theme)

func switch_theme(theme_name: String) -> void:
    match theme_name:
        "light":
            current_theme = light_theme
        "dark":
            current_theme = dark_theme
    apply_theme(current_theme)

func apply_theme(theme: Theme) -> void:
    # ✅ 正确：检查场景树是否存在和当前场景是否可用
    if get_tree() and get_tree().current_scene:
        var ui_root = get_tree().current_scene
        _apply_theme_recursive(ui_root, theme)
    else:
        push_warning("场景树未准备就绪，无法应用主题")

func _apply_theme_recursive(node: Node, theme: Theme) -> void:
    if node is Control:
        node.theme = theme

    for child in node.get_children():
        _apply_theme_recursive(child, theme)

Data Binding System

UI Data Binding

# 数据绑定管理器
class_name DataBindingManager extends Node
var bindings: Dictionary = {}

func bind_ui_element(ui_node: Control, data_source: Object, property: String) -> void:
    var binding = {
        "ui_node": ui_node,
        "data_source": data_source,
        "property": property
    }
    bindings[ui_node.get_instance_id()] = binding

    # 连接数据源变化信号
    if data_source.has_signal("changed"):
        data_source.changed.connect(_on_data_changed.bind(ui_node))

func _on_data_changed(ui_node: Control) -> void:
    var binding = bindings.get(ui_node.get_instance_id())
    if binding:
        var value = binding.data_source.get(binding.property)
        _update_ui_value(ui_node, value)

func _update_ui_value(ui_node: Control, value) -> void:
    if ui_node is Label:
        ui_node.text = str(value)
    elif ui_node is ProgressBar:
        ui_node.value = value
    elif ui_node is TextureProgressBar:
        ui_node.value = value

Smart Features

Automatic Adaptation

  • Screen Detection: Automatically detect screen size and aspect ratio
  • Layout Adjustment: Intelligently adjust UI layout and element sizes
  • Font Scaling: Dynamically adjust font size and spacing
  • Control Rearrangement: Automatically rearrange controls to fit the screen

User Experience Optimization

  • Response Time: Optimize UI response speed and smoothness
  • Accessibility: Support color blind mode and high contrast
  • Multilingual: Support multilingual text and localization
  • Gamepad Support: Complete gamepad navigation and support

Performance Optimization

  • Batch Rendering: Optimize UI rendering performance
  • Lazy Loading: Lazy loading and release of UI elements
  • Memory Management: Reasonable UI resource memory management
  • Frame Rate Optimization: Ensure UI does not affect game frame rate

Example Implementation

Complete Game HUD

# 游戏HUD主控制器
class_name GameHUD extends CanvasLayer
@onready var health_bar: ProgressBar = $TopPanel/HealthBar
@onready var mana_bar: ProgressBar = $TopPanel/ManaBar
@onready var level_label: Label = $TopPanel/LevelLabel
@onready var minimap: Minimap = $MinimapContainer/Minimap
@onready var skill_bar: SkillBar = $BottomPanel/SkillBar
@onready var kill_feed: VBoxContainer = $RightPanel/KillFeed

var player: Player

func _ready() -> void:
    # 连接玩家信号
    player.health_changed.connect(_on_health_changed)
    player.mana_changed.connect(_on_mana_changed)
    player.level_up.connect(_on_level_up)

func _on_health_changed(new_health: int, max_health: int) -> void:
    health_bar.max_value = max_health
    health_bar.value = new_health

    # 血量低时显示红色警告
    if new_health < max_health * 0.3:
        health_bar.modulate = Color.RED
        create_low_health_effect()

func _on_mana_changed(new_mana: int, max_mana: int) -> void:
    mana_bar.max_value = max_mana
    mana_bar.value = new_mana

func _on_level_up(new_level: int) -> void:
    level_label.text = "Lv. %d" % new_level
    create_level_up_effect()

Settings Interface System

# 设置界面控制器
class_name SettingsMenu extends Control
@onready var tab_container: TabContainer = $TabContainer
@onready var graphics_tab: Control = $TabContainer/Graphics
@onready var audio_tab: Control = $TabContainer/Audio
@onready var controls_tab: Control = $TabContainer/Controls

func _ready() -> void:
    _load_settings()
    _setup_controls()

func _load_settings() -> void:
    # 加载图形设置
    var resolution_option = graphics_tab.get_node("ResolutionOption")
    resolution_option.selected = _get_current_resolution_index()

    # 加载音频设置
    var master_slider = audio_tab.get_node("MasterVolume")
    master_slider.value = AudioServer.get_bus_volume_db(AudioServer.get_bus_index("Master"))

func _save_settings() -> void:
    # 保存图形设置
    var resolution_option = graphics_tab.get_node("ResolutionOption")
    var selected_resolution = resolution_option.get_item_text(resolution_option.selected)
    _apply_resolution(selected_resolution)

    # 保存音频设置
    var master_slider = audio_tab.get_node("MasterVolume")
    AudioServer.set_bus_volume_db(AudioServer.get_bus_index("Master"), master_slider.value)

Quality Assurance

Visual Quality

  • Design Consistency: Ensure unified UI style
  • Color Contrast: Meet accessibility standards
  • Font Readability: Clear font and size settings
  • Animation Smoothness: Smooth animation experience at 60FPS

Functional Completeness

  • Event Handling: Complete user input handling
  • Error Handling: Graceful error handling and recovery
  • Data Validation: Validation and filtering of input data
  • State Management: Correct UI state management

Performance Optimization

  • Rendering Optimization: Reduce draw calls and overdraw
  • Memory Optimization: Reasonable texture and resource management
  • Response Optimization: Fast UI response and feedback
  • Battery Optimization: Battery usage optimization for mobile devices

Usage Restrictions and Precautions

Design Limitations

  • Complexity Control: Ultra-complex UI needs to be implemented step by step
  • Performance Considerations: A large number of UI elements may affect performance
  • Platform Differences: Differences in UI specifications across platforms

Best Practices

  • User-Centered: Design centered on user experience
  • Iterative Testing: Frequent testing and feedback collection
  • Progressive Enhancement: Core functionality first, enhancements added later

Troubleshooting

Frequently Asked Questions

  1. Layout Disruption: Check anchor and container settings
  2. Animation Stuttering: Optimize animation performance and complexity
  3. Response Delay: Check event handling and binding
  4. Theme Failure: Verify theme resource paths

Debugging Tips

  • Use Godot's UI debugging tools
  • Check console warning messages
  • Monitor memory and performance metrics
  • Test display effects at different resolutions

Changelog

v1.0.0 (Current Version)

  • Basic UI component system
  • Responsive layout support
  • Theme management functionality
  • Animation system integration

Planned Features

  • Advanced animation effects
  • Visual UI editor
  • More UI component templates
  • Real-time collaborative design

Skill Status: ✅ Available Last Updated: 2025-11-09 Compatibility: Godot 4.5+ Dependencies: Godot MCP toolset + UI design knowledge