Animación y línea de tiempo

Una animación es un sprite con más de un fotograma. La línea de tiempo los muestra como columnas, con las capas como filas; cada cuadro donde una capa se cruza con un fotograma es una celda (Cómo se organiza tu trabajo).

La línea de tiempo

En la parte superior de la línea de tiempo:

Cada columna de fotograma tiene el número del fotograma y, debajo, cuánto tiempo se muestra, en milisegundos: haz clic en el cuadro del número para escribir una duración nueva. Las filas de capa van hacia abajo a la izquierda, con la capa superior primero.

En la cuadrícula, una celda con algo dibujado muestra un punto lleno y una celda vacía muestra un punto hueco. Una línea une las celdas vinculadas, las celdas que comparten una sola imagen. Pasa el puntero sobre una celda para ver de qué capa y fotograma es, y a qué está vinculada.

Fotogramas

El menú Fotograma, y el clic derecho en el número de un fotograma, tienen todo lo relacionado con los fotogramas:

• Fotograma > Nuevo fotograma vacío añade un fotograma vacío después del actual.
• Fotograma > Nuevo fotograma vacío antes añade un fotograma vacío justo antes del actual. Así se pone un fotograma antes del fotograma 1.
• Fotograma > Nuevo fotograma copia el fotograma actual (o los fotogramas seleccionados) y sus celdas. En una capa continua, la celda de la copia queda vinculada.
• Fotograma > Nuevo fotograma vinculado lo copia con sus celdas vinculadas, de modo que las copias comparten sus imágenes con los originales: dibujas en uno y cambian los dos.
• Fotograma > Eliminar fotograma elimina el fotograma actual o los seleccionados (un sprite conserva al menos uno).
• Fotograma > Invertir fotogramas invierte los fotogramas seleccionados, o todos si hay menos de dos seleccionados.

Tiempo. Cada fotograma tiene su propia duración, de 10 ms a 65,535 ms (unos 65 segundos, como en Aseprite). Escríbela en el cuadro bajo el número del fotograma, o usa Fotograma > Propiedades del fotograma.... Fotograma > Igualar todos los fotogramas a la duración actual... da a todos los fotogramas la duración del actual.

Color y bloqueo. Fotograma > Propiedades del fotograma... también da a un fotograma una etiqueta de color, que se muestra como una franja en su encabezado para que puedas localizar poses clave o fotogramas que necesitan trabajo, y un bloqueo. Un fotograma bloqueado (marcado con un candado) rechaza las ediciones en sus celdas y no se puede eliminar, mover ni cambiar de duración, tanto con las herramientas como con los scripts. Desbloquéalo en el mismo diálogo. Ambos se guardan con el sprite y se sincronizan, pero .aseprite no tiene un equivalente, así que se descartan al exportar a ese formato. Los scripts usan app.setFrameProps.

Reordenar. Arrastra un fotograma por el asa que aparece junto a su número, o selecciónalo y pulsa Alt con ← o →. Varios fotogramas seleccionados se mueven juntos: arrastra cualquiera de ellos y toda la selección se mueve como un bloque, y los fotogramas que no están uno al lado del otro se reúnen en una sola tanda en el orden de su línea de tiempo. Mantén Alt al soltar para copiar allí los fotogramas seleccionados; las copias se insertan en el punto de soltado y pasan a ser la selección. De cualquier forma es un solo paso de deshacer. (Detén antes la reproducción.)

Las etiquetas siguen a los fotogramas por posición, como en Aseprite: los fotogramas que arrastras fuera de una etiqueta la abandonan, y una copia soltada justo después del último fotograma de una etiqueta se une a ella, como cualquier fotograma nuevo añadido ahí.

Reproducción

Pulsa Enter para reproducir y pausar. Cada fotograma se muestra durante su propia duración, escalada por el ajuste de velocidad; la reproducción sigue el reloj y se salta un fotograma si el dispositivo se atrasa. Editar cualquier cosa, o empezar a dibujar, detiene la reproducción, como en Aseprite. El modo de reproducción decide cómo se reproducen las etiquetas:

La repetición de una etiqueta cuenta cada pasada, y cada sentido de un ping-pong es una pasada: una etiqueta ping-pong con repetición 2 reproduce 1, 2, 3, 2, 1. Una repetición de 0 reproduce la etiqueta una vez al pasar (un ping-pong, de ida y vuelta) y la repite en bucle cuando es la etiqueta que se está reproduciendo. Las etiquetas se reproducen igual en las exportaciones, como en Aseprite.

