Pack d'interfaccia

Bitrush Kit di pannelli — pannelli con barra del titolo e pulsanti

18 sprite d’interfaccia manifesto Y2K: pannelli nine-slice con fascia del titolo, un tooltip, una barra titolo, un separatore, un chip e dodici stati pulsante a linguetta.

  • ui
  • svg
  • png trasparente
  • nine-slice
  • pannello
  • pulsante
  • menu
  • nastro
  • y2k
  • retrofuturistico
  • manifesto
  • hud
Pannello di menu manifesto Y2K con una fascia del titolo in giallo di segnale e un'area di elenco incassata, accanto a una colonna che mostra lo stesso pulsante a scheda negli stati normale, hover con contorno e premuto
anteprima 1600×1115la trasparenza è mostrata a scacchiera

Su questo pack

Pannelli Y2K piatti — contorni dritti e spessi, blocchi gialli pieni, tracciato blu elettrico. Nessun bagliore e nessuna sfumatura: questo stile è un modello stampato, e la sobrietà è tutto l'aspetto.

Due pannelli nine-slice — una cornice finestra con barra del titolo con angoli da 0 px e una cornice interna incassata con angoli da 0 px — coprono quasi ogni riquadro di cui un menu ha bisogno: dialoghi, griglie d'inventario, sfondi di elenco, tooltip e pannelli di statistiche. Una fascia del titolo è integrata nella parte alta del pannello, quindi l'intestazione di un dialogo non richiede un secondo sprite né un allineamento manuale. Entrambi si stirano in modo pulito a qualsiasi dimensione perché gli angoli non scalano mai e il centro è un riempimento piatto.

Sopra i pannelli stanno dodici sprite pulsante a linguetta: normale, hover, premuto e disattivato, ciascuno disegnato tre volte — una barra standard 148×52, un pulsante icona squadrati quadrato e un pulsante compatto per barre strumenti e azioni in linea. Le tre misure sono file separati e non uno sprite scalato perché il disegno dipende dalla misura: lo smusso calcolato a 52 px viene ricalcolato in quelli più piccoli, non rimpicciolito. Lo stato premuto abbassa la faccia di due pixel e toglie la luce superiore invece di limitarsi a scurire: è questo che fa sentire un pulsante cliccato e non semplicemente ricolorato.

Quattro pezzi più piccoli coprono ciò che serve a un menu tra i pannelli: un tooltip con punta, una barra del titolo che poggia sul bordo superiore di un pannello, un separatore di sezione con segno centrale e un chip etichetta per contatori e stati. Nessuno di essi è il pannello finestra a un’altra misura: un nine-slice si estende già a qualsiasi dimensione, quindi un secondo file di larghezza diversa sarebbe riempitivo e non un componente.

Tutto arriva due volte. I sorgenti SVG sono i file in cui il kit è stato disegnato — aprili, cambia i sei toni nero inchiostro o l'unico accento giallo di segnale, e riesporta. Le esportazioni PNG sono piatte, trasparenti e pre-scalate a 1x, 2x e 4x per i motori che vogliono bitmap, senza alfa premoltiplicato e senza ombre cotte fuori dai limiti dello sprite.

Download

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

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

File inclusi in questo pack
FileFormatoPesoDownload
Kit completo — sorgenti SVG, esportazioni PNG a 1x/2x/4x, licenza e readmeZIP43 kB Ottieni →
Pannello finestra, SVG modificabileSVG2.4 kB Ottieni →
Pulsante (stato normale), SVG modificabileSVG417 B Ottieni →

Come si usa

  1. In Unity, importa i PNG, imposta Texture Type su Sprite (2D and UI) e il bordo su 0, 0, 0, 0 per il pannello finestra e 0, 0, 0, 0 per i pulsanti; poi imposta Image Type su Sliced sul componente d'interfaccia.
  2. In Godot 4, usa un NinePatchRect e imposta i margini della patch sugli stessi numeri, oppure trascina dentro direttamente l'SVG e lascia che Godot lo rasterizzi alla scala indicata nelle opzioni di importazione.
  3. In Unreal, importa come Texture2D, crea uno Slate Brush con Draw As impostato su Box e inserisci il margine come frazione della dimensione della texture — per il pannello da 128 px e per il pulsante da 148 px.
  4. Per risultati nitidi a scale d'interfaccia non intere, usa il PNG 2x o 4x invece di ingrandire quello a 1x, oppure punta il motore sul sorgente SVG e lascia che rasterizzi alla dimensione finale.

Licenza

Creative Commons Zero 1.0 — Dominio pubblico. Nessuna attribuzione. Termini completi · Cosa significa in pratica