Slate Kit de paneles — paneles de marco único y botones

Un kit de interfaz pequeño y deliberadamente sobrio para juegos que necesitan un menú legible sin toda una dirección artística encima. La paleta son seis tonos de pizarra neutra más un acento cálido: queda bajo texto blanco o gris claro con un contraste cómodo y no pelea con el color que tu juego ya use, que es la razón principal de que sea así de apagado a propósito.

Dos paneles nine-slice — un marco de ventana de marco único con esquinas de 24 px y un marco interior rehundido con esquinas de 16 px — cubren casi cualquier caja que necesite un menú: diálogos, rejillas de inventario, fondos de lista, tooltips y paneles de estadísticas. Un único borde continuo mantiene el panel lo bastante discreto como para ponerse detrás de texto denso. Los dos se estiran limpiamente a cualquier tamaño porque las esquinas nunca escalan y el centro es un relleno plano.

Sobre los paneles se apoyan doce sprites de botón cuadrados: normal, hover, pulsado y desactivado, cada uno dibujado tres veces —una barra estándar de 128×40, un botón de icono cuadrados cuadrado y un botón compacto para barras de herramientas y acciones en línea. Los tres tamaños son archivos separados y no un sprite escalado porque el dibujo depende del tamaño: el bisel calculado a 40 px se recalcula en los menores, no se encoge. El estado pulsado baja su cara dos píxeles y quita el brillo superior en lugar de solo oscurecer, que es lo que hace que un botón se sienta pulsado y no simplemente recoloreado.

Cuatro piezas menores cubren lo que un menú necesita entre los paneles: un tooltip con punta, una barra de título que se apoya en el borde superior de un panel, un separador de sección con marca central y una etiqueta para contadores y estados. Ninguna es el panel de ventana a otro tamaño: un nine-slice ya se estira a cualquier medida, así que un segundo archivo con otro ancho sería relleno y no un componente.

Todo viene dos veces. Las fuentes SVG son los archivos en los que se dibujó el kit — ábrelos, cambia los seis tonos de pizarra neutra o el único acento de oro cálido y vuelve a exportar. Los exportados PNG son planos, transparentes y preescalados a 1x, 2x y 4x para motores que quieren bitmaps, sin alfa premultiplicado y sin sombra horneada fuera de los límites del sprite.

Creative Commons Atribución 4.0 — Gratis para uso comercial. Atribución obligatoria. Términos completos · Qué significa en la práctica