DOM-QUEST Sprite Frame Editor

Editor para probar, recolocar, ajustar cortes por frame y exportar spritesheets corregidos.

1. Fuente y grilla

Puedes editar el PNG incluido o cargar cualquier otro spritesheet local. La grilla base es 8×8. El visor muestra transparencia con patrón visual, pero no exporta ese patrón.
Arrastra aquí otro spritesheet PNG recomendado, también acepta WebP/JPG. Todo se procesa localmente.

Activa “mantener ajustes” cuando quieras probar el mismo arreglo JSON sobre otra versión del spritesheet. Déjalo apagado para empezar un archivo nuevo desde cero. Exporta PNG/JSON y súbelo al repo cuando apruebes la corrección.

Fuente—
Frame destino—
Animación—
Fuente usada—

Haz clic en cualquier celda para seleccionar un frame. Rectángulo azul = celda destino seleccionada; cyan punteado = celda fuente cuando pegaste un frame; naranja = corte fuente actual.

Salida / frame completo

Déjalo desactivado para ver el frame completo con overflow. Si algo queda fuera de la celda, el editor lo advierte.

2. Ajuste fino del frame

Recolocar dentro de la celda final

Flechas del teclado mueven el frame. Shift + flechas mueve de 8 px.

Corte fuente individual

Para “pies cortados”, normalmente aumenta Alto extra o baja/sube Corte Y. El preview muestra el corte completo sin ocultar overflow.

Herramientas de autoajuste
Copiar / pegar frame y ajustes

Copiar frame completo copia la celda fuente y sus cortes/offsets; al pegarla en otra celda del mismo spritesheet, esa celda exportará el frame copiado. Copiar solo ajustes no cambia la fuente, solo pega posición/corte/escala.

3. Probar animaciones y guardar

Animación
Guardar / cargar arreglo

El JSON conserva cortes, offsets, escala, tamaño de celda, baseline y frames pegados desde otra celda. Cárgalo después para continuar el ajuste fino.

Resumen técnico actual