Pack d'interfaccia

Cursori Nightcity

12 cursori del mouse (cyberpunk) per interfacce in modalità scuro — blu mezzanotte, accento magenta acceso. SVG e PNG trasparente a 1x/2x/4x.

  • ui
  • svg
  • png trasparente
  • cursore
  • puntatore
  • mirino
  • mouse
  • cyberpunk
  • cyberpunk
  • cyberpunk
  • fantascienza
  • neon
  • hud
Foglio con 12 cursori del mouse (cyberpunk) della famiglia Nightcity, disposti su una scacchiera di trasparenza con le misure in pixel scritte sotto
anteprima 1600×739la trasparenza è mostrata a scacchiera

Su questo pack

Cursori Nightcity è un set di 12 cursori del mouse disegnati nello stile cyberpunk, dove ogni cornice ha il suo contorno asimmetrico — una tacca su un angolo, una guida lungo un bordo. Contiene una freccia e una freccia con anello di attesa, una mano che indica e un cursore di spostamento, un mirino e un aggancio bersaglio, cursori di attacco, dialogo e bottino, cursori di attesa, blocco e testo, e un cursore di ridimensionamento.

Un gioco che disegna la propria interfaccia e poi ci lascia sopra il cursore del sistema operativo ha un buco in mezzo allo schermo, ed è proprio la parte che il giocatore guarda di continuo. Il cursore è anche l’unico sprite senza controllo sul proprio sfondo: attraversa cielo, pietra, fuoco e inventario nello stesso secondo.

La silhouette è composta e non scalata: ognuno dei quattro angoli e ognuno dei quattro bordi riceve il proprio trattamento, quindi non ci sono due cornici del set che condividano un contorno. Il bagliore al neon è una pila di tratti a opacità calante, non un filtro di sfocatura — alcuni rasterizzatori SVG applicano i filtri in modo diverso e trasformano l'alone in una sbavatura a 4x.

Dentro quello stile, questa è la lettura Nightcity: un'interfaccia in modalità scuro su una palette blu mezzanotte con accenti magenta acceso, costruita attorno a una cornice a bordo singolo, pulsanti smussati da 176x44, barre a nucleo cavo divise in 16 segmenti e icone in bicromia su una griglia da 32px. Sono quelle misure a spiegare perché due famiglie possono condividere uno stile artistico senza essere intercambiabili: lo stile decide come si traccia un bordo, i numeri decidono a cosa serve l'interfaccia.

Ogni cursore porta un contorno preso dall’estremo opposto della palette rispetto al corpo, ed è ciò che lo tiene leggibile su uno sfondo di cui il kit non sa nulla: un cursore scuro su una caverna scura sparisce, e nessuno stile lo rimedia. Il punto attivo è indicato nel titolo di ogni sprite invece di essere lasciato a indovinare: la freccia clicca a 0,0 e il mirino al centro, e un punto attivo spostato di tre pixel è un gioco in cui il giocatore manca ciò che ha mirato.

Ogni sprite arriva come SVG modificabile e come PNG trasparente a 1x, 2x e 4x, così puoi buttare i PNG dritti in un motore oppure aprire il vettoriale e cambiare un colore. Disegnato con le stesse misure del resto della famiglia Nightcity, il che significa che questo kit e il kit di pannelli Nightcity si allineano senza che nessuno dei due venga ridimensionato. Si adatta bene a interfacce cyberpunk, fantascientifiche e da futuro prossimo.

Download

Link diretto · senza registrazione · senza pagina d'attesa
Scarica ZIP51 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 readmeZIP51 kB Ottieni →
Cursore freccia, punto attivo 0,0, SVG modificabileSVG409 B Ottieni →

Come si usa

  1. Prendi il punto attivo dal titolo dello sprite quando registri il cursore: freccia e mano cliccano vicino alla punta, mirino e bersaglio al centro.
  2. Usa il PNG da 32 px per un cursore hardware e resta su scale intere; il cursore hardware è composto dal sistema operativo e una scala frazionaria è dove il contorno si ammorbidisce.
  3. Passa ai cursori di attacco, dialogo e bottino dal tuo raycast di interazione invece di tingere un solo cursore, perché ciò che il giocatore legge a colpo d’occhio è la sagoma e non il colore.
  4. Il cursore di blocco è per un’azione rifiutata, non per un controllo disattivato: un pulsante disattivato lo dice già con il suo sprite, e usarli entrambi lo dice due volte.

Licenza

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

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