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

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 stanno dodici sprite pulsante squadrati: normale, hover, premuto e disattivato, ciascuno disegnato tre volte — una barra standard 96×32, 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 32 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 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.

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