Packs de interfaz
Carbon Kit de paneles — paneles con escuadras y botones
Paneles de ventana nine-slice con escuadras en fibra de carbono, marcos de lista rehundidos y cuatro estados de botón biselado, en SVG y PNG en 1x/2x/4x.

Sobre este pack
El mismo degradado especular de cinco paradas y el mismo patrón de líneas cepilladas que la familia de acero neutro, sobre una paleta mucho más oscura y con el cuerpo abierto en escuadras de esquina. Ese último cambio es lo que convierte un panel en el bisel de un instrumento: un borde cerrado se lee como una ventana, cuatro escuadras se leen como algo atornillado a un salpicadero. Los remaches se quedan, porque un panel de cabina que no está fijado a nada es un render.
Dos paneles nine-slice — un marco de ventana con escuadras en las esquinas con esquinas de 10 px y un marco interior rehundido con esquinas de 8 px — cubren casi cualquier caja que necesite un menú: diálogos, rejillas de inventario, fondos de lista, tooltips y paneles de estadísticas. No hay ningún borde continuo — cuatro escuadras marcan los límites y el resto queda abierto, así que el panel enmarca el contenido sin encerrarlo. 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 cuatro estados de botón biselado: normal, hover, pulsado y desactivado. Están dibujados sobre la misma base de 152×44 con esquinas de 4 px, así que cambias la textura en un único widget de botón y obtienes todo el ciclo de interacción sin mover un rectángulo. El estado pulsado baja su cara dos píxeles y quita el brillo superior en vez de solo oscurecerse, y eso es lo que hace que un botón se sienta pulsado y no simplemente recoloreado.
Todo viene dos veces. Las fuentes SVG son los archivos en los que se dibujó el kit — ábrelos, cambia los seis tonos de casi negro o el único acento de ámbar de aviso 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.
Descarga
Enlace directo · sin registro · sin página de esperaKit completo — fuentes SVG, exportados PNG en 1x/2x/4x, licencia y readme
Cómo se usa
- En Unity, importa los PNG, pon Texture Type en Sprite (2D and UI) y el borde en 10, 10, 10, 10 para el panel de ventana y en 4, 4, 4, 4 para los botones; luego pon Image Type en Sliced en el componente de interfaz.
- En Godot 4, usa un NinePatchRect y pon los márgenes del parche en esos mismos números, o suelta el SVG directamente y deja que Godot lo rasterice a la escala que indiques en las opciones de importación.
- En Unreal, importa como Texture2D, crea un Slate Brush con Draw As en Box e introduce el margen como fracción del tamaño de la textura — 0.07813 para el panel de 128 px y 0.02632 para el botón de 152 px.
- Para resultados nítidos en escalas de interfaz no enteras, usa el PNG de 2x o 4x en vez de ampliar el de 1x, o apunta tu motor al SVG fuente y deja que lo rasterice al tamaño final.
Licencia
Creative Commons Atribución 4.0 — Gratis para uso comercial. Atribución obligatoria. Términos completos · Qué significa en la práctica
"Carbon Kit de paneles — paneles con escuadras y botones" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/carbon-panel-ui-kit