Para reproducir solo una etiqueta, haz clic en su banda sobre los fotogramas (haz clic otra vez para volver a la animación completa). Se repite en bucle, y las etiquetas que contiene se reproducen a su manera. Con Bucle desactivado, reproduce su número de repeticiones y se detiene; lo mismo hace la animación completa en su último fotograma.

El panel Vista previa se reproduce a la misma velocidad, así que puedes ver la animación mientras dibujas. Su botón 1:1 muestra el sprite a tamaño completo, un píxel del sprite por cada píxel de la pantalla.

Etiquetas

Una etiqueta da nombre a un rango de fotogramas ("idle", "walk") para que puedas reproducirlo por separado y exportarlo por separado. Selecciona los fotogramas y pulsa el botón Etiqueta, o elige Fotograma > Nueva etiqueta.... El diálogo tiene:

• Nombre y Color;
• Desde el fotograma y Hasta el fotograma;
• Dirección: Adelante, Inversa, Ping-pong o Ping-pong inverso;
• Repetir: cuántas veces se reproduce antes de que la reproducción continúe; 0 la repite siempre.

Arrastra la banda de una etiqueta para moverla, o sus extremos para cambiar sus fotogramas. Con el teclado, ve con Tab hasta la banda y pulsa Alt+Left o Alt+Right para moverla un fotograma, o ve con Tab hasta uno de sus extremos y pulsa Left o Right. Haz doble clic en la banda, o usa el lápiz que aparece al señalarla, para editar la etiqueta; haz clic derecho en ella para eliminarla. Como en Aseprite, una etiqueta abarca posiciones de fotogramas: un fotograma que sacas de una etiqueta la abandona, uno que sueltas entre dos de sus fotogramas se une a ella, y un fotograma nuevo añadido justo después del último fotograma de una etiqueta la extiende. Un fotograma nuevo añadido antes del primer fotograma de una etiqueta no forma parte de ella: la etiqueta se queda en sus fotogramas y se desplaza junto con ellos.

Celdas

Haz clic en una celda para seleccionarla. Después:

• Shift+clic selecciona un rango, Ctrl+clic añade o quita una celda, y arrastrar desde una celda no seleccionada selecciona un rectángulo;
• hacer clic en el número de un fotograma o en el nombre de una capa selecciona toda esa columna o fila;
• Shift con las teclas de flecha amplía la selección y Esc la borra;
• en una pantalla táctil, mantén presionado medio segundo y luego arrastra.

Con celdas seleccionadas y la línea de tiempo enfocada, los atajos habituales funcionan sobre celdas completas: Ctrl+X, Ctrl+C y Ctrl+V las cortan, copian y pegan, y Del las vacía. Los mismos comandos están en Edición > Celda y en el menú de clic derecho:

• Edición > Celda > Vincular celdas hace que las celdas seleccionadas de cada capa compartan una sola imagen; Edición > Celda > Desvincular celdas da a cada una su propia copia otra vez (si desvinculas la celda a la que estaban vinculadas las demás, las demás siguen vinculadas entre sí).
• Arrastra las celdas seleccionadas para moverlas, o mantén Alt mientras arrastras para copiarlas. El contorno se vuelve verde donde pueden ir y rojo donde no. Alt+Shift con una tecla de flecha las desplaza un paso.

Para pintar en varias celdas a la vez, por ejemplo para corregir el mismo contorno en todos los fotogramas, activa Pintar en varias celdas en la barra de opciones de herramienta y selecciona las celdas. Pintar en una de ellas pinta en todas como un solo paso de deshacer; también funciona seleccionar números de fotograma o nombres de capa. Las capas bloqueadas y ocultas se omiten, y las celdas vinculadas se pintan una sola vez. Consulta Herramientas.

Las celdas solo van donde significan lo mismo: píxeles a capas de imagen, tiles a una capa de tilemap con el mismo tileset. Las capas bloqueadas y ocultas se omiten.

