Animação e a linha do tempo

Uma animação é um sprite com mais de um quadro. A linha do tempo os mostra como colunas, com as camadas como linhas; cada quadrado em que uma camada encontra um quadro é um cel (Como seu trabalho é organizado).

A linha do tempo

Ao longo do topo da linha do tempo:

Cada coluna de quadro tem o número do quadro e, abaixo dele, quanto tempo ele aparece em milissegundos: clique na caixa do número para digitar uma nova duração. As linhas de camada descem pela esquerda, com a camada de cima primeiro.

Na grade, um cel com algo nele mostra um ponto cheio, e um cel vazio mostra um ponto oco. Uma linha une os cels vinculados, os cels que compartilham uma imagem. Aponte para um cel para ver qual camada e qual quadro ele é, e ao que está vinculado.

Quadros

O menu Quadro, e clicar com o botão direito em um número de quadro, trazem tudo para quadros:

• Quadro > Novo quadro vazio adiciona um quadro vazio depois do atual.
• Quadro > Novo quadro vazio antes adiciona um quadro vazio logo antes do atual. É assim que você coloca um quadro antes do quadro 1.
• Quadro > Novo quadro copia o quadro atual (ou os quadros selecionados) e seus cels. Em uma camada contínua, o cel da cópia fica vinculado.
• Quadro > Novo quadro vinculado o copia com seus cels vinculados, de modo que as cópias compartilham as imagens com os originais: desenhe em um e os dois mudam.
• Quadro > Excluir quadro exclui o quadro atual ou os selecionados (um sprite mantém pelo menos um).
• Quadro > Inverter quadros inverte os quadros selecionados, ou todos eles se menos de dois estiverem selecionados.

Tempo. Cada quadro tem sua própria duração, de 10 ms a 65.535 ms (cerca de 65 segundos, como no Aseprite). Digite-a na caixa abaixo do número do quadro, ou use Quadro > Propriedades do quadro.... Quadro > Definir todos os quadros com a duração atual... dá a todos os quadros a duração do atual.

Cor e bloqueio. Quadro > Propriedades do quadro... também dá a um quadro um rótulo de cor, mostrado como uma faixa no cabeçalho dele para você identificar poses-chave ou quadros que precisam de trabalho, e um bloqueio. Um quadro bloqueado (marcado com um cadeado) recusa edições nos seus cels, e não pode ser removido, movido nem ter o tempo alterado, seja por ferramentas ou por scripts. Desbloqueie-o na mesma caixa de diálogo. Os dois são salvos com o sprite e sincronizados, mas o .aseprite não tem equivalente, então são descartados ao exportar para ele. Scripts usam app.setFrameProps.

Reordenar. Arraste um quadro pela alça que aparece ao lado do número, ou selecione-o e pressione Alt com ← ou →. Vários quadros selecionados se movem juntos: arraste qualquer um deles e toda a seleção se move como um bloco, e quadros que não são vizinhos são reunidos em uma sequência na ordem em que estão na linha do tempo. Segure Alt ao soltar para copiar os quadros selecionados ali em vez de movê-los; as cópias são inseridas no ponto onde você soltou e viram a seleção. Das duas formas é um passo de desfazer. (Pare a reprodução antes.)

As tags acompanham os quadros por posição, como no Aseprite: quadros arrastados para fora de uma tag saem dela, e uma cópia solta logo depois do último quadro de uma tag entra na tag, como qualquer novo quadro adicionado ali.

Reprodução

Pressione Enter para reproduzir e pausar. Cada quadro aparece pela sua própria duração, escalada pela configuração de velocidade; a reprodução segue o relógio, pulando um quadro se o computador ficar para trás. Editar qualquer coisa, ou começar a desenhar, interrompe a reprodução, como no Aseprite. O modo de reprodução decide como as tags são reproduzidas:

