Op botten gebaseerde eenheid 2D-animatie Mecanim en scripting

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 gebruiken we de uitstekende Mecanim-tool van Unity om animaties te combineren, en we voegen wat eenvoudige scripting toe om het eindresultaat te demonstreren.

Voordat we de tutorial beginnen, willen we Chenguang (DragonBonesTeam) bedanken voor het verstrekken van de gamekunst die is gebruikt om deze tutorialserie te produceren.

Waar we gebleven zijn

In de vorige tutorials hebben we het project opgezet, een 2D drakenkarakter verzameld en drie verschillende animaties gemaakt. Als je de vorige tutorials nog niet hebt voltooid, raden we je ten zeerste aan dit te doen voordat je verdergaat.

Laatste voorbeeld

Deze demo toont de geanimeerde draak waarop we mikken - hit Ruimte om het te laten springen:

Mecanim

Op dit punt heb je je draak volledig geassembleerd met drie gedefinieerde animaties. Er is echter geen verband tussen beide. Ons oorspronkelijke doel is dus om de verschillende animatiefragmenten met elkaar te verbinden en samen te voegen. Hiervoor biedt Unity een geweldige tool genaamd Mecanim die precies doet wat je nodig hebt.

Mecanim is een krachtig en flexibel animatiesysteem. Omdat het is geïntegreerd met Unity zelf, is er geen software van derden nodig. Je kunt gemakkelijk alles animeren, van sprites tot gemengde vormen of zelfs licht. Met Mecanim kun je staatsmachines maken en bomen mengen om je personage te besturen.

Maar laten we, voordat we verder gaan, een beetje praten over het combineren van animaties en staatsmachines, zodat je een beter begrip hebt van wat we gaan doen.

Wat is een staatsmachine?

In Unity kun je twee of meer vergelijkbare bewegingen mengen. Je kunt bijvoorbeeld loop- en loopanimaties mengen, afhankelijk van de huidige snelheid van het personage. Kortom, je hebt twee verschillende manieren om animaties in Unity te mixen. In sommige situaties wilt u misschien gebruiken Transitions; in andere moet je gebruiken Meng bomen:

  • Transitions worden gebruikt voor een soepele overgang tussen animaties. Dit werkt meestal goed als de overgang snel is.
  • Meng bomen laat meerdere animaties soepel overvloeien, terwijl delen ervan in variabele hoeveelheden worden opgenomen. Deze bedragen worden gecontroleerd door numerieke parameters. Om een ​​praktisch voorbeeld te geven, stel je voor dat we een schietspel hebben; je wilt misschien dat het personage tegelijk schiet en rent. Gemengde bomen laten je toe om de twee animaties samen te voegen, zodat het personage tegelijkertijd kan rennen en schieten, zonder dat je een derde animatie hoeft te maken voor die specifieke mix van acties.

Een statusmachine slaat de toestand van een entiteit op een bepaald moment op en kan reageren op een invoer om de status van die entiteit te wijzigen of om een ​​actie of uitvoer te veroorzaken. Zie Finite-State Machines: theorie en implementatie voor meer informatie.

In Unity gebruik je toestandsmachines om de status van de personages van het spel te bepalen. Bijvoorbeeld, één staat voor een personage kan zijn Lopen, en een andere zou kunnen zijn Springen. Het personage kan veranderen van de Lopen verklaren aan de Springen staat op basis van input van de speler (waarschijnlijk op de Jump-knop). 

Hier ziet u een voorbeeld van een (meer complexe) statusmachine uit de Unity-documentatie. Elk vak vertegenwoordigt een staat en de pijlen geven mogelijke overgangen tussen beide weer:

We gaan een staatsmachine maken met onze bestaande animaties en vervolgens overgangen gebruiken om ze samen te voegen.

Onze staatsmachine bouwen

Als u de animaties map waarin u uw bent opgeslagen .Anim bestanden, vindt u een Dragon.controller het dossier. Dit is het mecanim-bestand dat is gekoppeld aan het personage dat Unity automatisch heeft gegenereerd toen u uw eerste animatie opsloeg.

