Share
In deze serie concentreren we ons op de botgebaseerde 2D-animatiegereedschappen die door de Unity-engine worden geboden. Het belangrijkste idee is om de grondbeginselen van 2D-animatie te presenteren en aan te leren, zodat u deze kunt toepassen op uw eigen games. In deze zelfstudie voegen we de idle-, jump- en fall-animaties toe.
Voordat we de tutorial beginnen, willen we Chenguang (DragonBonesTeam) bedanken voor het verstrekken van de gamekunst die is gebruikt om deze tutorialserie te produceren.
In de vorige zelfstudie hebben we een 2D-sprite geïmporteerd die het spelpersonage voorstelt, in plakjes heeft gesneden met de Unity Sprite-editor en de basis van het personage heeft geconstrueerd. Als u de vorige zelfstudie niet hebt voltooid, raden we u ten zeerste aan dit te doen, aangezien u het 2D-teken nodig heeft om deze zelfstudie te kunnen volgen.
Deze demo toont de geanimeerde draak waarop we mikken - hit Ruimte om het te laten springen:
Er zijn verschillende belangrijke concepten die u tijdens het animeren in gedachten moet houden. Voor het doel van deze tutorial gaan we ervan uit dat je geen ervaring hebt met animatie (2D of 3D) en dat je nog nooit met animatiesoftware hebt gewerkt.
Animatie, zoals wij die kennen, is geëvolueerd van verf naar digitaal. Er zijn tientallen hybride animatietechnieken, maar al deze delen dezelfde basisprincipes, zoals lipsynchronisatie, squash of loopcycli.
Om animatie te begrijpen, moet je eerst het concept van a leren montuur. Een frame is een van de vele stilstaande beelden die een animatie vormen. Als u een cartoon onderbreekt, is de afbeelding die uw tv laat zien uit één frame.
Het belangrijkste verschil tussen traditionele animatie en computeranimatie ligt in de gebruikte tools. Traditionele animatie is een zeer praktisch proces, waarbij de artiesten duizenden individuele frames zouden moeten tekenen of samenstellen. Computeranimatie maakt de noodzaak voor veel tools overbodig en vereenvoudigt in het algemeen het hele proces.
Bijvoorbeeld, terwijl met traditionele animatie de kunstenaar bijna elk frame van een animatie zou moeten tekenen, met computeranimatie kan de kunstenaar gebruiken wat we noemen sleutelframepunten. Deze sleutelframepunten, zoals de naam aangeeft, zijn sleutelstadia van de animatie. Kortom, de artiest maakt die keyframe-punten en de computer interpoleert ertussen om de ontbrekende frames te maken. Zoals u zich kunt voorstellen, is dit type proces veel minder arbeidsintensief.
U kunt een hoofdframe als één stilstaand beeld definiëren in een geanimeerde reeks die plaatsvindt op een belangrijk punt in die reeks. Een goed voorbeeld is een animatie waarbij stenen vallen: de oorspronkelijke positie van de rots in de lucht zou een sleutelframe zijn en de eindpositie van de rots op de grond zou een andere zijn. De computer zou dan alle andere frames genereren. We noemen de frames tussen keyframes getweende frames, en zij zijn verantwoordelijk voor het creëren van de illusie van beweging.
Het frame kan ook als een tijdseenheid worden gebruikt. U kunt bijvoorbeeld zeggen dat een animatie 20 frames duurt. De werkelijke duur van een animatie hangt af van de framesnelheid, die kan variëren met het formaat van de animatie. In Noord-Amerika en Japan is de standaard 30 frames per seconde (fps), terwijl in de rest van de wereld de standaard gewoonlijk 25 fps is.
Omdat je nu de basisbeginselen van animatie en computeranimatie kent, gaan we nu terug naar Unity om ons personage te animeren.
De eerste stap is het maken van een map in de Middelen map genoemd animaties, waarin u de animaties van uw personages kunt opslaan.
Open vervolgens de animatie panel in Unity (Venster > animatie):
Zoals u kunt zien, bevat het paneel een horizontale tijdlijn, een opnameknop, een afspeelknop en een paar knoppen om door de kaders te navigeren.
Grijp de animatie venster en plaats het naast de Troosten tab (merk op dat u de 2D-lay-out gemaakt in de Unity 2D Arkanoid-zelfstudie). Op deze manier kunt u aan uw scène werken terwijl het animatiescherm nog steeds open is.
Je maakt drie verschillende animaties voor de draak: een inactieve animatie, een springanimatie en een herfstanimatie.
Als u de eerste animatie wilt maken, selecteert u de Draak game-object en klik Voeg curve toe op de animatie paneel. In een nieuw venster wordt u gevraagd om het animatiebestand en de doelmap een naam te geven om het op te slaan. Unity-animatiebestanden hebben .Anim extensie, en u bewaart ze in de animaties map die u eerder hebt gemaakt. Maak het Idle.anim het dossier.
Zoals je misschien opmerkt, veranderen er na het opslaan van het bestand verschillende dingen in de editorlay-out:
Als je de afspeelknoppen boven aan je scène bekijkt, zul je merken dat ze rood zijn geworden. In de animatie paneel de opnameknop is nu ook rood en je ziet een rode lijn over de tijdlijn. Dit betekent dat je meedoet record modus. Ook als je kijkt naar de Inspecteur, je zult zien dat Unity automatisch een nieuw component aan je game-object heeft toegevoegd: de animator.
De animator component is een verwijzing naar een Animator Controller dat wordt gebruikt om het gedrag van een personage in te stellen. Dit omvat een setup voor Staatsmachines, Meng bomen en gebeurtenissen die door script kunnen worden beheerd. Kortom, de animator is de link tussen het personage en zijn gedrag.
We zullen de animator component met meer diepte later; Laten we ons nu concentreren op de animatie. In uw Draak game-object, selecteer de Hoofd:
Op de animatie tijdlijn, sleep de rode lijn naar 01:00 (één minuut in).
Nu, op de Inspecteur, stel de Z Rotation naar 7.9. Zoals je misschien opmerkt, heb je nu wat kleine vormen op je tijdlijn. Deze markeringen geven de belangrijkste frames van de animatie aan.
Verplaats de rode lijn naar 02:00 en stel de Z Rotation van het hoofd naar 0.
Druk opnieuw op de opnameknop om de opnamemodus te deactiveren. U kunt nu op de afspeelknop drukken om uw animatie te testen. Als alles werkte, zou het hoofd van je draak op en neer moeten dobberen.
De drakenkop lijkt een beetje te draaien. Omdat we alleen een klein knikje willen, moeten we de animatie bewerken.
Schakel de opnamemodus opnieuw in door op de knop te drukken en de rode lijn naar te verplaatsen 01:00 minuut. Verander de Z Rotation waarde voor 2.05.
Druk op de opnameknop om de opnamemodus te verlaten en de animatie opnieuw te testen.
Zoals u kunt zien, hoeft u alleen maar het gewenste keyframe te selecteren en aan te passen om een animatie te bewerken. Als u de timing van een animatie moet wijzigen, bijvoorbeeld als de animatie te snel of te langzaam is, kunt u de markering in de tijdlijn naar het gewenste frame slepen.
Oké, nu heb je het hoofd geanimeerd, maar je wilt het hele lichaam animeren. Omdat je je personage hebt gebouwd als een hiërarchie in plaats van geïsoleerde game-objecten, hoef je geen enkele animatie te maken voor elk deel van het lichaam; in plaats daarvan, druk op de knop gemarkeerd Voeg curve toe en selecteer een ander lichaamsdeel. Klik op de knop en selecteer de drakenstaart.
Probeer de staart op en neer te laten gaan. Gebruik net zoals je eerder het Z Rotation as en de tijdlijn tussen nul en twee minuten.
Dankzij de hiërarchie die je hebt gemaakt, verplaatst de motor de punt ook automatisch wanneer je de staart beweegt. U kunt de tip echter ook afzonderlijk animeren als u deze selecteert.
Super goed! Animeer nu de rest van de lichaamsdelen voor de inactieve animatie. Neem de tijd die je nodig hebt om de animatie te bewerken totdat je helemaal tevreden bent. Animatie kost tijd en je krijgt nooit de resultaten die je wilt bij de eerste poging. Op het einde zou je tijdlijn er ongeveer zo uit moeten zien:
Merk op dat, voor de nutteloos animatie verander je geen waarden van het zwaartepunt van de draak (de zwarte stip).
Voor de Springen animatie, moet u een nieuw animatiebestand maken. Om dat te doen, in de animatie paneel, klik op het label dat zegt nutteloos en selecteer Maak een nieuwe clip.
Noem maar op Jump.anim en sla het op in de animaties map.
Voor deze animatie wil je dat je draak tijdens het springen omhoog kijkt. Omdat we de basisbeginselen van het maken van animaties met Unity al behandelen, geven we u enkele hints in plaats van u door het proces te leiden.
Zoals u eerder deed, moet u de. Selecteren Draak game-object en begin met het toevoegen van curven. Laten we beginnen met het hoofd; deze animatie zal een korte zijn, dus 00:30 seconden zullen doen. Draai de kop op de Z-as om op te zoeken.
Om te voorkomen dat de kop volledig statisch is, kunt u er een kleine beweging aan toevoegen. U kunt dit bereiken door een kleine rotatie toe te voegen.
Herhaal het proces voor de resterende lichaamsdelen. Houd er rekening mee dat de animatie eruit moet zien alsof het personage in de lucht is.
We zullen je leren hoe je de volledige sprong later kunt maken. Ter referentie, probeer je personage in poses te krijgen die lijkt op de volgende:
Heb je het gedaan? Leuk!
Laten we ons nu concentreren op de laatste animatie: de herfstanimatie.
Je personage kan nu omhoog springen, maar twee delen vormen een volledige sprong: de sprong zelf, waarbij het personage van de vloer wordt getild en de val, wanneer het personage weer naar beneden gaat. Op dit moment mis je het tweede deel van de sprong, de Vallenanimatie.
Net als voorheen, in de animatie paneel, klik op het label met de huidige animatienaam en selecteer Maak een nieuwe clip.
Sla de nieuwe animatie op in de animaties map met de naam Fall.anim.
Deze keer wil je dat het personage eruitziet naar beneden tijdens het vallen. Om dat te doen, moet u op de Voeg curve toe knop en begin met het poseren van de draak. Net als de Springen animatie, 30 seconden werken voor deze case.
Herhaal het proces van het selecteren van de lichaamsdelen en het maken van de respectieve sleutelframes voor het hele teken (behalve de zwarte stip). Nogmaals, je kunt middelste sleutelframes toevoegen om er zeker van te zijn dat het personage niet statisch is tijdens het vallen.
Hiermee is de tweede zelfstudie afgesloten waarin wordt uitgelegd hoe een botgebaseerde 2D-animatie met Unity kan worden gemaakt. U hebt nu de basisbeginselen van animatie geleerd en sleutelkaders gebruikt om drie typen animaties te maken. De volgende keer verbindt u de verschillende animaties, mengt u ze en roept u ze op met een script.
Als u vragen of feedback heeft over wat we tot nu toe hebben behandeld, laat dan hieronder een reactie achter.
Accentsconagua