A repetição de uma tag conta cada passagem, e cada sentido de um ping-pong é uma passagem: uma tag ping-pong com repetição 2 reproduz 1, 2, 3, 2, 1. Uma repetição 0 reproduz uma tag uma vez na passagem (um ping-pong de ida e volta) e a repete em loop quando ela é a tag em reprodução. As tags são reproduzidas da mesma forma nas exportações, como no Aseprite.

Para reproduzir apenas uma tag, clique na faixa dela acima dos quadros (clique de novo para voltar à animação inteira). Ela fica em loop, com as tags dentro dela sendo reproduzidas do seu jeito. Com o Loop desativado, ela reproduz sua contagem de repetição e para; o mesmo vale para a animação inteira no último quadro.

O painel Prévia reproduz na mesma velocidade, então você pode ver a animação enquanto desenha. O botão 1:1 dele mostra o sprite em tamanho real, um pixel do sprite por pixel de tela.

Tags

Uma tag dá nome a um intervalo de quadros ("idle", "walk") para você reproduzi-lo sozinho e exportá-lo sozinho. Selecione os quadros e clique no botão Tag, ou escolha Quadro > Nova tag.... A caixa de diálogo tem:

• Nome e Cor;
• Do quadro e Até o quadro;
• Direção: Para frente, Reverso, Ping-pong ou Ping-pong reverso;
• Repetir: quantas vezes ela é reproduzida antes de a reprodução continuar; 0 a repete para sempre.

Arraste a faixa de uma tag para movê-la, ou as pontas dela para mudar seus quadros. Pelo teclado, use Tab até a faixa e pressione Alt+Left ou Alt+Right para movê-la um quadro, ou use Tab até uma das pontas e pressione Left ou Right. Dê um clique duplo na faixa, ou use o lápis que aparece quando você aponta para ela, para editar a tag; clique com o botão direito para excluí-la. Como no Aseprite, uma tag cobre posições de quadro: um quadro que você tira de uma tag sai dela, um que você solta entre dois dos seus quadros entra nela, e um novo quadro adicionado logo depois do último quadro de uma tag estende a tag. Um novo quadro adicionado antes do primeiro quadro de uma tag não faz parte dela: a tag continua nos seus quadros e se desloca junto com eles.

Cels

Clique em um cel para selecioná-lo. Então:

• Shift+clique seleciona um intervalo, Ctrl+clique adiciona ou remove um cel, e arrastar a partir de um cel não selecionado seleciona um retângulo;
• clicar em um número de quadro ou no nome de uma camada seleciona toda aquela coluna ou linha;
• Shift com as setas amplia a seleção, e Esc a limpa;
• em uma tela sensível ao toque, mantenha pressionado por meio segundo e depois arraste.

Com cels selecionados e a linha do tempo em foco, os atalhos de sempre funcionam em cels inteiros: Ctrl+X, Ctrl+C e Ctrl+V recortam, copiam e colam, e Del os limpa. Os mesmos comandos estão em Editar > Cel e no menu de clique com o botão direito:

• Editar > Cel > Vincular cels faz os cels selecionados em cada camada compartilharem uma imagem; Editar > Cel > Desvincular cels dá a cada um sua própria cópia de novo (desvincular o cel ao qual os outros estavam vinculados deixa os outros vinculados entre si).
• Arraste cels selecionados para movê-los, ou segure Alt ao arrastar para copiá-los. O contorno fica verde onde eles podem ir e vermelho onde não podem. Alt+Shift com uma seta os desloca um passo.

Para pintar em vários cels ao mesmo tempo, por exemplo para corrigir o mesmo contorno em todos os quadros, ative Pintar em várias cels na barra de opções da ferramenta e selecione os cels. Pintar em um deles pinta todos como um passo de desfazer; selecionar números de quadro ou nomes de camada também funciona. Camadas bloqueadas e ocultas são ignoradas, e cels vinculados são pintados uma vez. Veja Ferramentas.

Cels só vão para onde significam a mesma coisa: pixels para camadas de imagem, tiles para uma camada de tilemap com o mesmo tileset. Camadas bloqueadas e ocultas são ignoradas.

