Packs de interfaz

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

18 sprites de interfaz CRT ámbar: paneles nine-slice de marco simple, un tooltip, una barra de título, un separador, una etiqueta y doce estados de botón biselados.

  • ui
  • svg
  • png transparente
  • nine-slice
  • panel
  • botón
  • menú
  • sobrio
  • terminal
  • ámbar
  • crt
  • retro
Panel de menú CRT ámbar con una franja de título en ámbar de CRT 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×1115la transparencia se muestra como damero

Sobre este pack

El tubo ámbar en vez del verde. La misma disciplina de un solo matiz, más cálida y más pesada, con un trazo más grueso porque el fósforo ámbar florecía más de lo que el verde lo hizo nunca.

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 doce sprites de botón biselados: normal, hover, pulsado y desactivado, cada uno dibujado tres veces —una barra estándar de 128×46, un botón de icono cuadrados cuadrado y un botón compacto para barras de herramientas y acciones en línea. Los tres tamaños son archivos separados y no un sprite escalado porque el dibujo depende del tamaño: el bisel calculado a 46 px se recalcula en los menores, no se encoge. El estado pulsado baja su cara dos píxeles y quita el brillo superior en lugar de solo oscurecer, que es lo que hace que un botón se sienta pulsado y no simplemente recoloreado.

Cuatro piezas menores cubren lo que un menú necesita entre los paneles: un tooltip con punta, una barra de título que se apoya en el borde superior de un panel, un separador de sección con marca central y una etiqueta para contadores y estados. Ninguna es el panel de ventana a otro tamaño: un nine-slice ya se estira a cualquier medida, así que un segundo archivo con otro ancho sería relleno y no un componente.

Todo viene dos veces. Las fuentes SVG son los archivos en los que se dibujó el kit — ábrelos, cambia los seis tonos de negro cálido o el único acento de ámbar de CRT 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 ZIP88 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 readmeZIP88 kB Obtener →
Panel de ventana, SVG editableSVG3.6 kB Obtener →
Botón (estado normal), SVG editableSVG2.7 kB 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 108 px y el botón de 128 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
"Amberterm 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/amberterm-panel-ui-kit