Game-UI Nine-Slice und skalierbare Panels: Figma-/PSD-Markierungen und Engine-Sliced-QA

Wenn ein Panel breiter gestreckt wird, bedeuten unscharfe Ecken, sich wiederholende Center-Textur oder ovale Ecken meist, dass Nine-Slice (9-Slice / Cap-Insets) beim Handoff nicht spezifiziert wurde oder die Engine Simple-Skalierung auf das gesamte Sprite anwendet. Das Justieren von Image Type und Rändern im Unity Editor kann einen Screen retten, aber der nächste Design-Drop überschreibt es – wenn Ränder nicht zur Export-Skalierung passen, entstehen Rework-Schleifen.

Die folgenden Beispiele konzentrieren sich auf Unity UGUI Image (Sliced / Tiled). Godot StyleBoxTexture und Cocos Sprite-Nine-Slice bilden dieselben Ideen ab, einschließlich Content-Padding. Anchors und Safe Area: Engine-+-MCP-Checkliste Punkt 6. Stretch-Region-Padding mit Locales: Locale-Overflow Design-Check 7.

Design-Handoff-Checkliste Punkt 6 verlangt klare Nine-Slice-/Stretch-Regionen. Dieser Beitrag behandelt wann geschnitten wird, Figma-/PSD-Markierungen, Drei-Engine-Abnahme und den Full-Screen-Canvas-Pfad sowie eine Fix-Tabelle.

Fail-Kriterien (eines davon = nicht bestanden): Corner-Art verformt sich beim Strecken; unbeabsichtigte Wiederholung oder Nähte in der Stretch-Region; Corner-Radius ändert sich mit der Panel-Größe; skalierbarer Hintergrund wird zusammen mit festen Icons/Avataren skaliert; Export-Skalierung passt nicht zu Engine-Rand-Pixeln (1px-Lücken oder weiche Kanten).

---

Wann Nine-Slice erforderlich ist vs. Hard-Stretch verboten

Asset-Typ	Tun	Nicht tun
Dialog-/Settings-Panel-BG	Nine-Slice + Content-Padding	Einzelnes Simple-Sprite full bleed
Input-/Bar-Container	Nine-Slice oder L/R-Cap + Center-Repeat	Höhe quetschen ohne Art-Regeln
Primäre Buttons (feste Größe)	Festes Sprite oder Nine-Slice + Mindestbreite	Unendlich breiter abgerundeter Button als ein Stretch
Icons, Avatare, Skill-Frames	Feste Größe, kein Nine-Slice	Mit Panel-BG zu einem Stretch-Bild verschmelzen
Full-Screen-BG (ohne gerahmte Box)	Vollbild oder Tile-Strategie im Spec	Panel-Ränder auf Full Bleed wiederverwenden

Regel: Wenn sich Breite oder Höhe mit Auflösung, Copy oder Listeninhalt ändert und Ecken ihre Form behalten müssen → Nine-Slice oder Engine-Äquivalent. Fixed-Size-Controls → festes Sprite + Layout-Constraints.

---

Figma-/PSD-Handoff-Markierungen (Checkliste)

#	Check	Pass-Standard
1	Stretch-Layer getrennt von Deko / Icons / Text	Panel-BG-Reskin + Slice; Icons nicht mit BG skaliert
2	Border-/Cap-Inset in px (vier Seiten)	Passt zu @1x oder Team-Export-Skalierung in Delivery-Notes
3	Feste Export-Skalierung (@1x/@2x oder 1080-Baseline)	Engineering rät nicht an der Border-Mathematik
4	Corner-Radius außerhalb der Stretch-Region oder Spec erlaubt Non-Stretch-Corners	Kein „Ecken werden zu Kapseln“-Pass
5	Stretch-Region tile-freundlich oder solid	Center-Repeat ohne offensichtliche Fehlausrichtung
6	Semantische Namen	z. B. Panel_Shop_9s, Input_Field_9s
7	Multi-State (normal / disabled) gleiche Border	Insets stimmen überein; nur Farbe/Skin ändert sich
8	PSD-Slice oder Figma-Export-Notes transparentes Padding	Schatten nicht in Border zählen, außer Spec sagt es
9	Liefern mit Handoff-Punkt 5 Button-States	Fehlende States nicht mit falscher 9s-Art patchen
10	Event-Reskin ändert nur Art, Border unverändert	Siehe Reskin Spec

Figma: Cap-Inset in Component-Docs dokumentieren, wenn resizable Frames oder Slice-Plugins verwendet werden. PSD: Slices ausrichten mit PSD zu Unity in 5 Minuten.

---

Drei Engines: Komponenten und Abnahme

Element	Unity UGUI	Godot 4 Control	Cocos UI
Komponente	Image → Sliced / Tiled	StyleBoxTexture (Patch-Margin)	Sprite Nine-Slice / Sliced
Border-Quelle	Sprite Editor Border (L/T/R/B px)	content_margin / Patch	Cap-Insets (LTRB)
Content-Bereich	RectTransform + Child-Padding	MarginContainer + Theme	Widget-/Layout-Padding
Typischer Fail	Simple-Missbrauch; falsch skalierte Border	Patch vs. Textur-Größe-Mismatch	Atlas-Rotation bricht Inset
Pass	Bei 150 % / 200 % Breite: scharfe Ecken, sauberes Center	Dasselbe; Theme-Vorschau passt zu Play	Dasselbe; Device-Spot-Check lange Liste

