Expert knowledge of Godot's UI system including Control nodes, themes, styling, responsive layouts, and common UI patterns for menus, HUDs, inventories, and dialogue systems. Use when working with Godot UI/menu creation or styling.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.
Expert knowledge of Godot's UI system including Control nodes, themes, styling, responsive layouts, and common UI patterns for menus, HUDs, inventories, and dialogue systems. Use when working with Godot UI/menu creation or styling.
# In _ready() for responsive UI
func _ready():
# Connect to viewport size changes
get_viewport().size_changed.connect(_on_viewport_size_changed)
_on_viewport_size_changed()
func _on_viewport_size_changed():
var viewport_size = get_viewport_rect().size
# Adjust UI based on aspect ratio or screen size
if viewport_size.x / viewport_size.y < 1.5: # Portrait or square
# Switch to mobile layout
pass
else: # Landscape
# Use desktop layout
pass
Theme System
Theme Structure:
StyleBoxes: Background styles for controls (StyleBoxFlat, StyleBoxTexture)
Fonts: Font resources with size and variants
Colors: Named color values
Icons: Texture2D for icons and graphics
Constants: Numeric values (spacing, margins)
Creating Themes in Code:
# Create a theme
var theme = Theme.new()
# StyleBox for buttons
var style_normal = StyleBoxFlat.new()
style_normal.bg_color = Color(0.2, 0.2, 0.2)
style_normal.corner_radius_top_left = 5
style_normal.corner_radius_top_right = 5
style_normal.corner_radius_bottom_left = 5
style_normal.corner_radius_bottom_right = 5
style_normal.content_margin_left = 10
style_normal.content_margin_right = 10
style_normal.content_margin_top = 5
style_normal.content_margin_bottom = 5
var style_hover = StyleBoxFlat.new()
style_hover.bg_color = Color(0.3, 0.3, 0.3)
# ... same corner radius and margins
var style_pressed = StyleBoxFlat.new()
style_pressed.bg_color = Color(0.15, 0.15, 0.15)
# ... same corner radius and margins
theme.set_stylebox("normal", "Button", style_normal)
theme.set_stylebox("hover", "Button", style_hover)
theme.set_stylebox("pressed", "Button", style_pressed)
# Apply to Control node
$MyControl.theme = theme
Theme Resources:
Best practice: Create .tres theme files and save them in resources/themes/
@onready var start_button = $VBoxContainer/StartButton
func _ready():
# Connect button signals
start_button.pressed.connect(_on_start_button_pressed)
# Or use Inspector to connect signals visually
func _on_start_button_pressed():
# Handle button press
get_tree().change_scene_to_file("res://scenes/main_game.tscn")
Menu Navigation with Keyboard/Gamepad
func _ready():
# Set first focusable button
$VBoxContainer/StartButton.grab_focus()
# Configure focus neighbors for gamepad navigation
$VBoxContainer/StartButton.focus_neighbor_bottom = $VBoxContainer/SettingsButton.get_path()
$VBoxContainer/SettingsButton.focus_neighbor_top = $VBoxContainer/StartButton.get_path()
$VBoxContainer/SettingsButton.focus_neighbor_bottom = $VBoxContainer/QuitButton.get_path()
Animated Transitions
# Fade in menu
func show_menu():
modulate.a = 0
visible = true
var tween = create_tween()
tween.tween_property(self, "modulate:a", 1.0, 0.3)
# Fade out menu
func hide_menu():
var tween = create_tween()
tween.tween_property(self, "modulate:a", 0.0, 0.3)
tween.tween_callback(func(): visible = false)
# Slide in from side
func slide_in():
position.x = -get_viewport_rect().size.x
visible = true
var tween = create_tween()
tween.set_trans(Tween.TRANS_QUAD)
tween.set_ease(Tween.EASE_OUT)
tween.tween_property(self, "position:x", 0, 0.5)
Dynamic Lists
# Populate ItemList dynamically
@onready var item_list = $ItemList
func populate_list(items: Array):
item_list.clear()
for item in items:
item_list.add_item(item.name, item.icon)
item_list.set_item_metadata(item_list.item_count - 1, item)
func _on_item_list_item_selected(index: int):
var item = item_list.get_item_metadata(index)
# Do something with selected item
Health Bar Updates
@onready var health_bar = $HealthBar
var current_health = 100
var max_health = 100
func _ready():
health_bar.max_value = max_health
health_bar.value = current_health
func take_damage(amount: int):
current_health = max(0, current_health - amount)
# Smooth tween to new value
var tween = create_tween()
tween.tween_property(health_bar, "value", current_health, 0.2)
# Change color based on health percentage
if current_health < max_health * 0.3:
health_bar.modulate = Color.RED
elif current_health < max_health * 0.6:
health_bar.modulate = Color.YELLOW
else:
health_bar.modulate = Color.GREEN
Modal Popups
@onready var popup = $Popup
func show_confirmation(message: String, on_confirm: Callable):
$Popup/VBoxContainer/Label.text = message
popup.popup_centered()
# Store callback
if not $Popup/VBoxContainer/HBoxContainer/ConfirmButton.pressed.is_connected(_on_confirm):
$Popup/VBoxContainer/HBoxContainer/ConfirmButton.pressed.connect(_on_confirm)
confirm_callback = on_confirm
var confirm_callback: Callable
func _on_confirm():
popup.hide()
if confirm_callback:
confirm_callback.call()
UI Performance Optimization
Best Practices:
Use CanvasLayers for depth management instead of z_index when possible
Clip content in ScrollContainers with clip_contents = true
Limit RichTextLabel complexity - BBCode parsing can be slow
Pool UI elements - Reuse nodes instead of creating/destroying
Use TextureAtlas for UI sprites to reduce draw calls
Batch similar elements under same parent
Disable processing when UI is hidden: process_mode = PROCESS_MODE_DISABLED
Use Control.clip_contents to prevent rendering off-screen elements
Memory Management:
# Free unused UI scenes
func close_menu():
queue_free() # Instead of just hiding
# Object pooling for frequently created UI
var button_pool = []
const MAX_POOL_SIZE = 20
func get_pooled_button():
if button_pool.is_empty():
return Button.new()
return button_pool.pop_back()
func return_to_pool(button: Button):
if button_pool.size() < MAX_POOL_SIZE:
button.get_parent().remove_child(button)
button_pool.append(button)
else:
button.queue_free()
Accessibility Features
Text Scaling:
# Support text size preferences
func apply_text_scale(scale: float):
for label in get_tree().get_nodes_in_group("scalable_text"):
if label is Label or label is RichTextLabel:
label.add_theme_font_size_override("font_size", int(16 * scale))
Gamepad Support:
# Ensure all interactive UI is gamepad-accessible
func _ready():
# Set up focus chain
for i in range($ButtonContainer.get_child_count() - 1):
var current = $ButtonContainer.get_child(i)
var next = $ButtonContainer.get_child(i + 1)
current.focus_neighbor_bottom = next.get_path()
next.focus_neighbor_top = current.get_path()
# Grab focus on first button
if $ButtonContainer.get_child_count() > 0:
$ButtonContainer.get_child(0).grab_focus()
MCP Tool Usage
When creating UI elements, you should:
Use mcp__godot__create_scene to create new UI scene files
Use mcp__godot__add_node to build Control node hierarchies
Use mcp__godot__save_scene to save after creating UI structure
Use Edit/Write tools to create associated GDScript files for UI logic
Use mcp__godot__load_sprite to import UI textures and icons