As Propriedades do cel (clique com o botão direito em um cel) definem sua Opacidade, que se combina com a da camada, seu Z-index, que o desenha essa quantidade de camadas mais alto ou mais baixo apenas naquele quadro (contando todas as camadas e grupos, como o Aseprite faz; ele pode sair de um grupo simples, mas não de um grupo com opacidade ou modo de mesclagem próprios), e seus dados do usuário. Cels vinculados compartilham uma opacidade e um conjunto de dados do usuário (como no Aseprite); o z-index é próprio de cada cel. Os cels da camada Plano de fundo são sempre totalmente opacos, e a opacidade do cel de uma camada bloqueada não pode ser alterada.

Tween

Um tween desenha por você os quadros entre dois keyframes: ele move, escala, gira ou esmaece a imagem do keyframe inicial a caminho do keyframe final, e desenha cada quadro intermediário como um cel comum. O keyframe final mantém o seu próprio desenho. Como os intermediários são pixels comuns, exportações, casca de cebola e scripts veem quadros comuns, e o Aseprite também quando você salva como .aseprite (as configurações do tween vão junto nos dados do usuário dos cels, então o pxstud.io retoma o tween quando você abre o arquivo). Tweens funcionam em camadas de imagem, não no Plano de fundo.

O inspetor de Tween

Desenhe os keyframes inicial e final na mesma camada, selecione o keyframe inicial e escolha Editar > Cel > Criar tween... (Shift+T, ou clique com o botão direito no cel). O inspetor faz o tween dele até o próximo cel da camada com um desenho, ou, se você selecionou vários quadros, até o último selecionado com um desenho. Aberto no keyframe inicial de um tween ou em um de seus intermediários, ele edita esse tween. Se não há nenhum desenho depois na camada, uma seleção de vários quadros termina no último quadro selecionado mesmo que esteja vazio (para sumir ou encolher algo).

O inspetor é uma janela que você pode arrastar pela barra de título e deixar aberta: você ainda pode percorrer a linha do tempo, desenhar e desfazer enquanto ele está lá. Esc o fecha.

