Packs de interfaz
Reliquary Kit de paneles — paneles con barra de título y botones
Paneles de ventana nine-slice con barra de título en piedra helada, marcos de lista rehundidos y cuatro estados de botón biselado, en SVG y PNG en 1x/2x/4x.

Sobre este pack
El marco tallado al que se le ha quitado el calor. El roble se lee como una taberna; esto se lee como una cripta, y la diferencia no es solo la paleta — la banda de cabecera sustituye al segundo marco concéntrico y un botón biselado sustituye a la pestaña redondeada. Los remates de esquina y las gemas engastadas en ellos son la misma geometría en los dos, y eso es lo que los mantiene en el mismo estilo en vez de ser dos kits de fantasía sin relación.
Dos paneles nine-slice — un marco de ventana con barra de título con esquinas de 12 px y un marco interior rehundido con esquinas de 10 px — cubren casi cualquier caja que necesite un menú: diálogos, rejillas de inventario, fondos de lista, tooltips y paneles de estadísticas. Una banda de título va integrada en la parte superior del panel, así que la cabecera de un diálogo no necesita un segundo sprite ni alineación manual. 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 128×56 con esquinas de 6 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 índigo profundo o el único acento de plata pá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.
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 12, 12, 12, 12 para el panel de ventana y en 6, 6, 6, 6 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.11538 para el panel de 104 px y 0.04688 para el botón de 128 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
"Reliquary Kit de paneles — paneles con barra de título y botones" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/reliquary-panel-ui-kit


