Share
Dans ce didacticiel, nous allons nous concentrer sur les outils d'animation 2D basés sur les 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 cet article, nous allons configurer le projet, définir les actifs et effectuer les préparatifs initiaux de l'animation..
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..
Ce tutoriel s'adresse principalement à deux groupes de développeurs de jeux:
Nous supposons que vous avez des compétences en programmation, nous ne couvrirons donc pas le code en profondeur. Pour suivre ce tutoriel, vous devrez bien sûr télécharger Unity..
Pour commencer rapidement à utiliser Unity, suivez notre précédent tutoriel qui vous présente l'environnement Unity 2D, ses outils et ses caractéristiques. Nous vous recommandons fortement de le faire si vous n'êtes pas familier avec Unity.
Cette démo montre le dragon animé que nous visons:
Lancez Unity et créez un nouveau projet en sélectionnant Nouveau projet… du Fichier menu. le Assistant de projet apparaîtra. Maintenant, créez un nouveau 2D projet, suivi d'un nouveau dossier appelé Sprites (à l'intérieur de votre Les atouts annuaire).
Maintenant que le dossier de projet est organisé, il est temps d'importer les ressources de jeu. Vous pouvez les trouver dans le dossier Assets du référentiel GitHub de ce tutoriel. (Vous pouvez simplement cliquer Télécharger le ZIP sur cette dernière page si vous ne connaissez pas bien GitHub.) Notez que ce dossier contient des actifs pour toute la série de didacticiels. Il y en a donc certains que vous n'utiliserez pas plus tard..
Avant de continuer, comparez les deux images suivantes:
Dans la première image, le dragon est divisé en plusieurs parties du corps (tête, corps, bras, etc.). Dans la seconde, le ninja est représenté dans plusieurs poses, avec une séquence de poses pour différentes actions. Cela vous permet d’imaginer clairement comment l’avatar évoluera dans votre jeu..
Le ninja sprite est ce que nous appelons un feuille de sprite ou atlas de sprite. Ce type de sprite était très populaire sur les jeux 2D classiques, et il est encore très courant aujourd'hui..
L’image-objet dragon nécessite une technique d’animation 2D plus récente, normalement appelée animation à base d'os. Comme son nom l'indique, l'animation se fera par os, chaque os du corps pouvant avoir une action ou une animation spécifique. En séparant toutes les parties principales du personnage, les développeurs peuvent créer les animations directement dans le moteur. Cette nouvelle technique d'animation est très similaire à celle utilisée dans l'animation 3D..
Dans ce tutoriel, nous allons nous concentrer sur l'animation basée sur les os. Cependant, notez que Unity ne fait pas vrai animation à base d'os, nous allons donc la simuler.
Faites glisser le fichier sprite dans l'éditeur et déposez-le sur le Sprites dossier, comme si:
Avant qu'un personnage ne soit prêt pour l'animation, vous devez ajouter un Scène au projet. Créer un Des scènes dossier dans votre Les atouts répertoire, puis créez une nouvelle scène et enregistrez-la sous Test.scene dans ce dossier. A la fin de cette étape, vous devriez avoir quelque chose comme ceci:
Maintenant, toujours dans le Projet onglet, sélectionnez le dragon sprite, puis regardez le Inspecteur panneau:
Comme vous pouvez le voir dans le Mode Sprite propriété dans le Inspecteur, la Mode Sprite est réglé sur Unique. Cela signifie que le moteur utilisera la totalité de la texture lors de la création d'un nouveau sprite. Puisque nous avons les parties du corps séparées dans le dragon, nous ne voulons pas que cela se produise. Nous devons donc changer le Mode Sprite de Unique à Plusieurs.
Lorsque vous modifiez l’option, un nouveau bouton intitulé Éditeur de sprite apparaît:
Actuellement, le Éditeur de sprite l'outil de découpage ne fonctionne pas bien sur les images compressées. Afin d’assurer le meilleur résultat pour les sprites animés, vous devez modifier le Format valeur au bas de la Inspecteur onglet de l'option par défaut, Comprimé, à Vraie couleur. Puis clique Appliquer.
Maintenant, sélectionnez le dragon sprite et cliquez sur le bouton Éditeur de sprite bouton. Une nouvelle fenêtre s'ouvrira:
Dans le coin supérieur gauche de la fenêtre, vous trouverez le Tranche bouton. Cliquez dessus et un autre menu apparaîtra:
Ce menu vous permet de modifier les paramètres de découpage de l’image-objet par le moteur. Si vous définissez les tranches sur Automatique, le moteur essaiera de détecter les différentes parties du personnage que vous avez dans l'image. Vous pouvez définir une taille minimale pour les tranches, un pivot (le point autour duquel la tranche tourne) et l’une des trois méthodes suivantes:
Vous pouvez également définir le Type paramètre à la grille. Cela vous donnera d'autres options:
Comme en mode automatique, vous pouvez sélectionner le point pivot de l'image-objet, mais vous avez également la possibilité de définir la taille en pixels. Cette valeur détermine la hauteur et la largeur des carreaux en pixels.
Pour cette image particulière, sélectionnez le Automatique mode et appuyez sur le Tranche bouton. Le résultat devrait être similaire à ceci:
Comme vous pouvez le constater, l'éditeur a découpé les différentes parties du sprite en différents rectangles. Ce sont les parties que vous allez utiliser pour construire votre personnage. Comme mentionné ci-dessus, ce ne sera pas une animation osseuse parfaite, mais chaque partie sera animée séparément.
Si vous double-cliquez sur l'un des rectangles générés, un panneau déroulant contenant les propriétés de cette partie de l'image-objet s'ouvre:
Vous pouvez modifier le nom de l'image-objet générée, sa position, sa taille et son point pivot. Vous pouvez également modifier les valeurs de position et de taille en faisant glisser les points bleus sur les sommets des rectangles. Le cercle bleu au centre du rectangle sélectionné indique le point de pivot.
Pour ce sprite, il est prudent de laisser Unity créer automatiquement les sprites individuels. Toutefois, dans les sprites plus complexes, vous pouvez définir les sprites manuellement. Vous pouvez le faire en cliquant sur le bouton gauche de la souris et en le faisant glisser sur l’image pour définir un rectangle..
Une fois que vous relâchez le bouton de la souris, Unity créera une image-objet à partir de ce rectangle..
Vous pouvez appuyer sur le Réduire bouton pour ajuster le rectangle à l’image-objet. Ensuite, répétez ce processus pour tous les sprites que vous voulez générer..
Étant donné que le mode automatique fonctionne correctement pour cette image, vous n'avez pas besoin de définir les images-objets manuellement..
La prochaine chose à faire est d’ajuster les points de pivot sur les différents sprites générés. Cette étape est très importante pour l'animation.
En gros, vous devez faire glisser le point de pivotement vers la zone où l’image-objet va rejoindre la partie de corps parent. Par exemple, vous voulez déplacer le pivot de la tête près de la région du cou. Ainsi, lors de l'animation du personnage, tous les mouvements, par exemple les rotations, s'orienteront autour de ce point, permettant ainsi au personnage de se déplacer de manière réaliste. Si vous laissiez les points de pivot à leur emplacement d'origine, vous obtiendriez des animations étranges, car le personnage ne pourrait pas se déplacer de manière réaliste..
Pensez aux points de pivot des membres comme les articulations d’une poupée. Pour que la poupée bouge, les articulations doivent être correctement placées, n'est-ce pas? Les mêmes règles s'appliquent aux points de pivot.
Pour déplacer le point de pivotement, faites glisser le cercle bleu au centre de chaque sprite au bon endroit (qui est le point où il doit être connecté à la partie de corps parent). Dans l'image suivante, vous pouvez voir le pivot de la tête à la bonne place:
La queue devrait ressembler à ceci:
Avez-vous eu l'idée? Génial! Répétez le processus pour les pièces restantes. (Vous pouvez laisser le pivot pour le point noir en son centre; nous en expliquerons plus à ce sujet dans la section suivante.) N'oubliez pas que vous voulez une animation de dragon, pas une animation de Frankenstein..
Une fois que vous avez terminé, cliquez sur Appliquer:
Si vous jetez un coup d'œil au dossier contenant les sprites, vous pourrez voir que le sprite dragon a maintenant une flèche:
Appuyez sur la flèche et vous pourrez voir toutes les parties qui composent notre personnage de dragon séparément:
Maintenant que votre personnage est découpé en plusieurs sprites, vous pouvez commencer à les placer dans la scène. Le dragon étant composé de plusieurs parties du corps, vous devez construire le personnage..
La première chose à faire est de faire glisser le point noir du sprite du dragon sur la scène. Cet objet fonctionnera comme le centre de masse pour votre personnage. Plus tard, vous y porterez votre attention. cependant, pour l'instant, sachez simplement que c'est la base de votre personnage.
Maintenant, prenez le corps du dragon et placez-le sur le point noir, comme suit:
Répétez cette procédure jusqu'à ce que vous ayez assemblé votre dragon. À la fin, cela devrait ressembler à ceci:
Votre dragon est enfin prêt. Cependant, vous remarquerez peut-être qu'il a l'air bizarre. Certaines parties qui devraient être sous le corps sont dessus, ou inversement. Cela se produit parce que nous avons ajouté les pièces de dragon sans ordre spécifique.
Avant de résoudre ce problème, transformons l’image-objet dragon en un seul objet de jeu. Comme vous l'avez peut-être remarqué, les différentes parties du dragon fonctionnent maintenant comme des objets de jeu individuels. Vous devez les regrouper dans un seul objet de jeu avant de pouvoir les animer..
Afin de regrouper correctement tous les sprites, utilisez le sprite avec le point noir comme objet de jeu principal; toutes les autres parties du corps doivent être regroupées sous la masse des sprites. Il suffit de faire glisser un sprite sur le sprite à points noirs dans le Hiérarchie grouper sous le point noir.
Sur l'image suivante, vous pouvez voir à quoi devrait ressembler la hiérarchie des images-objets après avoir groupé les objets du jeu..
Avant de continuer, renommez votre objet de jeu de base en Dragon. Lorsque vous déplacez le Dragon objet du jeu, vous pouvez maintenant déplacer toutes les parties du personnage sur la scène.
Mais que se passe-t-il si vous voulez déplacer un seul sprite? Par exemple, si vous voulez bouger juste la main, vous savez que le bras est connecté à la main, donc, si vous le bougez, toute la main doit bouger aussi, n'est-ce pas? Si vous essayez de faire cela, vous verrez que ce n'est pas le cas. Lorsque vous sélectionnez le bras et le déplacez, les autres parties du corps restent immobiles. Donc, pour déplacer la partie de corps complète, vous devez créer une hiérarchie dans votre sprite..
Pour rendre ce processus plus intuitif, renommez les parties du corps (en cliquant avec le bouton droit de la souris et en sélectionnant Renommer) avec leurs noms respectifs, ainsi:
En ce qui concerne la hiérarchie, considérez le personnage comme un arbre, avec des racines, un tronc et des branches. Le point noir agit comme la racine de l'arbre; lorsque vous le déplacez, tout le corps du personnage bouge. Après la racine vient le tronc; dans ce cas, votre coffre sera le corps du personnage, ce sera donc le prochain sprite de la hiérarchie. Toutes les autres parties du corps sont des branches de l'arbre. Cependant, vous pouvez toujours avoir des branches de branches comme, par exemple, dans la queue. Bout de queue est une branche du Queue, etc…
Organisez les sprites de votre personnage en suivant cette hiérarchie:
Maintenant, si vous bougez le bras, toutes les parties du bras suivront. Génial, n'est-ce pas?
Avant de pouvoir commencer à animer le personnage, il reste encore un dernier détail à prendre en compte. Comme nous en avons discuté, les parties des images-objets ne sont pas dessinées dans le bon ordre. Pour résoudre ce problème, vous devez modifier la valeur de Ordre en couche paramètre pour chaque sprite individuel.
Afin de vous assurer que le didacticiel est réussi, utilisez les valeurs suivantes pour chaque Sprite:
Accentsconagua
0 3 4 4 5 4 5 1 2 1 2 4 5 À la fin, votre dragon devrait ressembler à ceci:
Pour terminer cette partie, il suffit de centrer votre personnage sur l'écran. Pour ce faire, changez le Transformer valeurs de la position centrale à (0, 0, 0).
Ceci conclut la première partie de la série. Vous avez maintenant un caractère 2D avec le bon ordre et la hiérarchie des sprites.
Si vous avez des questions ou des commentaires sur ce que nous avons couvert jusqu'à présent, n'hésitez pas à laisser un commentaire ci-dessous.
