Generador de Sprites
Combina imágenes en sprites con arrastrar para reordenar, diseño de cuadrícula, relleno, modos de escala. Exporta PNG/WebP/JPG con datos JSON atlas para motores de juegos y CSS.
¿Qué es un sprite sheet y por qué usar uno?
Un sprite sheet es una imagen única que contiene múltiples imágenes más pequeñas (sprites) organizadas en cuadrícula. Usar sprite sheets reduce las peticiones HTTP, mejora el rendimiento de carga y hace el renderizado de juegos más eficiente.
¿Qué formatos de imagen son compatibles?
Puedes subir imágenes PNG, JPG, GIF, SVG y WebP. La herramienta soporta carga por lotes y pegar desde el portapapeles (Ctrl+V) para un flujo de trabajo rápido.
¿Qué formatos de exportación están disponibles?
Exporta sprite sheets como PNG (con transparencia), WebP (formato moderno con archivos más pequeños) o JPG (mejor para fotos sin transparencia). Elige según los requisitos de tu plataforma.
¿Cómo reordeno las imágenes en el sprite sheet?
Arrastra y suelta las miniaturas de las imágenes para reorganizar su posición en el sprite sheet. También puedes pegar imágenes directamente desde el portapapeles usando Ctrl+V.
¿Qué son los datos JSON atlas y qué motores los soportan?
Los datos JSON atlas contienen posición, tamaño e información de cada sprite. Son compatibles con motores de juegos populares como Phaser, PixiJS, Unity, Cocos2d y muchos otros para extracción automática de sprites.
¿Cuáles son los diferentes modos de escala?
El modo Ajustar escala las imágenes manteniendo la proporción. Rellenar escala para cubrir toda la celda y recorta el exceso. Estirar deforma las imágenes para llenar la celda sin mantener la proporción.
¿La herramienta soporta transparencia?
Sí, las exportaciones PNG y WebP conservan la transparencia de las imágenes originales. También puedes establecer un color de fondo personalizado para el sprite sheet, útil para exportaciones JPG que no soportan transparencia.
¿Cómo afecta el relleno al sprite sheet?
El relleno añade espacio entre sprites individuales en la hoja, previniendo sangrados visuales cuando se muestrean las texturas. Esto es especialmente importante para motores de juegos que usan filtrado lineal.
¿Puedo usar sprite sheets para CSS?
Sí, los sprite sheets funcionan genial para sprites CSS. Los datos JSON atlas pueden usarse para generar reglas CSS background-position, reduciendo peticiones HTTP y mejorando el rendimiento de carga.
¿Cuáles son las mejores prácticas para dimensiones de sprite sheets?
Mantén las dimensiones como potencias de 2 (256x256, 512x512, 1024x1024) para un manejo óptimo de texturas GPU. La mayoría de motores de juegos prefieren estas dimensiones para mejor rendimiento.
¿Cómo mejoran el rendimiento del juego los sprite sheets?
Los sprite sheets reducen las llamadas de dibujo al agrupar múltiples sprites en una sola textura. Esto minimiza los cambios de estado GPU, reduce la sobrecarga de memoria y permite un renderizado más eficiente.
¿Cuál es la diferencia entre sprite sheets y atlas de texturas?
Los sprite sheets típicamente organizan frames en una cuadrícula uniforme, mientras que los atlas de texturas pueden empacar sprites de formas irregulares más eficientemente usando algoritmos como bin packing.
Cómo usar Generador de Sprites
Combina varias imágenes en una sola hoja de sprites directamente en tu navegador. Arrastra para reordenar los fotogramas, ajusta la cuadrícula y el espaciado, y exporta un atlas PNG/WebP/JPG con datos JSON para motores de juego y sprites CSS. Todo el procesado es local.
- Añade tus imágenes y usa los botones + y − para definir las Columns y Rows de la cuadrícula.
- Ajusta Padding (px) para dejar espacio entre sprites y evitar el sangrado de texturas.
- Deja Sprite Size en Auto para adaptarlo al fotograma mayor, o escribe dimensiones fijas para celdas uniformes.
- Elige un Scale Mode — Fit, Fill o Stretch — para controlar cómo encaja cada imagen en su celda.
- Selecciona un Background (Transparent, White, Black o Custom), fija el Format en PNG, WebP o JPG y nombra el archivo en Filename.
- Arrastra las miniaturas para reordenar fotogramas — las coordenadas del atlas se actualizan solas — y exporta la hoja junto con su JSON.
Usa al menos 2 px de espaciado para que los sprites vecinos no se mezclen cuando las texturas se escalan o se filtran en tu motor.
Herramientas relacionadas
- Calculadora Chmod Calculadora chmod online gratuita para visualizar y calcular permisos de archivos Linux con casillas. Convierte instantáneamente entre notación numérica (755, 644) y simbólica (rwxr-xr-x). Soporta permisos especiales como setuid, setgid, sticky bit.
- Tabla ASCII Referencia completa de codificación de caracteres ASCII con códigos decimales, hexadecimales, octales, binarios, entidades HTML y descripciones. Búsqueda y filtro instantáneos.
- Probador de Solicitudes HTTP Prueba APIs REST directamente en tu navegador. Envía solicitudes GET, POST, PUT, DELETE con headers, body y parámetros personalizados. Ve el estado, headers y cuerpo JSON al instante.
- Generador .htaccess Genere reglas .htaccess de Apache para redirecciones, reescrituras, cabeceras de seguridad, caché y más.
- Generador de Robots.txt Generador gratuito de robots.txt en línea. Cree y personalice archivos robots.txt para controlar el rastreo de motores de búsqueda, gestionar el acceso de rastreadores y optimizar el SEO de su sitio.
- Generador de Sitemap Generador gratuito de sitemap XML en línea. Agregue URLs, configure prioridades y frecuencias, cree sitemaps SEO al instante.
- GIF Extraer Fotogramas Extrae y descarga fotogramas individuales de animaciones GIF como PNG o sprite sheet. Herramienta online gratuita con vista previa y exportación ZIP.
- GIF Invertido Invierte el orden de reproducción de animaciones GIF online gratis. Sube, previsualiza y descarga GIFs invertidos al instante.