Pack d'interfaccia
Dusk Barre HUD — HP, MP e XP
Una cornice di barra nine-slice in porpora del crepuscolo con tre riempimenti a tacche e una variante segmentata, 128×16 con terminali da 4 px. SVG e PNG.
Su questo pack
Barre da 128x16 con sei tacche, dimensionate per una schermata che viene ingrandita e non per una già grande. Ogni bordo cade sulla griglia da 4px e le tacche sono vuoti nel riempimento invece di linee sopra, quindi un ingrandimento intero le tiene larghe esattamente un pixel invece di impastarle nella barra.
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 porta tacche regolari per tutta la sua lunghezza, il che trasforma una percentuale in qualcosa che un giocatore può contare in un colpo d'occhio senza una cornice segmentata.
Ci sono tre colori, uno per risorsa: HP, MP e XP. 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 5 linee di tacca sopra la stessa cornice, per giochi che contano pastiglie discrete — cuori, cariche, munizioni — invece di una percentuale continua. È un file separato e non una sovrapposizione, quindi puoi usarla senza cambiare il tuo widget di barra. Tutto è incluso come SVG modificabile e come PNG piatto trasparente 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 sesto 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
"Dusk Barre HUD — HP, MP e XP" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/dusk-hud-barsAltri Pack d'interfaccia
Vedi tutti →
Aetherlab Sfondi
7 elementi di sfondo e sovrapposizione (magitech) per interfacce in modalità scuro — blu da laboratorio, accento ciano etereo. SVG e PNG trasparente a 1x/2x/4x.
Aetherlab Cornici per carte
11 componenti per carte e notifiche (magitech) per interfacce in modalità scuro — blu da laboratorio, accento ciano etereo. SVG e PNG trasparente a 1x/2x/4x.
Aetherlab Kit di dialogo
7 componenti di dialogo (magitech) per interfacce in modalità scuro — blu da laboratorio, accento ciano etereo. SVG e PNG trasparente a 1x/2x/4x.
Aetherlab Barre HUD — vita, mana e vigore
Una cornice di barra nine-slice in etere freddo con tre riempimenti a nucleo cavo e una variante segmentata, 200×20 con terminali da 4 px. SVG e PNG.