Las propiedades de la celda (clic derecho en una celda) establecen su Opacidad, que se combina con la de la capa, su Z-index, que la dibuja esa cantidad de capas más arriba o más abajo solo en ese fotograma (contando todas las capas y grupos, como hace Aseprite; puede salir de un grupo simple, pero no de un grupo con opacidad o modo de fusión propios), y sus datos de usuario. Las celdas vinculadas comparten una sola opacidad y unos mismos datos de usuario (como en Aseprite); el z-index es propio de cada celda. Las celdas de la capa Fondo siempre son totalmente opacas, y la opacidad de la celda de una capa bloqueada no se puede cambiar.

Interpolación

Una interpolación dibuja por ti los fotogramas entre dos fotogramas clave: mueve, escala, gira o desvanece la imagen del fotograma clave inicial en su camino hacia el fotograma clave final, y dibuja cada fotograma intermedio como una celda normal. El fotograma clave final conserva tu propio dibujo. Como los intermedios son píxeles normales, las exportaciones, el papel cebolla y los scripts ven fotogramas normales, y Aseprite también cuando guardas como .aseprite (los ajustes de la interpolación viajan en los datos de usuario de las celdas, así que pxstud.io recupera la interpolación al abrir el archivo). Las interpolaciones funcionan en capas de imagen, no en la capa Fondo.

El inspector de interpolación

Dibuja los fotogramas clave inicial y final en la misma capa, selecciona el fotograma clave inicial y elige Edición > Celda > Interpolar... (Shift+T, o clic derecho en la celda). El inspector la interpola hasta la siguiente celda con un dibujo en esa capa o, si seleccionaste varios fotogramas, hasta la última seleccionada que tenga un dibujo. Si se abre sobre el fotograma clave inicial de una interpolación o sobre uno de sus intermedios, edita esa interpolación. Si no hay ningún dibujo posterior en la capa, una selección de varios fotogramas termina en el último fotograma seleccionado aunque esté vacío (para desvanecer o encoger algo).

El inspector es una ventana que puedes arrastrar por su barra de título y dejar abierta: mientras está ahí, puedes seguir recorriendo la línea de tiempo, dibujando y deshaciendo. Esc la cierra.

