Packs de interfaz

Bitrush Controles — casilla, interruptor y deslizador

Ocho controles de interfaz en cartel Y2K: casilla, radio, interruptor y deslizador, cada uno con estado encendido y apagado dibujados como formas distintas. SVG y PNG.

  • ui
  • svg
  • png transparente
  • casilla
  • interruptor
  • deslizador
  • ajustes
  • controles
  • y2k
  • retrofuturista
  • cartel
  • hud
Controles de ajustes sobre fondo de damero — una casilla vacía y otra marcada, un radio sin seleccionar y otro seleccionado, un interruptor apagado y encendido y la guía de un deslizador con su tirador
vista previa 1600×757la transparencia se muestra como damero

Sobre este pack

Controles a 28px, sobredimensionados a propósito. Una interfaz con estilo de cartel exagera sus controles, y una casilla pequeña junto a un contorno grueso se lee como un error.

El conjunto cubre los cuatro controles que una pantalla de ajustes necesita de verdad: una casilla, un botón de radio, un interruptor y un deslizador con tirador aparte. Cada control con estado incluye ambos estados como archivo propio, sobre una base de 28×28 — el interruptor mide 56×28 y la guía del deslizador 224 px de ancho para poder aplicarle nine-slice a cualquier longitud.

Encendido y apagado están dibujados como formas distintas, no como colores distintos. Una casilla sin marcar es un hueco vacío; una marcada es una superficie rellena con una marca recortada. Eso importa porque la pantalla de ajustes es justo donde es más probable que un jugador tenga activado un modo para daltónicos, un shader en escala de grises o un postprocesado muy teñido — y un estado que solo se lee por el matiz desaparece bajo los tres.

El deslizador viene como guía y tirador en vez de como un solo sprite. Animar un deslizador de una pieza obliga a redibujarlo por cada valor; con dos piezas estiras el relleno y mueves el tirador, que es justo lo que ya espera cualquier toolkit de interfaz. El tirador lleva una muesca central para que su giro y su posición sigan siendo legibles a tamaños pequeños.

Todo se incluye como SVG editable y como PNG plano transparente en 1x, 2x y 4x, dibujado con los mismos seis tonos de negro tinta que el resto de la familia Bitrush.

Descarga

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

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

Archivos incluidos en este pack
ArchivoFormatoPesoDescarga
Conjunto completo — 8 fuentes SVG, exportados PNG en 1x/2x/4x, licencia y readmeZIP37 kB Obtener →
Interruptor (estado encendido), SVG editableSVG418 B Obtener →
Guía del deslizador, SVG editableSVG901 B Obtener →

Cómo se usa

  1. Cambia la textura entera entre los estados encendido y apagado en vez de teñir un solo sprite; los dos estados se diferencian en la forma, así que un tinte por sí solo no los reproduce.
  2. La guía del deslizador admite nine-slice con 9 px de extremo a cada lado — estira el centro y los extremos redondeados quedan intactos a cualquier anchura.
  3. En Unity, conecta los dos archivos a los gráficos Background y Checkmark del componente Toggle, o cambia el sprite en un manejador onValueChanged si prefieres una sola imagen.
  4. Centra el tirador sobre el borde del relleno: mide 24 px de ancho, así que despláza­lo la mitad de eso desde el borde derecho del relleno para que quede sobre el valor y no detrás.

Licencia

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