Animation 2D Unity à base d'os création des animations réelles

Dans cette série, nous nous concentrons sur les outils d'animation 2D basés sur l'os fournis par le moteur Unity. L'idée principale est de présenter et d'enseigner les bases de l'animation 2D afin de pouvoir l'appliquer à vos propres jeux. Dans ce tutoriel, nous allons ajouter les animations inactives, sautantes et automnales.

Avant de commencer le tutoriel, nous voudrions remercier Chenguang (DragonBonesTeam) pour nous avoir fourni l’art du jeu utilisé pour produire cette série de tutoriels..

Où nous nous sommes laissés

Dans le didacticiel précédent, nous avons importé un sprite 2D représentant le personnage du jeu, l'avons découpé en tranches avec l'éditeur Unity Sprite et construit la base du personnage. Si vous n'avez pas terminé le didacticiel précédent, nous vous le recommandons vivement, car vous aurez besoin du caractère 2D pour pouvoir suivre ce didacticiel..

Aperçu final

Cette démo montre le dragon animé que nous visons Espace pour le faire sauter:

Théorie générale de l'animation

Il y a plusieurs concepts importants que vous devez garder à l'esprit lors de l'animation. Dans le cadre de ce didacticiel, nous supposerons que vous n’avez aucune expérience en animation (2D ou 3D) et que vous n’avez jamais travaillé avec un logiciel d’animation auparavant..

L'animation, telle que nous la connaissons, a évolué de la peinture au numérique. Il existe des dizaines de techniques d'animation hybrides, mais toutes partagent les mêmes principes de base, comme la synchronisation des lèvres, les cycles de squash ou de marche..

Pour comprendre l'animation, vous devez d'abord apprendre le concept de Cadre. Une image est l'une des nombreuses images fixes composant une animation. Si vous mettez en pause un dessin animé, l’image que votre émission télévisée serait d’une seule image.

La principale différence entre l'animation traditionnelle et l'animation par ordinateur réside dans les outils utilisés. L’animation traditionnelle est un processus très pratique où les artistes doivent dessiner ou composer des milliers d’images individuelles. L'animation par ordinateur élimine le besoin de nombreux outils et, en général, simplifie l'ensemble du processus. 

Par exemple, alors qu'avec l'animation traditionnelle, l'artiste devrait dessiner presque chaque image d'une animation, avec l'animation par ordinateur, il peut utiliser ce que nous appelons points clés de l'image. Comme le nom l'indique, ces points d'image clé sont des étapes clés de l'animation. Fondamentalement, l’artiste crée ces points d’images clés et l’ordinateur les interpole pour créer les images manquantes. Comme vous pouvez l’imaginer, ce type de processus nécessite beaucoup moins de main-d’œuvre.

Vous pouvez définir une image clé comme une seule image fixe dans une séquence animée qui se déroule à un point important de cette séquence. Un bon exemple serait dans une animation de chute de roche: la position initiale de la roche dans les airs serait une image clé et la position finale de la roche au sol en serait une autre. L'ordinateur générerait alors tous les autres cadres. Nous appelons les images entre les images clés interpolé cadres, et ils sont responsables de la création de l'illusion de mouvement.

Le cadre peut également être utilisé comme unité de temps. Par exemple, vous pouvez dire qu'une animation dure 20 images. La durée réelle de toute animation dépend de la cadence, qui peut varier selon le format de l'animation. En Amérique du Nord et au Japon, la norme est de 30 images par seconde (ips), tandis que dans le reste du monde, elle est généralement de 25 ips..

Animations

Puisque vous connaissez maintenant les bases de l'animation et de l'animation par ordinateur, revenons maintenant à Unity pour commencer à animer notre personnage..

La première étape consiste à créer un dossier dans le Les atouts répertoire appelé des animations, dans lequel vous sauvegarderez les animations de vos personnages.

Ensuite, ouvrez le Animation panneau en unité (La fenêtre > Animation):

