Pack d'interfaccia
Aetherlab Barre HUD — vita, mana e vigore
16 sprite di barra HUD etere freddo: cornici standard, sottile e verticale, tre riempimenti a nucleo cavo ciascuna, più varianti segmentata, fantasma e scudo.

Su questo pack
Barre da 200x20 con ventidue suddivisioni, quasi le più fini qui. Un indicatore di ricerca o di reazione si legge fino a un valore, e tanti segni permettono a un giocatore di centrarne uno esatto.
La cornice è un nine-slice con terminali da 4 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 è un guscio cavo attraversato da un nucleo luminoso, così il colore dell'incavo si vede tra i bordi e la barra si legge come energia contenuta invece che come vernice.
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 21 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 4 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 22esimo 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
"Aetherlab Barre HUD — vita, mana e vigore" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/aetherlab-hud-bars