• Vista previa: reproduce en bucle el fotograma clave inicial, los intermedios y el fotograma clave final, con la duración propia de cada fotograma y con las demás capas visibles alrededor. Sigue tus cambios a medida que los haces. Páusala y avanza fotograma por fotograma con los botones de debajo. Un sprite grande muestra solo la parte por la que se mueve la interpolación. La línea junto a ella indica cuántos intermedios hay y en qué fotogramas ("6 intermedios, fotogramas 3–8").
• Preajustes: interpolaciones listas para usar (consulta "Preajustes de interpolación" más abajo). Usar preajuste rellena el formulario; Aplicar lo hace efectivo.
• Varias capas: aparece cuando tu selección abarca más de una capa con un dibujo en el fotograma inicial (consulta "Interpolar varias capas" más abajo).
• Pose: las columnas Inicio y Final establecen dónde está la imagen al principio y al final: Posición X e Y en píxeles, Escala X e Y (1 es el tamaño original, un valor negativo la voltea), Rotación en grados (en sentido horario; 360 es una vuelta completa, así que 720 da dos), Inclinación X e Y en grados y Opacidad en porcentaje. Bloquear proporción de escala mantiene X e Y en proporción cuando cambias uno. Rotar por el camino corto convierte 350° en un giro de 10° hacia atrás en lugar de una vuelta casi completa; desactívalo para girar por el camino largo. Igualar fotograma clave final establece la posición y la escala finales de modo que la imagen inicial caiga donde está el dibujo del fotograma clave final, y con su tamaño. Una interpolación nueva empieza con esto ya rellenado. Restablecer inicio deja el Inicio sin cambios.
• Suavizado: cómo el movimiento acelera y desacelera. Cada curva pequeña es una opción: Lineal (constante), Mantener (se queda quieto y salta en el fotograma clave final), Pasos (se mueve en saltos iguales; indica cuántos), y Seno, Cuadrática, Cúbica, Cuártica, Quíntica, Exponencial, Circular, Retroceso, Elástico y Rebote, cada una con entrada (empieza lento), salida (termina lento) o entrada-salida (ambos). Usa las teclas de flecha para moverte entre ellas. Retroceso tiene un Sobrepaso, Elástico una Amplitud y un Periodo (cuánto dura cada oscilación), y Rebote un número de Rebotes. En Avanzado: suavizado por propiedad puedes dar a la posición, la escala, la rotación, la inclinación, la opacidad o la propiedad de color un suavizado propio, por ejemplo un rebote en la posición mientras el desvanecimiento se mantiene constante. Dibujar curva convierte el suavizado elegido en una curva que editas tú (consulta más abajo).
• Fotogramas clave: Fotograma clave final elige el fotograma en el que termina la interpolación; muévelo y pulsa Aplicar para alargar o acortar la interpolación (los intermedios posteriores al nuevo final se eliminan, o se conservan como celdas normales si pintaste en ellos). Encadenar varios fotogramas clave crea una interpolación de cada fotograma clave al siguiente, hasta el que elijas, en un solo paso; Hacer que cada interpolación acabe en su fotograma clave final da a cada una su propia pose de Igualar fotograma clave final. Extender añade una interpolación más desde el fotograma clave final de esta interpolación hasta el siguiente fotograma clave, con estos ajustes.
• Trayectoria: cómo viaja la posición. Recta; un Arco de una Altura dada (un salto; un valor negativo va hacia el otro lado); una Onda con una Amplitud, un número de Ciclos y una Fase en la que empieza; un Zigzag con una Amplitud y Ciclos; o un Temblor de hasta Amplitud píxeles en cada fotograma. Un temblor es siempre igual para una misma Semilla; Volver a tirar elige otra. Dibujada es una ruta que dibujas en el lienzo (consulta "Dibujar una trayectoria de movimiento" más abajo). Orientar según la trayectoria gira la imagen hacia donde se mueve, con cualquier trayectoria. Mostrar la trayectoria en el lienzo dibuja la ruta y un punto donde cae cada intermedio.
• Aplastar y estirar: estira la imagen a lo largo de su movimiento mientras va rápido y la aplasta a lo ancho, conservando su área. 0% es desactivado.
• Pivote: el punto alrededor del cual giran la escala, la rotación y la inclinación. Haz clic en uno de los nueve cuadros (esquinas, bordes o centro de la celda del fotograma clave inicial), o escribe X e Y, donde 0 es el borde izquierdo o superior y 1 el derecho o inferior. Con Pivote en: Píxeles del lienzo, X e Y son en cambio un punto fijo del lienzo, así que varias capas interpoladas alrededor del mismo punto se mueven juntas como una sola pieza.
• Fundido: cómo se muestran los cambios de opacidad (consulta "Fundidos con tramado y fundidos cruzados" más abajo). Alfa cambia la opacidad de la celda; Tramado hace que aparezcan o desaparezcan píxeles enteros a través de un Patrón. Fundir con el fotograma clave final convierte la imagen en el dibujo del fotograma clave final.
• Color: marca Animar el color para cambiar los colores de la imagen a lo largo de la interpolación. Tono (grados), Saturación y Luminosidad (porcentaje) funcionan como Tono/Saturación, y Cantidad de tinte mezcla todos los colores hacia el Color del tinte; cada uno tiene un valor de Inicio y uno Final. El suavizado de la propiedad de color es el que se llama "Color y rampa" en el suavizado por propiedad. Cada intermedio se vuelve a colorear a partir de la imagen del fotograma clave inicial, así que las ediciones no se acumulan. En sprites indexados, los píxeles recoloreados se ajustan al color más cercano de la paleta.
• Rampa de paleta (sprites indexados): marca Desplazar los índices de la paleta a lo largo de una rampa para hacer ciclar los colores sin recolorear. Los píxeles que usan las entradas de paleta de Primero a Último (la entrada transparente se deja fuera) se mueven Desplazamiento posiciones a lo largo de esa tanda al final de la interpolación, ya sea dando la vuelta al pasar los extremos o deteniéndose en ellos. Los demás píxeles se quedan como están. Las muestras enseñan la rampa.
• Remuestreo: cómo se dibujan los píxeles girados o redimensionados. Automático usa Vecino más cercano (píxeles exactos) y cambia a RotSprite en cuanto algo rota o se inclina; si eliges uno tú mismo, se mantiene. Bilineal mezcla colores, para arte pictórico.
• Subpíxel: cómo las posiciones intermedias se convierten en píxeles enteros. Monótono nunca retrocede contra la dirección del movimiento, Redondear toma el píxel más cercano y Truncar redondea hacia abajo.
• Tiempo: Fotogramas reparte el movimiento de forma pareja entre los intermedios; Tiempo sigue las duraciones de los fotogramas, de modo que un fotograma más largo cubre más movimiento.
• Retardo (fotogramas): mantiene la pose inicial durante ese número de fotogramas; después el movimiento ocupa el resto de la interpolación y aun así llega al fotograma clave final. En el suavizado por propiedad, cada pista puede esperar un número distinto de fotogramas, por ejemplo un fundido que empieza después del movimiento.
• Exposición: A 1 dibuja una pose nueva en cada fotograma; a 2 dibuja una cada dos fotogramas y la mantiene durante dos, y así hasta ocho.
• Ping-pong (ida y vuelta): el movimiento llega a su pose final a mitad de la interpolación y vuelve a la pose inicial en el fotograma clave final, así que un bucle que termina donde empezó no necesita un segundo dibujo. El suavizado da forma a cada mitad.
• Bloqueo de paleta: cuando está activado en un sprite RGBA (Sprite > Paleta > Bloqueo de paleta), los intermedios remuestreados y recoloreados se ajustan a la paleta, como cualquier cosa que pintes. Un movimiento simple copia la imagen exactamente. Activar o desactivar el bloqueo redibuja las interpolaciones que tienen activado Regenerar automáticamente.
• Regenerar automáticamente: redibuja los intermedios cada vez que cambia el fotograma clave inicial o los fotogramas. Desactívalo para redibujarlos tú con Edición > Celda > Regenerar interpolación.

