Share
Questo tutorial in 2 parti è un'animazione di Pac Man simulata mentre naviga in un labirinto e divora punti lungo la strada ... con cacciatori di fantasmi. Il tutorial includerà le linee guida sulla costruzione dei componenti in Photoshop o Illustrator e quindi l'integrazione in AE per animare Pac Man. Questo è più di un progetto di design che incorpora molte delle capacità fondamentali associate ad AE; pre-comps, trasformazioni, maschere di livello, ecc.
In questo progetto approfondiremo l'animazione Pacman che abbiamo completato nella Parte 1.
Cosa faremo nella parte 2:
1. Disegnare la forma e gli occhi dei fantasmi e animarli in After Effects
2. Aggiungi una lista "Inizia partita" e "Game Over"
3. Aggiungi alcuni suoni Inizia partita e Fine partita
4. Aggiungi alcuni extra di dimensioni avanzate
5. Aggiungi alcuni potenziamenti Munchie audo
6. Naviga il nostro fantasma nel labirinto, annunciando i cambiamenti di colore
Cosa sarà necessario per completare la Parte 2
1. Tutti i file di metraggio associati alla Parte 1. Puoi accedere a questi file su http://ae.tutsplus.com/
2. Scarica tutti i file di filmati associati a questo tutorial; Parte 2.
The Basic Ghost Design -
Preparazione dei file in Photoshop
Fantasma
L'elemento fantasma è facilmente creato in Photo Shop o Illustrator. Il mio tutorial utilizza Photoshop come strumento di progettazione.
Avvia Photo Shop e apri un nuovo documento.
Utilizza una misurazione conforme alle tue esigenze. 300x300 andrà bene.
Usa uno sfondo trasparente.
(Hai solo bisogno di un fantasma. Lo duplicheremo più tardi in After Effects.) Ti raccomando di usare le stesse dimensioni come hai fatto per l'immagine di PACMAN.
1. Disegna un quadrato con lo strumento Marquis. Usa la maggior parte dello spazio disponibile nella tua tavola d'arte. Riempi con qualsiasi colore primario; rosso, verde, blu, giallo.
2. Crea un nuovo livello e disegna una sfera della stessa larghezza del quadrato e riempila con lo stesso colore del quadrato, quindi disponi i livelli in modo che formino la forma di un fantasma PACMAN.
Unisci i livelli.
3. Usa un pennello semirotondo della misura che vuoi fare per le occhiaie e dipingi due punti dove vuoi gli occhi. Ho aperto la tavolozza Pennelli in Photoshop e modificato le dinamiche di forma di un pennello rotondo di base per creare un pennello di forma ovale. Se usi il vista a griglia in Photoshop renderà la tua vita più facile con questo compito.
Occhi fantasma
1. Crea un nuovo livello e disegna un cerchio rotondo con lo strumento Marquis che si adatta alle cavità oculari del tuo corpo fantasma e riempilo con nero o bianco; qualcosa che contrasta con il corpo del tuo fantasma. Rinomina il tuo livello come corpo fantasma.
2. Duplica il livello e disponi gli occhi simmetricamente - per adattarsi alle cavità oculari e unisci i due strati dell'occhio. Rinominare il livello come occhi.
Alla fine del passaggio 2, dovresti avere due livelli nel documento di Photoshop. un'immagine e gli occhi di un fantasma.
Hai finito con questo elemento di design. Assicurati di salvare il tuo file come qualcosa di diverso da Senza titolo. Il mio suggerimento è chiamarlo Ghost Layers. Apri After Effects e importa questo file come una composizione.
Miglioramento della simulazione di base di Pac Man
Apri il tuo file di progetto AE Simulated Pacman Part 1. Importa i file di metraggio per la parte 2
Guardando la tua Parte 1 completata, dovresti avere come minimo i seguenti livelli funzionali, e in questo ordine dall'alto al basso, nel tuo sequenza temporale:
PacMan: come composizione.
Munchies ... Io chiamo i miei punti.
Labirinto
Audio PacMan ... il mio è chiamato munchie clip.
La prima cosa che faremo è inserire le nostre clip audio per l'inizio del gioco e la fine del gioco. È fondamentale farlo per primo perché imposta i parametri di come Pacman e Ghosts interagiranno alla fine sullo schermo.
1. DALLA FINESTRA DEL PROGETTO - Trascina il Introduzione al file audio di Pacman nella timeline due volte.
2. Posizionare le clip in modo che l'inizio di una delle clip sia allineato all'inizio della timeline e l'altra si allinea alla fine della sequenza temporale.
3. In preparazione per il prossimo passo, dobbiamo posizionare l'indicatore della timeline in quel momento della musica introduttiva.
Ora regoleremo l'animazione a due fotogrammi di PacMan in modo che inizi a mordicchiare alla fine della musica introduttiva, invece che subito.
1. Fare doppio clic su Pacman Comp nella finestra TIMELINE. Questo aprirà una nuova finestra Comp e una nuova scheda nella timeline.
2. Fare doppio clic sul livello. Questo aprirà una nuova finestra comp e una nuova scheda Comp nella timeline. Sì, lo so che mi sto ripetendo. :-)
Dovresti ora osservare il tuo Pacman comp originale a due livelli, come illustrato sopra.
3. Ora seleziona i tre fotogrammi chiave di rotazione in ciascun livello e trascinali in modo che i primi fotogrammi chiave si allineano con il marcatore della timeline. Il modo più semplice per selezionare i fotogrammi chiave è disegnare un riquadro attorno a un gruppo di fotogrammi chiave, tenere premuto il tasto Maiusc e disegnare un riquadro attorno al set successivo.
1. Nella parte 1 ho fatto sfilare il mio Pacman fuori dallo schermo per terminare la timeline. Sembrava una cosa naturale da fare ... Ma in questo scenario, abbiamo Ghosts con cui fare i conti, quindi vogliamo cambiare la rotta che prende Pacman ... uno che porta alla sua fine. Ya ha ha ha ha. Per fare questo dobbiamo andare indietro per un momento e uscire da parte del nostro duro lavoro nella Parte 1. Non preoccuparti, riporteremo tutto alla normalità. Quindi ... Seleziona il livello di Pacman nella Timeline. Toccare il tasto P per rivelare i fotogrammi chiave posizione per il livello, quindi fare clic sul testo positivo per selezionare tutti i fotogrammi chiave. Il tuo livello dovrebbe avere l'illustrazione qui sotto se fatto correttamente.
2, Ora, nella barra dei comandi, scegliere Animazione> Interpolazione fotogramma chiave> e cambiare le impostazioni vaganti a Lock to Time, quindi fare clic ok.
3. Ora tieni premuto Ctl Key (Cmnd Key su Mac) e seleziona uno dei fotogrammi chiave. Tutti i tuoi fotogrammi chiave dovrebbero ora essere a forma di diamante. Quindi selezionare il livello per deselezionare i fotogrammi chiave.
Ora viene la parte difficile. Devi determinare in quale punto della rotta di Pacman vuoi che cambi la sua rotta. Nel mio labirinto Part 1, Pacman effettua una svolta verso nord a destra in 14 secondi, ma a quel punto, il mio Pacman dovrebbe morire. Quindi questo sarebbe un buon posto da inserire nel nostro audio per terminare pacman. Non ti preoccupare torneremo ai frame chiave di posizione.
4. Trascina "Pacman Ending.mov" dalla finestra del progetto nella timeline. Dovresti posizionarlo in modo che la fine della clip sia allineata con il primo fotogramma della musica finale. Vedi la mia illustrazione qui sotto.
Tieni premuto il tasto Ctrl e trascina l'indicatore della timeline sopra la clip di pacman per avere un'idea di dove potresti volerlo tagliare.
Ok, torna a quei fotogrammi chiave. Così ora conosco il momento esatto in cui Pacman scade, quindi il mio keyframe di ultima posizione corrisponderà a quel punto ... dettato dall'audio.
5. Manipolare la posizione dei fotogrammi chiave in modo che l'ultimo fotogramma chiave corrisponda al primo fotogramma della clip "padman ending.mov".
Confronta le due illustrazioni qui sotto per avere un'idea di cosa ho fatto per modificare la mia posizione Key Frames.
Ok ... altri ritocchi da fare qui. Quei frame chiave di rotazione devono essere corretti, ma prima dobbiamo fare in modo che i nostri fotogrammi chiave di posizione passino attraverso il tempo.
6. Seleziona tutti i fotogrammi chiave posizione nel livello Pacman. Nella barra dei comandi, scegli Animazione> Interpolazione fotogramma chiave> Roving> Rove Across Time. Clic ok.
7. Toccare il tasto U sul livello di Pacman per rivelare i fotogrammi chiave di posizione e rotazione, quindi allineare le coppie di fotogrammi chiave di rotazione con i corrispondenti fotogrammi chiave di posizione. Le mie illustrazioni qui sotto mostrano i frame chiave di rotazione fuori sincrono e quindi i fotogrammi chiave sincronizzati.
Ok, abbiamo finito con Pacman per il momento. Ora possiamo concentrarci sui Fantasmi e sulla loro interazione nel labirinto.
Far muovere gli occhi nelle prese del nostro fantasma è simile all'animazione di rotazione che abbiamo realizzato con Pacman nella Parte 1. Useremo tre fotogrammi chiave e l'espressione "loop out".
1. Fare doppio clic sul comp. Ghost. Dovresti vedere due livelli nella tua timeline; il corpo del fantasma e gli occhi.
2. Abbiamo solo bisogno di occuparci del occhi livello, quindi seleziona il livello occhi e tocca il tasto P sulla tastiera. Questo rivelerà le proprietà di trasformazione della posizione. Sposta l'indicatore della timeline fino alla fine della musica introduttiva (circa 4 secondi) nel timelilne, quindi fai clic sul cronometro accanto all'indicatore della proprietà Posizione. Noterai che un fotogramma chiave appare sulla timeline. Subito copia questo keyframe.
3. Avanzare l'indicatore della timeline di 3 fotogrammi, toccando il pulsante Pagina giù chiave tre volte. Nella finestra Comp sposta il livello degli occhi nella posizione che desideri farli passare.
4. Fai avanzare l'indicatore della timeline di tre fotogrammi come nel passaggio tre, quindi esegui una funzione Incolla per creare un nuovo fotogramma chiave nella nuova posizione della timeline.
5. Tenere premuto il tasto Alt (Comando per Mac) e fare clic sul cronometro per abilitare le espressioni per il livello. Seleziona tutti e tre i fotogrammi chiave e poi dal menu lingua espressioni scegli Proprietà> loopOut (type = "cycle", numKeyframes = 0) dalla freccia del linguaggio di espressione.
6. Precomponi i due livelli selezionando entrambi i livelli e scegliendo Precomponi dal menu Livello. (Livello> precompose) Assegna un nome appropriato alla pre-composizione. Potrebbe essere necessario trovarlo più tardi. Ora hai uno strato di un fantasma con gli occhi animati. Questo è il livello in cui ci sposteremo nella nostra comp di lavoro.
In questo tutorial ci occuperemo di due Ghosts:
1) Un fantasma della morte; colui che conclude il viaggio di Pacman, e
2) Un fantasma Munch; un fantasma che viene mangiato da Pacman.
Alcuni dei passaggi qui ti saranno familiari se hai completato la Parte 1.
1. Trascina la composizione fantasma nella finestra di composizione, ridimensionala e posizionala dove desideri che inizi nel labirinto.
2. Duplica il livello di composizione fantasma: selezionalo, Modifica> Duplica. e spostalo in una posizione nel labirinto dove vuoi che inizi.
3. Ora cambia il colore di uno dei tuoi Ghosts. Seleziona uno dei livelli Ghost quindi Accedi al menu Effetti dalla barra dei comandi ... scegli Correzione colore> Cambia colore.
4. Usando il Contagocce scegli il colore che vuoi cambiare cliccando su uno dei tuoi Ghosts.
5. Cambia il colore del tuo Ghost cambiando il valore di Hue Transformation Propery.
Torneremo alla tavolozza degli effetti in un prossimo passo per animare il colore dei tuoi fantasmi.
1. Scegli uno dei tuoi livelli Ghost e tocca il tasto P per recuperare le proprietà della posizione. Sposta l'indicatore della timeline fino alla fine della musica introduttiva, quindi attiva l'animazione della posizione per questo livello facendo clic sul cronometro. Vedrai un diamante apparire nel livello.
2. Avanza l'indicatore della sequenza temporale di 20 o 30 fotogrammi, quindi sposta il Ghost nella finestra comp in una nuova posizione. (Tieni premuto il tasto Maiusc per spostarti in linea retta).
3. Avrai lo stesso problema con il percorso di Bezier con i tuoi Ghosts come hai fatto con Pacman. Quindi usa lo strumento Converti vortice per allineare il percorso fantasma nel labirinto.
4. Ripeti i passaggi da 1 a 3, navigando il tuo fantasma attorno al labirinto. Se questo è il "Death Ghost" dovrai cooridinare il tuo Ghost per entrare in collisione con PacMan all'inizio della musica di "Pac Man dies". Se questo è il Munchie Ghost, dovrai coordinare il Ghost per entrare in collisione con Pacman prima dell'audio di "Pacman dies".
Ricorda di utilizzare la funzione Interpolazione fotogramma chiave per forzare ciascuno dei tuoi fotogrammi chiave posizione fantasma a Rove Across Time. Seleziona tutti i fotogrammi chiave posizione per il livello e quindi dalla barra dei comandi scegliere: Animazione> Interpolazione fotogramma chiave> Roving> Rove Across Time. Clic ok. (Clicca qui se hai bisogno di aiuto.)
1. Il tuo Munch Ghost deve sparire nel momento in cui Pacman e il Ghost si scontrano.
Per fare in modo che ciò accada, semplicemente ritaglia quello strato fantasma di nuovo nel punto in cui Pacman e il Ghost si scontrano.
2. Mentre siamo qui, potremmo anche aggiungere l'audio "Ghost Eat" nella timeline. Posiziona la tua timeline vicino al punto di collisione tra Pacman e Munch Ghost. Trascina l'audio "Ghost Each" nella timeline.
3. Utilizzare il pulsante Anteprima RAM nella scheda Anteprima o Hit the 0 nel tastierino numerico per rivedere l'animazione.
1. Pacman ha bisogno di sparire nel punto in cui si scontrano Pacman e il Fantasma della Morte.
Per fare in modo che ciò accada, semplicemente ritaglia lo strato di Pacman fino al punto in cui Pacman e il Fantasma della Morte si scontrano. Questo punto corrisponde anche al "Pacman dies.mov" Abbiamo inserito questo audio nel timelne in un passo precedente ... di cui si fa riferimento qui.
2. Modifica i livelli e i fotogrammi chiave nella timeline per allineare tutto. Non riuscirai a farlo bene la prima volta ... credimi.
Nell'originale Pacman Video Game, il giocatore ha navigato in Pacman attorno al labirinto per mangiare punti e Mega Munchies al fine di guadagnare punti e trasformare i Fantasmi in Fantasmi commestibili invece di Fantasmi della Morte.
Nella mia versione, i miei Mega Munchies non sono altro che Big Dots. Per creare i miei punti ho semplicemente aggiunto dei livelli sagomati, li ho posizionati nella finestra comp alle posizioni desiderate, e poi ho eseguito un pre-montaggio per collassare i livelli sagomati in uno strato.
1. Crea un nuovo livello sagomato: vai alla barra dei comandi e scegli Livello> Nuovo> Livello forma.
2. Ora, nella barra degli strumenti, selezionare lo strumento Elipse e modificare le proprietà associate al livello.
3. Nella finestra comp, disegnare una sfera e posizionarla di conseguenza nel labirinto.
(Puoi duplicare il livello per creare tanti Mega Munchies che desideri).
4. Posiziona i livelli forma nel labirinto a tuo piacimento.
6. Taglia i livelli di forma appropriati in modo che corrispondano al punto indicato
Pacman
"mangia" ogni Mega Munchy.
Nella mia versione Pacman ha solo il tempo di mangiarne uno.
7. Dalla finestra del progetto, trascinare il Cherry Bite.wav file audio sulla timeline ... allineandolo con dove Pacman mangia Mega Munchy.
8. (Facoltativo) Seleziona tutti i livelli forma e crea un precomp.
Puoi fare riferimento a come farlo facendo clic qui. Quello che fa è salvarti alcuni immobili nella tua cronologia.
Nel Pacman Video Game originale, ogni volta che Pacman consumava un Mega Munchy ... in alcune versioni era un frutto come Cherry o Strawberry ... tutti i Ghosts attivi diventavano blu per un periodo di tempo limitato. Se Pacman ha mangiato un Blue Ghost il giocatore ha guadagnato punti, ma se per caso Pacman ha incontrato un Fantasma di un colore diverso, il gioco è terminato. Quindi quello che faremo ora è animare quei Fantasmi in una timeline in modo che diventino blu e poi tornino ai loro colori originali, giusto in tempo per terminare il nostro gioco alla fine della nostra timeline.
1. Nella finestra Timeline, sposta l'indicatore della timeline sul punto in cui Pacman mangia il primo Mega Munchy. Per un ulteriore punto di riferimento, questo è anche il luogo in cui abbiamo inserito il nostro file Cherry Bite.wave.
2. Seleziona tutti i livelli Ghost e accedi alla palette dei controlli degli effetti. Fare clic sul cronometro Trasformazione tonalità per impostare un fotogramma chiave.
3. Avanza l'indicatore della timeline di un fotogramma e modifica il valore di trasformazione della Tonalità finché Ghosts non diventa Blu. Vedrai che è stato creato un nuovo Key Frame per ciascuno dei tuoi livelli Ghost. Sarà necessario copiare ogni coppia di questi keyframe per ciascuno dei tuoi livelli Ghost che non vengono mangiati da Pacman durante il periodo in cui i Ghost sono blu.
4. Avanza l'indicatore della timeline fino al punto in cui Pacman mangia il primo Blue Ghost, e poi dalla finestra del progetto, trascina nella linea temporale il file "Ghost Eat.wav" e allinearlo con l'indicatore della timeline.
Un fantasma in basso ... uno per andare.
5. Avanza la timeline per un paio di secondi ... almeno dopo il punto in cui Pacman mangia il primo Blue Ghost. Seleziona uno dei tuoi fantasmi rimanenti ... Se non lo hai già fatto, copia i fotogrammi chiave Trasformazione tonalità per questo livello che hai creato al passaggio 3. Incollali nel livello, quindi scambia l'ordine di questi fotogrammi chiave nella timeline.
Ora hai restituito il Ghost al suo colore originale.
Se abbiamo fatto tutto giusto, la maggior parte delle nostre animazioni è terminata, ma c'è ancora un altro piccolo oggetto con cui partecipare. Potresti notare nel mio labirinto che c'è una piccola linea nella parte superiore della scatola dei Ghost prima che inizino ad animare. Chiamiamolo il Cancello.
Nel momento in cui i Ghost vengono rilasciati, il Gate si allontana. L'ho fatto usando una maschera di livello sul livello Maze.
1. Seleziona il tuo livello di labirinto nella finestra della timeline, posiziona il tuo indicatore della timeline sul punto appena prima di quando i fantasmi iniziano a muoversi nel labirinto.
2. Usando lo strumento Penna dalla barra degli strumenti, disegnare una casella adiacente al Gate.
3. Toccare il tasto M per visualizzare le proprietà della maschera per il livello, quindi fare clic sul cronometro.
Se tutto ciò che vedi è la maschera, fai clic sulla casella Invertito.
4. Sposta il tuo indicatore della timeline di alcuni fotogrammi, fino al punto appena prima di quando gli Spettri fuggono dalla scatola, quindi sposta l'intera maschera in modo che copra il Cancello.
Questo è tutto. Hai finito con questo passaggio.
Abbiamo quasi finito con la nostra Pacman Simulation. Tutto ciò che dobbiamo fare ora è aggiungere alcuni elementi grafici per renderlo "reale".
1. Creare un nuovo solido. Livello> Nuovo> Solido ... assicurati che sia nero e ridimensionalo in modo che copra una parte del labirinto in cui desideri che la grafica di Start Game occupi. (Nell'illustrazione sotto, il mio strato solido nero è stato ridimensionato, indicato dai punti di ancoraggio rossi.) Taglia il livello nella Timeline in modo che sia la stessa lunghezza dell'introduzione audio.
2. Crea un nuovo livello di testo. Livello> Nuovo> Testo. Inserisci il testo della tua Intro. Il mio dice "Preparati".
Accedi alla tavolozza dei caratteri: Dovrai necessariamente cambiare il colore di riempimento ... il bianco funziona bene, le proprietà del tratto ... il mio è impostato su none e lo stile e le dimensioni del carattere.
tagliare il livello in modo che sia della stessa lunghezza del solido nero. Studia l'illustrazione sotto per l'ordine dei livelli, lo stile del tipo e le proprietà che ho usato.
Ripeti i passaggi 1 e 2 per la tua lavagna Game Over.
Toccare il tasto 0 sulla tastiera numerica.
Puoi anche vedere questo video qui:
Hai finito. Grazie per aver lavorato con questo tutorial impegnativo. Spero che il processo abbia migliorato le tue capacità e competenze in After Effects.
Russ Williams
Accentsconagua