Giochi / Immagini

Crea, taglia e anima sprite sheet

Disponi le immagini in uno sprite sheet o texture atlas, dividi uno sheet in frame separati e animali. Salva PNG, metadati hash JSON, classi CSS, file ZIP o una GIF animata senza caricare le tue immagini.

Crea, taglia e anima sprite sheet: Crea combina immagini PNG, JPG, WebP e frame GIF decodificati in uno sheet a griglia, per righe, per colonne o impacchettato. Le celle uniformi si adattano all'immagine più grande, con allineamento al centro o al centro in basso, margini interni, spaziatura e dimensioni opzionali a potenza di due. Taglia in base al numero di celle della griglia o alle dimensioni in pixel, oppure rileva le isole separate dalla trasparenza o da un colore di sfondo chiave. Puoi escludere rettangoli, ignorare le celle vuote e rifilare i bordi trasparenti prima di salvare un ZIP o inviare i frame ad Anima. Anima un intervallo di frame selezionato a 1–60 FPS, con ordine in ciclo o ping-pong, zoom dei pixel e onion skin opzionale. Salva una GIF o una striscia PNG orizzontale. Se prima devi disegnare i frame, inizia dal generatore di pixel art. Funziona al 100% localmente nel browser, senza caricare file sul server.

Esecuzioni
Nel browser
Costo
Gratuito · senza registrazione
Disponibilità
Pronto all'uso
Area di lavoro per sprite sheetElaborazione locale

Funziona interamente nel browser

Disponi i fotogrammi in una sheet per il tuo gioco.

Le celle uniformi usano il fotogramma più grande, oltre al padding su ogni lato. La spaziatura separa le celle.

Aggiungi dei fotogrammi per iniziare. Puoi anche dividere una sheet in Taglia e inviarne qui i fotogrammi.

Le tue immagini e le esportazioni rimangono in questo browser. Usa i file salvati nel tuo progetto di gioco.

Sprite sheet e atlanti di texture

Uno sprite sheet contiene diversi fotogrammi di animazione o immagini di gioco in un'unica immagine. Una griglia regolare descrive ogni fotogramma in base alla posizione della cella. Un atlante di texture può usare rettangoli di dimensioni diverse e richiede coordinate che descrivano ogni immagine. La documentazione di AtlasTexture di Godot (https://docs.godotengine.org/en/stable/classes/class_atlastexture.html) spiega come usare una regione di un atlante come texture.

L'allineamento al centro in basso mantiene i piedi di un personaggio sulla stessa linea di base in tutti i fotogrammi. Gli shelf impacchettati conservano le dimensioni originali di ogni immagine ed evitano la rotazione. Le dimensioni a potenza di due aggiungono pixel inutilizzati a destra o in basso; non ridimensionano la tua grafica. PNG conserva la trasparenza alfa completa, mentre GIF ha meno colori e una trasparenza di un solo bit.

Coordinate hash JSON

L'esportazione hash JSON usa i nomi dei fotogrammi come chiavi sotto frames. Ogni voce contiene un rettangolo del fotogramma con x, y, w e h, un sourceSize, uno spriteSourceSize e i flag rotated e trimmed. Le coordinate contano i pixel dall'angolo in alto a sinistra dello sheet. L'oggetto meta registra il nome del file immagine e le dimensioni totali dello sheet. Il loader per atlanti JSON hash di Phaser (https://docs.phaser.io/api-documentation/class/loader-loaderplugin#atlasJSONHash) descrive questo formato con fotogrammi denominati.

Fai in modo che le esportazioni usino i limiti dell'immagine originale invece dei limiti delle celle con margini, con trimmed e rotated impostati su false. Cut può esportare un elenco separato dei rettangoli selezionati. Ritaglia i bordi trasparenti solo quando vuoi ritagli precisi; lascialo disattivato per conservare le celle regolari dell'animazione e il relativo punto di registrazione. Confronta i rettangoli salvati con l'importer del tuo motore prima di usare l'atlante in un progetto.

Come usarlo

  1. Scegli Crea, Taglia o Anima: ogni modalità ha un link che puoi aggiungere ai preferiti.
  2. Aggiungi i frame o uno sheet, poi regola il layout, la griglia di taglio o le impostazioni dell'animazione.
  3. Visualizza in anteprima il risultato e scarica i file per il tuo progetto di gioco.

Privacy e limitazioni

I tuoi file restano nel browser. Non viene caricato nulla.

Strumenti correlati

Domande frequenti

Devo usare una griglia o un texture atlas impacchettato?

Una griglia assegna a ogni frame la stessa dimensione di cella ed è facile da tagliare o importare come animazione regolare. Uno sheet impacchettato dispone frame di dimensioni diverse su più righe per risparmiare spazio. I frame impacchettati non vengono ruotati e richiedono i rettangoli JSON esportati o impostazioni equivalenti delle regioni nel tuo motore di gioco.

Perché usare margini interni, spaziatura o estrusione dei bordi?

Le texture filtrate possono campionare i pixel vicini e creare giunture di colore, un effetto chiamato texture bleeding. I margini interni lasciano spazio all'interno di ogni cella; la spaziatura lascia un intervallo tra le celle. Questo strumento aggiunge pixel trasparenti o del colore di sfondo, non copia i pixel dei bordi. L'estrusione ripete i colori dei bordi di uno sprite nella sua cornice; se il tuo progetto ne ha bisogno, usa le impostazioni delle texture del motore o un packer di atlas con estrusione, soprattutto con le mipmap.

Come importo lo sheet in Godot, Unity o Phaser?

In Godot, usa le regioni dello sheet come texture atlas o frame di animazione. In Unity, tratta l'immagine come più sprite e taglia una griglia regolare oppure definisci i rettangoli. Phaser può usare uno spritesheet regolare o un atlas hash JSON. Tieni insieme il PNG e il relativo JSON. Le impostazioni di importazione variano: scegli il filtro nearest-neighbour per una pixel art nitida, verifica la trasparenza e le dimensioni delle celle e assicurati che i nomi dei frame e il formato JSON siano adatti al tuo progetto.

Quali sono i limiti di trasparenza e temporizzazione delle GIF?

Il formato GIF supporta al massimo 256 colori nella palette e una sola voce trasparente, quindi i pixel sono completamente trasparenti oppure opachi. Un'alfa inferiore al 50% diventa trasparente; gli altri valori alfa diventano opachi. Scegli invece un colore matte per sfumare i bordi uniformi. I ritardi dei frame vengono arrotondati a 10 ms, con un minimo di 20 ms, quindi 60 FPS non possono essere rappresentati esattamente. La GIF esportata si ripete continuamente; il ping-pong aggiunge i frame di ritorno senza ripetere quelli agli estremi.

I miei file escono dal browser?

No. La lettura delle immagini, la disposizione degli sheet, il rilevamento delle isole e la creazione degli export avvengono tutto sul tuo dispositivo. Gli sheet grandi e le animazioni lunghe richiedono più memoria. Viene mostrato un avviso oltre 400 frame o 8.192 pixel per lato. I limiti operativi sono 1.000 frame importati, 16.384 pixel per lato e 64 milioni di pixel per ogni immagine o export di animazione.

Strumento gratuito · nel browser esecuzioni · senza account