Sketch Barre HUD — vita, mana e vigore

Barre disegnate con la stessa linea campionata e spostata dei pannelli, il che significa che la cornice non è un rettangolo e non intende diventarlo. Il tremolio è deterministico: la stessa barra trema allo stesso modo a ogni build, quindi il file non cambia su disco tra una build e l'altra e lo sprite può vivere nel versionamento senza rumore.

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 è 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: 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.

Creative Commons Attribuzione 4.0 — Gratis per uso commerciale. Attribuzione obbligatoria. Termini completi · Cosa significa in pratica