Aplicar crea la interpolación (o la cambia) y mantiene el inspector abierto sobre ella; Aplicar y cerrar también lo cierra. Cualquiera de los dos es un solo paso de deshacer. Los problemas con un valor, o una interpolación que se solaparía con otra de la capa, aparecen en la parte inferior de la ventana, y Aplicar espera hasta que se corrijan.

Si los fotogramas clave están uno junto al otro, no hay espacio para intermedios: marca Añadir y elige cuántos fotogramas vacíos insertar entre ellos al aplicar. Los fotogramas son comunes a todas las capas, así que los nuevos fotogramas también están vacíos en las demás capas. Si el fotograma clave inicial es una celda vinculada, el inspector ofrece Desenlazar, porque una interpolación necesita la imagen propia del fotograma clave inicial.

Consejos:

• A 2 da un aspecto dibujado a mano y reduce a la mitad las poses que hay que limpiar si pintas encima.
• Usa el subpíxel Monótono para movimientos lentos y suavizados: el redondeo simple puede hacer que la imagen vibre un píxel de un lado a otro. Actúa como Redondear con los suavizados que se pasan (Retroceso, Elástico, Rebote) y con trayectorias distintas de Recta.
• Para todo lo que rote, RotSprite mantiene limpios los bordes del pixel art y nunca inventa colores. Vecino más cercano es más rápido, pero deja diagonales dentadas.
• Para corregir un intermedio a mano, simplemente pinta en él: tu edición se conserva cuando la interpolación se redibuja.
• El fotograma clave final muestra tu propio dibujo. Para un movimiento que termina en reposo, dibuja (o copia) la imagen en reposo en el último fotograma; déjalo vacío para desvanecer o encoger algo.

Preajustes de interpolación

Preajustes, arriba del inspector, contiene interpolaciones listas para usar: aparecer y desvanecer, aparecer y desvanecer con tramado, un fundido con tramado, brotar y encoger, caer y rebotar, entradas desde cada lado, una entrada en picado por una trayectoria dibujada, sacudir, un salto con aplastar y estirar, aplastar y estirar, flotar, balancear, girar y parpadear. Elige uno y pulsa Usar preajuste: rellena el formulario, que aún puedes cambiar, y Aplicar (o Aplicar a capas) lo hace efectivo.

Los preajustes son relativos, así que uno solo sirve para cualquier dibujo y cualquier duración:

• las distancias se miden en el tamaño del dibujo inicial: una entrada "desde un ancho a la izquierda" mueve 16 píxeles un dibujo de 16 píxeles de ancho y 40 uno de 40, la altura de un arco y el tamaño de una sacudida siguen el lado menor del dibujo, y una trayectoria dibujada se estira con el ancho y el alto del dibujo. Las distancias caen en píxeles enteros;
• el movimiento llena la interpolación tenga los fotogramas que tenga, y un retardo es una parte de ella;
• el pivote es una parte del recuadro del dibujo inicial;
• todo lo demás (suavizado, escala, rotación, opacidad, color, aplastar y estirar, exposición, ping-pong, fundido) se usa tal cual. Los ajustes de remuestreo, subpíxel y tiempo siguen siendo los tuyos.

