Sprite Organizer

Oggi voglio presentarvi un piccolo programmino che ho sviluppato nei ritagli di tempo.
Si chiama come il nome di questo articolo, Sprite Organizer.

Si tratta di un piccolo tool per riorganizzare gli sprite sheet. Ancora è in fase embrionale, ma forse promette bene. E con l’aiuto di chi legge forse potrà crescere molto in fretta.
In fondo all’articolo non trovate l’eseguibile ma direttamente i sorgenti, per studiarvi il codice e per migliorarlo se volete (però fatemi sapere cosa implementate eh :P)

Ma che cosa fa al momento?

Ora ve lo spiego con calma.

Molto spesso mi capita di trovare per la rete sprite sheet che non sono adatti ad un uso diretto nei miei progetti, molto spesso perchè i vari frame sono organizzati in modo tale che non hanno una distribuzione uniforme/regolare all’interno del file.
Questo porta il file ad un uso più complesso, dato che si dovrebbe “definire manualmente” la posizione e la grandezza relativa di ogni frame.
Per esempio uno sprite sheet tipo questo
Gotenks
Come potete osservare lo sprite sheet non presenta un egual numero di frame in ogni riga e i frame non sono tutti della stessa grandezza.
Il loro uso lo trovo quindi scomodo, anche se le immagini sono di ottima qualità.

Come fare quindi?
Ho scritto appunto un programmino che permette di identificare e selezionare manualmente i frame contenuti all’interno di uno sprite sheet.
Proprio come mostra l’immagine successiva.

Esempio di funzionamento del programma

Al momento il programma ha le seguenti funzionalità:

  • caricamento immagine
  • zooming (rotellina mouse)
  • tenendo premuto il tasto centrale e muovendo il mouse si sposta l’immagine
  • cliccando con il tasto sinistro del mouse su un frame si identifica il rettangolo minimo che lo contiene

L’identificazione del frame avviene con un algoritmo (al momento poco efficiente) che estende il rettangolo fino a quando i bordi del rettangolo stesso si trovano sopra completamente composti del colore di sfondo (NOTA: il colore di sfondo viene identificato prendendo come colore quello del pixel a coordinate (0,0) dell’immagine [cioè il pixel dell’angolo in alto a sinistra], successivamente potrei fare in modo di personalizzare il colore di sfondo).

Per il salvataggio?

Il programmino permette di salvare/caricare il file di configurazione, che si presenta come un file xml che contiene il percorso dell’immagine a cui si fa riferimento e la lista dei rettangolo definiti.
Inoltre è possibile esportare un’immagine nella quale vengono compattati tutti i frame, ed il risultato è un’immagine con una disposizione  regolare ed uniforme dei frame, cosa che ne renderà l’utilizzo molto più semplice. Tale disposizione regolare è ottenuta renderizzando i vari frame in dei rettangoli la cui dimensioni è data larghezza ed altezza massima dei frame selezionati.
In questo modo si avrà ogni frame racchiuso in una cella di dimensioni superiori tutte della stessa dimensione, quindi è possibile disporle in modo regolare all’interno di una singola immagine e di utilizzarle direttamente con del codice simile a quello da me realizzato e spiegato per uno dei precedenti articoli.

Comunque se si vuole conservare l’immagine originale si può sempre leggere il file xml generato del programma ed usare quello per impostare i dati di utilizzo nei progetti (come farò vedere in un articolo successivo e dove sarà implementata una gestione più sofisticata degli sprite sheet).

Vi allego qua in fondo i sorgenti, per chi vuole provare ad utilizzarlo o ad estenderlo.
Nei ritagli di tempo vedrò comunque di estendere con nuove funzionalità.

Come utilizzare il programma?

Caricate il progetto in visual studio / Visual c#.

Compilate ed eseguite.

Da menù file selezionate “Carica Immagine”.
L’immagine verrà caricata e visualizzata nel controllo che riempie tutta la finestra.

Tenendo premuto il tasto centrale del mouse e trascinando potete postare l’inquadratura dell’immagine.

Con la rotellina potete fare zooming.

Cliccando con il tasto sinistro sull’immagine, precisamente su un frame dell’animazione, verrà creato e renderizzato un rettangolo che andrà a contenere interamente la parte di immagine del frame.

Quando avete selezionato tutti i frame che vi interessa gestire avete due possibilità:
da menù file->Salva File  genera un file di configurazione, che altro non è che un file xml, all’interno del quale trovate tutte le info per la gestione dello sprite sheet (in sintesi il percorso dell’immagine e la lista dei rettangoli che avete creato).
Potete utilizzare anche file->Esporta e verrà generata un’immagine dove saranno compattati tutti i frame.
Tanto per farvi un esempio si avrà un risultato tipo questo

Risultato finale

Spero che un programma del genere possa esservi utile 🙂

Se scaricate commentate e fatemi sapere le vostre opinioni, e se modificate il codice fatemi sapere cosa avete fatto.

SpriteOrganizer

Alla prossima

1 ping

  1. […] l’articolo sul piccolo programmino che ho scritto, lo SpriteOrganizer, vediamo ora come utilizzare in un progetto (nel mio caso realizzato con XNA) i file di output del […]

Lascia un commento

We use cookies to ensure that we give you the best experience on our website.
Ok