Flujos creativos prácticos
Hitbox de sprites pixel art: separa la colisión de los píxeles visibles
La cola de un zorro puede verse bien y hacer que un juego de plataformas resulte injusto si cada píxel visible entra en su rectángulo de colisión. Decide qué zona debe colisionar antes de exportar el personaje.
Creamos en Ciyo un zorro ficticio de 32×32 mediante código y una imagen de inspección independiente ampliada 8×. El ejemplo muestra cómo entregar juntos un sprite y sus coordenadas de colisión. Es una ilustración determinista, no una prueba de un modelo de imagen ni una integración con un motor de juego.
Define primero el contrato de coordenadas
Entrega al desarrollador las dimensiones nativas, el origen, la dirección de los ejes y el significado del rectángulo. Aquí el origen está en la esquina superior izquierda de la imagen de 32×32; x crece hacia la derecha e y hacia abajo. El tamaño de visualización del lienzo no cambia estos valores.
El hitbox elegido empieza en x=8, y=7 y mide 16×23 píxeles nativos. Sus bordes exclusivos derecho e inferior son 24 y 30. Ambos quedan dentro de 32. Son decisiones de diseño ilustrativas: ajusta tu rectángulo al movimiento y las colisiones de tu juego.
| Campo | Valor | Significado |
|---|---|---|
| Imagen | 32×32 | Dimensiones del PNG nativo |
| Origen | Esquina superior izquierda | Coordenadas anteriores al escalado de visualización |
| Hitbox | 8, 7, 16, 23 | x, y, ancho, alto |
| Bordes exclusivos | 24, 30 | x + width; y + height |
| Escala de prueba | 8× | Solo para inspección, 256×256 |
Pide una superposición independiente
Abre un proyecto nuevo en Ciyo e incluye las dimensiones de origen y el rectángulo en la misma solicitud. Pide al agente de diseño que conserve el archivo nativo y dibuje la superposición de colisión en una copia. Solicita también un manifiesto para poder leer las coordenadas aunque la vista del lienzo sea pequeña.
Usamos Ciyo Agent y herramientas de código. El prompt pide expresamente un recurso provisional generado por código y evita la generación de imágenes o vídeo de pago. Para un personaje de producción, aporta tu sprite aprobado y pide las mismas comprobaciones sobre ese archivo adjunto.
Crea un sprite ficticio de zorro pixel art de 32x32 usando código determinista, con fondo transparente y sin generador de pago. Define aparte un hitbox de colisión x=8 y=7 width=16 height=23 en coordenadas nativas del sprite. Dibuja una superposición coloreada del hitbox en un PNG de prueba independiente ampliado 8x mediante vecino más cercano, conservando intacto el sprite original. Entrega el PNG nativo, el PNG de prueba y un manifiesto JSON de texto con las dimensiones nativas, el hitbox y el origen en la esquina superior izquierda. Explica que los límites alfa visibles no tienen por qué ser los límites de colisión. Añade el original y la prueba al lienzo. Comprueba dimensiones nativas, coordenadas enteras, rectángulo dentro de la imagen y hash de píxeles del original sin cambios después de crear la superposición. No afirmes una integración con un motor de juego. Es un ejemplo ilustrativo generado en el espacio real de Ciyo.Interpreta de forma distinta los dos contornos
El resultado incluye un PNG nativo y una prueba de 256×256. La superposición azul marca nuestro rectángulo de colisión. El contorno discontinuo magenta marca los límites alfa visibles. El damero es un fondo de inspección y no forma parte del sprite nativo.
Los límites visibles son x=5, y=0, ancho=26, alto=31. Las orejas y la cola sobresalen del rectángulo de colisión. Por eso conviene separar ambas mediciones: el dibujo visible describe la apariencia y la forma de colisión elegida expresa la intención de juego.
Inspecciona el archivo nativo y el manifiesto
Descarga el archivo nativo, no una captura del lienzo. Comprueba que mida 32×32 y tenga transparencia alfa real. Lee el manifiesto en unidades nativas y confirma que x + width ≤ ancho de la imagen e y + height ≤ alto de la imagen. Si importa conservar el original, compara su hash antes y después de crear la prueba.
No incluyas la prueba en el sprite publicado
El hash de píxeles decodificados del ejemplo conservado coincide con el comunicado por el agente. La superposición está en otro archivo: no la publiques como sprite salvo que quieras mostrar deliberadamente el dibujo de depuración en el juego.
Prueba la colisión en el entorno del juego
Importa el original y convierte el rectángulo a los ajustes de colisión de tu motor. Explica cualquier desplazamiento del pivote. Prueba paredes, suelo, huecos estrechos e interacciones al tamaño de visualización previsto para el personaje. Un archivo con el rectángulo correcto no demuestra que el juego resulte justo.
La documentación de física de Godot trata las formas de colisión como objetos independientes. Esa distinción respalda esta entrega, pero no importamos el ejemplo en Godot ni en otro motor. Las reglas de movimiento, los fotogramas activos de impacto y los intervalos entre daños necesitan su propia implementación y comprobación.
Preguntas prácticas
¿El hitbox coincide automáticamente con el rectángulo alfa?
No. Elegimos intencionadamente un rectángulo menor. Usa los límites visibles como referencia y decide los límites de colisión para el juego.
¿Debo usar las coordenadas de 256×256 de la prueba?
No. El manifiesto utiliza el sistema nativo de 32×32. La prueba ampliada sirve solo para inspeccionar.
¿Se probó en un motor de juego?
No. Comprobamos el PNG y el manifiesto conservados; el comportamiento de juego requiere una prueba aparte.
Prepara un sprite con coordenadas de colisión explícitas
Empieza con un ejemplo verificado en Ciyo. Conserva el original y revisa el resultado exportado antes de usarlo en tu proyecto.