Pack d'interfaccia
Inkwell Kit di pannelli — pannelli a cornice singola e pulsanti
18 sprite d’interfaccia fumetto inchiostrato: pannelli nine-slice a cornice singola, un tooltip, una barra titolo, un separatore, un chip e dodici stati pulsante squadrati.

Su questo pack
Un kit da fumetto che prende il suo peso dall'inchiostro e non dall'illuminazione. Ogni superficie è un riempimento piatto dentro un contorno scuro e spesso con un'ombra scostata dura sotto — niente smussi, niente sfumature, niente che finga che lo schermo abbia una fonte di luce. È questo a permettergli di stare accanto a personaggi disegnati a mano senza sembrare un altro gioco.
Due pannelli nine-slice — una cornice finestra a cornice singola con angoli da 26 px e una cornice interna incassata con angoli da 18 px — coprono quasi ogni riquadro di cui un menu ha bisogno: dialoghi, griglie d'inventario, sfondi di elenco, tooltip e pannelli di statistiche. Un unico bordo continuo tiene il pannello abbastanza discreto da stare dietro a testo denso. 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 squadrati: normale, hover, premuto e disattivato, ciascuno disegnato tre volte — una barra standard 152×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 manifesto piatto o l'unico accento rosso 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'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 26, 26, 26, 26 per il pannello finestra e 18, 18, 18, 18 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.23214 per il pannello da 112 px e 0.11842 per il pulsante da 152 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.
- Il contorno è di quattro pixel a 1x ed è tutto lo stile — se riduci il kit sotto 1x il contorno collassa e i pannelli smettono di leggersi come inchiostrati, quindi usa l'esportazione a 1x come pavimento e cresci da lì.
Licenza
Creative Commons Attribuzione 4.0 — Gratis per uso commerciale. Attribuzione obbligatoria. Termini completi · Cosa significa in pratica
"Inkwell Kit di pannelli — pannelli a cornice singola e pulsanti" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/inkwell-panel-ui-kit


