Home › Kategorie 07

🖥️ GUI-System

INTERMEDIATE ⏱ ~40 Min

GUI-Überblick

Arcades GUI-System basiert auf UIManager und einer Vielzahl von Widgets. Es ist ereignisgesteuert und unterstützt Layouts, Styling und Controller-Input.

UIManager

Zentrale Verwaltungsklasse. Muss einmal pro View erstellt werden, verarbeitet alle Events.

Widgets

UIFlatButton, UILabel, UIInputText, UISlider, UICheckBox, UIDropdown und mehr.

Layouts

UIBoxLayout (horizontal/vertikal), UIGridLayout, UIAnchorLayout für flexible Anordnung.

Styling

Farben, Fonts, Border-Radius individuell pro Widget konfigurierbar.

WidgetBeschreibung
UIFlatButtonEinfacher Klick-Button (empfohlen)
UITextureButtonButton mit benutzerdefinierter Textur
UILabelText-Anzeige
UIInputTextTexteingabe-Feld
UISliderSchieberegler
UICheckBoxCheckbox / Toggle
UIDropdownAuswahlmenü
UIScrollableLayoutScrollbarer Bereich
UITextAreaMehrzeiliges Text-Feld
UIProgressBarFortschrittsbalken (eigenes Widget)
Arcade GUI Live-Vorschau – Klicke die Widgets

Simuliert echte Arcade UIManager-Widgets: Button, Label, Input, Slider, Checkbox

UIManager einrichten

PYTHON – UIManager Grundstruktur
import arcade
import arcade.gui

class MenuView(arcade.View):
    def __init__(self):
        super().__init__()

        # UIManager erstellen (einmal pro View)
        self.manager = arcade.gui.UIManager()
        self.manager.enable()

        # Hintergrundfarbe
        arcade.set_background_color(arcade.color.DARK_BLUE_GRAY)

        # GUI aufbauen
        self.setup_ui()

    def setup_ui(self):
        # Vertikales Layout für Buttons
        v_box = arcade.gui.UIBoxLayout()

        # Start-Button
        start_button = arcade.gui.UIFlatButton(
            text="Spiel starten",
            width=200
        )

        # Event-Handler registrieren
        @start_button.event("on_click")
        def on_click_start(event):
            game_view = GameView()
            game_view.setup()
            self.window.show_view(game_view)

        v_box.add(start_button.with_space_around(bottom=20))

        # Optionen-Button
        options_button = arcade.gui.UIFlatButton(text="Optionen", width=200)
        v_box.add(options_button.with_space_around(bottom=20))

        # Layout zentriert auf dem Bildschirm
        self.manager.add(
            arcade.gui.UIAnchorWidget(
                anchor_x="center_x",
                anchor_y="center_y",
                child=v_box
            )
        )

    def on_draw(self):
        self.clear()
        self.manager.draw()

    def on_hide_view(self):
        # Manager deaktivieren wenn View versteckt wird
        self.manager.disable()

Widgets im Detail

PYTHON – UISlider
# Lautstärke-Slider
volume_slider = arcade.gui.UISlider(
    value=50,     # Startwert
    min_value=0,
    max_value=100,
    width=200
)

@volume_slider.event()
def on_change(event):
    new_volume = event.new_value / 100
    self.music_player.volume = new_volume
    print(f"Lautstärke: {event.new_value}%")

v_box.add(arcade.gui.UILabel(text="Lautstärke"))
v_box.add(volume_slider)
PYTHON – UIInputText
# Spielername eingeben
name_input = arcade.gui.UIInputText(
    text="Spieler1",
    width=200,
    height=40
)

# Enter-Button daneben
confirm_btn = arcade.gui.UIFlatButton(text="OK", width=60)

@confirm_btn.event("on_click")
def on_confirm(event):
    player_name = name_input.text
    print(f"Name: {player_name}")

# Horizontal nebeneinander
h_box = arcade.gui.UIBoxLayout(vertical=False)
h_box.add(name_input)
h_box.add(confirm_btn.with_space_around(left=10))
PYTHON – UICheckBox
# Vollbild-Option
fullscreen_checkbox = arcade.gui.UICheckBox()

label = arcade.gui.UILabel(text="Vollbild")

@fullscreen_checkbox.event("on_change")
def toggle_fullscreen(event):
    self.window.set_fullscreen(event.value)

# Label + Checkbox horizontal
row = arcade.gui.UIBoxLayout(vertical=False, space_between=10)
row.add(fullscreen_checkbox)
row.add(label)
PYTHON – UIDropdown
# Schwierigkeitsgrad wählen
difficulty_dropdown = arcade.gui.UIDropdown(
    options=["Leicht", "Mittel", "Schwer", "Unmöglich"],
    default="Mittel",
    width=200
)

@difficulty_dropdown.event("on_change")
def on_difficulty_change(event):
    difficulty = event.new_value
    print(f"Schwierigkeit: {difficulty}")

Layouts

PYTHON – Layout-Typen
# 1. Vertikales Box-Layout (Standard)
v_box = arcade.gui.UIBoxLayout(
    vertical=True,       # Übereinander
    space_between=10    # Abstand zwischen Elementen
)

# 2. Horizontales Box-Layout
h_box = arcade.gui.UIBoxLayout(
    vertical=False,      # Nebeneinander
    space_between=5
)

# 3. Grid-Layout
grid = arcade.gui.UIGridLayout(
    column_count=3,
    row_count=2,
    horizontal_spacing=10,
    vertical_spacing=10
)
grid.add(button, column=0, row=0)
grid.add(label, column=1, row=0)

# 4. Anchor-Layout (für Positionierung)
anchor = arcade.gui.UIAnchorLayout()
anchor.add(child=button, anchor_x="right", anchor_y="bottom")

# In UIManager hinzufügen
self.manager.add(
    arcade.gui.UIAnchorWidget(
        anchor_x="center_x",
        anchor_y="center_y",
        child=v_box
    )
)

GUI-Styling

PYTHON – Button Styling
# Benutzerdefinierter Button-Style
custom_style = {
    "normal": {
        "bg_color": (21, 19, 21),
        "border_color": (0, 245, 255),
        "border_width": 2,
        "font_color": (0, 245, 255),
        "font_size": 14,
    },
    "hover": {
        "bg_color": (0, 245, 255),
        "border_color": (0, 245, 255),
        "font_color": (0, 0, 0),
    },
    "press": {
        "bg_color": (0, 180, 200),
    },
}

styled_button = arcade.gui.UIFlatButton(
    text="STYLED BUTTON",
    width=200,
    style=custom_style
)
◀ ZURÜCK 📷 Kamera & Views WEITER ▶ 🔬 Advanced Topics