• Prévia: reproduz o keyframe inicial, os intermediários e o keyframe final em loop, nas durações próprias dos quadros e com as outras camadas visíveis ao redor. Ela acompanha suas alterações conforme você as faz. Pause-a e avance quadro a quadro com os botões abaixo dela. Um sprite grande mostra só a parte por onde o tween passa. A linha ao lado diz quantos intermediários há e em quais quadros ("6 intermediários, quadros 3–8").
• Predefinições: tweens prontos (veja "Predefinições de tween" abaixo). Usar predefinição preenche o formulário; Aplicar o torna real.
• Várias camadas: aparece quando a seleção cobre mais de uma camada com um desenho no quadro inicial (veja "Tween de várias camadas" abaixo).
• Pose: as colunas De e Final definem onde a imagem está no início e no fim: Posição X e Y em pixels, Escala X e Y (1 é o tamanho original, um valor negativo a espelha), Rotação em graus (sentido horário; 360 é uma volta completa, então 720 gira duas vezes), Inclinação X e Y em graus, e Opacidade em porcentagem. Travar proporção da escala mantém X e Y em proporção quando você muda um deles. Girar pelo caminho mais curto transforma 350° em um passo de 10° para trás em vez de uma volta quase completa; desative para girar pelo caminho longo. Igualar keyframe final define a posição e a escala finais para que a imagem inicial caia onde está o desenho do keyframe final, no tamanho dele. Um novo tween já começa com isso preenchido. Redefinir De volta o De para nenhuma alteração.
• Easing: como o movimento acelera e desacelera. Cada pequena curva é uma escolha: Linear (constante), Manter (fica parado e salta no keyframe final), Degraus (move-se em saltos iguais; defina quantos), e Sine, Quad, Cubic, Quart, Quint, Expo, Circ, Back, Elastic e Bounce, cada um com easing in (começa devagar), out (termina devagar) ou in-out (os dois). Use as setas para percorrê-los. Back tem um Overshoot, Elastic uma Amplitude e um Período (a duração de cada oscilação), e Bounce um número de Quicadas. Em Avançado: easing por trilha você pode dar à posição, escala, rotação, inclinação, opacidade ou à trilha de cor um easing próprio, por exemplo um quique na posição enquanto o fade continua constante. Desenhar curva transforma o easing escolhido em uma curva que você mesmo edita (veja abaixo).
• Keyframes: Keyframe final escolhe o quadro em que o tween termina; mova-o e use Aplicar para alongar ou encurtar o tween (os intermediários além do novo final são removidos, ou mantidos como cels comuns se você pintou neles). Encadear por vários keyframes cria um tween de cada keyframe para o próximo, até o que você escolher, em um só passo; Fazer cada tween terminar no seu keyframe final dá a cada um a sua própria pose de Igualar keyframe final. Estender adiciona mais um tween do keyframe final deste tween até o próximo keyframe, com estas configurações.
• Trajetória: como a posição viaja. Reta; um Arco de uma Altura dada (um salto; negativo vai para o outro lado); uma Onda com uma Amplitude, um número de Ciclos e uma Fase em que ela começa; um Zigue-zague com uma Amplitude e Ciclos; ou um Tremor de até Amplitude pixels a cada quadro. Um tremor é igual toda vez para uma mesma Seed; Sortear de novo escolhe outra. Desenhada é um trajeto que você desenha na tela (veja "Desenhar uma trajetória de movimento" abaixo). Orientar pela trajetória vira a imagem para onde ela vai, em qualquer trajetória. Mostrar a trajetória na tela desenha o trajeto e um ponto onde cada intermediário cai.
• Squash and stretch: estica a imagem ao longo do movimento enquanto ela se move rápido e a achata na transversal, mantendo a área. 0% é desativado.
• Pivô: o ponto em torno do qual escala, rotação e inclinação atuam. Clique em um dos nove quadrados (cantos, bordas ou centro do cel do keyframe inicial), ou digite X e Y, em que 0 é a borda esquerda ou superior e 1 a direita ou inferior. Com Pivô em: Pixels da tela, X e Y passam a ser um ponto fixo da tela, então várias camadas com tween em torno do mesmo ponto se movem juntas como uma peça só.
• Fade: como as mudanças de opacidade aparecem (veja "Fades com dithering e transições" abaixo). Alfa muda a opacidade do cel; Dithering faz pixels inteiros surgirem ou sumirem por um Padrão. Transição para o keyframe final transforma a imagem no desenho do keyframe final.
• Cor: marque Animar a cor para mudar as cores da imagem ao longo do tween. Matiz (graus), Saturação e Luminosidade (porcentagem) funcionam como Matiz/Saturação, e Intensidade do tingimento mistura cada cor com a Cor do tingimento; cada um tem um valor De e um Final. O easing da trilha de cor é o chamado "Cor e rampa" no easing por trilha. Cada intermediário é recolorido a partir da imagem do keyframe inicial, então as edições não se acumulam. Em sprites indexados, os pixels recoloridos se ajustam à cor mais próxima da paleta.
• Rampa de paleta (sprites indexados): marque Deslocar os índices da paleta ao longo de uma rampa para fazer ciclo de cores sem recolorir. Os pixels que usam as entradas da paleta de Primeiro a Último (a entrada transparente fica de fora) avançam Deslocamento posições ao longo dessa sequência até o fim do tween, seja dando a volta nas pontas ou parando nelas. Os outros pixels ficam como estão. As amostras mostram a rampa.
• Reamostragem: como pixels girados ou redimensionados são desenhados. Automático usa Mais próximo (pixels exatos) e muda para RotSprite assim que algo gira ou se inclina; se você escolher um, ele é mantido. Bilinear mistura cores, para arte pictórica.
• Subpixel: como as posições intermediárias viram pixels inteiros. Monotônico nunca volta contra o sentido do movimento, Arredondar pega o pixel mais próximo e Para baixo arredonda para baixo.
• Tempo: Quadros espaça o movimento uniformemente pelos intermediários; Tempo segue as durações dos quadros, então um quadro mais longo cobre mais do movimento.
• Atraso (quadros): mantém a pose inicial por esse número de quadros; depois o movimento preenche o resto do tween e ainda chega ao keyframe final. No easing por trilha, cada trilha pode esperar um número diferente de quadros, por exemplo um fade que começa depois do movimento.
• Exposição: Em 1 desenha uma nova pose a cada quadro; em 2 desenha uma a cada dois quadros e a mantém por dois, e assim por diante até oito.
• Ping-pong (ida e volta): o movimento chega à pose final na metade do tween e volta à pose inicial no keyframe final, então um loop que termina onde começou não precisa de um segundo desenho. O easing molda cada metade.
• Trava de paleta: quando está ativada para um sprite RGBA (Sprite > Paleta > Trava de paleta), os intermediários reamostrados e recoloridos se ajustam à paleta, como qualquer coisa que você pinta. Um movimento simples copia a imagem exatamente. Ativar ou desativar a trava redesenha os tweens que têm Regenerar automaticamente ativado.
• Regenerar automaticamente: redesenha os intermediários sempre que o keyframe inicial ou os quadros mudam. Desative para redesenhá-los você mesmo com Editar > Cel > Regenerar tween.

