Packs de interfaz
Redline Kit de paneles — paneles de marco único y botones
Paneles de ventana nine-slice de marco único en rojo de alarma, marcos de lista rehundidos y cuatro estados de botón biselado, en SVG y PNG en 1x/2x/4x.

Sobre este pack
Paneles de alarma: cuerpo rojo, trazo ámbar. Hechos para las pantallas que un juego enseña cuando algo ha ido mal, donde el jugador tiene que encontrar la línea importante antes de leer nada.
Dos paneles nine-slice — un marco de ventana de marco único con esquinas de 0 px y un marco interior rehundido con esquinas de 0 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 cuatro estados de botón biselado: normal, hover, pulsado y desactivado. Están dibujados sobre la misma base de 140×36 con esquinas de 0 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 negro sangre 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 0, 0, 0, 0 para el panel de ventana y en 0, 0, 0, 0 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 — para el panel de 120 px y el botón de 140 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
"Redline Kit de paneles — paneles de marco único y botones" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/redline-panel-ui-kit


