# Aprire, importare ed esportare Apri sprite e immagini, trasforma le foto in pixel art, ritaglia le sprite sheet ed esporta immagini, animazioni, sheet, video e timelapse. _Le scorciatoie sono scritte per Windows e Linux. Su Mac, usa ⌘ Cmd dove c'è scritto Ctrl e ⌥ Option per Alt._ pxstud.io conserva il tuo lavoro nel browser mentre procedi ([Il tuo primo sprite](https://pxstud.io/it/docs/manual/start/first-sprite.md#saving)). Questa pagina spiega come portare i file dentro e fuori. Quali formati possono fare cosa è in [Formati di file](https://pxstud.io/it/docs/manual/reference/file-formats.md). ## Aprire i file File > Apri... (`Ctrl+O`) apre un file `.pxstudio` o Aseprite, un file di un altro editor (Photoshop `.psd`, OpenRaster `.ora`, Piskel, Pixilart, Pixelorama, Pyxel Edit), o un'immagine (PNG o PNG animato, GIF, JPEG, WebP, AVIF, BMP, TGA, PCX, QOI, ICO, CUR, Netpbm, FLI/FLC), come nuovo sprite nel progetto corrente, con il nome del file. Puoi anche **trascinare** i file sull'editor: - Più immagini insieme chiedono se aprirle come **sprite separati** o come **una sola animazione** (un fotogramma per immagine, in ordine di nome file). - Un'immagine grande (oltre 512 pixel per lato) chiede se **importarla come pixel art** o aprirla così com'è. - Altre immagini che il browser sa mostrare (SVG e simili) vanno in Importa come pixel art. Quando qualcosa in un file non può essere mantenuto, un avviso dice cosa, per esempio il profilo colore di un file Aseprite, una modalità di fusione che pxstud.io non ha, o un livello di regolazione di Photoshop. Cosa conservano i file di ciascun editor è in [Formati di file](https://pxstud.io/it/docs/manual/reference/file-formats.md). File > Salva con nome... (`Ctrl+Shift+S`) scarica lo sprite come file `.pxstudio`, che conserva tutto e si riapre esattamente com'era. ## Importare ### Immagine come pixel art File > Importa > Importa immagine come pixel art... trasforma una foto o un disegno in pixel art. 1. **Scegli immagine...** oppure trascinane una. (Le immagini più grandi di 4096 pixel vengono prima ridotte.) 2. Imposta la **dimensione**: larghezza e altezza, oppure un lato lungo di 16, 32, 64 o 128. 3. Scegli un **algoritmo**: - **Bilanciato (SLIC + k-means)**, il predefinito, raggruppa i pixel in regioni di colore simile; - **Morbido con contorni (bilaterale)** ammorbidisce le aree e può scurire i bordi tra di esse; - **Forme nitide (Kopf-Lischinski)** mantiene forme e contorni netti. 4. Scegli una **palette**: **Auto** trova i colori migliori (da 2 a 64), oppure usa la palette dello sprite, una di Le mie palette o una palette integrata. 5. Premi **Avvia** per vedere il risultato, regola, e premi **Riavvia** per aggiornarlo. 6. **Importa come** nuovo sprite, o come nuovo livello nello sprite corrente (centrato), e fai clic su **Importa**. **Aggiungi i colori della palette alla palette dello sprite** tiene a portata di mano i colori per i ritocchi. ### Sequenza di immagini File > Importa > Sequenza di immagini... sceglie più immagini e crea uno sprite con un fotogramma per immagine, in ordine naturale di nome file (`run2` prima di `run10`). Lo sprite prende il nome del primo file senza il numero. Le immagini di dimensioni diverse stanno in alto a sinistra della più grande. ### Sprite sheet File > Importa > Sprite sheet... taglia una sheet in fotogrammi. Scegli un'immagine, oppure **Usa lo sprite corrente**. - **Rileva griglia automaticamente** cerca gli spazi vuoti tra i fotogrammi (trasparenti, o del colore di sfondo della sheet) e imposta il tipo, la dimensione del fotogramma, l'offset e la spaziatura di conseguenza. Viene eseguito quando scegli un'immagine, e di nuovo ogni volta che lo premi. Ha bisogno di spazi tra i fotogrammi, quindi una sheet i cui fotogrammi si toccano mantiene le tue impostazioni e lo dice. - **Trova i fotogrammi con** **Rilevamento di ogni sprite** è per le sheet che non sono su una griglia. Vedi [Rilevare gli sprite](https://pxstud.io/it/docs/manual/guides/import-export.md#detecting-sprites) più sotto. - **Tipo:** Striscia orizzontale, Striscia verticale, Per righe o Per colonne. - **Largh. fotogr.** e **Alt. fotogr.**, **Offset**, **Spaziatura**, e se includere le celle parziali e saltare quelle vuote. Una griglia sopra la sheet mostra dove cadono i tagli. - **JSON di Aseprite...** legge i fotogrammi, le durate e i tag dal file JSON che Aseprite esporta con una sheet, invece della griglia. I fotogrammi rifilati tornano al loro posto sulla tela completa, e il margine interno di Aseprite viene lasciato fuori da ogni fotogramma. - **Crea** un nuovo sprite, oppure **sostituisci i fotogrammi dello sprite corrente** (un passo di annullamento). #### Rilevare gli sprite Per le sheet compatte o con spaziatura irregolare, scegli **Rilevamento di ogni sprite**. Ogni gruppo di pixel che non sono di sfondo diventa un fotogramma, mostrato come un riquadro numerato sopra la sheet. - **Sfondo:** Automatico usa la trasparenza se la sheet ne ha, altrimenti il suo colore più comune. Oppure scegli Trasparente, o un colore. - **Tolleranza** (da 0 a 255): quanto un pixel può essere lontano dallo sfondo e contare ancora come vuoto. Alzala per ignorare il rumore leggero o la sfocatura JPEG. - **Distanza di unione:** i riquadri con al massimo questo numero di pixel vuoti tra di loro si uniscono in un solo sprite, così una spada o una scintilla staccata resta con il suo personaggio. Con 0 si uniscono solo i riquadri che si sovrappongono. - **Pixel min.:** gli sprite con meno pixel di questo vengono scartati come puntini. - **Connessione:** se i pixel che si toccano solo in un angolo appartengono allo stesso sprite. - **Ordine:** i fotogrammi vanno riga per riga o colonna per colonna. - **Dimensione fotogramma** è la dimensione dello sprite più grande, oppure una dimensione personalizzata (gli sprite più grandi vengono tagliati). L'**Ancoraggio** decide dove sta ogni sprite su quella tela: in basso al centro tiene i piedi su una sola linea, il che evita che un ciclo di camminata tremi. Per correggere il risultato a mano, fai clic su un riquadro per selezionarlo. Puoi cambiarne X, Y, L e A, spostare dove sta sul fotogramma (**Sposta X** e **Sposta Y**), spostarlo **Prima** o **Dopo** nell'ordine, passare al riquadro **Precedente** o **Successivo**, oppure **Eliminarlo**. Trascina su una parte vuota della sheet per disegnare un nuovo riquadro, che viene aggiunto per ultimo. Cambiare un'impostazione di rilevamento o premere **Rileva di nuovo** esegue di nuovo il rilevamento e scarta queste modifiche. Gli sprite che si toccano non si possono distinguere e vengono fuori come un solo riquadro; dividili a mano, oppure usa invece la griglia. ## Esportare File > Esporta... (`Ctrl+Alt+Shift+S`) apre un'unica finestra per tutti i formati, con un'anteprima del file reale. I livelli nascosti, i livelli di riferimento e i [livelli bozza](https://pxstud.io/it/docs/manual/guides/layers.md#draft-layers) non vengono mai esportati (un file Aseprite conserva ogni livello). **Per ogni tipo:** - **Ridimensiona (%)** scala a passi interi, da 100% a 1600%, così i pixel restano quadrati nitidi. - **Applica proporzioni dei pixel** allunga i pixel non quadrati alla loro forma. - **Fotogrammi:** tutti, il fotogramma attivo, o i fotogrammi di un tag. **Direzione animazione:** avanti, indietro o ping-pong (per un tag, avanti mantiene la direzione propria del tag). - **Riproduci sottotag e ripetizioni** (quando lo sprite ha dei tag, attivo per impostazione predefinita come in Aseprite): i fotogrammi vengono esportati come li riproduce la riproduzione, attraverso ogni tag nella sua direzione, compresi tag annidati e numeri di ripetizioni, quindi un fotogramma può comparire più di una volta. Disattivalo per esportare ogni fotogramma una volta, in ordine (un file per fotogramma per una sequenza PNG). - **Area** (quando lo sprite ha degli [slice](https://pxstud.io/it/docs/manual/guides/slices.md)): l'intera tela, uno slice, oppure **Ogni slice**, che scrive un'esportazione per slice. Uno slice che si sposta o si ridimensiona tra i fotogrammi viene esportato nel riquadro che lo copre in ogni fotogramma esportato, così tutti i suoi fotogrammi hanno la stessa dimensione. Con ogni slice, `{slice}` nel nome del file diventa il nome dello slice (`{slice}.png` dà `head.png`); senza, il nome va prima dell'estensione (`sprite-head.png`, `walk-head001.png`). Non per le sprite sheet né per i tipi che salvano l'intero file. - **Nome file.** Per una sequenza PNG, un numero nel nome imposta la numerazione: `walk001.png` dà `walk001.png`, `walk002.png` e così via; senza, i fotogrammi sono numerati `sprite-001.png`. **Per tipo:** | Tipo | Opzioni | | - | - | | **PNG** | Un'immagine, oppure una per fotogramma. | | **GIF animata** | **Numero di cicli** (0 va in loop per sempre, oppure usa la ripetizione del tag). **Dithering**: una GIF contiene 256 colori, quindi un'animazione con più colori ottiene una palette scelta da tutti i suoi fotogrammi, e questo sceglie come vengono disegnati i colori intermedi (le stesse scelte della [conversione in indicizzato](https://pxstud.io/it/docs/manual/guides/color.md#color-modes); i motivi ordinati non sfarfallano tra i fotogrammi). I pixel sotto metà opacità diventano trasparenti; la GIF memorizza le durate a passi di 10 ms, almeno 20 ms. | | **PNG animato (APNG)** | **Numero di cicli**. Conserva ogni colore, la trasparenza morbida e le durate esatte; salvato come `.png`. Le app senza supporto APNG mostrano il primo fotogramma. | | **WebP** | Fisso o animato; **Senza perdita**, oppure una **Qualità** da 0 a 100; numero di cicli. | | **Sprite sheet** | Sotto. | | **File Aseprite** | L'intero sprite, con livelli, gruppi, cel collegati, tag, slice e tilemap. L'opacità dei gruppi e le modalità di fusione si vedono in Aseprite con **Experimental > Compose groups** attivo. | | **File Photoshop (PSD)** | Il fotogramma attivo con i suoi livelli, gruppi, modalità di fusione, opacità, visibilità e ritaglio, più l'immagine unita. Si apre in Photoshop, Krita, GIMP e Photopea. | | **OpenRaster (ORA)** | Il fotogramma attivo con i suoi livelli e gruppi, per Krita, GIMP, MyPaint e Pixelorama. | | **File Piskel** | Ogni fotogramma e livello visibile. I gruppi vengono appiattiti, e il file riceve una sola frequenza di fotogrammi (dalla durata più comune). | | **Tilemap (JSON / Tiled)** | Immagini dei tileset più una mappa Tiled o un file JSON ([Tilemap](https://pxstud.io/it/docs/manual/guides/tilemaps.md#exporting)). | | **Video MP4** | **Frequenza fotogrammi** (Auto mantiene esatte tutte le durate), quante volte viene **riprodotto**, e un **colore di sfondo** (il video non ha trasparenza). Offerto solo dove il browser sa creare video. | | **Video WebM (VP9)** | Quante volte viene **riprodotto** e un **colore di sfondo** (il video non ha trasparenza). Conserva la durata esatta di ogni fotogramma. Offerto solo dove il browser sa creare video. | | **FLC** | Il formato di Autodesk Animator: fino a 256 colori, la trasparenza diventa nero. | | **JPEG** | **Qualità** e un **colore di sfondo**. | | **AVIF** | **Qualità**: 100 (il predefinito) è senza perdita; più basso crea un file più piccolo che non è esatto al pixel. | | **ICO, CUR** | Icone e cursori di Windows, fino a 256×256. **Tutte le dimensioni** memorizza anche ogni dimensione intera più grande fino a 256 (uno sprite 32×32 dà 32, 64, 96 … 256), così Windows ne sceglie una nitida. Il punto di clic di un cursore è il pivot di uno slice chiamato `hotspot`. | | **ANI** | Un cursore animato di Windows, fino a 256×256. Ogni fotogramma selezionato diventa un'immagine del cursore mostrata per la durata del fotogramma (arrotondata a 1/60 s); i fotogrammi ripetuti (ping-pong) sono memorizzati una volta sola. Imposta il punto di clic con **Hotspot X / Y** (parte dal pivot dello slice `hotspot`). | | **PDF per lavori manuali** | Uno schema stampabile di punto croce, perline o perler del fotogramma corrente: una copertina con un'anteprima e il numero di colori, lo schema diviso in pagine con griglia, e una legenda che elenca simbolo, campione, hex, nome del gruppo della palette e numero di punti di ogni colore. Imposta la **dimensione cella** (mm), il **formato pagina** (A4 o Letter), una **linea della griglia ogni** N celle più marcata, e **simboli** o **riempimenti a colori**. Le celle trasparenti vengono saltate; la modalità simboli accetta fino a 56 colori. | | **Netpbm** | `.pgm` non compresso (scala di grigi opaca), `.ppm` (colore opaco) o `.pam` (con trasparenza); l'estensione segue l'immagine. | | **TIFF** | Senza perdita, compresso LZW. Gli sprite indicizzati conservano la palette (a meno che usino il loro colore trasparente); gli altri sprite salvano RGB, o RGBA quando qualcosa è trasparente. Un file per fotogramma. | | **JPEG XL** | Senza perdita, con trasparenza. Limitato a 1024×1024 pixel, quindi riduci il ridimensionamento per le esportazioni grandi. Un file per fotogramma. | | **BMP, TGA, PCX, QOI, SVG** | Un file per fotogramma. L'SVG disegna ogni serie di pixel dello stesso colore come un rettangolo. | ### Preset e coda **Preset e coda**, in fondo alla finestra Esporta, salva e raggruppa le esportazioni. Nulla in essa chiede conferma. - I **Preset** conservano il tipo e ogni opzione di quella scheda (ridimensionamento, fotogrammi, area, nome file, e le opzioni per tipo come qualità, sfondo, hotspot, dimensione cella o le impostazioni della sprite sheet) con un nome a tua scelta. **Salva preset** con un nome esistente lo sostituisce. **Applica** compila la finestra con un preset, e **Rinomina** ed **Elimina** fanno ciò che dicono. I preset restano su questo dispositivo e non richiedono un account. La scelta di tag, slice o fotogramma di un preset che lo sprite corrente non ha ricade su tutti i fotogrammi o sull'intera tela. - **Coda:** **Aggiungi corrente alla coda** (o **Aggiungi alla coda** di un preset) mette in fila un'esportazione con le impostazioni attuali. **Esegui coda** crea ogni file in un colpo solo: un solo scaricamento, oppure un unico `pxstudio-export.zip` quando gli elementi creano più file. Ogni elemento mostra In attesa, Fatto o l'errore che lo ha fermato; un elemento fallito non ferma gli altri, e **Esegui coda** di nuovo riprova quelli falliti. **Rimuovi** toglie un elemento. La coda è per lo sprite e la finestra che hai aperto, e torna vuota quando la finestra si chiude. ### Sprite sheet Il tipo **Sprite sheet** ha quattro schede, organizzate come quelle di Aseprite: - **Layout:** striscia, righe, colonne o **Compatto**; un numero fisso di colonne o righe, o una larghezza o altezza fissa; adattamento migliore; unire i fotogrammi duplicati; ignorare quelli vuoti. - **Sprite:** quali livelli e fotogrammi, se dividere livelli o tag, e il ritaglio. - **Bordi:** margine del bordo, spazio tra le forme e margine interno, ed **Estrusione** (ripete i pixel dei bordi, per evitare le giunzioni nei giochi). - **Output:** un **Preset del motore**, il **File dati** (JSON di Aseprite come Hash o come Array, o un SpriteFrames `.tres` di Godot 4) e, per il JSON, come viene chiamato ogni fotogramma. I layout funzionano come quelli di Aseprite, quindi le stesse opzioni danno la stessa sheet: - Strisce, righe e colonne posizionano ogni fotogramma alla sua dimensione, così i fotogrammi rifilati non occupano lo spazio del più grande. Senza vincoli, **Per righe** e **Per colonne** creano una griglia quasi quadrata. - **Dividi livelli** mette i fotogrammi di ogni livello uno dopo l'altro, e **Dividi tag** quelli di ogni tag. **Per righe** inizia una nuova riga per ogni livello e tag (**Per colonne**, una nuova colonna), a meno che una larghezza (altezza) fissa li faccia andare a capo. - **Compatto** dispone i fotogrammi, dal più grande, nella sheet più piccola possibile, vicina al quadrato (100 fotogrammi rifilati da 4 a 43 px danno 258×236 px, come in Aseprite). **Adattamento migliore: Area minima** prova qualche dimensione in più, e **Potenza di due minima** dà una sheet con dimensioni potenza di due. - Una larghezza o altezza fissa è la larghezza o altezza della sheet, anche quando i fotogrammi ne usano meno. - L'anteprima avverte quando la sheet supera i 16384 px per lato, che molte GPU e motori non riescono a caricare. Ritaglio: - **Ritaglia sprite** rifila ogni fotogramma all'area usata da un qualsiasi fotogramma. **Ritaglia cel** rifila ogni fotogramma al proprio contenuto. Con un livello Sfondo visibile, entrambi rifilano il colore di sfondo (il colore del pixel in alto a sinistra) invece della trasparenza. - **Ritaglia sulla griglia** allarga l'area rifilata fino alle linee della griglia, per entrambi i tipi di ritaglio. - Il JSON conserva i fotogrammi in coordinate della tela: `sourceSize` è la dimensione della tela e `spriteSourceSize` è dove stanno i pixel del fotogramma su di essa, così i motori e le reimportazioni mantengono ogni fotogramma al suo posto. Nomi dei fotogrammi: lascia vuoto **Nome file dell'elemento** per i nomi di Aseprite, `{title} {frame}.{extension}`, con ` ({layer})` aggiunto per un livello e ` #{tag}` per un tag (`hero (Body) #walk 0.aseprite`). `{frame}` conta da 0 per ogni livello e tag. I token sono quelli di Aseprite: | Token | Diventa | | - | - | | `{title}`, `{extension}`, `{name}` | Il nome del file senza estensione, l'estensione (`aseprite`), ed entrambi. | | `{layer}`, `{group}` | Il livello, quando i fotogrammi vengono da un livello, e il suo gruppo. | | `{tag}`, `{innertag}`, `{outertag}` | Il tag esportato, o il tag più corto che contiene il fotogramma; `{outertag}` è il più lungo. | | `{frame}`, `{tagframe}` | Il numero del fotogramma, e il suo numero dentro il tag. Le cifre impostano l'inizio e la larghezza: `{frame1}` conta 1, 2, …; `{frame001}` dà 001, 002, …. | | `{duration}` | La durata del fotogramma in millisecondi. | Ottieni il PNG della sheet e un file dati con lo stesso nome. Il JSON elenca la posizione e la durata di ogni fotogramma, i tag, i livelli esportati e gli slice, ed è leggibile dai motori di gioco e dagli strumenti che leggono il JSON di Aseprite. A differenza di Aseprite, il rettangolo `frame` di un fotogramma non include il margine interno, e gli intervalli dei tag contano i fotogrammi nella sheet. Come in Aseprite, i fotogrammi di un tag sono in ordine di timeline sulla sheet, e la sua direzione e il numero di ripetizioni sono nel JSON perché il motore di gioco li applichi. I **preset del motore** impostano il layout per un motore di gioco con un clic: **Godot 4** e **Phaser / PixiJS** compattano i fotogrammi, rifilano ciascuno al suo contenuto, uniscono i duplicati e aggiungono 1 px di estrusione, così i fotogrammi non raccolgono i bordi dei vicini quando la camera si muove o la texture viene filtrata. Godot 4 sceglie anche il file dati `.tres`. **Impostazioni predefinite di Aseprite** riporta il layout a una semplice striscia. Puoi cambiare qualsiasi opzione dopo. #### Godot 4 Con il file dati **SpriteFrames di Godot 4 (.tres)**: - Ogni tag diventa un'animazione con il nome del tag. Uno sprite senza tag ottiene un'animazione chiamata `default`. Con **Dividi livelli**, le animazioni si chiamano `livello/tag`. - Le durate dei fotogrammi si trasferiscono esattamente: la velocità dell'animazione viene dalla durata di fotogramma più comune, e i fotogrammi più lunghi o più corti ricevono una durata relativa corrispondente. - Godot non ha impostazioni di inversione, ping-pong o ripetizione, quindi i fotogrammi vengono scritti nell'ordine di riproduzione. Un tag con un numero di ripetizioni viene riprodotto quel numero di volte (ogni verso di un ping-pong conta una volta) e non va in loop; gli altri tag vanno in loop. - I fotogrammi rifilati mantengono dimensione e posizione complete, così lo sprite non salta tra i fotogrammi. Metti il PNG e il `.tres` nella stessa cartella del tuo progetto Godot, poi scegli il `.tres` come **Sprite Frames** di un **AnimatedSprite2D**. Per pixel nitidi, imposta **Project Settings > Rendering > Textures > Default Texture Filter** su **Nearest**. ## Esportare un timelapse File > Esporta timelapse... crea una breve GIF o un MP4 del tuo sprite mentre viene disegnato, da condividere. - **Anima:** **Disegna lo sprite finito** (i pixel compaiono in un ordine a tua scelta: una scansione, una dissolvenza casuale, uno scorrimento diagonale, una spirale, dal centro, o colore per colore), oppure **Riproduci le mie modifiche** (la tua vera cronologia delle modifiche di questa sessione, tratto per tratto: i passi che hanno portato a dove sei ora, senza i passi annullati né altri rami). Scegli un intervallo di modifiche (**Dalla modifica** / **Alla modifica**) e **Mostra ogni** N modifiche per velocizzare le costruzioni lunghe. - Con più livelli o fotogrammi, scegli se vengono disegnati insieme o uno alla volta. - **Tempi:** tempo di disegno, frequenza fotogrammi, ritmo (accelera e rallenta, costante, accelera, rallenta), una pausa tra i fotogrammi, una pausa finale, e quante volte viene poi riprodotta l'animazione finita. - **Output:** GIF o MP4, scala (punta a 1080 pixel per impostazione predefinita), margine, una tela quadrata, e il colore di sfondo (o trasparente, per la GIF).