Aplicar cria o tween (ou o altera) e mantém o inspetor aberto nele; Aplicar e fechar também o fecha. Ambos são um passo de desfazer. Problemas com um valor, ou um tween que se sobreporia a outro na camada, aparecem na parte de baixo da janela, e Aplicar espera até serem corrigidos.

Se os keyframes são vizinhos, não há espaço para intermediários: marque Adicionar e escolha quantos quadros vazios inserir entre eles ao aplicar. Os quadros são compartilhados por todas as camadas, então os novos quadros também ficam vazios nas outras camadas. Se o keyframe inicial é um cel vinculado, o inspetor oferece Desvincular, porque um tween precisa da imagem própria do keyframe inicial.

Dicas:

• Em 2 parece desenhado à mão e reduz pela metade as poses a limpar se você pintar por cima delas.
• Mantenha o subpixel Monotônico para movimentos lentos e suavizados: o arredondamento simples pode fazer a imagem tremer um pixel para lá e para cá. Ele age como Arredondar para easings com overshoot (Back, Elastic, Bounce) e para trajetórias diferentes de Reta.
• Para qualquer coisa que gire, o RotSprite mantém limpas as bordas de pixel art e nunca inventa cores. O Mais próximo é mais rápido, mas deixa diagonais serrilhadas.
• Para corrigir um intermediário à mão, é só pintar nele: sua edição é mantida quando o tween é redesenhado.
• O keyframe final mostra o seu próprio desenho. Para um movimento que termina parado, desenhe (ou copie) a imagem em repouso no último quadro; deixe-o vazio para sumir ou encolher algo.

Predefinições de tween

Predefinições, no topo do inspetor, traz tweens prontos: surgir e sumir, surgir e sumir com dithering, uma transição com dithering, brotar e encolher, cair e quicar, deslizar de cada lado, uma entrada em curva por uma trajetória desenhada, tremer, um pulo com squash and stretch, squash and stretch, flutuar, balançar, girar e piscar. Escolha uma e clique em Usar predefinição: ela preenche o formulário, que você ainda pode mudar, e Aplicar (ou Aplicar a camadas) a torna real.

As predefinições são relativas, então uma só serve para qualquer desenho e qualquer duração:

• as distâncias são medidas pelo tamanho do desenho inicial: um deslize "a partir de uma largura à esquerda" move 16 pixels um desenho de 16 pixels de largura e 40 um de 40, a altura de um arco e o tamanho de um tremor seguem o lado menor do desenho, e uma trajetória desenhada estica com a largura e a altura do desenho. As distâncias caem em pixels inteiros;
• o movimento preenche o tween tenha ele quantos quadros tiver, e um atraso é uma parte dele;
• o pivô é uma parte da caixa do desenho inicial;
• todo o resto (easing, escala, rotação, opacidade, cor, squash, exposição, ping-pong, fade) é usado como está. As configurações de reamostragem, subpixel e tempo continuam sendo suas.

