Animazione e timeline

Un'animazione è uno sprite con più di un fotogramma. La timeline li mostra come colonne, con i livelli come righe; ogni quadrato in cui un livello incontra un fotogramma è un cel (Come è organizzato il tuo lavoro).

La timeline

Lungo la parte alta della timeline:

Ogni colonna di fotogramma ha il numero del fotogramma e, sotto, per quanto tempo viene mostrato in millisecondi: fai clic sulla casella del numero per scrivere una nuova durata. Le righe dei livelli scorrono lungo la sinistra, con il livello in cima per primo.

Nella griglia, un cel con qualcosa dentro mostra un puntino pieno, e un cel vuoto mostra un puntino vuoto. Una linea unisce i cel collegati, i cel che condividono una sola immagine. Punta un cel per vedere di quale livello e fotogramma si tratta, e a cosa è collegato.

Fotogrammi

Il menu Fotogramma, e il clic destro su un numero di fotogramma, hanno tutto per i fotogrammi:

• Fotogramma > Nuovo fotogramma vuoto aggiunge un fotogramma vuoto dopo quello corrente.
• Fotogramma > Nuovo fotogramma vuoto prima aggiunge un fotogramma vuoto subito prima di quello corrente. È il modo per mettere un fotogramma prima del fotogramma 1.
• Fotogramma > Nuovo fotogramma copia il fotogramma corrente (o i fotogrammi selezionati) e i suoi cel. Su un livello continuo, il cel della copia viene invece collegato.
• Fotogramma > Nuovo fotogramma collegato lo copia con i suoi cel collegati, così le copie condividono le immagini con gli originali: disegna su uno e cambiano entrambi.
• Fotogramma > Elimina fotogramma elimina i fotogrammi corrente o selezionati (uno sprite ne conserva almeno uno).
• Fotogramma > Inverti fotogrammi inverte i fotogrammi selezionati, o tutti se ne sono selezionati meno di due.

Tempi. Ogni fotogramma ha una propria durata, da 10 ms a 65.535 ms (circa 65 secondi, come in Aseprite). Scrivila nella casella sotto il numero del fotogramma, oppure usa Fotogramma > Proprietà del fotogramma.... Fotogramma > Imposta la durata attuale su tutti i fotogrammi... dà a ogni fotogramma la durata di quello corrente.

Colore e blocco. Fotogramma > Proprietà del fotogramma... dà inoltre a un fotogramma un'etichetta colore, mostrata come una striscia sulla sua intestazione per individuare pose chiave o fotogrammi da rifinire, e un blocco. Un fotogramma bloccato (segnato da un lucchetto) rifiuta le modifiche ai suoi cel, e non può essere rimosso, spostato o ritemporizzato, né dagli strumenti né dagli script. Sbloccalo nella stessa finestra. Entrambi sono salvati con lo sprite e sincronizzati, ma .aseprite non ha un equivalente, quindi vengono persi quando esporti in quel formato. Gli script usano app.setFrameProps.

Riordinare. Trascina un fotogramma dalla maniglia che compare accanto al suo numero, oppure selezionalo e premi Alt con ← o →. Più fotogrammi selezionati si spostano insieme: trascinane uno qualsiasi e l'intera selezione si sposta come un blocco, e i fotogrammi che non sono vicini vengono riuniti in un'unica serie nel loro ordine della timeline. Tieni premuto Alt mentre rilasci per copiare lì i fotogrammi selezionati; le copie vengono inserite nel punto di rilascio e diventano la selezione. In entrambi i casi è un solo passo di annullamento. (Ferma prima la riproduzione.)

I tag seguono i fotogrammi per posizione, come in Aseprite: i fotogrammi trascinati fuori da un tag lo lasciano, e una copia rilasciata subito dopo l'ultimo fotogramma di un tag entra nel tag, come qualsiasi nuovo fotogramma aggiunto lì.

Riproduzione

Premi Enter per riprodurre e mettere in pausa. Ogni fotogramma viene mostrato per la propria durata, scalata dall'impostazione della velocità; la riproduzione segue l'orologio, saltando un fotogramma se il computer resta indietro. Modificare qualcosa, o iniziare a disegnare, ferma la riproduzione, come in Aseprite. La modalità di riproduzione decide come vengono riprodotti i tag:

