Dusk Panel-UI-Kit — Panels mit Titelleiste und Buttons

Ein hartkantiges Kit für Pixelspiele, die trotzdem ein echtes Menü wollen, mit der Titelleiste im Panel statt daraufgesetzt. Es gibt nirgends runde Ecken und nirgends Kantenglättung: Jeder Rand ist eine einzelne flache Pixelreihe, und nur so behält ein Panel seine Form, wenn ein Spieler das Spiel bei 3x auf einem 4K-Monitor laufen lässt. Die Violetttöne sind kühl genug, dass Bernstein als Warnung liest, ohne dass es Rot bräuchte.

Zwei Nine-Slice-Panels — ein mit Titelleiste versehener Fensterrahmen mit 16 px Ecken und ein vertiefter Innenrahmen mit 12 px Ecken — decken fast jede Box ab, die ein Menü braucht: Dialoge, Inventarraster, Listenhintergründe, Tooltips und Statuspanels. Ein Titelband ist oben in das Panel eingebaut, ein Dialogkopf braucht also kein zweites Sprite und keine manuelle Ausrichtung. Beide dehnen sich sauber auf jede Größe, weil die Ecken nie skalieren und die Mitte eine flache Füllung ist.

Auf den Panels sitzen zwölf eckigen Button-Sprites: normal, Hover, gedrückt und deaktiviert, jeweils dreimal gezeichnet — ein normaler 96×32-Balken, ein quadratischer eckigen Icon-Button und ein kompakter Button für Werkzeugleisten und Inline-Aktionen. Die drei Grössen sind getrennte Dateien statt eines skalierten Sprites, weil die Zeichnung grössenabhängig ist: die bei 32 px berechnete Fase wird bei den kleineren neu berechnet, nicht geschrumpft. Der gedrückte Zustand senkt seine Fläche um zwei Pixel und nimmt das obere Glanzlicht weg, statt nur abzudunkeln — das ist es, was einen Button geklickt statt bloss umgefärbt wirken lässt.

Vier kleinere Teile decken ab, was ein Menü zwischen den Panels braucht: ein Tooltip mit Zeigerspitze, eine Kopfleiste für die Oberkante eines Panels, ein Abschnittstrenner mit Mittelmarke und ein Label-Chip für Zähler und Statusangaben. Keines davon ist das Fensterpanel in einer anderen Grösse — ein Nine-Slice dehnt sich ohnehin beliebig, eine zweite Datei in anderer Breite wäre Füllmaterial statt Komponente.

Alles kommt doppelt. Die SVG-Quellen sind die Dateien, in denen das Kit gezeichnet wurde — öffne sie, ändere die sechs Töne in Nachtviolett oder den einzelnen Akzent in Bernstein und exportiere neu. Die PNG-Exporte sind flach, transparent und in 1x, 2x und 4x vorskaliert, für Engines, die Bitmaps wollen — ohne vormultipliziertes Alpha und ohne eingebrannten Schatten außerhalb der Sprite-Grenzen.

Creative Commons Namensnennung 4.0 — Kostenlos für kommerzielle Nutzung. Namensnennung erforderlich. Vollständige Bedingungen · Was das in der Praxis heißt