Pack d'interfaccia
Aqua Barre HUD — vita, mana e vigore
16 sprite di barra HUD petrolio vetroso: cornici standard, sottile e verticale, tre riempimenti lucide ciascuna, più varianti segmentata, fantasma e scudo.

Su questo pack
Barre con la stessa divisione dura del lucido dei pannelli, sulla base condivisa 160x24 così da entrare in una schermata Slate senza ridimensionamenti. La divisione sta sopra il riempimento e non lo attraversa: un riflesso disegnato su un riempimento colorato rende rosa una barra rossa e grigia una blu, l'unica cosa che una barra di stato non può permettersi.
La cornice è un nine-slice con terminali da 8 px, quindi si estende a qualsiasi larghezza senza che le estremità si deformino — una barra del boss a tutta larghezza e una barra da targhetta nemico da 40 px usano lo stesso file.
I riempimenti sono sprite separati e non cotti nella cornice, che è la parte che conta in pratica: scali la larghezza del riempimento da zero al massimo e la cornice non si muove mai. Ogni riempimento si divide a metà altezza con un bordo duro invece che con una sfumatura, ed è questo a leggersi come vetro senza costare un solo pixel morbido a 1x.
Ci sono tre colori, uno per risorsa: vita, mana e vigore. Sono distanziati in luminosità oltre che in tonalità, ed è questa la parte che sopravvive a una schermata in scala di grigi e alle forme più comuni di daltonismo. Un set tarato su una luminosità identica sembra equilibrato in una riga di campioni e collassa in un unico blocco grigio sullo schermo.
La variante segmentata aggiunge 9 linee di tacca sulla stessa cornice, per giochi che contano unità discrete — cuori, cariche, munizioni — invece di una percentuale continua. È un file a sé e non una sovrapposizione, quindi puoi usarla senza cambiare il tuo widget barra.
Tre costruzioni di cornice coprono dove le barre stanno davvero: la barra standard, una sottile per le targhette nemiche e una verticale, perché una colonna di mana non è una barra della salute ruotata: ruotare un nine-slice ne estende i terminali sull’asse sbagliato. Ogni costruzione ha il proprio set di tre riempimenti.
Due riempimenti sovrapposti gestiscono gli stati che una singola barra non può mostrare da sola. Il riempimento fantasma è cavo e tratteggiato: segna il tratto appena perso, così un colpo si legge come un cambiamento e non come un numero nuovo. Il riempimento scudo è tratteggiato invece che tinto, perché uno strato di assorbimento poggia sulla barra della risorsa e un secondo colore lì entra in conflitto con quello sotto. Tutto è incluso come SVG modificabile e come PNG trasparente piatto a 1x, 2x e 4x.
Download
Link diretto · senza registrazione · senza pagina d'attesaKit completo — sorgenti SVG, esportazioni PNG a 1x/2x/4x, licenza e readme
Come si usa
- Disegna prima la cornice, poi il riempimento sopra con il bordo sinistro rientrato della larghezza del terminale di 8 px; animare solo la larghezza del riempimento tiene le estremità della cornice perfettamente ferme.
- In Unity, imposta l'immagine di riempimento su Image Type Filled con Fill Method Horizontal, oppure usa un'immagine Sliced e anima la larghezza del RectTransform — funzionano entrambe perché il riempimento non ha angoli arrotondati propri.
- In Godot 4, un TextureProgressBar con la cornice come Under Texture e il riempimento come Progress Texture riproduce tutto senza una riga di codice, e Stretch Mode impostato su Tile tiene intatti i terminali.
- Per risorse a pastiglie, usa la cornice segmentata e aggancia la larghezza del riempimento a multipli di un decimo della larghezza interna, così il bordo del riempimento cade sempre su una tacca.
Licenza
Creative Commons Attribuzione 4.0 — Gratis per uso commerciale. Attribuzione obbligatoria. Termini completi · Cosa significa in pratica
"Aqua Barre HUD — vita, mana e vigore" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/aqua-hud-bars