La ripetizione di un tag conta ogni passaggio, e ogni verso di un ping-pong è un passaggio: un tag ping-pong con ripetizione 2 riproduce 1, 2, 3, 2, 1. Una ripetizione di 0 riproduce un tag una volta durante il percorso (un ping-pong va e torna) e lo mette in loop quando è il tag in riproduzione. I tag vengono riprodotti allo stesso modo nelle esportazioni, come in Aseprite.

Per riprodurre un solo tag, fai clic sulla sua banda sopra i fotogrammi (fai di nuovo clic per tornare all'animazione intera). Va in loop, con i tag al suo interno riprodotti a modo loro. Con Loop disattivato, riproduce il suo numero di ripetizioni e si ferma; lo stesso fa l'animazione intera sull'ultimo fotogramma.

Il pannello Anteprima riproduce alla stessa velocità, così puoi guardare l'animazione mentre disegni. Il suo pulsante 1:1 mostra lo sprite a dimensione piena, un pixel dello sprite per ogni pixel dello schermo.

Tag

Un tag dà un nome a un intervallo di fotogrammi ("idle", "walk") così puoi riprodurlo da solo ed esportarlo da solo. Seleziona i fotogrammi e premi il pulsante Tag, oppure scegli Fotogramma > Nuovo tag.... La finestra contiene:

• Nome e Colore;
• Dal fotogramma e Al fotogramma;
• Direzione: Avanti, Indietro, Ping-pong o Ping-pong inverso;
• Ripeti: quante volte viene riprodotto prima che la riproduzione continui; 0 lo mette in loop per sempre.

Trascina la banda di un tag per spostarlo, o le sue estremità per cambiarne i fotogrammi. Da tastiera, raggiungi la banda con Tab e premi Alt+Left o Alt+Right per spostarla di un fotogramma, oppure raggiungi con Tab una delle sue estremità e premi Left o Right. Fai doppio clic sulla banda, o usa la matita che compare quando la punti, per modificare il tag; fai clic destro per eliminarlo. Come in Aseprite, un tag copre posizioni di fotogrammi: un fotogramma che sposti fuori da un tag lo lascia, uno che rilasci tra due dei suoi fotogrammi vi entra, e un nuovo fotogramma aggiunto subito dopo l'ultimo fotogramma di un tag estende il tag. Un nuovo fotogramma aggiunto prima del primo fotogramma di un tag non fa parte del tag: il tag resta sui suoi fotogrammi e scorre insieme a essi.

Cel

Fai clic su un cel per selezionarlo. Poi:

• Shift+clic seleziona un intervallo, Ctrl+clic aggiunge o rimuove un cel, e trascinare da un cel non selezionato seleziona un rettangolo;
• fare clic su un numero di fotogramma o sul nome di un livello seleziona l'intera colonna o riga;
• Shift con i tasti freccia estende la selezione, e Esc la cancella;
• su uno schermo touch, tieni premuto per mezzo secondo, poi trascina.

Con dei cel selezionati e la timeline attiva, le solite scorciatoie funzionano sui cel interi: Ctrl+X, Ctrl+C e Ctrl+V li tagliano, copiano e incollano, e Del li cancella. Gli stessi comandi sono in Modifica > Cel e nel menu del clic destro:

• Modifica > Cel > Collega cel fa condividere un'unica immagine ai cel selezionati su ogni livello; Modifica > Cel > Scollega cel ridà a ciascuno la sua copia (scollegare il cel a cui gli altri erano collegati lascia gli altri collegati tra loro).
• Trascina i cel selezionati per spostarli, oppure tieni premuto Alt mentre trascini per copiarli. Il contorno diventa verde dove possono andare e rosso dove non possono. Alt+Shift con un tasto freccia li sposta di un passo.

Per dipingere su più cel alla volta, per esempio per correggere lo stesso contorno in ogni fotogramma, attiva Disegna su più cel nella barra delle opzioni dello strumento e seleziona i cel. Dipingere su uno di essi li dipinge tutti in un solo passo di annullamento; funziona anche selezionare numeri di fotogramma o nomi di livello. I livelli bloccati e nascosti vengono saltati, e i cel collegati vengono dipinti una volta sola. Vedi Strumenti.

I cel vanno solo dove significano la stessa cosa: pixel sui livelli immagine, tile su un livello tilemap con lo stesso tileset. I livelli bloccati e nascosti vengono saltati.

Le Proprietà del cel (clic destro su un cel) impostano la sua Opacità, che si combina con quella del livello, il suo Z-index, che lo disegna di quel numero di livelli più in alto o più in basso solo su quel fotogramma (contando ogni livello e gruppo, come fa Aseprite; può uscire da un gruppo semplice, ma non da un gruppo con una propria opacità o modalità di fusione), e i suoi dati utente. I cel collegati condividono una sola opacità e un solo insieme di dati utente (come in Aseprite); lo z-index è proprio di ogni cel. I cel del livello Sfondo sono sempre completamente opachi, e l'opacità del cel di un livello bloccato non può cambiare.

Tweening

Un tween disegna per te i fotogrammi tra due keyframe: sposta, ridimensiona, ruota o sfuma l'immagine del keyframe iniziale mentre va verso il keyframe finale, e disegna ogni fotogramma intermedio come un normale cel. Il keyframe finale mantiene il tuo disegno. Poiché gli intermedi sono semplici pixel, le esportazioni, l'onion skin e gli script vedono fotogrammi normali, e così Aseprite quando salvi come .aseprite (le impostazioni del tween viaggiano nei dati utente dei cel, quindi pxstud.io riconosce di nuovo il tween quando apri il file). I tween funzionano sui livelli immagine, non sullo Sfondo.

L'ispettore Tween

Disegna i keyframe iniziale e finale sullo stesso livello, seleziona il keyframe iniziale e scegli Modifica > Cel > Crea tween... (Shift+T, o clic destro sul cel). L'ispettore applica il tween fino al cel successivo su quel livello che contiene un disegno, oppure, se hai selezionato più fotogrammi, fino all'ultimo selezionato che contiene un disegno. Aperto sul keyframe iniziale di un tween o su uno dei suoi intermedi, modifica quel tween. Se sul livello non c'è un disegno successivo, una selezione di più fotogrammi finisce sull'ultimo fotogramma selezionato anche se è vuoto (per una dissolvenza o una scomparsa).

L'ispettore è una finestra che puoi trascinare dalla barra del titolo e lasciare aperta: puoi ancora scorrere la timeline, disegnare e annullare mentre c'è. Esc la chiude.

• Anteprima: riproduce in loop il keyframe iniziale, gli intermedi e il keyframe finale, alle durate proprie dei fotogrammi e con gli altri livelli visibili attorno. Segue le tue modifiche man mano che le fai. Mettila in pausa e procedi fotogramma per fotogramma con i pulsanti sotto. Uno sprite grande mostra solo la parte attraverso cui si muove il tween. La riga accanto dice quanti intermedi ci sono e su quali fotogrammi ("6 intermedi, fotogrammi 3–8").
• Preset: tween pronti all'uso (vedi "Preset di tween" più sotto). Usa preset compila il modulo; Applica lo rende effettivo.
• Più livelli: compare quando la selezione copre più di un livello con un disegno sul fotogramma iniziale (vedi "Tween di più livelli" più sotto).
• Posa: le colonne Da e Fine impostano dove si trova l'immagine all'inizio e alla fine: Posizione X e Y in pixel, Scala X e Y (1 è la dimensione originale, una negativa la capovolge), Rotazione in gradi (in senso orario; 360 è un giro completo, quindi 720 gira due volte), Inclinazione X e Y in gradi, e Opacità in percentuale. Blocca proporzioni scala mantiene X e Y in proporzione quando ne cambi uno. Ruota per la via più breve trasforma 350° in un passo indietro di 10° invece di un giro quasi completo; disattivalo per girare dalla parte lunga. Adatta keyframe finale imposta la posizione e la scala di Fine in modo che l'immagine iniziale arrivi dove si trova il disegno del keyframe finale, alla sua dimensione. Un nuovo tween parte con questo già compilato. Ripristina Da riporta Da a nessuna modifica.
• Easing: come il movimento accelera e rallenta. Ogni piccola curva è una scelta: Lineare (costante), Mantieni (resta fermo, poi salta al keyframe finale), Passi (si muove a salti uguali; imposta quanti), e Sine, Quad, Cubic, Quart, Quint, Expo, Circ, Back, Elastic e Bounce, ciascuno in in (parte lento), out (finisce lento) o in-out (entrambi). Usa i tasti freccia per scorrerli. Back ha un Overshoot, Elastic un'Ampiezza e un Periodo (quanto dura ogni oscillazione), e Bounce un numero di Rimbalzi. Sotto Avanzate: easing per traccia puoi dare a posizione, scala, rotazione, inclinazione, opacità o alla traccia del colore un easing proprio, per esempio un rimbalzo sulla posizione mentre la dissolvenza resta costante. Disegna curva trasforma l'easing scelto in una curva che modifichi tu stesso (vedi sotto).
• Keyframe: Keyframe finale sceglie il fotogramma su cui finisce il tween; spostalo e premi Applica per allungare o accorciare il tween (gli intermedi oltre la nuova fine vengono rimossi, o tenuti come cel normali se ci hai dipinto sopra). Concatena su più keyframe crea un tween da ogni keyframe al successivo, fino a quello che scegli, in un solo passo; Fai arrivare ogni tween sul suo keyframe finale dà a ciascuno la propria posa Adatta keyframe finale. Estendi aggiunge un altro tween dal keyframe finale di questo tween al keyframe successivo, con queste impostazioni.
• Percorso: come viaggia la posizione. Retta; un Arco di una data Altezza (un salto; negativa va dall'altra parte); un'Onda con un'Ampiezza, un numero di Cicli e una Fase da cui parte; uno Zigzag con un'Ampiezza e dei Cicli; o una Scossa di fino a Ampiezza pixel a ogni fotogramma. Una scossa è sempre uguale per un dato Seed; Rilancia ne sceglie un altro. Disegnato è un tragitto che disegni sulla tela (vedi "Disegnare un percorso di movimento" più sotto). Orienta lungo il percorso gira l'immagine nella direzione in cui si muove, con qualunque percorso. Mostra il percorso sulla tela disegna il tragitto e un punto dove cade ogni intermedio.
• Schiacciamento e allungamento: allunga l'immagine lungo il suo movimento quando va veloce e la schiaccia in senso trasversale, mantenendone l'area. 0% è disattivato.
• Pivot: il punto attorno a cui scala, rotazione e inclinazione ruotano. Fai clic su uno dei nove quadrati (angoli, bordi o centro del cel del keyframe iniziale), oppure scrivi X e Y, dove 0 è il bordo sinistro o superiore e 1 quello destro o inferiore. Con Pivot in: Pixel della tela, X e Y sono invece un punto fisso della tela, così più livelli animati attorno allo stesso punto si muovono insieme come un pezzo unico.
• Dissolvenza: come si vedono i cambi di opacità (vedi "Dissolvenze con dithering e dissolvenze incrociate" più sotto). Alfa cambia l'opacità del cel; Dithering fa apparire o sparire pixel interi attraverso un Motivo. Dissolvenza incrociata verso il keyframe finale trasforma l'immagine nel disegno del keyframe finale.
• Colore: seleziona Anima il colore per cambiare i colori dell'immagine lungo il tween. Tonalità (gradi), Saturazione e Chiarezza (percentuale) funzionano come Tonalità/Saturazione, e Intensità della colorazione mescola ogni colore verso il Colore della colorazione; ognuno ha un valore Da e uno Fine. L'easing della traccia del colore è quello chiamato "Colore e rampa" sotto l'easing per traccia. Ogni intermedio viene ricolorato a partire dall'immagine del keyframe iniziale, così le modifiche non si accumulano. Sugli sprite indicizzati i pixel ricolorati si agganciano al colore della palette più vicino.
• Rampa di palette (sprite indicizzati): seleziona Sposta gli indici della palette lungo una rampa per far ciclare i colori senza ricolorare. I pixel che usano le voci della palette da Primo a Ultimo (la voce trasparente è esclusa) si spostano di Spostamento posizioni lungo quella sequenza entro la fine del tween, ricominciando oltre le estremità oppure fermandosi. Gli altri pixel restano come sono. I campioni mostrano la rampa.
• Ricampionamento: come vengono disegnati i pixel ruotati o ridimensionati. Automatico usa Più vicino (pixel esatti) e passa a RotSprite non appena qualcosa ruota o si inclina; sceglierne uno tu stesso lo mantiene. Bilineare fonde i colori, per grafica pittorica.
• Subpixel: come le posizioni intermedie diventano pixel interi. Monotono non torna mai indietro rispetto alla direzione del movimento, Arrotonda prende il pixel più vicino, e Per difetto arrotonda per difetto.
• Tempi: Fotogrammi distribuisce il movimento in modo uniforme sugli intermedi; Tempo segue le durate dei fotogrammi, quindi un fotogramma più lungo copre una parte maggiore del movimento.
• Ritardo (fotogrammi): mantiene la posa iniziale per quel numero di fotogrammi, poi il movimento riempie il resto del tween e arriva comunque sul keyframe finale. Nell'easing per traccia ogni traccia può aspettare un numero diverso di fotogrammi, per esempio una dissolvenza che inizia dopo lo spostamento.
• Esposizione: Ogni fotogramma disegna una nuova posa a ogni fotogramma; Ogni 2 fotogrammi ne disegna una ogni due fotogrammi e la mantiene per due, e così via fino a otto.
• Ping-pong (andata e ritorno): il movimento raggiunge la posa finale a metà del tween e torna alla posa iniziale entro il keyframe finale, così un loop che finisce dove è iniziato non ha bisogno di un secondo disegno. L'easing dà forma a ciascuna metà.
• Blocco palette: quando è attivo per uno sprite RGBA (Sprite > Palette > Blocco palette), gli intermedi ricampionati e ricolorati si agganciano alla palette, come qualsiasi cosa dipingi. Un semplice spostamento copia l'immagine esattamente. Attivare o disattivare il blocco ridisegna i tween che hanno Rigenera automaticamente attivo.
• Rigenera automaticamente: ridisegna gli intermedi ogni volta che cambiano il keyframe iniziale o i fotogrammi. Disattivalo per ridisegnarli tu con Modifica > Cel > Rigenera tween.

Applica crea il tween (o lo modifica) e mantiene l'ispettore aperto su di esso; Applica e chiudi lo chiude anche. Entrambi sono un solo passo di annullamento. I problemi con un valore, o un tween che si sovrapporrebbe a un altro sul livello, compaiono in fondo alla finestra, e Applica aspetta finché non sono risolti.

Se i keyframe sono vicini non c'è spazio per gli intermedi: seleziona Aggiungi e scegli quanti fotogrammi vuoti inserire tra di essi quando applichi. I fotogrammi sono condivisi da ogni livello, quindi i nuovi fotogrammi sono vuoti anche sugli altri livelli. Se il keyframe iniziale è un cel collegato, l'ispettore offre Scollega, perché un tween ha bisogno dell'immagine propria del keyframe iniziale.

Consigli:

• Ogni 2 fotogrammi dà un aspetto disegnato a mano e dimezza le pose da rifinire se ci dipingi sopra.
• Mantieni il subpixel Monotono per movimenti lenti e con easing: l'arrotondamento semplice può far oscillare l'immagine avanti e indietro di un pixel. Agisce come Arrotonda per gli easing con overshoot (Back, Elastic, Bounce) e per i percorsi diversi da Retta.
• Per qualsiasi cosa ruoti, RotSprite mantiene puliti i bordi della pixel art e non inventa mai colori. Più vicino è più veloce ma lascia diagonali seghettate.
• Per correggere a mano un intermedio, basta dipingerci sopra: la tua modifica viene conservata quando il tween viene ridisegnato.
• Il keyframe finale mostra il tuo disegno. Per un movimento che finisce fermo, disegna (o copia) l'immagine a riposo sull'ultimo fotogramma; lascialo vuoto per una dissolvenza o una scomparsa.

Preset di tween

Preset, in cima all'ispettore, contiene tween pronti: dissolvenze in entrata e in uscita, dithering in entrata e in uscita, una dissolvenza incrociata con dithering, comparsa e scomparsa a scatto, caduta e rimbalzo, entrate da ogni lato, un'entrata in picchiata lungo un percorso disegnato, scossa, un salto con schiacciamento e allungamento, schiacciamento e allungamento, fluttuare, oscillare, rotazione e lampeggio. Scegline uno e premi Usa preset: compila il modulo, che puoi ancora cambiare, e Applica (o Applica ai livelli) lo rende effettivo.

I preset sono relativi, quindi un solo preset va bene per qualsiasi disegno e qualsiasi durata:

• le distanze si misurano sulla dimensione del disegno iniziale: un'entrata "da una larghezza a sinistra" sposta di 16 pixel un disegno largo 16 pixel e di 40 uno largo 40, l'altezza di un arco e l'ampiezza di una scossa seguono il lato più corto del disegno, e un percorso disegnato si allunga con larghezza e altezza del disegno. Le distanze cadono su pixel interi;
• il movimento riempie il tween qualunque sia il numero di fotogrammi, e un ritardo ne è una parte;
• il pivot è una parte del riquadro del disegno iniziale;
• tutto il resto (easing, scala, rotazione, opacità, colore, schiacciamento, esposizione, ping-pong, dissolvenza) viene usato così com'è. Ricampionamento, subpixel e tempi restano le tue impostazioni.

Su uno sprite indicizzato, un preset che dissolve usa una dissolvenza con dithering, perché l'opacità parziale non si può mostrare con una palette.

In Salva e gestisci i preset scrivi un nome e premi Salva come preset per tenere il modulo attuale come preset tuo (salvare con un nome già usato lo sostituisce); scegli uno dei tuoi per Rinomina o Elimina preset. I tuoi preset restano su questo dispositivo, come le curve salvate: non sono nel file e non vengono sincronizzati. Esporta li scarica come file JSON e Importa… lo rilegge (su un altro dispositivo, per esempio), saltando ciò che non è un preset valido.

Dissolvenze con dithering e dissolvenze incrociate

La pixel art spesso non può mostrare pixel semitrasparenti, e gli sprite indicizzati non possono affatto: lì una dissolvenza alfa cambia solo l'opacità del cel, che l'editor mescola fuori palette. Imposta Dissolvenza su Dithering e la traccia di opacità dissolve invece l'immagine: pixel interi appaiono o spariscono attraverso un motivo Bayer 2×2, 4×4, 8×8 o A grappolo (mezzetinta), e la quota di pixel conservati segue l'opacità con il suo easing. Il motivo è fisso sulla tela, non sull'immagine, quindi non scorre quando l'immagine si muove, e una dissolvenza in entrata aggiunge sempre e solo pixel. Si conservano solo pixel interi dei colori del disegno, così gli sprite indicizzati e quelli con una profondità di colore restano esatti. I nuovi tween sugli sprite indicizzati partono con Dithering.

Dissolvenza incrociata verso il keyframe finale trasforma l'immagine iniziale nel disegno del keyframe finale lungo il tween (secondo l'easing della traccia di opacità): con Dithering ogni pixel mostra l'uno o l'altro disegno; con Alfa i due vengono mescolati. Dipingere sul keyframe finale ridisegna la dissolvenza incrociata.

Tween di più livelli

Seleziona cel su più livelli (testa, corpo e cappello, o le lettere di un titolo) dal fotogramma iniziale a quello finale e apri l'ispettore. Più livelli dice quanti livelli hanno un disegno sul fotogramma iniziale; imposta il tween come al solito e premi Applica ai livelli per dare a tutti lo stesso tween in un solo passo di annullamento.

• Sfalsa di fa partire ogni livello quel numero di fotogrammi dopo il precedente, nell'Ordine scelto: prima il livello in alto, prima quello in basso, o nell'ordine in cui li hai selezionati. Un livello successivo mantiene la posa iniziale finché non tocca a lui.
• Durata: Finire insieme fa finire tutti i tween sullo stesso keyframe finale, quindi i livelli successivi si muovono un po' più veloci; Estendi mantiene la stessa durata del movimento, quindi ogni livello successivo finisce più tardi (se serve si aggiungono fotogrammi alla fine).
• Pivot di gruppo condiviso scala, ruota e inclina tutti i livelli attorno a un solo punto (l'impostazione Pivot presa sul riquadro attorno ai disegni iniziali di tutti i livelli), così si muovono come un unico pezzo rigido invece di girare ciascuno attorno al proprio centro.

Nella timeline, i fotogrammi in cui un livello aspetta sono disegnati con una freccia tratteggiata e una tinta più tenue.

Disegnare un percorso di movimento

Imposta Percorso su Disegnato per guidare l'immagine lungo una curva che disegni tu. Parte dal tragitto che avevi (un arco diventa un percorso curvo), dalla posizione iniziale a quella finale. Finché l'ispettore è aperto, la tela mostra il percorso con i suoi ancoraggi, le loro maniglie e un punto per ogni intermedio:

• trascina un ancoraggio (un cerchio) per spostarlo; il primo e l'ultimo ancoraggio sono le posizioni iniziale e finale, quindi trascinarli imposta anche la posizione di Fine;
• trascina una maniglia (un quadrato) per curvare il percorso; la maniglia opposta ruota con lei, oppure tieni premuto Alt per spostarne una sola;
• fai clic sulla linea per aggiungere lì un ancoraggio, Alt+clic su un ancoraggio per rimuoverlo e doppio clic per passarlo da morbido ad angolo e viceversa;
• Aggiungi ancoraggio e Rimuovi ancoraggio nell'ispettore fanno lo stesso da tastiera.

Ancoraggi e maniglie si agganciano al centro dei pixel. L'immagine percorre il percorso a velocità costante: l'easing della posizione dà il ritmo lungo il percorso, non la forma della curva. Seleziona Orienta lungo il percorso per girare l'immagine nella direzione di marcia (parte senza rotazione); RotSprite mantiene puliti i suoi bordi. Il percorso fa parte del tween, quindi si conserva nei file .pxstudio e .aseprite. Le modifiche sulla tela restano in sospeso, come il resto del modulo, finché non premi Applica. Deseleziona Modifica il percorso sulla tela per vedere il percorso senza le maniglie.

Disegnare la tua curva di easing

Disegna curva (accanto a Lineare, Mantieni e Passi) trasforma l'easing in una curva che modelli tu: un quadrato in cui l'asse orizzontale è quanto sei avanzato nel tween e l'asse verticale è quanto è avanzato il movimento. Parte dall'easing che avevi scelto. Trascina un punto (un'ancora) per spostarlo, trascina i quadrati accanto al punto selezionato (le sue maniglie) per piegare la curva, fai doppio clic su uno spazio vuoto per aggiungere un'ancora, oppure fai doppio clic su un punto (o premi Del) per rimuoverlo. I tasti freccia spostano di poco l'ancora attiva, e le caselle Avanzamento e Quantità la impostano con precisione. Angolo toglie le maniglie così la curva gira bruscamente lì. Quantità sopra 1 o sotto 0 vanno in overshoot. Inverti specchia la curva; Parti da la sostituisce con qualsiasi easing già pronto da modificare.

Dai un nome alla curva e premi Salva nella libreria per conservarla per altri tween: le curve salvate restano solo su questo dispositivo, e sceglierne una da Curve salvate la carica nell'editor. Salvare con un nome già usato sostituisce quella curva.

Catene e spostare la fine di un tween

Una catena è una serie di tween attraverso più keyframe di un livello, ciascuno che finisce sul keyframe in cui inizia il successivo, così un solo disegno può chiudere un tween e aprire il successivo. Seleziona il primo keyframe e scegli Modifica > Cel > Crea tween tra i keyframe per concatenare tutti i keyframe successivi sul livello, ognuno con il proprio tween che arriva al suo keyframe finale, oppure usa Concatena su più keyframe nell'ispettore per scegliere dove fermarti e mantenere le tue impostazioni. È un solo passo di annullamento. I tween che iniziano già su quei keyframe vengono sostituiti.

Per spostare dove finisce un tween, seleziona il suo keyframe iniziale fino al fotogramma su cui deve finire e scegli Modifica > Cel > Imposta la fine del tween sulla selezione, oppure cambia Keyframe finale nell'ispettore e premi Applica. Un tween non può essere allungato fino a invadere il successivo in una catena.

Tween negli script

Gli script hanno gli stessi tween: app.setTween(layerId, frameId, { to = endFrameId, end = { dx = 12 }, ease = "quad", mode = "out", path = "arc", height = 6 }) fa il tween del cel di un livello in frameId fino a un fotogramma successivo e restituisce l'id del tween, e app.regenerateTween, app.bakeTween e app.removeTween prendono il livello e il fotogramma iniziale. app.setTweenChain(layerId, { frameA, frameB, frameC }, opts) fa il tween attraverso quei keyframe in un passo e restituisce gli id dei tween, e app.setTweenEnd(layerId, frameId, newEndFrameId) sposta la fine di un tween. Le opzioni accettano anche curve (un easing disegnato), trackEasing, color e colorFrom (tonalità, saturazione, chiarezza, colorazione), tintColor (una stringa esadecimale o { r, g, b }), ramp ({ first, last, shift, wrap }), fade, ditherPattern e crossfade, delay e trackDelay, pivotSpace, orient, e path = "custom" con points (gli ancoraggi del percorso disegnato). app.tweenPresets() elenca i preset integrati e app.tweenPreset("popIn") ne restituisce uno; passa il suo recipe come opzione preset per adattarlo al cel iniziale. app.setTweenStagger({ layerA, layerB }, frameId, { to = endFrameId, preset = app.tweenPreset("slideInTop").recipe, step = 2, groupPivot = true }) fa il tween di più livelli in un passo. Tutte le opzioni sono nel riferimento di scripting.

Tween nella timeline

• Una freccia corre lungo il fondo dei cel dal keyframe iniziale a una punta di freccia sul keyframe finale. Un keyframe può chiudere un tween e aprire il successivo.
• I fotogrammi intermedi sono colorati di blu. I fotogrammi in cui il tween aspetta ancora il suo ritardo sono più tenui, con una freccia tratteggiata.
• Un piccolo rombo scuro segna un intermedio su cui hai dipinto o che hai spostato. La tua modifica resta quando il tween viene ridisegnato, finché non usi Modifica > Cel > Torna al tween.
• Quando il keyframe iniziale cambia, o cambiano i fotogrammi o i loro tempi, il tween è obsoleto: i suoi intermedi non corrispondono più. La freccia diventa ambra, e così l'angolo del keyframe iniziale. Usa Modifica > Cel > Rigenera tween per ridisegnarlo. Un tween impostato per rigenerarsi da solo non resta mai obsoleto, tranne su un livello bloccato.
• Un angolo rosso su un keyframe iniziale significa che il tween è rotto: il suo fotogramma finale è stato eliminato o spostato prima di esso. Dagli una nuova fine, oppure rimuovilo.

Punta un cel per leggere la stessa cosa a parole ("inizio tween, fino al fotogramma 9, obsoleto", "con tween, modificato a mano"); anche gli screen reader lo annunciano.

Comandi dei tween

Si trovano in Modifica > Cel e nel menu del clic destro di un cel. Agiscono sui cel selezionati (o sul cel attivo), e qualsiasi cel di un tween, il suo keyframe iniziale o un intermedio, rappresenta l'intero tween. Ognuno è un solo passo di annullamento, e i livelli bloccati e nascosti vengono saltati.

• Modifica > Cel > Rigenera tween ridisegna gli intermedi dal keyframe iniziale, lasciando stare quelli che hai modificato a mano.
• Modifica > Cel > Torna al tween riporta gli intermedi modificati a mano selezionati a ciò che disegna il tween.
• Modifica > Cel > Consolida tween conserva ogni intermedio come cel normale e rimuove il tween, così nulla li ridisegna più.
• Modifica > Cel > Rimuovi tween rimuove il tween e gli intermedi che ha disegnato. Quelli che hai modificato a mano restano, come cel normali.
• Modifica > Cel > Copia impostazioni del tween copia le impostazioni di un tween: easing, movimento, percorso e tempi, ma non dove finisce. Modifica > Cel > Incolla impostazioni del tween le applica a ogni keyframe selezionato. Un keyframe che già avvia un tween mantiene la sua fine; altrimenti il tween arriva fino al fotogramma successivo su quel livello con un cel disegnato. I keyframe senza nulla dopo di essi vengono saltati.

Onion skin

L'onion skin mostra copie sbiadite dei fotogrammi prima e dopo quello corrente, così vedi il movimento mentre disegni. Attivala con Visualizza > Mostra onion skin o con il pulsante onion skin nella barra delle opzioni dello strumento. È impostata per ogni vista dell'editor.

Impostazioni > Onion skin... sceglie quanti fotogrammi prima e dopo mostrare (fino a 16 ciascuno), la loro opacità e quanto sfumano a ogni fotogramma, se i fotogrammi precedenti sono tinti di rosso e quelli successivi di blu, se mostrare solo i fotogrammi del tag corrente, e se le copie sono disegnate dietro o davanti allo sprite. Dietro, si disegnano sopra il livello Sfondo e sotto gli altri livelli, quindi si vedono su uno sprite con uno Sfondo. La tinta ricolora ogni copia in base alla sua luminosità, quindi anche i contorni scuri appaiono rosso scuro o blu scuro. Queste impostazioni valgono per ogni sprite.

L'onion skin segue la riproduzione, come in Aseprite. Non ricomincia dal lato opposto oltre il primo o l'ultimo fotogramma. Con Solo tag corrente, usa il tag più piccolo attorno al fotogramma corrente, nella direzione di quel tag: in un tag inverso, il fotogramma "prima" è il successivo lungo la timeline. Con Cicla i fotogrammi del tag ricomincia all'interno del tag, e un tag ping-pong rimbalza alle sue estremità.