Pack d'interfaccia
Dusk Kit di pannelli — pannelli con barra del titolo e pulsanti
Pannelli finestra nine-slice con barra del titolo in porpora del crepuscolo, cornici di elenco incassate e quattro stati di pulsante squadrato, in SVG e PNG a 1x/2x/4x.
Su questo pack
Un kit dai bordi duri per giochi in pixel che vogliono comunque un menu vero, con la barra del titolo integrata nel pannello invece che aggiunta sopra. Non ci sono angoli arrotondati né antialiasing da nessuna parte: ogni bordo è un'unica riga piatta di pixel, l'unico modo in cui un pannello conserva la sua forma quando un giocatore avvia il gioco a 3x su un monitor 4K. I viola sono abbastanza freddi perché ambra si legga come un'allerta senza bisogno del rosso.
Due pannelli nine-slice — una cornice finestra con barra del titolo con angoli da 16 px e una cornice interna incassata con angoli da 12 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 si appoggiano quattro stati di pulsante ad angoli retti: normale, hover, premuto e disabilitato. Sono disegnati sulla stessa base 96×32 con angoli da 8 px, quindi cambi la texture su un unico widget di pulsante e ottieni l'intero ciclo di interazione senza spostare un rettangolo. Lo stato premuto abbassa la sua faccia di due pixel e toglie il riflesso in alto invece di limitarsi a scurire, ed è questo a far sentire un pulsante cliccato e non semplicemente ricolorato.
Tutto arriva due volte. I sorgenti SVG sono i file in cui il kit è stato disegnato — aprili, cambia i sei toni viola notturno o l'unico accento ambra, 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'attesaKit completo — sorgenti SVG, esportazioni PNG a 1x/2x/4x, licenza e readme
Come si usa
- In Unity, importa i PNG, imposta Texture Type su Sprite (2D and UI) e il bordo su 16, 16, 16, 16 per il pannello finestra e 8, 8, 8, 8 per i pulsanti; poi imposta Image Type su Sliced sul componente d'interfaccia.
- 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.
- 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 — 0.2 per il pannello da 80 px e 0.08333 per il pulsante da 96 px.
- 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.
- Ogni bordo cade su un pixel intero e nulla è antialiasato, quindi importa il PNG a 1x con il filtro impostato su Point (Unity), Nearest (Godot) o Nearest-Neighbour (Unreal) e scala solo per numeri interi.
Licenza
Creative Commons Attribuzione 4.0 — Gratis per uso commerciale. Attribuzione obbligatoria. Termini completi · Cosa significa in pratica
"Dusk Kit di pannelli — pannelli con barra del titolo e pulsanti" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/dusk-panel-ui-kitAltri Pack d'interfaccia
Vedi tutti →
Aetherlab Sfondi
7 elementi di sfondo e sovrapposizione (magitech) per interfacce in modalità scuro — blu da laboratorio, accento ciano etereo. SVG e PNG trasparente a 1x/2x/4x.
Aetherlab Cornici per carte
11 componenti per carte e notifiche (magitech) per interfacce in modalità scuro — blu da laboratorio, accento ciano etereo. SVG e PNG trasparente a 1x/2x/4x.
Aetherlab Kit di dialogo
7 componenti di dialogo (magitech) per interfacce in modalità scuro — blu da laboratorio, accento ciano etereo. SVG e PNG trasparente a 1x/2x/4x.
Aetherlab Barre HUD — vita, mana e vigore
Una cornice di barra nine-slice in etere freddo con tre riempimenti a nucleo cavo e una variante segmentata, 200×20 con terminali da 4 px. SVG e PNG.