Dubbelklik op de Dragon.controller bestand en Unity wordt geopend animator tabblad bekijken naast uw Tafereel en Spel tabs.

Zoals je ziet, heeft Unity de drie animaties al aan het bestand toegevoegd. Omdat de animaties al op hun plaats zijn, is het niet nodig om ze toe te voegen, maar als je een extra animatie aan de controller zou willen toevoegen, hoef je alleen maar de .Anim bestand naar de animator uitzicht. Op dezelfde manier, als je een bestaande animatie van de controller wilt verwijderen, zou je gewoon op de animator bekijk en druk op Verwijder. Voel je vrij om dit zelf te proberen.

We hebben vier verschillende vakken in de animator:

  • Elke staat
  • nutteloos
  • Springen
  • Vallen

Elke staat is de standaardstatus die de mecanim creëert, en u zult deze niet gebruiken. U kunt het naar elke hoek van de slepen animator venster en laat het daar.

De andere drie vakjes verwijzen naar de drie animaties die we hebben gemaakt. Zoals je misschien opvalt, nutteloos is gekleurd met oranje, terwijl de andere twee grijs zijn. Dat is omdat nutteloos is de rootanimatie; het is de animatie die het personage standaard gaat spelen. Als u op de knop Afspelen op uw editor drukt en deze test, ziet u dat het teken dit doet nutteloos animatie. In dit specifieke geval is dat precies het gedrag dat we willen; als u echter de, Vallen animatie als de basisanimatie, alles wat u hoeft te doen, is met de rechtermuisknop klikken om het te selecteren Stel in als standaard.

Zoals u kunt zien, de Vallen animatie is nu oranje en de nutteloos is grijs.

Omdat je wilt nutteloos om de rootanimatie te zijn, herhaal het proces om het weer oranje te maken.

Het is nu tijd om de animaties te verbinden. Klik met de rechtermuisknop nutteloos en selecteer Maak overgang.

Hiermee wordt een kleine pijl gemaakt die begint nutteloos. Klik op de Springen animatie om de pijl de twee animaties te laten verbinden.

Als u de pijl selecteert die u zojuist hebt gemaakt, ziet u dat nieuwe eigenschappen worden weergegeven in de Inspecteur tab.

Zoals je kunt zien, heb je een tijdslijn en de animaties nutteloos en Springen. Er is een blauwe band over de animaties die begint nutteloos maar verandert dan in Springen. Ook is er een periode in de tijd waarin de twee animaties elkaar overlappen.

Sinds de Voorbeeld gebied is leeg, zelfs als u op de afspeelknop klikt tijdens het voorbeeld, kunt u niet zien wat er gebeurt.

Als u een voorbeeld van de overgang wilt zien waaraan u werkt, selecteert u de Draak game-object van de Hiërarchie tab en sleep het naar de Voorbeeld Gebied. Nu kunt u het teken in het voorbeeld zien en, als u op play drukt, kunt u de overgang tussen de twee animaties zien.

In de Inspecteur, het gebied waar de blauwe band van verandert nutteloos naar Springen is onze overgang:

U kunt de overgangen bewerken door de twee blauwe pijlen op de tijdlijn te verslepen die het overgangsgebied beperken. Door hun positie te veranderen, kunt u de overgang sneller of zachter maken.

Het volgende dat je moet doen is definiëren wanneer je wilt dat deze overgang gebeurt. Om dat te doen, maakt u een nieuwe parameter door op de. Te klikken + inloggen in de parameters lijst.

Selecteer vervolgens de Vlotter optie en noem het VerticalMovement:

Ga nu terug naar de Inspecteur, en onder Voorwaarden de variabele VerticalMovement zal verschijnen. Selecteer het.

U hebt zojuist de voorwaarde gedefinieerd om te bepalen wanneer de staat in de statusmachine moet worden gewijzigd: als de waarde van VerticalMovement is groter dan 0, dan zal het personage de Springen animatie. 