Unity-Editor-Abnahme (auf andere Engines übertragen):

1. Prefab-Image auf Sliced setzen mit Borders passend zum Design.
2. Panel-RectTransform auf minimale und maximale Design-Breite ziehen.
3. Ecken, Kanten und Center mit Figma-/PSD-Capture vergleichen.
4. Wenn Play-Modus OK → ein Device-Pass gemäß Pre-Ship-Checkliste.

---

Full-Screen-Konzept: Canvas-Split und Re-Export

Mit nur PNG- oder AI-Full-Screen-Art kann die Border nicht abgeleitet werden. Pfad: VberAI Studio (AI Studio, ≠ Google AI Studio) In-Place-Split → skalierbare Panels markieren → Prefab exportieren (deterministisch, kein LLM-YAML).

Schritt	Aktion	Abnahme
1	Vollbild auf Canvas; Panel_* und feste Icons splitten	Benannte Hierarchie
2	Panel-9-Slice-Intent auf Canvas oder vor Export bestätigen	Owner für Inset dokumentiert
3	Unity-/Godot-/Cocos-Prefab exportieren	Sliced-QA gemäß Tabelle oben
4	Nach Reskin / Locales Full-Tree-Re-Export	Wenn Border-Spec unverändert, Insets unverändert

Layered Figma/PSD: bevorzugt Figma → Unity oder PSD zu UGUI, dann kleinere Border-Anpassungen in der Engine – vermeiden, bei jedem Event 20 lose PNGs neu zu exportieren.

---

Fix-Routing

Symptom	Wahrscheinliche Ursache	Aktion	Owner
Unscharfe Ecken	Simple-Skalierung auf ganzem Bild	Sliced + korrekte Border; Design fügt Inset-Markierung hinzu	Engineering + Design
Center-Naht / Repeat-Blöcke	Inset 1–2px daneben; Skalierungs-Mismatch	Design-px angleichen; Sprite reimportieren	Engineering
Ecken strecken sich oval	Art sollte nicht nine-slicen	Feste Größe oder neue Corner-Art	Design
Border ändert sich nach Reskin	Neue Art-Größe oder Padding	Canvas-Größe in Reskin-Spec locken; nach Reskin erneut QA	Design
List-Row-BG verformt sich	Row-BG gestreckt wie volles Panel	Row-spezifische 9s oder feste Höhe	Design
Fail nur bei manchen Auflösungen	Canvas Scaler nicht-ganzzahlige Skalierung	Engine-Checkliste Anchor/Scaler	Engineering

Regel: Wenn Border ≠ Design → zuerst Markierungen oder Sprite-Quelle fixen, dann Prefab. Inspector-only-Fixes ohne aktualisierte Delivery → beim nächsten Export verloren.

---

vs. „Nur PNG-Pack“-Handoff

Ansatz	Passt	Passt nicht
Manueller Export + Engineering füllt Border	Wenige Panels, Demo	Häufiges Reskin, viele Screens
Figma/PSD + VberAI Studio strukturierter Export	Multi-Screen, Multi-Engine, Events	Ersetzt keine Inset-Markierungen und QA
Temporär Sliced in Engine	Hotfix für einen Screen	Langfristig ohne Design-Quelle

Empfohlen: Design-Inset-Markierungen → strukturierter Prefab-Export → Unity Editor Sliced bei zwei Breiten → MCP für Logik. Raycast und Binding: Engine-+-MCP-Checkliste.

---

Häufig gestellte Fragen

Können abgerundete Panels Nine-Slice verwenden?
Ja, aber Insets müssen auf geraden Stretch-Kanten sitzen; Ecken bleiben in Non-Stretch-Corner-Tiles. Wenn der Corner-Radius mit der Panel-Größe wächst → Fail; Art fixen oder Max-Größe begrenzen.

Zählen Schatten zur Border?
Das entscheidet die Produkt-Spec. Wenn Schatten nicht streckt, Layer trennen oder Inset auf dem soliden Rect ohne äußeren Glow markieren.

Tiled vs. Sliced?
Sliced für gerahmte Panels; Tiled (oder tile-freundliche Center-Art) für sich wiederholende mittlere Textur. In der Spec schreiben – nicht Engineering raten lassen.

Separate Slices für Godot / Cocos?
Eine Inset-Semantik; Export-Ziel über Canvas-Multi-Engine-Export wechseln und Patch/Cap gemäß Tabelle verifizieren.

Füllt VberAI Studio Borders automatisch?
Hängt von Export und Assets ab; Abnahme ist immer Engine Sliced/StyleBox. Kein Inset im Design → Engineering setzt Borders im Editor und dokumentiert in der Spec.

Ist VberAI Studio dasselbe wie Google AI Studio?
Nein. Siehe Vergleich.