Em um sprite indexado, uma predefinição que faz fade usa um fade com dithering, já que opacidade parcial não aparece em uma paleta.

Em Salvar e gerenciar predefinições, digite um nome e clique em Salvar como predefinição para guardar o formulário atual como predefinição sua (salvar com um nome já usado a substitui); escolha uma das suas para Renomear ou Excluir predefinição. Suas predefinições ficam neste dispositivo, como as curvas salvas: não estão no arquivo nem são sincronizadas. Exportar baixa elas como um arquivo JSON e Importar… lê um de volta (em outro dispositivo, por exemplo), ignorando o que não for uma predefinição válida.

Fades com dithering e transições

Pixel art muitas vezes não consegue mostrar pixels semitransparentes, e sprites indexados não conseguem de jeito nenhum: ali um fade alfa só muda a opacidade do cel, que o editor mistura fora da paleta. Coloque Fade em Dithering e a trilha de opacidade dissolve a imagem em vez disso: pixels inteiros surgem ou somem por um padrão Bayer 2×2, 4×4, 8×8 ou Agrupado (meio-tom), e a parte dos pixels mantidos segue a opacidade com seu easing. O padrão é fixo na tela, não na imagem, então não se arrasta quando a imagem se move, e um fade de entrada só acrescenta pixels. Só pixels inteiros nas cores do próprio desenho são mantidos, então sprites indexados e sprites com profundidade de cor ficam exatos. Tweens novos em sprites indexados começam com Dithering.

Transição para o keyframe final transforma a imagem inicial no desenho do keyframe final ao longo do tween (pelo easing da trilha de opacidade): com Dithering, cada pixel mostra um desenho ou o outro; com Alfa, os dois são misturados. Pintar no keyframe final redesenha a transição.

Tween de várias camadas

Selecione cels em várias camadas (uma cabeça, um corpo e um chapéu, ou as letras de um título) do quadro inicial ao quadro final e abra o inspetor. Várias camadas mostra quantas camadas têm um desenho no quadro inicial; configure o tween como de costume e clique em Aplicar a camadas para dar a todas o mesmo tween em uma única etapa de desfazer.

• Escalonar em faz cada camada começar esse número de quadros depois da anterior, na Ordem escolhida: camada de cima primeiro, camada de baixo primeiro ou na ordem em que você as selecionou. Uma camada posterior mantém a pose inicial até chegar a vez dela.
• Duração: Terminar juntas faz todos os tweens terminarem no mesmo keyframe final, então as camadas posteriores se movem um pouco mais rápido; Estender mantém a mesma duração do movimento, então cada camada posterior termina mais tarde (quadros são adicionados no final se preciso).
• Pivô de grupo compartilhado escala, gira e inclina todas as camadas em torno de um único ponto (a configuração de Pivô tomada sobre a caixa em volta dos desenhos iniciais de todas as camadas), então elas se movem como uma peça rígida em vez de cada uma girar em torno do próprio centro.

Na linha do tempo, os quadros em que uma camada espera são desenhados com uma seta tracejada e um tom mais claro.

Desenhar uma trajetória de movimento

Coloque Trajetória em Desenhada para guiar a imagem por uma curva que você desenha. Ela começa como o trajeto que você tinha (um arco vira uma trajetória curva), da posição inicial à final. Enquanto o inspetor está aberto, a tela mostra a trajetória com suas âncoras, as alças delas e um ponto para cada intermediário:

• arraste uma âncora (um círculo) para movê-la; a primeira e a última âncora são as posições inicial e final, então arrastá-las também define a posição Final;
• arraste uma alça (um quadrado) para curvar a trajetória; a alça oposta gira junto, ou segure Alt para mover só uma;
• clique na linha para adicionar uma âncora ali, Alt+clique em uma âncora para removê-la e clique duplo para alterná-la entre suave e canto;
• Adicionar âncora e Remover âncora no inspetor fazem o mesmo pelo teclado.