En un sprite indexado, un preajuste que se desvanece usa un fundido con tramado, porque la opacidad parcial no se puede mostrar con una paleta.

En Guardar y gestionar preajustes, escribe un nombre y pulsa Guardar como preajuste para conservar el formulario actual como preajuste propio (guardar con un nombre que ya usaste lo reemplaza); elige uno de los tuyos para Renombrar o Eliminar preajuste. Tus preajustes se guardan en este dispositivo, como las curvas guardadas: no están en el archivo ni se sincronizan. Exportar los descarga como archivo JSON e Importar… lo vuelve a leer (en otro dispositivo, por ejemplo), omitiendo lo que no sea un preajuste válido.

Fundidos con tramado y fundidos cruzados

El pixel art a menudo no puede mostrar píxeles semitransparentes, y los sprites indexados no pueden en absoluto: allí un fundido alfa solo cambia la opacidad de la celda, que el editor mezcla fuera de la paleta. Pon Fundido en Tramado y la pista de opacidad disuelve la imagen en su lugar: los píxeles enteros aparecen o desaparecen a través de un patrón Bayer 2×2, 4×4, 8×8 o Agrupado (semitono), y la parte de píxeles que se conserva sigue la opacidad suavizada. El patrón está fijo al lienzo, no a la imagen, así que no se arrastra cuando la imagen se mueve, y un fundido de entrada solo añade píxeles. Solo se conservan píxeles enteros de los propios colores del dibujo, así que los sprites indexados y los que tienen una profundidad de color quedan exactos. Las interpolaciones nuevas en sprites indexados empiezan con Tramado.

Fundir con el fotograma clave final convierte la imagen inicial en el dibujo del fotograma clave final a lo largo de la interpolación (según el suavizado de la pista de opacidad): con Tramado, cada píxel muestra un dibujo o el otro; con Alfa, los dos se mezclan. Pintar en el fotograma clave final vuelve a dibujar el fundido.

Interpolar varias capas

Selecciona celdas de varias capas (una cabeza, un cuerpo y un sombrero, o las letras de un título) desde el fotograma inicial hasta el final y abre el inspector. Varias capas indica cuántas capas tienen un dibujo en el fotograma inicial; configura la interpolación como siempre y pulsa Aplicar a capas para darles a todas la misma interpolación en un solo paso de deshacer.

• Escalonar hace que cada capa empiece ese número de fotogramas después de la anterior, en el Orden que elijas: primero la capa superior, primero la inferior o en el orden en que las seleccionaste. Una capa posterior mantiene su pose inicial hasta que le toca.
• Duración: Terminar a la vez hace que todas las interpolaciones terminen en el mismo fotograma clave final, así que las capas posteriores se mueven un poco más rápido; Alargar mantiene la misma duración del movimiento, así que cada capa posterior termina más tarde (se añaden fotogramas al final si hace falta).
• Pivote de grupo compartido escala, gira e inclina todas las capas alrededor de un mismo punto (el ajuste de Pivote tomado sobre el recuadro que rodea los dibujos iniciales de todas las capas), así que se mueven como una sola pieza rígida en lugar de girar cada una sobre su centro.

En la línea de tiempo, los fotogramas en los que una capa espera se dibujan con una flecha discontinua y un tono más pálido.

Dibujar una trayectoria de movimiento

Pon Trayectoria en Dibujada para guiar la imagen por una curva que dibujas tú. Empieza como la ruta que tenías (un arco se convierte en una trayectoria curva), de la posición inicial a la final. Mientras el inspector está abierto, el lienzo muestra la trayectoria con sus anclajes, sus tiradores y un punto por cada intermedio:

• arrastra un anclaje (un círculo) para moverlo; el primer y el último anclaje son las posiciones inicial y final, así que arrastrarlos también cambia la posición Final;
• arrastra un tirador (un cuadrado) para curvar la trayectoria; el tirador opuesto gira con él, o mantén Alt para mover solo uno;
• haz clic en la línea para añadir ahí un anclaje, Alt+clic en un anclaje para quitarlo y doble clic en uno para alternarlo entre suave y esquina;
• Añadir anclaje y Quitar anclaje en el inspector hacen lo mismo desde el teclado.

