Packs de interfaz

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

Paneles de ventana nine-slice de marco único en resplandor de máquina, marcos de lista rehundidos y cuatro estados de botón biselado, en SVG y PNG en 1x/2x/4x.

  • ui
  • svg
  • png transparente
  • nine-slice
  • panel
  • botón
  • menú
  • sobrio
  • arcade
  • máquina arcade
  • retro
  • puntuación
Panel de menú resplandor de máquina con una franja de título en oro moneda y un área de lista rehundida, junto a una columna que muestra el mismo botón biselado en estado normal, hover con contorno y pulsado hacia dentro
vista previa 1600×800la transparencia se muestra como damero

Sobre este pack

Paneles de máquina recreativa: cuerpo ciruela, bloques en oro moneda, un trazo magenta. Todo es un paso más grande que en las otras familias porque una pantalla arcade se lee de pie.

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 200×56 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 ciruela o el único acento de oro moneda 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 espera
Descargar ZIP49 kB

Kit completo — fuentes SVG, exportados PNG en 1x/2x/4x, licencia y readme

Archivos incluidos en este pack
ArchivoFormatoPesoDescarga
Kit completo — fuentes SVG, exportados PNG en 1x/2x/4x, licencia y readmeZIP49 kB Obtener →
Panel de ventana, SVG editableSVG1.6 kB Obtener →
Botón (estado normal), SVG editableSVG972 B Obtener →

Cómo se usa

  1. 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.
  2. 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.
  3. 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 168 px y el botón de 200 px.
  4. 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

Línea de crédito para copiar
"Coinop 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/coinop-panel-ui-kit