Paper Panel-UI-Kit — einfach gerahmte Panels und Buttons

Eine helle Oberfläche für Spiele, die nicht nachts spielen: Puzzlespiele, Management-Sims, Kartenspiele, alles, was sich auf Papier besser liest als auf einem Bildschirm. Alles ist gegenüber einem normalen Spiel-Kit umgedreht — der Panelkörper ist der hellste Ton, die Ränder sind die dunkelsten — und die Buttons sind volle Pillen, denn das ist die Form, die ein helles Rechteck davon abhält, wie ein ungestyltes div auszusehen.

Zwei Nine-Slice-Panels — ein einfach gerahmter Fensterrahmen mit 20 px Ecken und ein vertiefter Innenrahmen mit 14 px Ecken — decken fast jede Box ab, die ein Menü braucht: Dialoge, Inventarraster, Listenhintergründe, Tooltips und Statuspanels. Ein einziger durchgehender Rand hält das Panel ruhig genug, um hinter dichtem Text zu stehen. Beide dehnen sich sauber auf jede Größe, weil die Ecken nie skalieren und die Mitte eine flach Füllung ist.

Auf den Panels sitzen vier Pill- Button-Zustände: Standard, Hover, gedrückt und deaktiviert. Sie sind auf derselben 140×44-Basis mit 22 px Ecken gezeichnet, du tauschst also die Textur an einem einzigen Button-Widget und bekommst die ganze Interaktionsschleife, ohne ein Rechteck zu verschieben. Der gedrückte Zustand senkt seine Fläche um zwei Pixel und nimmt das obere Highlight weg, statt nur abzudunkeln — das lässt einen Button geklickt wirken statt bloß umgefärbt.

Alles kommt doppelt. Die SVG-Quellen sind die Dateien, in denen das Kit gezeichnet wurde — öffne sie, ändere die sechs Töne in warmes Papier oder den einzelnen Akzent in Rostrot 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