UI-Packs

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

18 Y2K-Poster Interface-Sprites: titelbandige Nine-Slice-Panels, ein Tooltip, eine Kopfleiste, ein Trenner, ein Chip und zwölf Tab- Buttonzustände.

  • ui
  • svg
  • transparentes png
  • Nine-Slice
  • Panel
  • Button
  • Menü
  • Band
  • y2k
  • retrofuturistisch
  • Poster
  • hud
Y2K-Poster-Menüpanel mit einem Titelstreifen in Signalgelb und einem vertieften Listenbereich, daneben eine Spalte mit demselben Tab-Button in Standard, konturiertem Hover und eingedrücktem Zustand
1600×1115 VorschauTransparenz als Schachbrett dargestellt

Über dieses Pack

Flache Y2K-Panels — dicke gerade Konturen, volle gelbe Blöcke, elektrisch blaue Spur. Kein Leuchten und kein Verlauf: Dieser Stil ist eine gedruckte Vorlage, und die Zurückhaltung ist der ganze Look.

Zwei Nine-Slice-Panels — ein mit Titelleiste versehener Fensterrahmen mit 0 px Ecken und ein vertiefter Innenrahmen mit 0 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 Tab- Button-Sprites: normal, Hover, gedrückt und deaktiviert, jeweils dreimal gezeichnet — ein normaler 148×52-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 52 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 Tuscheschwarz oder den einzelnen Akzent in Signalgelb 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.

Download

Direkter Link · keine Anmeldung · keine Warteseite
ZIP herunterladen43 kB

Komplettes Kit — SVG-Quellen, PNG-Exporte in 1x/2x/4x, Lizenz und Readme

Dateien in diesem Pack
DateiFormatGrößeDownload
Komplettes Kit — SVG-Quellen, PNG-Exporte in 1x/2x/4x, Lizenz und ReadmeZIP43 kB Holen →
Fensterpanel, bearbeitbares SVGSVG2.4 kB Holen →
Button (Standardzustand), bearbeitbares SVGSVG417 B Holen →

So wird es benutzt

  1. In Unity importierst du die PNGs, setzt Texture Type auf Sprite (2D and UI) und den Border für das Fensterpanel auf 0, 0, 0, 0 und für die Buttons auf 0, 0, 0, 0; dann Image Type auf Sliced.
  2. In Godot 4 nimm ein NinePatchRect und setze die Patch-Ränder auf dieselben Zahlen — oder wirf das SVG direkt hinein und lass Godot es in der Skalierung der Importoptionen rastern.
  3. Importiere in Unreal als Texture2D, erzeuge einen Slate Brush mit Draw As auf Box und trage den Margin als Bruchteil der Texturgröße ein — für das 128 px Panel und den 148 px Button.
  4. Für scharfe Ergebnisse bei nicht-ganzzahligen UI-Skalierungen nimm das 2x- oder 4x-PNG, statt das 1x hochzurechnen — oder richte deine Engine auf die SVG-Quelle und lass sie in Endgröße rastern.

Lizenz

Creative Commons Zero 1.0 — Gemeinfrei. Keine Namensnennung nötig. Vollständige Bedingungen · Was das in der Praxis heißt