We willen ook een overgang tussen de Springen animatie en de Vallen animatie:

De maximale waarde die VerticalMovement gaat bereiken is 1, dus voor de overgang tussen Springen en Vallen, we kunnen het activeren wanneer die waarde kleiner is dan 0.5.

Nu moeten we het personage laten terugkeren naar de nutteloos animatie na de val. Sinds nutteloos zou moeten spelen als het personage op de grond staat, je zou een overgang moeten maken tussen Vallen en nutteloos.

Om te eindigen, moet je ervoor zorgen dat het activeert wanneer het personage op de grond ligt. U kunt dat doen door de overgangsparameter in te stellen VerticalMovement naar minder dan 0.1-dat betekent in feite dat het VerticalMovement is 0, wat betekent dat het personage op de grond ligt.

We moeten er nu voor zorgen dat we er geen zien nutteloos animaties terwijl het personage in de lucht is tussen de Springen en Vallen animaties. Om dat te doen, maakt u een nieuwe parameter, dit keer een Bool.

Noem het OnGround.

Selecteer de overgang tussen Springen en Vallen. Je wilt dat deze overgang gebeurt wanneer het personage nog steeds in de lucht is, toch? Dus ga naar de Inspecteur, Klik op de +, en voeg een nieuwe parameter toe aan de overgang. Kortom, u wilt dat dit gebeurt wanneer de waarde van OnGround is vals.

Vervolgens, bij de overgang van Vallen naar nutteloos, voeg de parameter toe OnGround en stel de waarde in op waar:

Ons werk met Mecanim is voltooid. Nu is het tijd om over te gaan naar scripting.

Scripting-animaties

Maak in uw activamap een nieuwe map met de naam scripts. Maak vervolgens een nieuw C # -script met de naam CharacterMove.cs. Merk op dat het script dat je gaat creëren erg eenvoudig is, wat als belangrijkste doel heeft om te laten zien hoe je de animaties van het personage per code kunt veranderen. 

De beste werkwijze is om de fysica van Unity te gebruiken wanneer u robuuste spellen wilt maken. Voor de eenvoud en het begrip maken we echter een kleine simulatie.

Maak vier variabelen in het script: een om te verwijzen naar de animator component, een ander voor de snelheid van de val, een derde voor de hoeveelheid verticale beweging, en een vlag om te controleren of het personage op de grond staat.

public class CharacterMove: MonoBehaviour // Variables public Animator anim; // Herkenning van de animator private float fallSpeed; // De snelheid waarmee het personage valt privé vlotter verticaal Beweging; // De hoeveelheid verticale verplaatsing private bool onGround; // Vlag om te controleren of het personage op de grond ligt

In de Begin() methode, moet u ervoor zorgen dat de snelheid is ingesteld op 0.03 (of welke andere waarde je ook bij je animaties past) en dat het personage is geaard.

void Start () // Het teken begint op de grond onGround = true; // Stel de valsnelheid in fallSpeed ​​= 0.03f; 

Nu, op de Bijwerken() methode, er zijn verschillende dingen die u moet controleren. Eerst moet je detecteren wanneer het Spatiebalk wordt ingedrukt om het personage te laten springen. Als de knop wordt ingedrukt, stelt u de verticale beweging in op 1 en de onGround vlag naar vals.

void Update () // Als de spatiebalk wordt ingedrukt en het teken zich op de grond bevindt als (Input.GetKeyDown (KeyCode.Space) == true && onGround == true) verticalMovement = 1f; onGround = false; 

Wat gebeurt er als het Spatiebalk wordt niet ingedrukt? Nou, je moet controleren of het personage in de lucht is en de verticale beweging groter is dan 0; in dat geval moet u de verticale beweging verminderen door de valsnelheid af te trekken.