Âncoras e alças se encaixam no centro dos pixels. A imagem percorre a trajetória em velocidade constante: o easing da posição define o ritmo ao longo dela, não o formato da curva. Marque Orientar pela trajetória para virar a imagem na direção em que ela vai (ela começa sem rotação); o RotSprite mantém as bordas limpas. A trajetória faz parte do tween, então é mantida em arquivos .pxstudio e .aseprite. Mudanças na tela ficam pendentes, como o resto do formulário, até você clicar em Aplicar. Desmarque Editar a trajetória na tela para ver a trajetória sem as alças.

Desenhar sua própria curva de easing

Desenhar curva (ao lado de Linear, Manter e Degraus) transforma o easing em uma curva que você molda: um quadrado em que o eixo horizontal é o quanto do tween já passou e o eixo vertical é o quanto o movimento já avançou. Ela parte do easing que você tinha escolhido. Arraste um ponto (uma âncora) para movê-lo, arraste os quadrados ao lado do ponto selecionado (as alças) para curvar a curva, dê um clique duplo em um espaço vazio para adicionar uma âncora, ou dê um clique duplo em um ponto (ou pressione Del) para removê-lo. As setas deslocam a âncora em foco, e as caixas Progresso e Valor a definem com exatidão. Canto tira as alças para que a curva faça uma virada brusca ali. Valores acima de 1 ou abaixo de 0 geram overshoot. Inverter espelha a curva; Partir de a substitui por qualquer easing pronto para editar.

Dê um nome à curva e use Salvar na biblioteca para guardá-la para outros tweens: as curvas salvas ficam só neste dispositivo, e escolher uma em Curvas salvas a carrega no editor. Salvar com um nome já usado substitui essa curva.

Cadeias e mover o final de um tween

Uma cadeia é uma sequência de tweens por vários keyframes de uma camada, cada um terminando no keyframe em que o próximo começa, de modo que um desenho pode encerrar um tween e iniciar o seguinte. Selecione o primeiro keyframe e escolha Editar > Cel > Criar tween entre keyframes para encadear por todos os keyframes seguintes da camada, cada tween terminando no seu próprio keyframe final, ou use Encadear por vários keyframes no inspetor para escolher onde parar e manter suas próprias configurações. É um passo de desfazer. Tweens que já começam nesses keyframes são substituídos.

Para mover onde um tween termina, selecione o keyframe inicial dele até o quadro em que deve terminar e escolha Editar > Cel > Definir o fim do tween na seleção, ou mude o Keyframe final no inspetor e use Aplicar. Um tween não pode ser alongado até dentro do seguinte em uma cadeia.

Tweens em scripts

Os scripts têm os mesmos tweens: app.setTween(layerId, frameId, { to = endFrameId, end = { dx = 12 }, ease = "quad", mode = "out", path = "arc", height = 6 }) faz o tween do cel de uma camada em frameId até um quadro posterior e retorna o id do tween, e app.regenerateTween, app.bakeTween e app.removeTween recebem a camada e o quadro inicial. app.setTweenChain(layerId, { frameA, frameB, frameC }, opts) faz o tween por esses keyframes em uma etapa e retorna os ids dos tweens, e app.setTweenEnd(layerId, frameId, newEndFrameId) move o final de um tween. As opções também aceitam curve (um easing desenhado), trackEasing, color e colorFrom (matiz, saturação, luminosidade, tingimento), tintColor (uma string hex ou { r, g, b }), ramp ({ first, last, shift, wrap }), fade, ditherPattern e crossfade, delay e trackDelay, pivotSpace, orient, e path = "custom" com points (as âncoras da trajetória desenhada). app.tweenPresets() lista as predefinições embutidas e app.tweenPreset("popIn") retorna uma; passe o recipe dela como opção preset para ajustá-la ao cel inicial. app.setTweenStagger({ layerA, layerB }, frameId, { to = endFrameId, preset = app.tweenPreset("slideInTop").recipe, step = 2, groupPivot = true }) faz o tween de várias camadas em uma etapa. Veja a referência de scripting para todas as opções.

