Pack d'interfaccia

Nightcity Controlli — casella, interruttore e cursore

Otto controlli d'interfaccia in notte al neon: casella, radio, interruttore e cursore, ogni stato acceso/spento disegnato come forma distinta. SVG e PNG.

  • ui
  • svg
  • png trasparente
  • casella
  • interruttore
  • cursore
  • impostazioni
  • controlli
  • cyberpunk
  • fantascienza
  • neon
  • hud
Controlli delle impostazioni su sfondo a scacchiera — una casella vuota e una spuntata, un pulsante radio non selezionato e uno selezionato, un interruttore spento e acceso, e il binario di un cursore con la sua manopola
anteprima 1600×755la trasparenza è mostrata a scacchiera

Su questo pack

Controlli da 26px con geometria quadrata dall'inizio alla fine — in questo stile non c'è alcuna curva, quindi l'aiutante tondo disegna un quadrato smussato. Lo stato spuntato si riempie con l'accento invece di schiarire il tracciato, perché un tracciato più chiaro si legge come focus e non come acceso.

Il set copre i quattro controlli di cui una schermata di impostazioni ha davvero bisogno: una casella, un pulsante radio, un interruttore e un cursore con manopola separata. Ogni controllo con stati porta entrambi gli stati in un file proprio, su una base 26×26 — l'interruttore è 52×26 e il binario del cursore è largo 208 px per poter essere nine-sliced a qualsiasi lunghezza.

Acceso e spento sono disegnati come forme diverse, non come colori diversi. Una casella non spuntata è un incavo vuoto; una spuntata è una superficie piena con una spunta ritagliata dentro. Conta perché la schermata delle impostazioni è proprio dove è più probabile che un giocatore stia usando una modalità per daltonici, uno shader in scala di grigi o un post-processing molto tinto — e uno stato leggibile solo dalla tonalità sparisce sotto tutti e tre.

Il cursore arriva come binario e manopola invece che come sprite unico. Animare un cursore in un pezzo solo obbliga a ridisegnarlo per ogni valore; con due pezzi stiri il riempimento e sposti la manopola, che è ciò che ogni toolkit d'interfaccia si aspetta già. La manopola porta una tacca centrale perché la sua rotazione e la sua posizione restino leggibili in piccolo.

Tutto è incluso come SVG modificabile e come PNG piatto trasparente a 1x, 2x e 4x, disegnato con gli stessi sei toni blu mezzanotte del resto della famiglia Nightcity.

Download

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

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

File inclusi in questo pack
FileFormatoPesoDownload
Set completo — 8 sorgenti SVG, esportazioni PNG a 1x/2x/4x, licenza e readmeZIP44 kB Ottieni →
Interruttore (stato acceso), SVG modificabileSVG418 B Ottieni →
Binario del cursore, SVG modificabileSVG751 B Ottieni →

Come si usa

  1. Scambia l'intera texture tra i file acceso e spento invece di tingere un solo sprite; i due stati differiscono nella forma, quindi una tinta da sola non li riproduce.
  2. Il binario del cursore accetta il nine-slice con 9 px di terminale per lato — stira il centro e le estremità arrotondate restano intatte a qualsiasi larghezza.
  3. In Unity, collega i due file alle grafiche Background e Checkmark del componente Toggle, oppure scambia lo sprite in un handler onValueChanged se preferisci una sola immagine.
  4. Centra la manopola sul bordo del riempimento: è larga 22 px, quindi spostala di metà dal bordo destro del riempimento perché stia sul valore e non dopo di esso.

Licenza

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

Riga di credito da copiare
"Nightcity Controlli — casella, interruttore e cursore" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/nightcity-ui-controls