01 proyectos 02 conceptos 03 juegos 04 apps 05 utilidades 06 gamebob 07 charlas 08 equipo

Mis mejores utilidades, ahora en tu móvil.

Accede a todas mis herramientas y proyectos de forma rápida, optimizada y en un solo lugar.

Animador de Hitbox y Hurtbox para Sprites

Dibuja capas de colisión en cada fotograma de tu sprite, previsualiza secuencias con papel cebolla, ajusta coordenadas exactas en píxeles y exporta JSON neutro.

Carga una animación, confirma los recortes de fotograma y dibuja las áreas de ataque, daño, colisión física, agarre o detección. La cinta de fotogramas mostrará las capas activas.

Mesa de animación local. Las imágenes no se suben a ningún servidor.
Colocar material gráfico en la mesa óptica

Selecciona una hoja de sprites uniforme o varias imágenes ordenadas en PNG o WebP. Los archivos numerados se ordenan de forma natural.

División de fotogramas
Vista previa de movimiento
Mesa óptica de animación

Carga material gráfico para visualizar el fotograma y comenzar a dibujar capas de colisión.

Cinta de colisiones
Exportar plan de animación

El archivo JSON almacena nombres de imagen, recortes, pivotes y geometría de colisión. No incrusta los píxeles de las imágenes.

Zoom 100%
Estudio de Utilidades

¿Quieres tener esta utilidad en tu web?

Personaliza colores y modo oscuro para WordPress, Notion o tu propio sitio.

Preguntas Frecuentes

¿Cuál es la diferencia entre una hitbox y una hurtbox?
Una hitbox define la zona que genera un ataque, mientras que una hurtbox delimita el área vulnerable que recibe dicho ataque. Las pushboxes mantienen alejados a los personajes, las grabboxes delimitan agarres y los sensores detectan eventos. El motor y las reglas del juego definen el comportamiento final.
¿Mis archivos de sprites salen del navegador?
No. Las imágenes se decodifican, recortan, dibujan y exportan íntegramente dentro de tu navegador. La herramienta solo guarda en el almacenamiento local preferencias de edición como la velocidad de reproducción y la visibilidad del papel cebolla. Guarda el JSON para conservar tu proyecto.
¿Qué sistema de coordenadas utiliza el archivo JSON exportado?
Cada fotograma mide sus coordenadas en píxeles tomando como origen (0,0) la esquina superior izquierda del recorte. Las dimensiones de rectángulos y círculos almacenan valores no negativos de x, y, ancho y alto. Cada fotograma incluye también su propio punto de pivote en este mismo sistema local.
¿Puedo editar hojas de sprites completas e imágenes de fotogramas sueltos?
Sí. Puedes cargar una imagen PNG o WebP indicando filas y columnas para una división uniforme, o bien seleccionar varias imágenes ordenadas para crear una secuencia cuadro a cuadro. Los archivos numerados se ordenan de forma natural.
¿El archivo exportado funciona directamente en cualquier motor de juego?
El formato JSON es deliberadamente neutro. Registra recortes de fotogramas, pivotes, nombres semánticos de capa y geometría primitiva sin imponer la estructura de un motor específico. Convierte estos datos en tu proyecto considerando su escala, origen y sistema de colisiones.

Referencias Bibliográficas

Esc