Pack d'interfaccia

Neon Controlli — casella, interruttore e cursore

Otto controlli d'interfaccia in neon ad alto contrasto: 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
  • fantascienza
  • hud
  • cyberpunk
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×757la trasparenza è mostrata a scacchiera

Su questo pack

La metà schermata di impostazioni della famiglia Neon. Caselle smussate e un interruttore dai bordi duri portano il linguaggio da console fin dentro il menu, che è proprio dove la maggior parte dei kit fantascientifici si arrende e ripiega su un interruttore arrotondato generico.

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 28×28 — l'interruttore è 56×28 e il binario del cursore è largo 224 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 dello spazio profondo del resto della famiglia Neon.

Download

Link diretto · senza registrazione · senza pagina d'attesa
Scarica ZIP35 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 readmeZIP35 kB Ottieni →
Interruttore (stato acceso), SVG modificabileSVG706 B Ottieni →
Binario del cursore, SVG modificabileSVG325 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 24 px, quindi spostala di metà dal bordo destro del riempimento perché stia sul valore e non dopo di esso.
  5. A 28 px questi controlli sono dimensionati per una schermata da console guidata col mouse; per un menu da gamepad usa l'esportazione a 2x e tieni l'area di tocco ad almeno 64 px.

Licenza

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

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