void Update () // Als de spatiebalk wordt ingedrukt en het teken zich op de grond bevindt als (Input.GetKeyDown (KeyCode.Space) == true && onGround == true) verticalMovement = 1f; onGround = false;  else // Controleer of het personage in de lucht is en de verticale verplaatsing groter dan 0 als (onGround == false && verticalMovement> 0) // verticale verplaatsing verticaal verminderenMovement - = fallSpeed; 

Zoals je je nog wel kunt herinneren, een keer verticalMovement zakt onder 0.5, de Vallen animatie begint te spelen. 

We willen echter niet aftrekken fallSpeed van verticalMovement voor altijd, omdat het personage op een gegeven moment zal landen. Als de waarde voor verticale verplaatsing gelijk is aan of kleiner is dan 0, we zullen zeggen dat het personage de grond heeft geraakt.

void Update () // Als de spatiebalk wordt ingedrukt en het teken zich op de grond bevindt als (Input.GetKeyDown (KeyCode.Space) == true && onGround == true) verticalMovement = 1f; onGround = false;  else // Controleer of het personage in de lucht is en de verticale beweging groter dan 0 als (onGround == false && VerticalMovement> 0) // Verticale verplaatsing verticaal verminderen Beweging - = valsnelheid // Als de verticale beweging kleiner is of gelijk aan 0, staat het personage op de grond als (verticale beweging < 0)  verticalMovement = 0; onGround = true;    

Om het te beëindigen Bijwerken() methode, moet u de waarden van verticalMovement en onGround naar de animator component:

void Update () // Als de spatiebalk wordt ingedrukt en het teken zich op de grond bevindt als (Input.GetKeyDown (KeyCode.Space) == true && onGround == true) verticalMovement = 1f; onGround = false;  else // Controleer of het personage in de lucht is en de verticale verplaatsing groter dan 0 als (onGround == false && verticalMovement> 0) // verticale verplaatsing verticaal verminderenMovement - = fallSpeed; // Als de verticale beweging kleiner of gelijk is aan 0, bevindt het personage zich op de vloer (verticale beweging) < 0)  verticalMovement = 0; onGround = true;    // Update the animator variables anim.SetFloat("VerticalMovement", verticalMovement); anim.SetBool("OnGround", onGround); 

Het script is voltooid. Nu moet je het toevoegen aan de Draak game-object en voeg de verwijzing naar de animator component. Hiertoe sleept u, nadat u het script hebt toegevoegd, de animator naar het juiste veld op het script.

Als je op play drukt en het test, moeten de animaties veranderen zoals ze zouden moeten. De draak begint nutteloos, maar als je eenmaal op de Spatiebalk het zal Springen en begin dan met spelen Vallen animatie voordat u terugkeert naar nutteloos.

Externe hulpmiddelen en technologieën

Hoewel we in deze zelfstudiereeks alleen de standaardhulpmiddelen hebben gebruikt die bij Unity horen, zijn er veel geweldige 2D-hulpmiddelen in de Unity Asset Store die u kunnen helpen dit proces nog eenvoudiger en sneller te maken. Twee goede voorbeelden zijn Smooth Moves en Puppet 2D, die u elk kunnen helpen om de karakters, de hiërarchie en de animaties op een intuïtieve en eenvoudige manier te definiëren. 

Plug-ins als deze bieden een aantal extra's, zoals de mogelijkheid om 2D "botten" toe te voegen, waardoor het hele animatieproces eenvoudiger wordt en de vervormingen realistischer. Als je het idee hebt om 2D-animaties met verschillende details te gebruiken, raden we je ten zeerste aan om die plug-ins te bekijken.

Conclusie

Dit concludeert onze tutorialserie over het maken van een op bot gebaseerde 2D-animatie met Unity. We hebben veel aandacht besteed aan deze korte serie, en je moet nu genoeg weten om aan de slag te gaan met je 2D-animaties. Als u vragen of opmerkingen heeft, kunt u ons altijd een bericht sturen in de opmerkingen.

Referenties

  • Dragon sprite sheet: gebruikt met toestemming van Chenguang van DragonBonesTeam