Los anclajes y los tiradores se ajustan al centro de los píxeles. La imagen recorre la trayectoria a velocidad constante: el suavizado de la posición marca el ritmo a lo largo de ella, no la forma de la curva. Marca Orientar según la trayectoria para girar la imagen hacia la dirección en que se mueve (empieza sin girar); RotSprite mantiene limpios sus bordes. La trayectoria forma parte de la interpolación, así que se conserva en los archivos .pxstudio y .aseprite. Los cambios en el lienzo quedan pendientes, como el resto del formulario, hasta que pulsas Aplicar. Desmarca Editar la trayectoria en el lienzo para ver la trayectoria sin sus tiradores.

Dibujar tu propia curva de suavizado

Dibujar curva (junto a Lineal, Mantener y Pasos) convierte el suavizado en una curva a la que das forma: un cuadrado donde el eje horizontal indica cuánto llevas de la interpolación y el eje vertical cuánto ha avanzado el movimiento. Parte del suavizado que habías elegido. Arrastra un punto (un ancla) para moverlo, arrastra los cuadros junto al punto seleccionado (sus tiradores) para curvar la línea, haz doble clic en un espacio vacío para añadir un ancla, o haz doble clic en un punto (o pulsa Del) para quitarlo. Las teclas de flecha desplazan el ancla enfocada, y los cuadros Progreso y Cantidad la fijan con exactitud. Esquina quita los tiradores para que la curva gire de forma brusca ahí. Las cantidades por encima de 1 o por debajo de 0 se pasan. Invertir refleja la curva; Empezar desde la reemplaza con cualquier suavizado ya hecho para editarlo.

Ponle un nombre a la curva y pulsa Guardar en la biblioteca para conservarla para otras interpolaciones: las curvas guardadas viven solo en este dispositivo, y elegir una en Curvas guardadas la carga en el editor. Guardar con un nombre que ya usaste reemplaza esa curva.

Cadenas y mover el final de una interpolación

Una cadena es una fila de interpolaciones a través de varios fotogramas clave de una capa, cada una terminando en el fotograma clave donde empieza la siguiente, de modo que un dibujo puede terminar una interpolación y empezar la siguiente. Selecciona el primer fotograma clave y elige Edición > Celda > Interpolar entre fotogramas clave para encadenar todos los fotogramas clave posteriores de la capa, cada interpolación acabando en su propio fotograma clave final, o usa Encadenar varios fotogramas clave en el inspector para elegir dónde se detiene y conservar tus propios ajustes. Es un solo paso de deshacer. Las interpolaciones que ya empiezan en esos fotogramas clave se reemplazan.

Para mover dónde termina una interpolación, selecciona su fotograma clave inicial hasta el fotograma en el que debe terminar y elige Edición > Celda > Fijar el final de la interpolación en la selección, o cambia Fotograma clave final en el inspector y pulsa Aplicar. Una interpolación de una cadena no se puede alargar hasta la siguiente.

Interpolaciones en scripts

Los scripts tienen las mismas interpolaciones: app.setTween(layerId, frameId, { to = endFrameId, end = { dx = 12 }, ease = "quad", mode = "out", path = "arc", height = 6 }) interpola la celda de una capa en frameId hasta un fotograma posterior y devuelve el id de la interpolación, y app.regenerateTween, app.bakeTween y app.removeTween reciben la capa y el fotograma inicial. app.setTweenChain(layerId, { frameA, frameB, frameC }, opts) interpola a través de esos fotogramas clave en un paso y devuelve los ids de las interpolaciones, y app.setTweenEnd(layerId, frameId, newEndFrameId) mueve el final de una interpolación. Las opciones también admiten curve (un suavizado dibujado), trackEasing, color y colorFrom (tono, saturación, luminosidad, tinte), tintColor (una cadena hex o { r, g, b }), ramp ({ first, last, shift, wrap }), fade, ditherPattern y crossfade, delay y trackDelay, pivotSpace, orient, y path = "custom" con points (los anclajes de la trayectoria dibujada). app.tweenPresets() lista los preajustes incluidos y app.tweenPreset("popIn") devuelve uno; pasa su recipe como opción preset para adaptarlo a la celda inicial. app.setTweenStagger({ layerA, layerB }, frameId, { to = endFrameId, preset = app.tweenPreset("slideInTop").recipe, step = 2, groupPivot = true }) interpola varias capas en un paso. Consulta la referencia de scripting para ver todas las opciones.

