Pack d'interfaccia

Inkwell Barre HUD — colpi, carica e combo

Una cornice di barra nine-slice in fumetto inchiostrato con tre riempimenti a fasce e una variante segmentata, 176×28 con terminali da 12 px. SVG e PNG.

  • ui
  • svg
  • png trasparente
  • hud
  • barra della vita
  • barra di avanzamento
  • nine-slice
  • fumetto
  • cartoon
  • spesso
  • interfaccia chiara
Tre barre di stato orizzontali impilate su sfondo a scacchiera, riempite a livelli diversi per colpi, carica e combo, con una barra segmentata da 5 tacche e tre barre più piccole sotto
anteprima 1600×880la trasparenza è mostrata a scacchiera

Su questo pack

Barre di stato con lo stesso contorno da quattro pixel dei pannelli. I riempimenti sono colore piatto puro perché una sfumatura dentro una forma inchiostrata si legge come un errore invece che come un materiale.

La cornice è un nine-slice con terminali da 12 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 è disegnato in tre fasce orizzontali — una fascia chiara in alto, un tono medio e un bordo scuro in basso — così si legge ancora come una barra alle dimensioni piccole, dove un rettangolo piatto diventa una sbavatura.

Ci sono tre colori, uno per risorsa: colpi, carica e combo. 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 4 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'attesa
Scarica ZIP17 kB

Kit completo — sorgenti SVG, esportazioni PNG a 1x/2x/4x, licenza e readme

File inclusi in questo pack
FileFormatoPesoDownload
Kit completo — sorgenti SVG, esportazioni PNG a 1x/2x/4x, licenza e readmeZIP17 kB Ottieni →
Cornice della barra, SVG modificabileSVG550 B Ottieni →

Come si usa

  1. Disegna prima la cornice, poi il riempimento sopra con il bordo sinistro rientrato della larghezza del terminale di 12 px; animare solo la larghezza del riempimento tiene le estremità della cornice perfettamente ferme.
  2. 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.
  3. 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.
  4. Per risorse a pastiglie, usa la cornice segmentata e aggancia la larghezza del riempimento a multipli di un quinto 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

Riga di credito da copiare
"Inkwell Barre HUD — colpi, carica e combo" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/inkwell-hud-bars