maandag 14 augustus 2017

Het eindresultaat


Animatie proces van After Effects tot Unity

Adobe After Effects
Als eerst moet ik het karakter dat ik ga animeren opdelen in de goede onderdelen. Hoe meer onderdelen, hoe ingewikkeleder het wordt. Dat wil wel zeggen dat ik met meer onderelen meer kan animeren en alles nog mooier kan maken. Maar voor het aantal tijd dat ik had, maak ik hem niet te ingewikkeld. 

Als eerst importeer ik de onderdelen in een nieuw project en maakt ik mijn eerste composition aan. Deze geef ik een naam, afmeting, FPS en achtergrond. Daarna verplaats ik al mijn animatie onderdelen in de compositie en zet ik ze gelijk in de goede volgorde.

De volgorde is belanrgijk anders gaat de animatie er raar uit zien. De schoenen moet boven de benen en rechter hand boven de speer. Daarna lock ik alle onderdelen die ik niet moet animeren of nu niks mee hoef te doen en hide ik alles wat niet zichtbaar moet zijn.

Daarna begin ik met animeren. De frames hangen af van hoeveel fps je hebt gekozen. Ik ben voor 24 gegaan. Dat is de default. Elke verandering die je maakt voor dat onderdeel krijgt een pin op de tijdlijn.


Dit zijn de basis edits die je kan doen. Voor sommige onder wil je meer opties. De extra optie die k gebruikt heb zijn puppet pins. Hiermee kun je lagen net wat anders animeren dan de rest. Ik gebruikte dit voor de armen, haren, en delen van zijn jas en cape. 


Zoals je ziet zorgen de puppit pins ervoor dat ik meer pins kan plaatsen op de tijdlijn.


Dit is wat puppit pins kunnen doen.

De eerste animaties zijn wat houterig en dit kun je veranderen met de Graph Editor. Hiermee kun je overgangen wat vloeiender laten maken en zal je animatie er wat beter uitzien. Je kan hierbij ook animaties ook sneller of langzamer maken of er juist versnellingen of vertragingen in verwerken. 


Als laatste moet je er altijd voor zorgen dat de eerste en laatste frame hetzelfde zijn, anders looped je animatie niet(tenzij het de bedoeling is natuurlijk).

Unity
Na het animeren met After Effects ben ik verder gegaan in Unity. Ik heb 3 tutorials gevolgd om dit voor elkaar te krijgen. Met wat tweaking ofcourse, want hij heeft zijn animaties anders nodig dan dat ik dat had.


Na een flinke struggle(ben nog steeds niet zo bekend met Unity), heb ik uiteindelijk de animaties voor elkaar gekregen.

Idle:

Move 01(Er zit helaas een rare fout in de animatie die ik niet kan achterhalen, hij gaat een stukje omhoog zodra die afspeelt):

Move 02:

Move 03:

Binnen Unity moest ik met de Animator werken. Hierbij most ik ervoor zorgen dat elke animatie een goede overgang had van idle naar een move. Zo moest de idle animatie stoppen zodra er een knop werd in gedrukt.

Zo zag het eruit in Unity met de Animator.

Corn Knight

Als eerst kwam de schets van het karakter. Ik ben voor een gestyleerde stijl te gaan omdat dit voor mijn gevoel het beste paste bij het idee dat ik had. 

Het idee achter de karakters uit dit universum is dat ze op voedsel lijken zoals een maiskolf. Ik breng ze tot leven door ze menselijke eigenschappen te geven en ze een persoonlijkheid te geven. Zo wilde ik Corn Knight dapper en zelf verzekerd maken. Hij speelt een vrij dominante rol in het verhaal en zal de speler vanaf het begin helpen en hem instructies en tips geven. Vanwege die rede heb ik heb zelfverzekerd gemaakt, zo komt hij wijs over en geeft hij de indruk dat hij verstand heeft van zaken. Door hem kleine littekens te geven op zijn wenkbrauwen geeft het de speler het idee van gevechtskennis door de combinatie met zijn karakter. Verder vond ik het een tof idee om het idee te geven dat hij uitrusting heeft, wat dus eigenlijk dus van zijn al bestaand blad jasje bestaat. Zo hoop ik dit ook te kunnen bij meerdere karakters. 


Vanaf dit punt ben ik de Corn Knight verder gaan uitwerken in Photoshop. Ik maak hem gelijk animatie klaar door elk onderdeel dat ik los wil animeren in een losse laag te maken. 


Daarna bedacht ik drie power frames, die de drie moves moesten beschrijven. Een thrust, upper slash en een slam. Met het idee dat ze als combo konden gebruikt worden.

 



Het idee + inspiratie

Ik wilde voor dit blok wat gaafs proberen, wat ik nog nooit eerder had gedaan. Ik wilde "Smears" gebruiken. Ik werd hierdoor geinspireerd door een awesome GDC talks van Mariel Cartwright(Animator voor Skullgirls). Ze liet het process zien dat ze had meegemaakt tijdens het animeren voor Skullgirls. Ze gebruikte smears of een soort extra boost te geven aan bepaalde frames in een animatie. 




Daarnaast vond ik de manier waarop Street Fighter word geanimeerd(waar ook smears in gebruikte worden). Ze hebben een soort van power frame, die net wat langer in beeld blijft staan vergeleken met de andere frames. Dit is vaak een frame waarbij de vechter in zijn meest krachtige houding staat, bijvoorbeeld als zijn arm waarmee hij een stoot geeft helemaal naar voren gestrekt is. Dit geeft dat gevoel van impact een sterk gevoel. 


Zoals je kan zien, zie je dat de houding die de vechters in die frame gebruiken net wat langer duurt dan de rest. De overige frames zijn vloeiend geanimeerd. 

Daarnaast ben ik nog enorm onder de indruk van Fire Emblem voor de Gameboy Advance. Deze game maakt net als doe vorige genoemde games smears om te animeren. 


Het idee was om een karakter te maken, die zou passen bij het idee wat ik had voor een game. De game is een combinatie van Fire Emblem(als in serie), XCOM(Enemy Unknown en 2) en een side scroller als level layout. Je hebt een groep vechters die je moet managen en tijdens gevechten moet besturen door ze orders te geven. Inplaats van top down zoals Fire Emblem, kan je de units naar verschillende lanes sturen om daar te gaan vechten. XCOM gebruikt ook hoogtes maar dan vanaf een top down perspectief. Het idee is dat het een 3D perspectief heeft met een gestyleerde stijl. Het gaat om een oorlog tussen voedsel, zo heb je verschillende facties zoals, groentes, vruchten, vis, gevogelte, noten en dergelijke. Jij bestuurt een groep die wilt verenigen.

Ik heb hiervoor een Mais Ridder ontworpen die met een speer vecht. De vecht scenes lijken op die van Fire Emblem(zoals de getoonde GIF hierboven) en dan de animaties geinspireerd door Street Fighter en Fire Emblem, met de bedoeling om smears te leren gebruiken en maken. Ik maak de animaties in Adobe After Effects zoals ik gezien heb bij Awesomenauts van Ronimo en geleerd heb tijdens mijn stage bij Digital Dreams. Daarna importeer ik de sprites naar Unity en ga ze daar werkend in de engine stoppen.