Comme vous pouvez le constater, le panneau contient une ligne de temps horizontale, un bouton d'enregistrement, un bouton de lecture et quelques boutons permettant de naviguer dans les images.. 

Prenez le Animation fenêtre et le fixer à côté de la Console onglet (notez que vous utilisez le Mise en page 2D créé dans le tutoriel Unity 2D Arkanoid). De cette façon, vous pouvez travailler sur votre scène avec le panneau d'animation toujours ouvert..

Animation au ralenti

Vous allez créer trois animations différentes pour le dragon: une animation inactive, une animation de saut et une animation d'automne.. 

Pour créer la première animation, sélectionnez le Dragon objet de jeu et cliquez Ajouter une courbe sur le Animation panneau. Une nouvelle fenêtre vous demandera de nommer le fichier d'animation et le dossier de destination dans lequel l'enregistrer. Les fichiers d'animation Unity ont .animer extension, et vous les enregistrez dans le Animations dossier que vous avez créé précédemment. Créer le Idle.anim fichier.

Comme vous pouvez le constater, une fois que vous avez enregistré le fichier, plusieurs modifications dans la présentation de l'éditeur:

Si vous regardez les boutons de lecture en haut de votre scène, vous remarquerez qu'ils sont devenus rouges. dans le Animation panneau, le bouton d'enregistrement est maintenant rouge aussi, et vous verrez une ligne rouge à travers la timeline. Cela signifie que vous êtes dans record mode. Aussi, si vous regardez le Inspecteur, vous verrez que Unity a automatiquement ajouté un nouveau composant à votre objet de jeu: le Animateur.

le Animateur composant est une référence à un Contrôleur d'animateur qui est utilisé pour configurer le comportement d'un personnage. Cela inclut une configuration pour Machines d'état, Mélanger des arbres et des événements qui peuvent être contrôlés par script. Fondamentalement, le Animateur est le lien entre le personnage et son comportement.

Nous allons couvrir le Animateur composant avec plus de profondeur plus tard; pour l'instant, concentrons-nous sur l'animation. Dans ton Dragon objet du jeu, sélectionnez le Tête:

Sur le Animation ligne de temps, faites glisser la ligne rouge vers 1h00 (une minute).

Maintenant, sur le Inspecteur, met le Rotation Z à 7.9. Comme vous le remarquerez peut-être, vous avez maintenant de petites formes sur votre timeline. Ces marques indiquent les images clés de l'animation.

Déplacez la ligne rouge vers 2:00 et mettre le Rotation Z de la tête à 0.

Appuyez à nouveau sur le bouton d'enregistrement pour désactiver le mode d'enregistrement. Vous pouvez maintenant appuyer sur le bouton de lecture pour tester votre animation. Si tout a fonctionné, la tête de votre dragon devrait être en mouvement.

Ajuster l'animation

La tête du dragon semble tourner un peu trop. Puisque nous voulons juste un petit signe de tête, nous devons éditer l'animation. 

Activez à nouveau le mode d’enregistrement en appuyant sur le bouton et déplacez la ligne rouge vers le bas. 1h00 minute. Modifier le Rotation Z valeur à 2,05.

Appuyez sur le bouton d'enregistrement pour quitter le mode d'enregistrement et tester à nouveau l'animation.. 

Comme vous pouvez le constater, pour éditer une animation, il vous suffit de sélectionner l’image clé souhaitée et de la modifier. Si vous devez modifier le minutage d'une animation, par exemple si l'animation est trop rapide ou trop lente, vous pouvez faire glisser la marque dans la timeline vers l'image souhaitée..

Bon, maintenant vous avez la tête animée, mais vous voulez animer tout le corps. Puisque vous avez construit votre personnage sous forme de hiérarchie au lieu d'objets de jeu isolés, vous n'avez pas besoin de créer une seule animation pour chaque partie du corps. à la place, appuyez simplement sur le bouton marqué Ajouter une courbe et sélectionnez une autre partie du corps. Cliquez sur le bouton et sélectionnez la queue du dragon.

