Share
Quindi hai iniziato a lavorare sul tuo progetto, hai le nozioni di base e ora sei nella parte in cui vuoi effettivamente implementare alcuni elementi grafici ... ma non sei sicuro di come farlo. Permettetemi di presentarvi Texture Packer.
Creato dai ragazzi di Code n 'Web, Texture Packer è un piccolo grande software che ti permette di confezionare trame, risorse e praticamente tutto ciò che vuoi in un piccolo foglio che è compatibile con tonnellate di strutture!
È disponibile una versione gratuita, ma alcune funzionalità sono disabilitate.Adoro Texture Packer perché è facile da usare, è super flessibile e funziona con i motori che già usi. Fa un ottimo lavoro per consentirti di ottimizzare i tuoi fogli con varie opzioni come profondità di colore, ridimensionamento automatico, dithering e ritaglio di pixel invisibili. Esporta anche in molti formati compatibili con Cocos 2D, Unity, Corona, qualsiasi motore che supporti JSON e altro ancora.
Prima di iniziare a creare il nostro foglio, esaminiamo l'interfaccia per un secondo.
Tutte le impostazioni a sinistra potrebbero sembrare un po 'minacciose, ma non preoccuparti, in realtà sono davvero facili da configurare. E ancora meglio, devi solo impostarli una volta; è quindi possibile salvarli e riutilizzarli in seguito per qualsiasi altro foglio che si desidera creare!
Come puoi vedere, le impostazioni del foglio sono a sinistra, l'elenco con le nostre risorse è a destra (che è vuoto in questo momento) e l'anteprima del foglio al centro.
La prima cosa da fare è aprire la cartella con la tua arte magica e trascinarla nell'elenco delle risorse di Texture Packer.
Come puoi vedere, appaiono istantaneamente nel tuo foglio. Puoi fare clic su una risorsa specifica in quell'elenco e questa verrà evidenziata nel foglio. (Questo funziona anche nell'altro modo).
Mancia: Proprio sotto il foglio di anteprima ci sono alcune opzioni di zoom; sentiti libero di giocare con quelli fino a quando il foglio si adatta bene sullo schermo per una migliore anteprima.Diamo un'occhiata al pasticcio delle opzioni a sinistra. Ci sono solo tre categorie di cui ti devi preoccupare:
Passeremo attraverso ciascuno di questi a turno.
Questo è il formato per il file di dati del foglio contenente tutte le informazioni necessarie, come le coordinate, le dimensioni e la rotazione.
Attualmente sono disponibili le seguenti opzioni: Cocos2D, Corona, Sparrow / Starling, LibGDC, JSON, Unity3D, LibGDX, Css, Gideros, CEGUI / OGRE, AndEngine, AppGameKit, Slick2D, Moai, BHive, Xml, BatteryTech SDK, EaseIJS, Kwik2 e testo semplice.
Questo è il percorso in cui verrà salvato il file di dati, è una buona pratica tenerlo nella stessa cartella del foglio stesso.
Mancia: È consigliabile impostare la cartella di output in modo che il foglio e il relativo file di dati vengano esportati direttamente nella directory del motore.Da qui si seleziona il formato dell'immagine del foglio. Si consiglia PNG, a meno che non sia necessario qualcos'altro specifico per il progetto.
A meno che tu non sappia cosa stai facendo, lascia queste impostazioni inalterate: Png Opt Level a "none", DPI a 72 e Premultiply Alpha deselezionati.
In altre parole, profondità di colore. È indicato per lasciare questo intatto pure; il RGBA8888 predefinito è l'opzione di massima qualità. Nel caso in cui si stia cercando un aspetto specifico o se si apprezzasse molto la dimensione dei fogli, è possibile scegliere un'opzione inferiore come RGBA4444.
La "A" in queste abbreviazioni significa "Alpha" (trasparenza) e noterai che se scegli un'opzione che dice solo "RGB" avrà uno sfondo nero, il che significa che non ci sono informazioni alfa lì. Se ne hai bisogno, puoi creare una mappa alpha selezionando "ALPHA" da quella lista; questo può tornare utile in alcuni casi, quindi tienilo a mente.
Se non hai toccato l'opzione del passaggio precedente, il dithering non sarà disponibile, ma non preoccuparti. Ora, nel caso in cui hai selezionato un'opzione inferiore nel passaggio precedente, come RGB444, potresti notare che puoi vedere dove corrispondono i toni di colore ... è brutto, quindi il dithering è qui per aiutarti mescolando i colori usando alcuni algoritmi complessi.
Prova le opzioni "FloydSteinberg" o "Atkinson" e guarda come appaiono.
Proprio come l'opzione "File dati", da qui puoi scegliere il percorso in cui l'immagine del foglio verrà esportata.
C'è un'altra impostazione nella categoria Output chiamata "Auto SD". Ciò consente di esportare automaticamente una versione più piccola dello stesso foglio su cui si sta lavorando contemporaneamente. Questo è utile quando lavori su un'app per iOS che richiede due fogli separati per lavorare su display sia normali che retina - Texture Packer ti ha coperto.
Questo è il posto in cui puoi cambiare la dimensione del foglio. Puoi scegliere una dimensione massima o una dimensione fissa. Ci sono valori predefiniti e consigliati nel menu a discesa (tutte le potenze di due), ma puoi anche inserire manualmente i valori che vuoi.
A meno che tu non stia lavorando su un progetto che richiede una dimensione specifica per il foglio, ti suggerisco di abilitare l'opzione "Permetti taglie libere". Ciò garantisce che la dimensione del foglio sia abbastanza grande da contenere tutte le risorse senza lasciare alcun pixel vuoto sprecato. (Inoltre, mantieni l'opzione "Pack" su "Best".)
Da qui puoi facilmente ridimensionare l'intero foglio dal menu a discesa (che consente anche di aggiungere valori personalizzati). Subito sotto il numero di ridimensionamento c'è un'altra opzione per il ridimensionamento metodo. Le opzioni "lisce" e "veloci" sono le più comuni; "veloce" fa il ridimensionamento senza mescolare alcun colore di pixel (questo potrebbe essere usato per ridimensionare la grafica pixelata per un gioco retrò), e "liscio" ridimensiona tutto senza intoppi (ovviamente).
Non consiglierei di ridimensionare gli sprites con il metodo "liscio". Potresti farlo direttamente nel tuo progetto se davvero ne hai bisogno; è inutile avere enormi fogli.
Mancia: Se guardi nell'angolo in basso a destra del programma, noterai alcuni numeri che rappresentano la larghezza, l'altezza e la dimensione del tuo foglio. Dovresti tenerlo d'occhio.In breve, queste sono le impostazioni che determinano il modo in cui le risorse sono disposte nel foglio. Ci sono più opzioni che si traducono in più risultati, ma per ottenere il miglior risultato, ti consiglio di tenerli su "MaxRects" e "Best" di default. Ciò garantisce il miglior posizionamento delle risorse nel foglio in modo tale che ci siano meno pixel invisibili possibili. Ricorda, pixel invisibili = spazio sprecato.
Il riempimento determina lo spazio tra le tue risorse; è una buona pratica lasciare loro uno spazio per respirare.
Se le risorse sono posizionate l'una accanto all'altra, quando le ruoti all'interno del motore, appariranno brutti artefatti attorno ai loro bordi a causa di risorse vicine e anti aliasing. Raccomando di impostare il padding Border e Shape su 2 lasciando il pad interno a 0.
Questa è un'impostazione abbastanza importante quando si tratta di motori basati su piastrelle. Estende i pixel attorno a una risorsa in base al valore che hai scelto, ad esempio, se estrai una risorsa per tessere dal tuo foglio e la metti nel tuo motore, noterai piccoli spazi tra ogni tessera.
Questo è molto probabilmente dovuto all'anti-aliasing (nel caso lo si abbia nel tuo motore), quindi un modo super facile per risolvere questo problema è impostare l'opzione Estrudi su 1. Questo risolve anche altri potenziali problemi e non modifica visivamente le risorse affatto.
Se le dimensioni del foglio devono essere divisibili per un numero specifico, è qui che puoi impostarlo. Questo cambierà la dimensione del foglio, riempiendolo di pixel invisibili per abbinare un valore specifico. Aiuta nel caso in cui il tuo motore richieda che i fogli abbiano una potenza di due, ad esempio, e aiuta anche a mantenere lo stesso layout su più fattori di ridimensionamento.
Il valore predefinito è 1, il che significa che la dimensione del foglio è la dimensione che hai impostato nella sezione Geometria.
L'opzione "Riduci artefatti di confine" cerca di ridurre ombre e imperfezioni attorno ai confini delle risorse. È disattivato per impostazione predefinita e ti suggerisco di lasciarlo in questo modo.
L'opzione "ruota" consente la rotazione delle risorse per la migliore gestione dello spazio. In molti casi questo impacchetterà meglio le risorse, il che consente di risparmiare spazio poiché il foglio finisce più piccolo, tuttavia potrebbe essere una cosa in più di cui preoccuparsi nel motore. La maggior parte delle volte, è un problema tenere conto delle risorse ruotate e ripristinarle al loro stato originale nel motore, e questo potrebbe persino creare dei problemi.
"Trim" è una funzionalità eccezionale che elimina i pixel invisibili nelle risorse, mantenendo solo ciò che è visibile. Ciò consente di risparmiare un bel po 'di spazio e di impacchettare tutto in modo ottimale, e rende anche il rendering più veloce poiché il motore non deve preoccuparsi di molti pixel invisibili. In genere è buona norma mantenere questa opzione attiva, ma se hai bisogno che la dimensione di una risorsa sia un valore specifico basato sulla sua trasparenza, allora questo interferirà con quella ... quindi tienilo a mente.
"Ritaglia" fondamentalmente fa la stessa cosa di "assetto" ma a volte influisce sulle dimensioni dell'asset, quindi consiglierei di usare "assetto" e mantenere "ritaglio" disattivato.
Anche sotto queste opzioni c'è un'impostazione di "soglia", che determina quanti pixel trasparenti rimuovono le opzioni "ritaglio" e "ritaglio". Se aumenti questo numero, "assetto" e "ritaglio" inizieranno a nascondere i pixel appena visibili - è fondamentalmente collegato direttamente all'alfa del pixel, che determina se è rimosso o meno.
La funzione "contorno forma" aggiunge un riquadro rosso attorno ad ogni risorsa come mostrato nell'immagine sottostante. Questa è una grande cosa da avere quando vuoi eseguire il debug e vedere esattamente dove vanno le cose nel tuo motore.
"Alias automatico" è una grande opzione: quando si hanno asset multipli identici ma con nomi diversi, è possibile abilitare questa opzione e l'asset verrà aggiunto una sola volta nel foglio, mentre verrà esportato più volte nel file di dati, ciascuno con il nome appropriato. Questo è principalmente usato quando hai bisogno della stessa risorsa due volte in-engine con nomi o valori diversi.
E infine l'opzione "euristica maschera" è per le risorse che richiedono trasparenza ma hanno uno sfondo a tinta unita. Fondamentalmente, questa funzione rimuove il colore di sfondo e lo trasforma in pixel trasparenti. Non dovresti davvero usare questa opzione dato che di solito porta a bordi brutti e taglienti (a meno che le tue risorse non siano pixelate per cominciare). È meglio gestire la trasparenza da soli prima di imballare le risorse nel foglio.
Ora hai finito con tutte le impostazioni, puoi spingere quel pulsante "Pubblica" in alto per esportare il tuo foglio (o in alternativa Ctrl-P). La prossima volta che ti servirà un foglio per impedire l'intera parte di installazione, fai clic sul pulsante "Salva impostazioni predefinite"; questo salverà le impostazioni correnti come predefinite e saranno lì ogni volta che aprirai il programma, il che ti farà risparmiare a lotto di tempo.
Texture Packer supporta anche l'integrazione con il tuo motore tramite le righe di comando. Ciò significa che non è nemmeno necessario aprire il programma per esportare i fogli, il che rende le cose molto più veloci. Maggiori informazioni su questo qui.
E questo è tutto, ora sai come impostare il tuo foglio di asset ed esportarlo. Ora vai a giocare con le impostazioni e i valori per vedere cosa è meglio per il tuo progetto. Divertiti e inizia ad esportare!
Accentsconagua