Packs de interfaz

Efectos de estado Sandbox

12 marcos de estado e indicadores de tiempo (vóxel) para interfaces de tema claro — paleta arena del desierto, acento azul cielo. SVG y PNG transparente en 1x/2x/4x.

  • ui
  • svg
  • png transparente
  • mejora
  • perjuicio
  • efecto de estado
  • enfriamiento
  • vóxel
  • vóxel
  • vóxel
  • interfaz clara
  • construcción
  • sandbox
Hoja con 12 marcos de estado e indicadores de tiempo (vóxel) de la familia Sandbox, dispuestos sobre un damero de transparencia y con sus medidas en píxeles escritas debajo
vista previa 1600×1091la transparencia se muestra como damero

Sobre este pack

Efectos de estado Sandbox es un conjunto de 12 marcos de estado e indicadores de tiempo dibujados en estilo vóxel, donde cada superficie es la cara frontal de un cubo con la cara superior iluminada y la derecha en sombra. Contiene marcos de mejora, perjuicio y neutro, marcos permanente y por expirar, cinco pasos del anillo de duración, una barra de duración y una insignia de acumulación.

Un icono de mejora está en pantalla tres segundos y el jugador nunca lo mira de frente: lo capta por el rabillo del ojo. Eso descarta la solución habitual: un borde verde para lo bueno y uno rojo para lo malo se cae en los modos para daltónicos y choca con los colores que el propio juego ya usa en ese HUD.

La extrusión es geometría real y no una sombra: el ángulo de luz nunca cambia, hay exactamente tres tonos por bloque y la cara frontal está metida hacia dentro para que el cubo se quede dentro de los límites de su propio sprite.

Dentro de ese estilo, esta es la lectura de Sandbox: una interfaz de tema claro sobre una paleta arena del desierto con acentos en azul cielo, construida en torno a una banda de cabecera cruzando la parte superior del marco, botones biselados de 112x40, barras en bandas divididas en 12 segmentos e iconos a dos tintas sobre una rejilla de 16px. Esas medidas son la razón por la que dos familias pueden compartir un estilo artístico sin ser intercambiables: el estilo decide cómo se dibuja un borde, los números deciden para qué sirve la interfaz.

Mejora y perjuicio se separan en cambio por la forma. El marco de mejora empuja sus esquinas hacia fuera y el de perjuicio las pliega hacia dentro: uno crece, el otro come. Ambos sobreviven a una captura en escala de grises. La duración es un anillo alrededor del icono y no una barra debajo, porque una barra empuja cada icono unos píxeles hacia abajo y rompe la fila. Los anillos llegan en cinco pasos y no como un sprite porque la mayoría de motores no pueden recortar un SVG en tiempo de ejecución: un anillo que se llena es un shader o un atlas de pasos, y el atlas funciona en todas partes. Los marcos llegan vacíos: tu propio icono de efecto va en el centro.

Cada sprite viene como SVG editable y como PNG transparente en 1x, 2x y 4x, así que puedes soltar los PNG directamente en un motor o abrir el vector y cambiar un color. Dibujado con las mismas medidas que el resto de la familia Sandbox, lo que significa que este kit y el kit de paneles de Sandbox encajan sin redimensionar ninguno. Encaja bien en juegos vóxel y de bloques.

Descarga

Enlace directo · sin registro · sin página de espera
Descargar ZIP29 kB

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

Archivos incluidos en este pack
ArchivoFormatoPesoDescarga
Conjunto completo — fuentes SVG, exportados PNG en 1x/2x/4x, licencia y readmeZIP29 kB Obtener →
Marco de mejora, esquinas hacia fuera, SVG editableSVG916 B Obtener →

Cómo se usa

  1. Pon tu icono de efecto en el centro rehundido a alrededor del 60 % del ancho del marco; el rehundido está dibujado con ese margen.
  2. Cambia el marco entero entre mejora y perjuicio en vez de teñir uno, porque la diferencia está en las esquinas.
  3. Reproduce los anillos de duración como una secuencia ordenada de lleno a vacío, o usa el anillo al 50 por ciento como fotograma único cuando el resto exacto no importe.
  4. Ancla la insignia de acumulación a la esquina superior derecha del marco y dibuja la cifra con tu propia tipografía: aquí no se dibujan dígitos.

Licencia

Creative Commons Zero 1.0 — Dominio público. Sin atribución. Términos completos · Qué significa en la práctica