Essayez de faire monter et descendre la queue. Comme vous le faisiez auparavant, utilisez le Rotation Z axe et la timeline entre zéro et deux minutes. 

Grâce à la hiérarchie que vous avez créée, lorsque vous déplacez la queue, le moteur déplace également automatiquement la pointe. Cependant, vous pouvez également animer chaque conseil individuellement si vous le sélectionnez..

Génial! Maintenant, animez le reste des parties du corps pour l'animation inactive. Prenez le temps nécessaire pour modifier l'animation jusqu'à ce que vous soyez complètement satisfait. L'animation prend du temps et vous n'obtenez jamais les résultats souhaités du premier coup. À la fin, votre chronologie devrait ressembler à ceci:

Notez que pour le Tourner au ralenti animation, vous ne changez aucune valeur du centre de masse du dragon (le point noir).

L'animation de saut

Pour le Saut animation, vous devrez créer un nouveau fichier d’animation. Pour ce faire, dans le Animation panneau, cliquez sur l'étiquette qui dit Tourner au ralenti et sélectionnez Créer un nouveau clip.

Nomme le Jump.anim et enregistrez-le dans le Animations dossier.

Pour cette animation, vous voulez que votre dragon lève les yeux en sautant. Comme nous avons déjà couvert les bases de la création d'animations avec Unity, nous vous donnerons quelques astuces plutôt que de vous guider tout au long du processus..

Comme vous l'avez fait auparavant, vous devez sélectionner le Dragon objet du jeu et commencez par ajouter des courbes. Commençons par la tête; cette animation sera courte, donc 0:30 secondes fera l'affaire. Faites pivoter la tête sur l'axe Z pour regarder.

Pour éviter que la tête ne soit complètement statique, vous pouvez lui ajouter un petit mouvement. Vous pouvez y parvenir en ajoutant un peu de rotation.

Répétez le processus pour les autres parties du corps. Gardez à l'esprit que l'animation doit ressembler à un personnage en plein vol. 

Nous allons vous apprendre à faire le saut complet plus tard. Pour référence, essayez de placer votre personnage dans des poses similaires à la suivante:

L'avez-vous fait? Agréable!

Passons maintenant à l'animation finale: l'animation d'automne.

L'animation d'automne

Votre personnage peut maintenant sauter, mais deux parties constituent un saut complet: le saut lui-même, où le personnage est soulevé du sol, et la chute, lorsque le personnage redescend. En ce moment, vous manquez la deuxième partie du saut, le Tomberanimation.

Juste comme avant, dans le Animation panneau, cliquez sur l'étiquette avec le nom de l'animation actuelle et sélectionnez Créer un nouveau clip.

Enregistrez la nouvelle animation dans le Animations dossier avec le nom Fall.anim.

Cette fois, vous voulez que le personnage regarde vers le bas en tombant. Pour ce faire, vous devez appuyer sur la touche Ajouter une courbe bouton et commence à poser le dragon. Comme le Saut animation, 30 secondes fonctionneront pour ce cas.

Répétez le processus de sélection des parties du corps et de création des images clés respectives pour le caractère entier (sauf pour le point noir). Une fois encore, vous pouvez ajouter des images clés centrales pour vous assurer que le personnage n'est pas statique pendant la chute..

La prochaine fois

Ceci conclut le deuxième tutoriel expliquant comment créer une animation 2D à base d'os avec Unity. Vous avez maintenant appris les bases de l'animation et utilisé des images clés pour créer trois types d'animations. La prochaine fois, vous allez connecter les différentes animations, les mélanger et les appeler par script.

Si vous avez des questions ou des commentaires sur ce que nous avons couvert jusqu'à présent, veuillez laisser un commentaire ci-dessous..

Références

  • Feuille de sprite de dragon: utilisée avec la permission de Chenguang de DragonBonesTeam