# Animazione e timeline Aggiungi e temporizza i fotogrammi, riproducili, segna i loop con i tag, lavora con i cel, fai il tween tra i keyframe e vedi i fotogrammi vicini con l'onion skin. _Le scorciatoie sono scritte per Windows e Linux. Su Mac, usa ⌘ Cmd dove c'è scritto Ctrl e ⌥ Option per Alt._ 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](https://pxstud.io/it/docs/manual/concepts/how-work-is-organized.md)). ![La timeline con un tag verde 'bounce' sui fotogrammi da 1 a 4, ciascuno di 120 ms; un livello Slime con lo slime a diverse altezze, un livello Shading con un'ombra solo sul fotogramma 1 e puntini vuoti altrove, e un livello Background i cui cel sono collegati su tutti e quattro i fotogrammi](https://pxstud.io/manual/images/guides/animation-timeline.light.webp) _Un'animazione di quattro fotogrammi con un tag_ ## La timeline Lungo la parte alta della timeline: | Controllo | Cosa fa | | - | - | | Primo, Precedente, Riproduci/Pausa, Successivo, Ultimo | Si spostano tra i fotogrammi (`Home`, `←`, `Enter`, `→`, `End`; le frecce spostano invece i pixel selezionati finché c'è una selezione). Precedente e Successivo passano dall'ultimo fotogramma al primo e viceversa, come in Aseprite. `,` e `.` scorrono invece all'interno del tag del fotogramma corrente, ricominciando dalla fine all'inizio, per sfogliare una singola animazione. | | Loop | Se la riproduzione ricomincia alla fine. | | Velocità | Riproduce da 0,25× a 4× senza cambiare i tempi dei fotogrammi. | | Modalità di riproduzione | Come vengono riprodotti i tag (sotto). | | **+ Livello**, immagine di riferimento, elimina | Aggiungono un livello (`Shift+N`), aggiungono un livello di riferimento da un file, eliminano il livello attivo. | | **+ Fotogramma**, duplica, elimina | Aggiungono un fotogramma vuoto dopo quello corrente (`Ctrl+Shift+F`), lo duplicano (`Alt+N`), lo eliminano (`Ctrl+Alt+Shift+F`). | | **Tag** | Crea un tag sui fotogrammi selezionati. | 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](https://pxstud.io/it/docs/manual/guides/layers.md#showing-hiding-and-locking), 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: | Modalità | Riproduce | | - | - | | **Tag** (Riproduci tag e ripetizioni) | Ogni fotogramma in ordine. Ogni tag viene riprodotto nella propria direzione e tante volte quanto il suo numero di ripetizioni, anche i tag dentro altri tag, prima che la riproduzione proceda. | | **Tutti i fotogrammi** | Ogni fotogramma in ordine, ignorando i tag. | | **Una volta** | Come Tag dal primo all'ultimo fotogramma, poi si ferma e torna al fotogramma da cui sei partito. Con un tag scelto (sotto), quel tag una volta: un tag ping-pong va e torna. | | **Subtag** | Come Tag, ma quando la testina è in un tag con ripetizione 0, quel tag va in loop (con i tag al suo interno). | 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](https://pxstud.io/it/docs/manual/reference/tools.md#how-tools-behave). 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à.