UI Systemen Overzicht

User interface componenten en patterns.

UI Architectuur

┌─────────────────────────────────────────────────────────────────┐
│                         Game Scene                               │
│  ┌───────────────────────────────────────────────────────────┐  │
│  │                    CanvasLayer (UI)                        │  │
│  │  ┌─────────────────────────────────────────────────────┐  │  │
│  │  │                       HUD                            │  │  │
│  │  │  ┌─────────┐ ┌─────────┐ ┌─────────┐               │  │  │
│  │  │  │Resources│ │ Minimap │ │  Clock  │               │  │  │
│  │  │  └─────────┘ └─────────┘ └─────────┘               │  │  │
│  │  └─────────────────────────────────────────────────────┘  │  │
│  │                                                            │  │
│  │  ┌─────────────────────────────────────────────────────┐  │  │
│  │  │                    Menus                             │  │  │
│  │  │  ┌─────────┐ ┌─────────┐ ┌─────────┐               │  │  │
│  │  │  │Inventory│ │ Quests  │ │Settings │               │  │  │
│  │  │  └─────────┘ └─────────┘ └─────────┘               │  │  │
│  │  └─────────────────────────────────────────────────────┘  │  │
│  │                                                            │  │
│  │  ┌─────────────────────────────────────────────────────┐  │  │
│  │  │                   Dialogs                            │  │  │
│  │  │  ┌─────────┐ ┌─────────┐ ┌─────────┐               │  │  │
│  │  │  │  NPC    │ │ Confirm │ │  Alert  │               │  │  │
│  │  │  └─────────┘ └─────────┘ └─────────┘               │  │  │
│  │  └─────────────────────────────────────────────────────┘  │  │
│  └───────────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────────┘

UI Componenten

HUD Elementen

Component	Scene	Beschrijving
Resource HUD	ui/resource_hud.tscn	Valuta display
Quick Slots	ui/quick_slots.tscn	Item shortcuts
Mini Map	ui/minimap.tscn	Locatie overzicht
Clock	ui/clock.tscn	Game tijd

Menu's

Component	Scene	Beschrijving
Inventory	ui/inventory_panel.tscn	Items beheren
Quest Log	ui/quest_log.tscn	Quest voortgang
Map	ui/world_map.tscn	Grote kaart
Settings	ui/settings.tscn	Opties

Dialogs

Component	Scene	Beschrijving
NPC Dialog	ui/npc_dialog.tscn	NPC gesprekken
Confirm	ui/confirm_dialog.tscn	Bevestiging
Alert	ui/alert.tscn	Notificaties
Shop	ui/shop_dialog.tscn	Winkel interface

Design Principes

1. Consistente Styling

# Theme resource gebruiken
var theme = preload("res://assets/ui/theme.tres")

func _ready() -> void:
    # Apply theme to all UI
    theme_override()

2. Responsive Layout

# Anchors voor verschillende schermgroottes
func _setup_anchors() -> void:
    # Top-left voor HUD
    hud.anchor_left = 0
    hud.anchor_top = 0

    # Center voor modals
    modal.anchor_left = 0.5
    modal.anchor_right = 0.5
    modal.anchor_top = 0.5
    modal.anchor_bottom = 0.5

3. Touch-Friendly

# Minimum touch target size: 48x48 pixels
const MIN_TOUCH_SIZE = Vector2(48, 48)

func _validate_button_size(button: Control) -> void:
    if button.size.x < MIN_TOUCH_SIZE.x or button.size.y < MIN_TOUCH_SIZE.y:
        push_warning("Button too small for touch: " + button.name)

Common Patterns

Panel Animation

func show_panel(panel: Control) -> void:
    panel.visible = true
    panel.modulate.a = 0
    panel.scale = Vector2(0.9, 0.9)

    var tween = create_tween()
    tween.set_parallel(true)
    tween.tween_property(panel, "modulate:a", 1.0, 0.2)
    tween.tween_property(panel, "scale", Vector2.ONE, 0.2).set_ease(Tween.EASE_OUT)

func hide_panel(panel: Control) -> void:
    var tween = create_tween()
    tween.set_parallel(true)
    tween.tween_property(panel, "modulate:a", 0.0, 0.15)
    tween.tween_property(panel, "scale", Vector2(0.9, 0.9), 0.15)
    tween.chain().tween_callback(func(): panel.visible = false)

Button Effects

func setup_button(button: Button) -> void:
    button.mouse_entered.connect(func():
        var tween = create_tween()
        tween.tween_property(button, "scale", Vector2(1.05, 1.05), 0.1)
    )

    button.mouse_exited.connect(func():
        var tween = create_tween()
        tween.tween_property(button, "scale", Vector2.ONE, 0.1)
    )

Drag & Drop

# Voor inventory items
func _get_drag_data(at_position: Vector2) -> Variant:
    if item_data.is_empty():
        return null

    # Create preview
    var preview = TextureRect.new()
    preview.texture = item_icon.texture
    preview.custom_minimum_size = Vector2(48, 48)
    set_drag_preview(preview)

    return {
        "type": "inventory_item",
        "slot": slot_index,
        "container_id": container_id,
        "item": item_data
    }

func _can_drop_data(at_position: Vector2, data: Variant) -> bool:
    return data is Dictionary and data.get("type") == "inventory_item"

func _drop_data(at_position: Vector2, data: Variant) -> void:
    # Handle drop
    inventory_manager.move_item(
        data.container_id, data.slot,
        self.container_id, self.slot_index
    )

UI Scene Structuur

Standaard Layout

UIPanel (Control)
├── Background (NinePatchRect)
├── MarginContainer
│   └── VBoxContainer
│       ├── Header (HBoxContainer)
│       │   ├── Title (Label)
│       │   └── CloseButton
│       ├── Separator (HSeparator)
│       └── Content (varies)
└── ClickBlocker (Control, voor modal)

Theme Resources

Kleuren

# theme.tres colors
const COLORS = {
    "primary": Color("#5c8a4d"),      # Groen (natuur)
    "secondary": Color("#8b6b4d"),    # Bruin (hout)
    "accent": Color("#e6c86e"),       # Goud (highlight)
    "background": Color("#f5f0e6"),   # Crème (papier)
    "text": Color("#3d3d3d"),         # Donkergrijs
    "text_light": Color("#7a7a7a"),   # Lichtgrijs
}

Fonts

fonts/
├── main_font.ttf          # Body text
├── header_font.ttf        # Titels
└── pixel_font.ttf         # UI accents

Volgende Secties

• HUD
• Inventory
• Dialogen