Pack d'interfaccia

Dusk Caselle d'inventario — griglia da 48px

48×48 caselle d'inventario in porpora del crepuscolo: stati vuota, hover, selezionata e bloccata più tre cornici di rarità. SVG e PNG trasparente.

  • ui
  • svg
  • png trasparente
  • inventario
  • casella d'inventario
  • cornice oggetto
  • rarità
  • griglia
  • pixel art
  • retrò
  • 2d
Una fila di caselle d'inventario quadrate su sfondo a scacchiera che mostra gli stati vuota, hover, selezionata con segni agli angoli e bloccata con tratteggio diagonale, seguita da cornici di rarità colorate e da una griglia di otto caselle
anteprima 1600×619la trasparenza è mostrata a scacchiera

Su questo pack

Una griglia d'inventario da 48 pixel con passo in potenza di due. Lo stato bloccato è un tratteggio diagonale e non una tinta attenuata, perché attenuare una casella in una palette scura produce qualcosa di quasi identico allo stato vuoto.

Una griglia d'inventario non ha bisogno di un pannello, ha bisogno di un quadrato che si ripeta: 7 file da 48×48, tutti con gli stessi limiti esterni, così una fila si allinea senza calcoli di spaziatura. Distanziale di 52 px e i bordi si leggono come un'unica griglia invece che come una fila di scatole separate.

Gli stati sono disegnati come struttura, non come colore. La casella selezionata riceve segni agli angoli, quella bloccata un tratteggio diagonale, quella in hover alza il bordo di un gradino. È voluto: la schermata d'inventario è la superficie più rumorosa della maggior parte dei giochi, sta sotto grafica di oggetti di ogni tonalità in una volta sola, e uno stato che è solo un colore di bordo diventa invisibile appena nella casella c'è una spada rossa.

Le tre cornici di rarità riprendono i colori di HP, MP e XP dal resto della famiglia, ciascuna con un segno d'angolo oltre al bordo colorato — così chi ordina per rarità legge due segnali, e nessuno dei due compete con la grafica dell'oggetto al centro della casella.

Tutto è incluso come SVG modificabile e come PNG piatto trasparente a 1x, 2x e 4x. Gli interni delle caselle sono trasparenti, quindi ciò che renderizzi dietro la griglia si vede attraverso, invece di un colore di sfondo cotto nell'immagine.

Download

Link diretto · senza registrazione · senza pagina d'attesa
Scarica ZIP17 kB

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

File inclusi in questo pack
FileFormatoPesoDownload
Set completo — sorgenti SVG, esportazioni PNG a 1x/2x/4x, licenza e readmeZIP17 kB Ottieni →
Casella vuota, SVG modificabileSVG990 B Ottieni →
Casella selezionata con segni agli angoli, SVG modificabileSVG1.4 kB Ottieni →

Come si usa

  1. Disponi le caselle con un passo di 52 px — lo sprite da 48 px più 4 px di spazio — e i bordi resteranno a un pixel di distanza invece di raddoppiarsi.
  2. Disegna l'icona dell'oggetto centrata nella casella a circa 34 px; l'incavo interno è di 42 px, quindi qualsiasi cosa più grande tocca il bordo e si mangia la cornice.
  3. Scambia l'intero sprite della casella per gli stati selezionata e bloccata invece di sovrapporre una tinta, perché i segni agli angoli e il tratteggio fanno parte dello sprite.
  4. Le cornici di rarità sostituiscono direttamente la casella vuota — stessi limiti, stesso incavo — quindi un cambio di rarità è un solo scambio di texture senza toccare il layout.
  5. Una casella da 48 px accoglie uno sprite oggetto da 32 px con 8 px di margine, che è il passo usato dalla maggior parte degli inventari dell'era a 16 bit e il motivo per cui qui tutti i numeri sono potenze di due.

Licenza

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

Riga di credito da copiare
"Dusk Caselle d'inventario — griglia da 48px" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/dusk-inventory-slots