UI-Packs

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

Nine-Slice-Panels mit Titelleiste in Y2K-Poster, eingelassene Listenrahmen und vier Tab-Button-Zustände, als SVG und PNG in 1x/2x/4x.

  • 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×800 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 vier Tab- Button-Zustände: Standard, Hover, gedrückt und deaktiviert. Sie sind auf derselben 148×52-Basis mit 0 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 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 herunterladen16 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 ReadmeZIP16 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