UI-Packs

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

Einfach gerahmte Nine-Slice-Panels in projiziertes Licht, eingelassene Listenrahmen und vier rechteckige Button-Zustände, als SVG und PNG in 1x/2x/4x.

  • ui
  • svg
  • transparentes png
  • Nine-Slice
  • Panel
  • Button
  • Menü
  • schlicht
  • Hologramm
  • Sci-Fi
  • hud
  • Projektion
projiziertes Licht-Menüpanel mit einem Titelstreifen in Signalbernstein und einem vertieften Listenbereich, daneben eine Spalte mit demselben rechteckigen Button in Standard, konturiertem Hover und eingedrücktem Zustand
1600×800 VorschauTransparenz als Schachbrett dargestellt

Über dieses Pack

Projizierte Panels: eine dünne Spur, ein breiter Halo und überwiegend leerer Raum. Die entgegengesetzte Lesart derselben Maschine wie Nightcity: Wo jene schwer und gefüllt ist, ist diese kaum vorhanden.

Zwei Nine-Slice-Panels — ein einfach gerahmter 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 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 flache Füllung ist.

Auf den Panels sitzen vier rechteckige Button-Zustände: Standard, Hover, gedrückt und deaktiviert. Sie sind auf derselben 132×38-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 Abgrundblau oder den einzelnen Akzent in Signalbernstein 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 herunterladen25 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 ReadmeZIP25 kB Holen →
Fensterpanel, bearbeitbares SVGSVG2.6 kB Holen →
Button (Standardzustand), bearbeitbares SVGSVG1.9 kB 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 112 px Panel und den 132 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 Namensnennung 4.0 — Kostenlos für kommerzielle Nutzung. Namensnennung erforderlich. Vollständige Bedingungen · Was das in der Praxis heißt

Namensnennung zum Kopieren
"Hologrid Panel-UI-Kit — einfach gerahmte Panels und Buttons" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/hologrid-panel-ui-kit