Tweens na linha do tempo

• Uma seta corre ao longo da base dos cels do keyframe inicial até uma ponta de seta no keyframe final. Um keyframe pode encerrar um tween e iniciar o seguinte.
• Os quadros intermediários são tingidos de azul. Os quadros em que o tween ainda espera seu atraso são mais claros, com uma seta tracejada.
• Um pequeno losango escuro marca um intermediário em que você pintou ou que moveu. Sua edição permanece quando o tween é redesenhado, até você usar Editar > Cel > Reverter ao tween.
• Quando o keyframe inicial muda, ou os quadros ou o tempo deles mudam, o tween fica desatualizado: seus intermediários não correspondem mais. A seta fica âmbar, e o canto do keyframe inicial também. Use Editar > Cel > Regenerar tween para redesenhá-lo. Um tween configurado para se regenerar sozinho nunca fica desatualizado, exceto em uma camada bloqueada.
• Um canto vermelho em um keyframe inicial significa que o tween está quebrado: seu quadro final foi excluído ou movido para antes dele. Dê a ele um novo final, ou remova-o.

Aponte para um cel para ler a mesma coisa em palavras ("início de tween, até o quadro 9, desatualizado", "com tween, editado à mão"); os leitores de tela também anunciam isso.

Comandos de tween

Eles estão em Editar > Cel e no menu de clique com o botão direito de um cel. Agem nos cels selecionados (ou no cel ativo), e qualquer cel de um tween, seu keyframe inicial ou um intermediário, representa o tween inteiro. Cada um é um passo de desfazer, e camadas bloqueadas e ocultas são ignoradas.

• Editar > Cel > Regenerar tween redesenha os intermediários a partir do keyframe inicial, deixando em paz os que você editou à mão.
• Editar > Cel > Reverter ao tween devolve os intermediários editados à mão selecionados ao que o tween desenha.
• Editar > Cel > Consolidar tween mantém cada intermediário como um cel comum e remove o tween, para que nada volte a redesenhá-los.
• Editar > Cel > Remover tween remove o tween e os intermediários que ele desenhou. Os que você editou à mão ficam, como cels comuns.
• Editar > Cel > Copiar configurações do tween copia as configurações de um tween: easing, movimento, trajetória e tempo, mas não onde ele termina. Editar > Cel > Colar configurações do tween as aplica a cada keyframe selecionado. Um keyframe que já inicia um tween mantém seu final; caso contrário, o tween vai até o próximo quadro da camada com um cel desenhado. Keyframes sem nada depois deles são ignorados.

Casca de cebola

A casca de cebola mostra cópias esmaecidas dos quadros antes e depois do atual, para você ver o movimento enquanto desenha. Ative com Exibir > Mostrar casca de cebola ou com o botão de casca de cebola na barra de opções da ferramenta. Ela é definida por visão de editor.

Configurações > Casca de cebola... escolhe quantos quadros mostrar antes e depois (até 16 de cada), a opacidade deles e quanto ela diminui por quadro, se os quadros anteriores são tingidos de vermelho e os posteriores de azul, se deve mostrar só os quadros da tag atual, e se as cópias são desenhadas atrás ou na frente do sprite. Atrás, elas são desenhadas sobre a camada Plano de fundo e sob as outras camadas, então aparecem em um sprite com Plano de fundo. O tingimento recolore cada cópia pelo brilho, então contornos escuros aparecem como vermelho-escuro ou azul-escuro também. Essas configurações valem para todos os sprites.

A casca de cebola acompanha a reprodução, como no Aseprite. Ela não dá a volta passando do primeiro ou do último quadro. Com Só a tag atual, ela usa a menor tag em volta do quadro atual, na direção dessa tag: em uma tag reversa, o quadro "antes" é o próximo ao longo da linha do tempo. Com Repetir os quadros da tag em loop, ela dá a volta dentro da tag, e uma tag ping-pong quica nas pontas.