Procesos creativos prácticos
Alineación del pivote de sprites: añade margen sin redibujar
El pie de un mensajero salta cuando fotogramas recortados de forma distinta comparten la misma posición central. Cambiar el dibujo puede introducir otro problema. Conviene preparar un marco común y un punto de contacto explícito que el motor pueda interpretar.
Creamos tres sprites ficticios en el espacio de archivos de Ciyo y los colocamos en marcos iguales. Los puntos del pie eran coordenadas proporcionadas, no pivotes descubiertos en un motor. Las descargas conservan exactamente cada rectángulo original; la importación y reproducción necesitan una revisión aparte.
Anota el punto de apoyo antes de añadir margen
Elige un punto con el mismo significado en todas las poses, como la suela que toca el suelo. Anota sus coordenadas y el origen utilizado. El centro visual, el centro del rectángulo delimitador y el contacto del pie son conceptos diferentes; decide según los requisitos del juego.
Los PNG fuente son dibujos RGBA recortados con transparencia binaria. A mide 18×22 y su anclaje local es (9,21); B mide 20×20 con (10,19); C mide 16×24 con (8,23). El origen es el píxel superior izquierdo.
Elige un marco y un punto de contacto común
Elegimos un marco transparente de 32×32 y el anclaje común (16,28). Cada fuente debe caber después de trasladarla. Si la colocación recorta un borde, amplía el marco o elige otro punto antes de escribir la salida.
Calcula el desplazamiento restando el anclaje local al común. Es una traslación entera, sin escalado. No pidas otra pose ni una silueta más suave si quieres conservar los fotogramas aprobados.
| Fotograma | Fuente | Anclaje local | Desplazamiento | Anclaje común |
|---|---|---|---|---|
| A | 18×22 | (9,21) | (7,7) | (16,28) |
| B | 20×20 | (10,19) | (6,9) | (16,28) |
| C | 16×24 | (8,23) | (8,5) | (16,28) |
Copia los píxeles en un marco transparente
Ciyo copió el rectángulo RGBA completo de cada fuente. Usar alfa como máscara de pegado puede mezclar píxeles en vez de copiarlos directamente; especifica la operación si necesitas conservar bordes parcialmente transparentes.
Aquí las fuentes solo tienen alfa transparente u opaco, pero la copia directa también evita mezclas innecesarias. Conserva las fuentes intactas junto a los fotogramas preparados para repetir la comparación.
Coloca estos sprites RGBA existentes en marcos transparentes de 32×32. Usa el anclaje común (16,28) y los locales A (9,21), B (10,19), C (8,23), con origen superior izquierdo. Pega en A (7,7), B (6,9), C (8,5) mediante copia RGBA directa, sin cambiar tamaño ni redibujar. Reabre las salidas; compara exactamente los rectángulos originales y confirma alfa 0 fuera de ellos. Devuelve archivos y un manifiesto de anclajes.Verifica los rectángulos guardados y los márgenes vacíos
Descargamos y decodificamos de forma independiente los tres fotogramas preparados. Cada rectángulo coincidía píxel a píxel en RGBA, todos los píxeles exteriores tenían alfa 0 y el contacto llegó a (16,28). Esto verifica la preparación del archivo, no un controlador de animación.
Ciyo detectó una etiqueta solapada en el primer panel comparativo y creó una versión corregida. Para ver la disposición limpia guardada hubo que recargar después de retirar un borrador obsoleto. Conservamos ese registro; la disposición visual no modificó los sprites.
Adapta las coordenadas a la convención del motor
Un motor puede expresar el origen como un punto normalizado, un desplazamiento respecto al centro u otra convención. Este manifiesto usa deliberadamente coordenadas de píxel desde la esquina superior izquierda. No copies sus números a un campo distinto sin adaptar su significado.
Importa una secuencia corta, desactiva el suavizado no deseado cuando corresponda y revisa el contacto con el suelo al reproducirla. Un contacto coherente elimina una causa de saltos visuales; no corrige poses, tiempos ni dibujos inconsistentes.
Entrega un manifiesto de anclajes junto a los fotogramas
Conserva juntos el tamaño de fuente, anclaje local, desplazamiento de pegado y anclaje común. Así otra persona puede revisar la colocación sin deducirla de una captura. El JSON siguiente contiene los nombres y comprobaciones reales.
Para otro sprite, selecciona el contacto en el dibujo aprobado y repite las comprobaciones de encaje y píxeles. El margen transparente crea un contenedor común; no descubre el anclaje físico adecuado para cada personaje.
Preguntas prácticas
¿Es lo mismo que separar imágenes en un atlas?
No. Aquí el margen alinea el contacto elegido de cada fotograma. La separación del atlas evita que el muestreo mezcle imágenes empaquetadas.
¿Se probaron estos anclajes en un motor?
No. Son coordenadas preparadas desde el píxel superior izquierdo. Adáptalas y revísalas en tu motor.
¿Cambió la forma de los sprites?
No. Las comparaciones independientes de píxeles decodificados confirmaron que cada rectángulo original era idéntico.
Alinea una secuencia corta de sprites
Abre los fotogramas aprobados en Ciyo, indica un anclaje común y pide margen transparente verificado junto con un manifiesto.