Aprire, importare ed esportare

pxstud.io conserva il tuo lavoro nel browser mentre procedi (Il tuo primo sprite). Questa pagina spiega come portare i file dentro e fuori. Quali formati possono fare cosa è in Formati di file.

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.

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 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 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): 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:

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:

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).