Generador de hojas de sprites

About Generador de hojas de sprites

Last updated: May 2026

OptiPix Sprite Sheet Generator combina múltiples imágenes en una única hoja de sprites optimizada, con CSS listo para pegar, coordenadas JSON y variables SCSS. Elige un diseño: tira horizontal, tira vertical, cuadrícula (con número de columnas personalizado) o empaquetado (empaquetado en contenedores para un desperdicio mínimo de espacio). Establece el relleno entre los sprites para evitar sangrado de bordes. La salida es una única hoja de sprites PNG más CSS generado para cada sprite ('.sprite-icon-home { background-position: -0px -0px; … }'), un mapa de coordenadas JSON y variables SCSS. Soporta escalado Retina @1x y @2x. Cada sprite se nombra según el nombre de archivo de su origen. Todo se ejecuta localmente: tus imágenes nunca abandonan tu dispositivo. Creado para desarrolladores de juegos, desarrolladores web que usan sprites CSS y cualquiera que quiera agrupar iconos pequeños en una sola solicitud de red.

How It Works

Cada imagen de entrada se carga en memoria; el algoritmo de diseño elegido (tira, cuadrícula o empaquetado en estanterías) calcula las coordenadas (x, y, w, h) por sprite; la hoja de sprites se renderiza en un lienzo; se generan CSS / JSON / SCSS a partir del mismo mapa de coordenadas.

Use Cases

• •Agrupa iconos de UI en una única hoja de sprites PNG + CSS
• •Crea un atlas de sprites para un juego 2D en Phaser o Pixi
• •Combina iconos de redes sociales en un solo sprite CSS para un sitio más rápido
• •Empaqueta fotogramas de animación de personajes en una tira horizontal
• •Crea una hoja de sprites @2x lista para Retina a partir de imágenes de origen

You Might Also Like

If you find Generador de hojas de sprites useful, check out these related tools: Image Crop, Image Resizer, and Format Converter. All tools run entirely in your browser with no uploads or signups required.