Packs de interfaz

Bitrush Kit de paneles — paneles con barra de título y botones

Paneles de ventana nine-slice con barra de título en cartel Y2K, marcos de lista rehundidos y cuatro estados de botón de pestaña, en SVG y PNG en 1x/2x/4x.

  • ui
  • svg
  • png transparente
  • nine-slice
  • panel
  • botón
  • menú
  • cinta
  • y2k
  • retrofuturista
  • cartel
  • hud
Panel de menú cartel Y2K con una franja de título en amarillo de señal y un área de lista rehundida, junto a una columna que muestra el mismo botón de pestaña en estado normal, hover con contorno y pulsado hacia dentro
vista previa 1600×800la transparencia se muestra como damero

Sobre este pack

Paneles Y2K planos — contornos rectos y gruesos, bloques amarillos macizos, trazo azul eléctrico. Sin resplandor y sin degradado: este estilo es una plantilla impresa, y la contención es todo el look.

Dos paneles nine-slice — un marco de ventana con barra de título 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. 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 de pestaña: normal, hover, pulsado y desactivado. Están dibujados sobre la misma base de 148×52 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 tinta o el único acento de amarillo de señal 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 ZIP16 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 readmeZIP16 kB Obtener →
Panel de ventana, SVG editableSVG2.4 kB Obtener →
Botón (estado normal), SVG editableSVG417 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 128 px y el botón de 148 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 Zero 1.0 — Dominio público. Sin atribución. Términos completos · Qué significa en la práctica