Easy UI

Ein AI-natives, responsives UI-Toolkit für Unity, komplett auf UI Toolkit (UXML & USS) aufgebaut. Jeder Screen ist lesbarer Text – von Hand, im UI Builder oder per KI-Agent bearbeitbar. Diese Seite bringt dich in wenigen Minuten zum ersten Screen.

Installation

1. Easy UI aus dem Unity Asset Store importieren (Assets/EasyUI/).
2. Eine UI-Document-Komponente auf ein GameObject legen und ein PanelSettings-Asset zuweisen (oder das mitgelieferte nutzen).
3. Ein neues UXML-Dokument anlegen – oder direkt den Screen-Wizard einen kompletten Screen scaffolden lassen.

Die 5 Grundregeln

Easy UI ist bewusst regelbasiert – so bleibt UI konsistent, themebar und für KI-Agenten sicher editierbar. Diese fünf Regeln gelten immer:

1. Root-Klasse. Das oberste Element eines Screens trägt class="eui-root" (UXML) bzw. wird mit UI.Root() (C#) gebaut. Nur von dort kaskadieren die Design-Tokens.
2. Tokens statt Literale. Für Farbe, Abstand, Radius und Schriftgröße immer var(--eui-*)-Tokens nutzen – nie #hex oder feste Pixelwerte in Komponenten-Styles.
3. Klassen statt Inline-Styles. Über Komponentenklassen stylen (eui-btn, eui-panel, …). Inline-style="…" nur für einmaliges Layout (Flex, Ausrichtung), nie fürs Theming.
4. Komponenten-Tags verwenden. Namespace xmlns:eui="EasyUI" am UXML-Root ergänzen, dann <eui:EuiButton …/> schreiben. Enum-Werte als Member-Namen (z. B. variant="Primary").
5. Beide Wege synchron halten. Jede Komponente ist zweifach autorierbar – halte sie äquivalent (UXML und C#, siehe unten).

Dein erster Screen

Jede Komponente lässt sich in UXML oder in C# schreiben – die beiden Formen sind gleichwertig. Ein einfaches Hauptmenü:

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:eui="EasyUI">
  <ui:VisualElement class="eui-root">
    <eui:EuiPanel>
      <eui:EuiButton text="Spielen"  variant="Primary" />
      <eui:EuiButton text="Optionen" variant="Secondary" />
    </eui:EuiPanel>
  </ui:VisualElement>
</ui:UXML>

Dasselbe per Code, über die fluente UI.*-Fabrik:

var root = UI.Root()
    .Add(UI.Panel()
        .Add(UI.Button("Spielen", OnPlay).Variant(EuiButton.Variant.Primary))
        .Add(UI.Button("Optionen", OnOptions).Variant(EuiButton.Variant.Secondary)));

document.rootVisualElement.Add(root);

Komponenten

Easy UI bringt rund 39 themebare Komponenten mit – von allgemeinen Controls bis zu Game-UI-Bausteinen. Ein Auszug:

Themes

Alle Komponenten werden von einem Design-Token-Set gesteuert. Ein Theme ist damit nur eine Token-Datei – tausche sie aus und die komplette UI ändert ihr Aussehen. Ein eigenes Theme:

1. Themes/EasyUI.Tokens.uss duplizieren.
2. Den Selektor .eui-root behalten, die Werte anpassen.
3. Statt des Standard-Token-Stylesheets dein neues laden – kein Markup ändert sich.

Mitgeliefert sind mehrere fertige Themes (u. a. Retro, Neon, Pastel). Ein Live-Theme-Editor (Easy UI ▸ Theme Editor) erlaubt das Anpassen der Tokens mit Sofort-Vorschau und Export als .uss.

Screen-Wizard

Der Screen-Wizard scaffoldet komplette Screens über mehrere Screen-Typen und Genres – inklusive UXML, Controller und optionaler Szene. Headless aufrufbar:

# einen kompletten Screen generieren (Editor-Batchmode)
Unity -batchmode -executeMethod EasyUI.Editor.Wizard.EuiWizardCLI.Run \
  -eui-wizard-genre RPG \
  -eui-wizard-screens MainMenu,Settings \
  -eui-wizard-out Assets/UI/Generated

KI-Nutzung

Easy UI ist AI-nativ: Weil UI reiner Text ist, kann ein KI-Agent Screens direkt erstellen und bearbeiten. Zwei Dinge machen das sicher:

• Manifest als Vertrag – der Agent nutzt nur, was in easyui.manifest.json steht.
• Headless-Fähigkeiten – Render/Verify von UXML, Screen-Scaffolding und Controller-Generierung sind per -batchmode -executeMethod oder (bei offenem Editor) über Temp/EasyUI/*-request.json aufrufbar. Alles überlebt Domain-Reloads.

Kombiniert mit AI Forge kann der Agent seine UI danach per Screenshot selbst prüfen und korrigieren.