Pack d'interfaccia
Oak Kit di pannelli — pannelli a cornice doppia e pulsanti
Pannelli finestra nine-slice a cornice doppia in quercia calda, cornici di elenco incassate e quattro stati di pulsante a scheda, in SVG e PNG a 1x/2x/4x.

Su questo pack
Una cornice di legno caldo per il tipo di gioco che ha una griglia d'inventario e un diario delle missioni. Due bordi concentrici separati da uno spazio le danno un aspetto intagliato invece di un rettangolo marrone piatto, e i pulsanti a forma di scheda si appoggiano su una linea di base in ottone perché una loro fila si legga come una serie di pagine e non come una fila di controlli separati. Tutto qui è una taglia sopra un kit standard, perché un menu fantasy di solito si guarda, non si scorre.
Due pannelli nine-slice — una cornice finestra a cornice doppia con angoli da 32 px e una cornice interna incassata con angoli da 20 px — coprono quasi ogni riquadro di cui un menu ha bisogno: dialoghi, griglie d'inventario, sfondi di elenco, tooltip e pannelli di statistiche. Due bordi concentrici separati da uno spazio si leggono come intagliati e non come disegnati, ed è questo a separare un'interfaccia lavorata da un rettangolo con un tratto. 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 a scheda: normale, hover, premuto e disabilitato. Sono disegnati sulla stessa base 160×48 con angoli da 16 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 marrone legno o l'unico accento ottone lucidato, 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 32, 32, 32, 32 per il pannello finestra e 16, 16, 16, 16 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.25 per il pannello da 128 px e 0.1 per il pulsante da 160 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.
- L'accento in ottone è un unico valore nell'SVG — sostituirlo con argento o verderame riveste tutto il kit per un'altra fazione senza toccare i toni del legno.
Licenza
Creative Commons Attribuzione 4.0 — Gratis per uso commerciale. Attribuzione obbligatoria. Termini completi · Cosa significa in pratica
"Oak Kit di pannelli — pannelli a cornice doppia e pulsanti" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/oak-panel-ui-kit


