# Animación y línea de tiempo Añade fotogramas y ajusta su tiempo, reprodúcelos, marca bucles con etiquetas, trabaja con celdas, interpola entre fotogramas clave y ve los fotogramas vecinos con el papel cebolla. _Los atajos están escritos para Windows y Linux. En un Mac, usa ⌘ Cmd donde dice Ctrl y ⌥ Option donde dice Alt._ 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](https://pxstud.io/es/docs/manual/concepts/how-work-is-organized.md)). ![La línea de tiempo con una etiqueta verde 'bounce' sobre los fotogramas 1 a 4, de 120 ms cada uno; una capa Slime con el slime a distintas alturas, una capa Shading con una sombra solo en el fotograma 1 y puntos vacíos en el resto, y una capa Background cuyas celdas están vinculadas en los cuatro fotogramas](https://pxstud.io/manual/images/guides/animation-timeline.light.webp) _Una animación de cuatro fotogramas con una etiqueta_ ## La línea de tiempo En la parte superior de la línea de tiempo: | Control | Qué hace | | - | - | | Primero, Anterior, Reproducir/Pausar, Siguiente, Último | Se mueven por los fotogramas (`Home`, `←`, `Enter`, `→`, `End`; si hay una selección, las flechas mueven los píxeles seleccionados). Anterior y Siguiente dan la vuelta del último fotograma al primero y viceversa, como en Aseprite. `,` y `.` avanzan dentro de la etiqueta del fotograma actual, volviendo de su final a su inicio, para recorrer una sola animación. | | Bucle | Si la reproducción vuelve a empezar al llegar al final. | | Velocidad | Reproduce de 0.25× a 4× sin cambiar el tiempo de los fotogramas. | | Modo de reproducción | Cómo se reproducen las etiquetas (abajo). | | **+ Capa**, imagen de referencia, eliminar | Añade una capa (`Shift+N`), añade una capa de referencia desde un archivo, elimina la capa activa. | | **+ Fotograma**, duplicar, eliminar | Añade un fotograma vacío después del actual (`Ctrl+Shift+F`), lo duplica (`Alt+N`), lo elimina (`Ctrl+Alt+Shift+F`). | | **Etiqueta** | Crea una etiqueta sobre los fotogramas seleccionados. | 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](https://pxstud.io/es/docs/manual/guides/layers.md#showing-hiding-and-locking), 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: | Modo | Reproduce | | - | - | | **Etiquetas** (Reproducir etiquetas y repeticiones) | Todos los fotogramas en orden. Cada etiqueta se reproduce en su propia dirección y tantas veces como indique su repetición, incluidas las etiquetas dentro de etiquetas, antes de que la reproducción continúe. | | **Todo** | Todos los fotogramas en orden, ignorando las etiquetas. | | **Una vez** | Como Etiquetas desde el primer fotograma hasta el último, y luego se detiene y vuelve al fotograma en el que empezaste. Con una etiqueta elegida (abajo), esa etiqueta una vez: una etiqueta ping-pong va y vuelve. | | **Subetiquetas** | Como Etiquetas, pero cuando el cabezal está en una etiqueta con repetición 0, esa etiqueta se repite en bucle (con las etiquetas que contiene). | 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](https://pxstud.io/es/docs/manual/reference/tools.md#how-tools-behave). 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.