UI-Packs
Dusk HUD-Balken — HP, MP und XP
Ein Nine-Slice-Balkenrahmen in Dämmerpurpur mit drei gehakten Füllungen und einer segmentierten Variante, 128×16 mit 4 px Kappen. SVG und PNG.
Über dieses Pack
Balken mit 128x16 und sechs Strichen, bemessen für einen Bildschirm, der hochskaliert wird, statt für einen, der schon groß ist. Jede Kante liegt auf dem 4px-Raster, und die Striche sind Lücken in der Füllung statt Linien darüber, eine ganzzahlige Hochskalierung hält sie also exakt einen Pixel breit, statt sie in den Balken zu schmieren.
Der Rahmen ist ein Nine-Slice mit 4 px Endkappen, er dehnt sich also auf jede Breite, ohne dass die Enden verformen — ein bildschirmbreiter Boss-Balken und ein 40 px Gegner-Namensbalken nutzen dieselbe Datei.
Die Füllungen sind eigene Sprites statt in den Rahmen eingebrannt, und das ist der Teil, der in der Praxis zählt: Du skalierst die Breite der Füllung von null auf voll und der Rahmen bewegt sich nie. Jede Füllung trägt regelmäßige Teilstriche über ihre Länge, was aus einem Prozentwert etwas macht, das ein Spieler auf einen Blick zählen kann, ganz ohne segmentierten Rahmen.
Es gibt drei Farben, eine pro Ressource: HP, MP und XP. Sie liegen in der Helligkeit ebenso weit auseinander wie im Farbton — das ist der Teil, der einen Graustufen-Screenshot und die häufigsten Formen der Farbenblindheit übersteht. Ein auf gleiche Helligkeit abgestimmtes Set wirkt in einer Farbreihe ausgewogen und fällt auf dem Bildschirm zu einem grauen Block zusammen.
Die segmentierte Variante legt 5 Kerblinien über denselben Rahmen, für Spiele, die diskrete Pips zählen — Herzen, Ladungen, Munition — statt eines stufenlosen Prozentwerts. Sie ist eine eigene Datei statt eines Overlays, du kannst sie also einsetzen, ohne dein Balken-Widget zu ändern. Alles ist als bearbeitbares SVG und als flaches transparentes PNG in 1x, 2x und 4x enthalten.
Download
Direkter Link · keine Anmeldung · keine WarteseiteKomplettes Kit — SVG-Quellen, PNG-Exporte in 1x/2x/4x, Lizenz und Readme
So wird es benutzt
- Zeichne zuerst den Rahmen, dann die Füllung darüber, deren linke Kante um die 4 px Kappenbreite eingerückt ist; nur die Breite der Füllung zu animieren hält die Enden des Rahmens vollkommen ruhig.
- In Unity setze das Füllbild auf Image Type Filled mit Fill Method Horizontal, oder nimm ein Sliced Image und animiere die RectTransform-Breite — beides geht, weil die Füllung selbst keine runden Ecken hat.
- In Godot 4 bildet eine TextureProgressBar mit dem Rahmen als Under Texture und der Füllung als Progress Texture das Ganze ohne Code nach, und Stretch Mode auf Tile hält die Kappen intakt.
- Für Pip-Ressourcen nimm den segmentierten Rahmen und raste die Füllbreite auf Vielfache eines Sechstels der Innenbreite, damit die Füllkante immer auf einer Kerbe landet.
Lizenz
Creative Commons Namensnennung 4.0 — Kostenlos für kommerzielle Nutzung. Namensnennung erforderlich. Vollständige Bedingungen · Was das in der Praxis heißt
"Dusk HUD-Balken — HP, MP und XP" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/dusk-hud-barsMehr UI-Packs
Alle ansehen →
Aetherlab Hintergründe
7 Hintergrund- und Overlay-Teile (Magitech) für dunkle Oberflächen — Palette Labormarine, Akzent Ätherzyan. SVG und transparentes PNG in 1x/2x/4x.
Aetherlab Kartenrahmen
11 Karten- und Benachrichtigungselemente (Magitech) für dunkle Oberflächen — Palette Labormarine, Akzent Ätherzyan. SVG und transparentes PNG in 1x/2x/4x.
Aetherlab Dialog-Kit
7 Dialogelemente (Magitech) für dunkle Oberflächen — Palette Labormarine, Akzent Ätherzyan. SVG und transparentes PNG in 1x/2x/4x.
Aetherlab HUD-Balken — Leben, Mana und Ausdauer
Ein Nine-Slice-Balkenrahmen in kalter Äther mit drei Füllungen mit hohlem Kern und einer segmentierten Variante, 200×20 mit 4 px Kappen. SVG und PNG.