Interpolaciones en la línea de tiempo

• Una flecha recorre la parte inferior de las celdas desde el fotograma clave inicial hasta una punta de flecha en el fotograma clave final. Un fotograma clave puede terminar una interpolación y empezar la siguiente.
• Los fotogramas intermedios se tiñen de azul. Los fotogramas en los que la interpolación aún espera su retardo son más pálidos, con una flecha discontinua.
• Un pequeño rombo oscuro marca un intermedio en el que pintaste o que moviste. Tu edición se conserva cuando la interpolación se redibuja, hasta que uses Edición > Celda > Volver a la interpolación.
• Cuando cambia el fotograma clave inicial, o los fotogramas o su tiempo, la interpolación queda desactualizada: sus intermedios ya no coinciden. La flecha se vuelve ámbar, y también la esquina del fotograma clave inicial. Usa Edición > Celda > Regenerar interpolación para redibujarla. Una interpolación configurada para regenerarse sola nunca queda desactualizada, salvo en una capa bloqueada.
• Una esquina roja en un fotograma clave inicial significa que la interpolación está rota: su fotograma final se eliminó o se movió antes que ella. Dale un final nuevo, o quítala.

Pasa el puntero sobre una celda para leer lo mismo con palabras ("tween start, to frame 9, stale", "tweened, edited by hand"); los lectores de pantalla también lo anuncian.

Comandos de interpolación

Están en Edición > Celda y en el menú de clic derecho de una celda. Actúan sobre las celdas seleccionadas (o la celda activa), y cualquier celda de una interpolación, su fotograma clave inicial o un intermedio, representa a toda la interpolación. Cada uno es un solo paso de deshacer, y las capas bloqueadas y ocultas se omiten.

• Edición > Celda > Regenerar interpolación redibuja los intermedios a partir del fotograma clave inicial, sin tocar los que editaste a mano.
• Edición > Celda > Volver a la interpolación devuelve los intermedios editados a mano seleccionados a lo que dibuja la interpolación.
• Edición > Celda > Consolidar interpolación conserva cada intermedio como una celda normal y quita la interpolación, de modo que nada vuelve a redibujarlos.
• Edición > Celda > Quitar interpolación quita la interpolación y los intermedios que dibujó. Los que editaste a mano se quedan, como celdas normales.
• Edición > Celda > Copiar ajustes de interpolación copia los ajustes de una interpolación: suavizado, movimiento, trayectoria y tiempo, pero no dónde termina. Edición > Celda > Pegar ajustes de interpolación los aplica a cada fotograma clave seleccionado. Un fotograma clave que ya inicia una interpolación conserva su final; si no, la interpolación llega hasta el siguiente fotograma con una celda dibujada en esa capa. Los fotogramas clave sin nada después se omiten.

Papel cebolla

El papel cebolla muestra copias atenuadas de los fotogramas anteriores y posteriores al actual, para que veas el movimiento mientras dibujas. Actívalo con Ver > Mostrar papel cebolla o con el botón de papel cebolla de la barra de opciones de herramienta. Se configura por vista del editor.

Ajustes > Papel cebolla... elige cuántos fotogramas mostrar antes y después (hasta 16 de cada lado), su opacidad y cuánto se desvanece por fotograma, si los fotogramas anteriores se tiñen de rojo y los posteriores de azul, si se muestran solo los fotogramas de la etiqueta actual y si las copias se dibujan detrás o delante del sprite. Detrás, se dibujan sobre la capa Fondo y bajo las demás capas, así que se ven en un sprite con Fondo. El tinte recolorea cada copia según su brillo, de modo que los contornos oscuros también se ven en rojo oscuro o azul oscuro. Estos ajustes se aplican a todos los sprites.

El papel cebolla sigue la reproducción, como en Aseprite. No da la vuelta al pasar del primer o del último fotograma. Con Solo la etiqueta actual, usa la etiqueta más pequeña que rodea al fotograma actual, en la dirección de esa etiqueta: en una etiqueta inversa, el fotograma "anterior" es el siguiente en la línea de tiempo. Con Repetir los fotogramas de la etiqueta da la vuelta dentro de la etiqueta, y una etiqueta ping-pong rebota en sus extremos.