Share
L'aggiornamento di Unity 4.3 era una grande grande apertura che si apriva agli sviluppatori di giochi 2D, con molti nuovi strumenti e modi per affrontare lo sviluppo di giochi 2D in questo motore già potente. In questo tutorial ti mostrerò come creare un personaggio in Inkscape che può essere utilizzato nell'incredibile nuovo editor di Unity 4.3.
Alcuni suggerimenti sulla creazione del personaggio del gioco prima di iniziare:
Apri Inkscape e seleziona File> Nuovo . Dall'elenco delle opzioni disponibili, seleziona la dimensione che più probabilmente sarà la risoluzione del tuo gioco. 640 x 480, 800 x 600, o 1024 x 768 sono risoluzioni di gioco comuni per il PC, per questo progetto sceglierò 800 x 600.
Crea un nuovo livello selezionando Livello> Aggiungi livello (Shift-Control-N) e chiamalo "Sketch". Impostalo su Sotto il livello attuale.
Ottieni i tuoi concetti insieme. In questo caso ho appena usato un semplice schizzo che ho creato in Sketchbook Pro. Tendo a creare almeno due visualizzazioni di azione del personaggio, così posso avere una buona idea di come voglio che sia animato e di quali pezzi ho bisogno per scomporlo in.
Puoi semplicemente copiare e incollare il tuo concetto da un altro programma o trascinare il file in Inkscape.
Se trascini e rilascia il file seleziona incorporare, non collegamento. In seguito, lo proietterai comunque in quanto non è necessario per l'intero processo.
Gli schizzi concettuali aiutano a solidificare la tua idea in modo da non lavorare ciecamente. Ridimensiona il tuo disegno in base alle dimensioni che ti piace lavorare utilizzando i quadratini di ridimensionamento.
Clicca sullo schizzo e serratura le proporzioni dell'immagine facendo clic sul Icona di blocco.
Il blocco delle proporzioni impedisce la distorsione. Poiché le palette di Inkscape Preset in genere non sono molto carine per i giochi, tendo a creare le mie in anticipo.
Puoi modificare la tua tavolozza Inkscape andando nella cartella Inkscape sotto Condividi> Tavolozze sottocartella.
Il file potrebbe trovarsi in una posizione diversa a seconda del sistema operativo. Pulsante destro del mouse "Inkscape.gpl" e seleziona Apri con il tuo editor di testo preferito. Ho appena usato Taccuino.
Ora puoi aggiungere il tuo RGB e Esadecimale valori alla lista e appariranno nell'ordine in cui li metti. Se non hai familiarità con i codici Hex e RGB, ci sono molti grafici facilmente accessibili che puoi trovare su Internet o nel selettore di colori di quasi tutti i programmi di modifica delle immagini.
Puoi trovarne uno qui:
Ecco le gamme che ho usato per le diverse parti del corpo di Octopus per quelli di voi che amano collezionare palette:
Corpo principale
Accentsconagua
# 6E0454 # A4005C # BC1878 # DC4470 # EB636D # F39383 # FAC9AC occhi
# 392.131 Guscio di chiocciola
# 343059 # 43467E # 3E5796 # 5A69C0 # 6796E8 # 7EAFEE # 7EC7D9 Corpo di lumaca
# 84473C # A5674F # CE894E # F3B46B # F9CE64 # F9E57A # FBFB9E Puoi copiare e incollare questi codici nel tuo file .gpl e salvarli, e saranno lì la prossima volta che eseguirai Inkscape.
Ti consiglio di conservare una copia del tuo file .gpl originale nel caso qualcosa vada storto.
Aggiungi i codici così come sono visualizzati nel file. Puoi posizionarli nell'ordine in cui desideri che vengano visualizzati. Disegna il corpo principale per primo. Sto solo usando una semplice forma circolare per il corpo del polipo. Ho impostato l'ictus su 3.5px nell'editor di oggetti (Shift-Control-F) ma puoi fare ciò che vuoi.
Disegna le gambe tutte come pezzi separati su un nuovo livello usando il Strumento curva di Bezier (Shift-F6).
Ricorda, per ottenere una curva effettiva, devi tenere premuto il pulsante del mouse dopo aver fatto clic per posizionare il secondo nodo / punto e trascinarlo. Invece di regolare manualmente il tratto e il colore sulla gamba, possiamo fare clic su un oggetto simile (come il cerchio) e copiarlo (Control-C) e vai a Modifica> Incolla stile o (Control-Shift-V) per abbinare lo stile dell'oggetto copiato.
Questo è un buon modo per assicurarsi che tutti gli oggetti riempiti e le tracce siano uniformi. Puoi anche disegnare le gambe in posizioni diverse, in modo che possano essere riutilizzate per creare più animazioni.
In alternativa, potresti voler disegnare tutto il corpo con le gambe in posizioni diverse se non vuoi che le gambe si muovano indipendentemente.
Ricorda che puoi unire pezzi insieme selezionando entrambi gli oggetti e combinandoli tramite Percorso> Unione o Control-Shift-+ o semplicemente Controllo-+ con il tastierino numerico.
Per ottenere una curva più morbida, spesso aggiungo punti extra e poi li elimina dopo aver ottenuto la forma che desidero.
Spengo il Corpo strato usando il icona dell'occhio accanto al nome del livello che voglio disattivare.
Vai dentro Modifica percorso per nodi modalità (F2) e fare clic sul nodo che si desidera eliminare, quindi premere il tasto Elimina chiave.
È possibile regolare utilizzando le maniglie sugli altri nodi se qualcosa va storto o modificando il tipo di nodo nella barra degli strumenti. Dal momento che voglio che le gambe sui lati sinistro e destro siano quasi le stesse, copierò quella sinistra e la modifico leggermente.
Riporta il Corpo livello passando al livello nel menu a discesa e facendo clic su icona dell'occhio ancora una volta, così puoi posizionare correttamente la gamba. Seleziona la gamba (che ti riporterà automaticamente al livello della gamba) e copialo (Control-C) quindi incollalo (Control-V).
Capovolgi l'immagine usando il Capovolgi orizzontalmente pulsante o premendo il tasto H chiave.
Questo renderà anche il polipo più facile da animare.
Sposta la gamba nella posizione desiderata. L'ho anche schiacciato orizzontalmente leggermente per la prospettiva, usando i quadratini di ridimensionamento.
Se hai problemi con l'immagine che si spezza quando la stai ridimensionando, vai a Visualizza> Snap. Ho intenzione di rendere le gambe anteriori in più pezzi per aggiungere più profondità. Crea un nuovo livello (Shift-Control-N) aggiungere le gambe che saranno di fronte al corpo.
Aggiungi un ovale con il Strumento ovale e copia e incolla lo stile dalle gambe sull'ovale.
Saremo in grado di aggiungere un movimento oscillante al tentacolo frontale in questo modo, se vogliamo. Ora aggiungi un secondo ovale e ruotalo. È possibile ruotare gli oggetti facendo doppio clic sull'oggetto e quindi utilizzando le maniglie.
Ora questa parte del tentacolo può spostarsi separatamente! Ora puoi semplicemente copiare la gamba e girarla per riempire l'altra gamba
Non preoccuparti troppo della posizione del tentacolo per ora, verrà regolata in Unity. Aggiungiamo sfumature e riflessi al polipo prima di passare al viso. Lo faccio creando degli ovali e poi usando un altro ovale per "sottrarre" le parti che non voglio.
Posiziona il punto culminante dove vuoi. Ora copia e incolla il cerchio e regolalo nel punto in cui desideri tagliare. Rendilo di un colore diverso, quindi è più facile da vedere. Preferisco renderlo dello stesso colore del corpo principale.
Trovo questo metodo il migliore per i palloncini e altri oggetti rotondi e lucenti. Adesso Maiusc-Select entrambi i cerchi, assicurandosi di selezionare per ultimo il cerchio di evidenziazione e vai a Percorso> Differenza.
Una bella luce liscia! Selezionare tutti gli oggetti e Gruppo loro (Control-G) per assicurarsi che non vengano spostati da dove li vuoi.
Nota: è comunque possibile copiare e incollare lo stile da un oggetto utilizzando la selezione diretta / modifica del percorso per nodo anche quando sono raggruppati.
Disegna alcuni punti salienti anche sulle gambe, usando il Strumento Bezier (Shift-F6). Assicurati di disegnare sul livello con il tentacolo appropriato e raggruppali con il pezzo correlato quando hai finito. Prova ad usare lo stesso colore dell'evidenziazione precedente.
Puoi aggiungere un numero minore o maggiore di punti salienti, secondo i tuoi gusti. Ho disegnato gli occhi usando il Circle Tool (F5). Faccio la stessa cosa qui che ho fatto con i tentacoli per assicurarmi che fossero uguali; copia e incolla l'occhio sinistro e regola di nuovo posizione e prospettiva.
Ora ha un semplice set di peepers. Disegna una bocca semplice con il Strumento curva di Bézier, e regolare le impostazioni nel menu Tratto e riempimento (Shift-Control-F).
Puoi giocare con queste impostazioni per ottenere ciò che desideri. Ho deciso di aggiungere alcuni punti salienti per dargli un po 'più di profondità. Se scopri che quando aggiungi nuovi elementi in seguito che viene visualizzato su oggetti precedenti quando li raggruppi, seleziona e taglia l'oggetto dietro (Control-X), fare clic sull'oggetto che si desidera incollare su quello che si trova sullo stesso livello e selezionare Modifica> Incolla sul posto o (Control-Alt-V).
Mantenere puliti i tuoi gruppi ti aiuterà a organizzare il tuo foglio degli sprite più tardi. Ho anche aggiunto un evidenziatore secondario, usando di nuovo Bezier Curves e il Strumento cerchio, solo che stavolta sto usando il # F39383 colore.
Mentre ci sono alcuni programmi emergenti che consentono la facile aggiunta di illuminazione dinamica all'arte 2D (come Sprite Lamp), sono ancora molto rudimentali e per lo più destinati alla pixel art, quindi dovremo aggiungerli noi stessi per ora!
Per un punto di interesse, aggiungo anche una lumaca sulla testa del polipo. Farò il corpo prima con il Strumento curva Bezier (Shift-F6). Farò la lumaca su un nuovo livello, ma non ho bisogno di farne uno anche per la shell fintanto che sono raggruppati correttamente. Puoi farli su livelli separati se preferisci.
Come prima, cancellerò tutti i nodi non necessari e appianare il corpo con il Modifica percorso per nodo (F2) modalità. È inoltre possibile selezionare attorno a più nodi e spostarli in questa modalità.
Ora aggiungi delle tonalità più chiare per far risaltare il volume della lumaca. Di nuovo userò il Curva di Bezier strumento (Shift-F6).
Se trovi quando stai facendo una curva lo hai reso troppo ripido e non riesci a collegarlo senza che ciò accada:
Puoi tasto destro del mouse per uscire dalla curva, quindi ricollegarlo manualmente.
Per creare la base della conchiglia, disegna un cerchio con il Circle Tool (F5). ero solito # 5A69C0 come il tratto e # 7EC7D9F come il riempimento.
Utilizzare il Curva di Bezier tool (Shift-F6) per creare il "labbro" inferiore del guscio.
Utilizzare il Strumento a spirale per aggiungere la forma corretta alla shell (F9) e impostare il giri a 1,50.
Ora ruota e posiziona la spirale in modo che assomigli ad un vero guscio. Ho anche impostato il tappo per la spirale su Tappo rotondo per evitare un bordo duro.
Per il momento saliente della shell di lumaca, utilizzeremo ancora la curva di Bezier. Userò solo il bianco per il colore, ma imposterò la forma a 50% Opacità in modo che si mescoli. È possibile regolare l'opacità in Menu Fill and Stroke (Shift-Control-F).
Continua con il resto dei punti salienti. Puoi copiare e incollare lo stile della prima evidenziazione sugli altri punti salienti e anche copiare e incollare l'opacità, il che lo rende molto più semplice.
Vale la pena notare che ho creato i gruppi separati di shell e corpo di lumaca. Li salverò separatamente nel caso in cui desiderassi animarli in seguito.
Per prima cosa cancelliamo lo schizzo per toglierlo di mezzo. Fare clic sullo "schizzo" e premere il tasto Elimina chiave. Assicurati di sbloccare il livello prima di tentare di eliminarlo o non sarai in grado di farlo. Puoi anche eliminare il livello attuale dal Menu Livello. Assicurati che il layer che vuoi eliminare sia attivo nel momento in cui lo elimini.
Assicurati di salvare il tuo file prima di fare la parte successiva (anche se vale la pena notare che dovresti comunque risparmiare frequentemente, per ogni evenienza). Per fare questo, andare a File> Salva come (Shift-Control-S).
Ora devi separare i pezzi del polipo in modo che siano abbastanza distanti per lo strumento di taglio in Unity per raccogliere che sono pezzi separati. Ci sono impostazioni che puoi modificare in Unity per aiutarti, ma un foglio di sprite organizzato è sempre migliore.
Questa sarà una buona prova delle tue abilità di raggruppamento. Se hai raggruppato tutti i pezzi giusti, questo dovrebbe essere relativamente facile. Puoi imparare di più sul raggruppamento in Inkscape grazie a un utile tutorial creato qui su Tuts+. Fare clic e trascinare ogni pezzo per sistemarli come ti piace.
Allineo anche i bordi degli oggetti all'esterno del foglio. Mentre i computer sono così veloci ora potresti non notarlo troppo, è sempre meglio risparmiare lo spazio che puoi e rendere il foglio il più piccolo possibile. Apri il tuo Allineare menu (Shift-Control-A) e assicurati Relativo a è impostato su Ultimo selezionato piuttosto che la pagina, poiché gli oggetti saranno ciò che viene esportato e non la pagina.
Ciò significa che il primo oggetto e tutti gli oggetti selezionati successivi saranno allineati in base alla posizione dell'ultimo oggetto posizionato.
L'allineamento non deve essere perfetto. Qui stai solo cercando di ridurre lo spazio bianco il più possibile, e l'allineamento è un modo semplice per farlo. La cosa principale è assicurarsi che un oggetto non stia espandendo il foglio più del necessario.
Imballare il foglio il più strettamente possibile. Ci sono programmi per farlo ma molti lo trovano più veloce a vederlo in Inkscape.
Tuttavia, se preferisci usarne uno (o aver già esportato ciascuna immagine separatamente per l'utilizzo in altri motori di gioco), puoi scaricare Texture Packer qui:
È disponibile gratuitamente per Mac, Windows e Linux!
Salva il foglio come un file separato, di nuovo così hai la composizione originale (potresti anche tenerli entrambi nello stesso file se lo desideri).
Noterai che gli occhi sembrano inutilmente distanti per il confezionamento delle texture. Questo perché ho scelto di trattarli come un unico oggetto piuttosto che far funzionare ciascun occhio indipendentemente. Puoi fare questo e poi dividerli ancora nell'unità come occhi separati.
Seleziona tutti gli oggetti contemporaneamente facendo clic e trascinando sull'intera area come se stessimo cercando di contenerli tutti in una scatola (vedi immagine sotto).
Ora per esportare il tuo foglio! Selezionare File> Esporta (Shift-Control-E). Puoi esportare il foglio come una dimensione che si adatta alle tue esigenze, ma l'ho mantenuto quasi uguale alla dimensione con cui ho iniziato in Inkscape.
Puoi modificare il nome del file nella casella del nome del file in modo che sia riconoscibile. Altrimenti, sarà chiamato da Inkscape come ultimo percorso o gruppo che è stato selezionato (per esempio. g720.png).
Potresti notare il Oggetti di esportazione batch opzione. In realtà, puoi esportare tutto come file proprio in questo modo, ma tieni a mente che la forma in cui si trova Inkscape sarà la dimensione esportata, quindi potresti doverla regolare manualmente.
Nota: attualmente c'è un bug in Inkscape. Se si nomina il file quando tutti gli oggetti sono selezionati e si tenta di esportare in batch, verrà esportato solo l'ultimo oggetto poiché ora vengono tutti denominati la stessa cosa.
Se guardi il file esportato ora, dovresti vedere il foglio inclusa la trasparenza.
Per questa parte del tutorial presumo che tu sappia come aprire Unity e avviare un progetto. Se non hai familiarità con Unity, sul sito Web Unity è disponibile un'ampia documentazione per i principianti. Spiegherò semplicemente il processo per ottenere un foglio sprite in Unity e tagliandolo per l'uso in un gioco.
Apri il tuo progetto e assicurati che il tuo editor sia in modalità 2D (per semplificare le cose) andando a Modifica> Impostazioni progetto> Editor e selezionando 2D come il Modalità comportamento predefinito.
Trascina il foglio sprite dal tuo Esplora file nel tuo Risorse cartella.
Seleziona il foglio sprite e apri Inspector tramite Finestra> Ispettore (Control-3).
Cambiare il Modalità Sprite a multiplo. Questo ti consentirà di aprire l'editor di sprite.
Colore vero è una buona scelta per il Formato come è meglio per immagini pulite, specialmente quando si tratta di pixel art sprites. Le altre impostazioni potrebbero dipendere dal singolo progetto.
Apri il Sprite Editor.
Puoi anche accedervi da Inspector Clic Fetta. Normalmente vorrei solo scegliere Automatico e lascialo come è, tuttavia non posso farlo in questo caso perché dividerebbe gli occhi in due parti, in questo modo:
Per risolvere questo problema, fai clic su uno dei riquadri di delimitazione e Elimina esso. Ora allunga l'altra casella di delimitazione per includere entrambi gli occhi e fare clic Applicare.
Se perdi una scatola o ne devi creare una nuova perché non le ha tagliate correttamente, fare clic e trascinare in uno spazio vuoto.
Clic ritornare per annullare eventuali modifiche non applicate. Si può anche notare che la casella in basso a destra ha un posto per nominare ogni pezzo. Questo è molto importante per l'organizzazione, come se si trascina uno degli sprite sullo schermo, saranno automaticamente chiamati qualunque sia il Nome casella indica. Un altro parametro che puoi regolare qui è Perno che indica il punto di ancoraggio principale dello sprite. Ruotando lo sprite nell'animatore, ruoterà attorno a questo punto.
Regola tutti i perni dove desideri facendo clic e trascinando il cerchio nel mezzo di ogni sprite, o digitandoli manualmente in Campo pivot.
Clic Applicare quando fatto. Ora puoi vedere tutti i tuoi sprite come singoli oggetti nel Progetto> Cartella risorse.
Ora possiamo trascinare i pezzi sulla scena per creare Oggetti di gioco. Tuttavia, prima creiamo un vuoto Oggetto di gioco (Control-Shift-N) e chiamalo "Octopus".
Clicca sul Oggetto del gioco nel Gerarchia e vai al Ispettore per rinominarlo.
Ora puoi trascinare le altre parti del corpo sul polpo Oggetto del gioco nel Gerarchia e disponili come desideri, ma assicurati che siano centrati sul vuoto Oggetto del gioco.
C'è un piccolo problema ... Quindi, come avrai notato, i tentacoli di polpo non sono proprio nell'ordine in cui li vogliamo. Possiamo risolvere il problema con Ordinamento dei livelli nel Ispettore. Normalmente potrei creare un nuovo livello di ordinamento per Octopus ma per ora lo lascerò come predefinito e aggiusterò i numeri.
Maggiore è il numero più vicino è l'oggetto alla fotocamera. Ora salviamo una scena di prova e il progetto (File> Salva scena). Unity può bloccarsi quando si inizia a eseguire azioni più approfondite, quindi consiglio di salvare spesso.
Dato che non sto realizzando un vero progetto di gioco, chiamerò questo "film di prova" per ora. Questo personaggio non ha ancora animazioni quindi è difficilmente "pronto per giocare". L'animatore in Unity è straordinariamente potente ma c'è un po 'di una curva di apprendimento!
È bene per gli artisti sapere come apparirà la loro arte nel motore e come possono essere animati per aiutare a rendere la grafica più adatta allo sviluppo del gioco. Vale la pena notare che, anche dopo che sei arrivato a questo punto, puoi facilmente aggiornare il tuo foglio e reinserirlo nella cartella delle risorse (Unity passa automaticamente alla cartella del tuo progetto in "Documenti") e il gioco si aggiorna automaticamente. Tieni presente che se modifichi le dimensioni dello sprite in qualsiasi modo, anche aggiungendo "extra" potresti dover ridisporre il foglio.
