Introduction aux termes courants et à l'utilisation de l'outil d'animation DragonBones (photo)

Cet article vous apporte une introduction aux termes courants et à l'utilisation de l'outil d'animation DragonBones (images). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Comment créer des effets d'animation plus vifs avec moins de coûts artistiques ? Aujourd'hui, je vais vous présenter un ensemble de framework et d'outils d'animation squelettique 2D open source - DragonBones, qui comprend l'outil de production d'animation squelettique de bureau DragonBonesPro et une version multilingue de la bibliothèque d'animation squelettique DragonBones.

Ce qui suit est une introduction aux termes courants et à l'utilisation de DragonBones.

1. DragonBones Termes courants dans l'animation squelettique 2D

Squelette : Armature est le terme le plus couramment utilisé dans l'animation squelettique 2D, faisant généralement référence à de nombreux os composés d'un. entier. Les DragonBones représentent également un personnage pouvant contenir des animations.

Squelette (os) : La grille osseuse ou os est l'unité de base la plus importante qui constitue le squelette dans le réseau squelettique. Les os eux-mêmes ne peuvent pas être démontés. Ils peuvent être déplacés, pivotés, mis à l'échelle et les uns par rapport aux autres dans le squelette. Lorsqu'ils sont combinés, ils forment une animation squelettique. De plus, il peut y avoir une relation parent-enfant entre les os. De manière générale, avec la dynamique avant par défaut, le mouvement de l'os parent amènera les os enfants à se déplacer ensemble. Par exemple, si un personnage lève le haut du bras, le petit bras, en tant qu'os enfant du haut du bras, le fera également. être levée en conséquence.

Slot : Le slot est un conteneur pour afficher des images en animation squelettique et appartient au squelette. Chaque emplacement peut contenir plusieurs images, mais une seule image sera affichée à la fois. Chaque grille osseuse peut contenir plusieurs emplacements. La fente relie l'unité logique d'animation de l'os et l'unité d'affichage d'animation de l'image, formant l'image de fente d'os, la structure osseuse de base dans l'animation squelettique de DragonBones.

Image (texture) : L'image est l'élément qui affiche l'image. Dans le système squelettique 2D, la signification de l'image et de la texture n'est pas très différente, elle peut donc également être appelée ici texture.

Ensemble de textures : l'ensemble de textures est une grande image composée d'images packagées, ce qui facilite l'intégration, la diffusion et le chargement des ressources dans le jeu. Si un moteur d'accélération matérielle ou Egret Runtime est utilisé, l'ensemble de textures peut grandement améliorer l'efficacité du rendu. . Par conséquent, l'interface par défaut fournie par DragonBones pour l'importation de ressources consiste à utiliser des jeux de textures.

Interpolation d'animation : généralement, lorsque les concepteurs réalisent une animation squelettique, ils n'ont pas besoin de déplacer le personnage dans chaque image, mais seulement de déplacer la clé à certains endroits clés (images clés). Toutes les clés entre les actions sont remplacées. par des interpolations générées de manière procédurale, qui sont des interpolations d'animation. Les interpolations d’animation peuvent être linéaires ou non linéaires. L'interpolation linéaire signifie que les composants de l'interpolation sont transformés (traduits, tournés, mis à l'échelle) à une vitesse constante. L'interpolation non linéaire est généralement représentée par diverses courbes, DragonBones Par défaut, les courbes de Bézier sont utilisées pour représenter l'interpolation non linéaire.

Transition d'animation : La transition d'animation fait référence à l'effet de transition produit lors du passage d'une animation à une autre. DragonBones fournit une fonction d'effet de transition lors du changement de surfaces mobiles d'animation. Tant qu'un temps de transition est défini, un effet de transition fluide peut être automatiquement généré.

Fusion d'animation : la fusion de surface dynamique fournit la fonction d'un personnage jouant plusieurs animations en même temps. Cette fonction est généralement utilisée dans deux situations. Le premier type est que si l'animation d'un personnage est relativement complexe, le haut et le bas du corps peuvent devoir être animés séparément, puis ils peuvent être combinés à volonté. Le deuxième type est si un personnage doit être abattu pendant qu'il court et que son corps se penche en arrière, c'est-à-dire que l'animation de course et d'être abattu est insérée en même temps. La fonction de fusion d'animation répond à ces deux besoins en définissant des poids pour différentes animations et en ajoutant des masques d'animation à différents chemins d'os. Il convient de noter que DragonBones ne fournit la fonction de fusion d'animation qu'en mode normal, et que le mode vitesse ne fournit pas cette fonction.

Dynamique avant (FK) et dynamique inverse (IK) : dans l'animation squelettique, de manière générale, le mouvement des os enfants sera affecté par l'os parent, comme la rotation du gros bras et le petit le bras suivra également la rotation, c'est ce qu'on appelle la dynamique vers l'avant, c'est-à-dire que le père affecte l'enfant. Bien sûr, la situation inverse existe également dans le monde réel. Par exemple, quelqu'un vous frappe et vous utilisez votre avant-bras pour le bloquer. Lorsque l'avant-bras bouge avec force, cela amène également le gros bras à bouger avec force. étude de puissance inverse. Lors du contrôle de l'action d'ajustement de la trajectoire des os dans DragonBones, les os respectent généralement les lois de la dynamique avant, c'est-à-dire que lorsque l'os parent est ajusté, les os enfants seront également affectés. Si vous souhaitez ajuster l'animation via une dynamique inverse, vous pouvez choisir l'outil IK correspondant pour y parvenir.

Tout d'abord, une fois l'installation terminée, ouvrez l'interface de bienvenue et sélectionnez le projet, comme indiqué dans la figure 1.

Figure 1

Ouvrez ensuite le projet que vous avez sélectionné, comme indiqué dans la figure 2.

Photo 2

Ce qui suit est une explication de la façon d'utiliser les outils de la figure 2

1. Barre d'outils système

La barre d'outils système contient les fonctions les plus couramment utilisées, les Les fonctions des boutons de gauche à droite sont : nouveau projet, ouvrir un projet, enregistrer le projet, annuler, rétablir, importer, exporter, prévisualiser le partage du travail, comme le montre la figure 3.

Figure 3

Nouveau projet : utilisé pour créer un nouveau projet, cliquez sur ce bouton pour ouvrir la boîte de dialogue du nouveau projet.
Ouvrir le projet : utilisé pour ouvrir un projet existant. Cliquez sur ce bouton pour ouvrir la boîte de dialogue du fichier spécifié par le système.
Enregistrer le projet : si des modifications sont apportées au projet en cours, le bouton Enregistrer le projet s'allumera. Cliquer sur le bouton enregistrera le projet en cours. Une fois le projet enregistré, le bouton Enregistrer le projet s'assombrira.
Annuler : utilisé pour annuler la dernière opération d'édition.
Rétablir : Utilisé pour refaire la dernière opération d'édition annulée.
Importer : utilisé pour importer un format de fichier de projet pris en charge. Cliquez sur ce bouton pour ouvrir la boîte de dialogue d'importation.
Exporter : utilisé pour exporter le projet. Cliquer sur ce bouton ouvrira la boîte de dialogue d'exportation.
Aperçu : prévisualisez l'effet d'exécution de l'animation dans le navigateur. Si votre projet contient plusieurs clips d'animation, vous pouvez basculer entre eux d'un simple clic gauche de la souris dans le navigateur.
Partage du travail : ouvrez la page de partage du travail et de téléchargement.

2. Barre d'outils de la scène principale

La barre d'outils de la scène principale est utilisée pour changer de mode de souris pendant les opérations sur la scène. De gauche à droite, ce sont : l'outil de sélection, l'outil Pose. , outil à main et outil de création d’os, comme le montre la figure 4.

Figure 4

Outil de sélection : lors de la sélection d'un os, cliquez avec la souris sur l'os lui-même, maintenez le bouton gauche enfoncé pour vous déplacer, et vous pouvez déplacez-le arbitrairement dans le squelette des directions X et Y. Cliquez avec la souris sur l'axe X rouge (ou l'axe Y vert) pour effectuer une translation dans une seule direction d'axe X (axe Y). Faites glisser l'image elle-même dans la fente avec la souris et maintenez le bouton gauche enfoncé pour vous déplacer. Vous pouvez déplacer les os dans n'importe quelle direction X et Y. Cliquez sur l'axe X rouge (ou sur l'axe Y vert) pour sélectionner l'axe X unique (axe Y). Traduisez dans le sens. Faites glisser la poignée de zoom avec la souris pour zoomer sur l'emplacement. Les douilles peuvent être tournées en cliquant et en maintenant la souris enfoncée dans d'autres zones (les douilles peuvent être sélectionnées et changer d'état uniquement en mode d'assemblage squelette).

Outil Pose : Lorsqu'un os est sélectionné, l'os pivote après le glissement de la souris. Lorsque deux ou plusieurs os sont sélectionnés, les os sélectionnés suivront les règles IK et suivront le glissement de la souris.

Outil Créer un os : sélectionnez l'outil Créer un os, cliquez sur le bouton gauche de la souris dans la scène principale et faites glisser pour créer des os. De plus, certaines opérations courantes sont prises en charge dans la scène principale :
Appuyez et tirez sur la molette de la souris pour effectuer un zoom avant et arrière sur la scène DragonBones Pro.
Lorsque la souris est sur l'outil de sélection ou l'outil manuel, double-cliquez n'importe où avec le bouton gauche pour restaurer la taille de la scène à 100 %.
Cliquez avec le bouton droit sur n'importe quelle zone pour désélectionner.

Outil de poids : Le poids représente la proportion de peau affectée par différentes déformations osseuses. Il est important de répartir raisonnablement le poids de chaque sommet cutané.

3. Panneau de filtre facultatif visible

Le panneau de filtre facultatif visible est utilisé pour activer et désactiver la visibilité, le caractère optionnel et l'héritage des os et des emplacements. Le commutateur est illustré à la figure 5.

Figure 5

Visible : Lorsqu'il est activé, l'os ou la fente est visible dans la scène principale. Lorsqu'il est éteint, l'os ou la fente ne l'est pas ; visible dans la scène principale visible.
Facultatif : lorsqu'ils sont activés, les os ou les emplacements peuvent être sélectionnés dans la scène principale ; lorsqu'ils sont désactivés, les os ou les emplacements ne peuvent pas être sélectionnés dans la scène principale.
Héritage : lorsqu'il est activé, l'os ou l'emplacement héritera de l'édition de l'os parent ; lorsqu'il est désactivé, l'os ou l'emplacement n'héritera pas de l'édition de l'os parent ;

4. Panneau de transformation

Le panneau de transformation est utilisé pour afficher et modifier les coordonnées X, Y (par rapport à l'os parent), la mise à l'échelle et l'angle de rotation de os ou fentes et la taille de l'image (affichée uniquement pour les fentes et les images). Le panneau de transformation est illustré à la figure 6.

Figure 6

5. Panneau d'arborescence de scène

Le panneau d'arborescence de scène est utilisé pour afficher et modifier la scène principale La relation arborescente parent-enfant entre les os et les fentes est illustrée à la figure 7.

Image 7

Les boutons dans le coin supérieur droit sont : le filtrage intelligent, le bouton de création de squelette et le bouton de suppression. En mode assemblage squelette, double-cliquez sur un os ou un emplacement dans l'arborescence de la scène pour faire apparaître une fenêtre de renommage. Ce panneau est visible à la fois sous rigging squelette et animation, mais n'est pas modifiable sous animation. Les os et les emplacements peuvent être vérifiés dans l'arborescence de la scène.

Ce qui suit est la modification de la relation d'héritage des os dans l'arborescence de la scène :

La relation d'héritage entre les os peut être modifiée en faisant glisser le panneau de l'arborescence de la scène.

Les os enfants peuvent être déplacés vers les os au même niveau ou au-dessus du parent.

L'os parent ne peut pas être glissé sous ses os enfants et les os en dessous

Panneau Hiérarchie

Le panneau Hiérarchie. Le panneau de hiérarchie est utilisé pour afficher et modifier les relations hiérarchiques supérieures et inférieures des emplacements dans la scène principale. La relation hiérarchique entre les emplacements peut être modifiée en faisant glisser. Après avoir sélectionné l'emplacement, vous pouvez également cliquer sur les boutons Monter d'un niveau et Descendre d'un niveau dans le coin supérieur droit ou sur la touche de raccourci [] pour modifier la relation hiérarchique. Ce panneau apparaît uniquement en mode assemblage squelette. Le panneau de hiérarchie est illustré à la figure 8.

Figure 8

7. Panneau de ressources

Toutes les images utilisées dans le projet sont enregistrées dans la ressource. milieu du panneau. La bibliothèque de ressources de chaque projet DragonBonesPro correspond à un dossier qui existe réellement dans le système DragonBones. Toutes les images PNG prises en charge par Pro seront affichées dans le panneau des ressources. Via d'autres dossiers système vers DragonBones Faites glisser et déposez les fichiers PNG dans le panneau de ressources de Pro pour ajouter des images à la bibliothèque de ressources ; les fichiers PNG correspondants seront également copiés dans le dossier de la bibliothèque de ressources correspondant. Vous pouvez également cliquer sur le bouton « Importer des ressources » et spécifier le fichier PNG de ressource à ajouter dans la fenêtre système contextuelle. Le panneau de ressources est illustré à la figure 9.

Figure 9

Les boutons dans le coin supérieur droit sont : le bouton importer la ressource, le bouton ouvrir le dossier de la bibliothèque et le bouton modifier le chemin. Ce panneau ne peut être affiché qu'en mode assemblage squelette.

8. Bouton de commutation du mode d'édition

Le bouton de commutation du mode d'édition se trouve dans le coin supérieur gauche de la scène et est utilisé pour basculer entre l'assemblage du squelette et production d'animation, comme le montre la figure 10 Show.

Figure 10

9. Panneau d'animation

Le panneau d'animation est utilisé pour afficher et éditer des clips d'animation. , comme le montre la figure 11.

Figure 11

Les boutons dans le coin supérieur droit sont : créer un bouton de clip d'animation, cloner un bouton de clip d'animation, renommer et supprimer un bouton de clip d'animation. Ce panneau ne peut être affiché que sous Animation. Les trois paramètres sous le panneau d'animation sont :

Durée d'animation : non modifiable, l'unité est s. La durée réelle du clip d'animation est calculée en fonction de la fréquence d'images et du nombre total d'images du clip d'animation.
Temps de transition : la valeur par défaut est 0, modifiable, l'unité est s. Utilisé pour définir le temps de transition entre les différentes surfaces mobiles du jeu.
Nombre de lectures : la valeur par défaut est 0 et peut être modifiée. Utilisé pour définir le nombre de répétitions de l'animation dans le jeu. Lorsqu'il est défini sur 0, cela signifie une répétition infinie.

10. Panneau Chronologie

Le panneau Chronologie est utilisé pour éditer des clips d'animation. Ce modèle ne peut être affiché que sous production d'animation, comme le montre la figure 12.

Figure 12

Outil de contrôle de lecture

Outil de contrôle de lecture sur le panneau de chronologie pour contrôler la lecture de l'animation clips. De gauche à droite : bouton de retour à la première image, bouton de l'image précédente, bouton de rembobinage, bouton de lecture, bouton de l'image suivante, bouton de la dernière image, curseur de contrôle de la vitesse de lecture, image actuelle, heure actuelle, fréquence d'images, comme le montre la figure 13. . La plage de contrôle du curseur de contrôle de la vitesse de lecture est de 0,1x ~ 10x. Image actuelle : modifiable, entrez un numéro d'image spécifique et le pointeur de lecture vert passera au numéro d'image correspondant. Faites glisser le pointeur vert ou jouez le cercle mobile, et la valeur de l'image actuelle changera en conséquence. Heure actuelle : non modifiable, calculée en fonction de la fréquence d'images et de la fréquence d'images actuelles. Fréquence d'images : modifiable, la valeur par défaut est 24 ips. Définissez le nombre d'images d'animation par seconde, comme indiqué dans la figure 13.

Figure 13

Barre d'outils d'édition de cadre

Barre d'outils d'édition de cadres, de gauche à droite : supprimer les cadres inutiles, modifier plusieurs cadres, bouton peau d'oignon, déplacer le cadre vers la droite, déplacer le cadre vers la gauche, bouton d'image clé automatique, éditeur de courbe, comme le montre la figure 14.

Figure 14

Supprimer les images inutiles : recherchez automatiquement les images clés inutiles dans toute la chronologie et supprimez-les. La suppression des images clés inutiles peut alléger le fichier d'animation sans affecter du tout la présentation de l'animation.
Touche pelure d'oignon : active et désactive la fonction pelure d'oignon.
Modifier plusieurs images : sélectionnez plusieurs images pour modifier les courbes par lots.
Déplacer les images clés vers la gauche, déplacer les images clés vers la droite : cliquer sur le bouton déplacera toutes les images clés vers la droite (gauche) de l'image clé sélectionnée. Si la dernière image à gauche possède déjà une image clé, vous ne pouvez plus la déplacer vers la gauche. Le bouton de déplacement de l'image clé vers la gauche sera grisé, et il en sera de même pour le côté droit.
Bouton d'image clé automatique : ce bouton a deux états : le blanc est désactivé et le rouge est activé. Lorsqu'elles sont activées, les modifications apportées aux os ou aux emplacements ajouteront automatiquement des images clés sur l'image de la tête de lecture verte et sur le calque d'os ou d'emplacement correspondant.
Éditeur de courbe : éditeur de courbe Dans ce panneau, vous pouvez appliquer une interpolation entre les images pour obtenir différents effets d'interpolation.

Barre d'outils Chronologie

Barre d'outils Chronologie, de gauche à droite : réduire la liste, développer la liste, bouton copier le cadre, bouton couper le cadre, coller le bouton Cadre et supprimer le bouton cadre, comme le montre la figure 15.

Figure 15

Réduire la liste : Réduire tous les calques de la timeline.
Agrandir la liste : développez tous les calques de la chronologie.
Bouton Copier le cadre : cliquez sur ce bouton après avoir sélectionné l'image clé, et les paramètres du cadre seront copiés dans le presse-papiers.
Bouton Couper le cadre : cliquez sur ce bouton après avoir sélectionné l'image clé, et les paramètres du cadre seront coupés dans le presse-papiers.
Bouton Coller l'image : les paramètres d'image dans le presse-papiers peuvent être collés sur n'importe quel numéro d'image et n'importe quel calque de la timeline (les images du calque d'os et du calque de fente ne peuvent pas être collées les unes aux autres, et les paramètres enregistrés dans l'image clé sont les mêmes que ceux de la clé précédente (la valeur de changement relatif de l'image, la valeur de changement relatif de l'image 0 est 0), et elle peut également écraser l'image clé existante.
Bouton Supprimer le cadre : supprime le cadre actuellement sélectionné.
Bouton Ajouter une image clé : ce bouton comporte 3 boutons d'état, le blanc signifie aucun changement ni aucune image clé. Le jaune indique des modifications, aucune image clé n’a été ajoutée ou mise à jour. Le rouge indique qu'aucune modification n'a été apportée et que des images clés ont été ajoutées ou mises à jour. À l'état blanc ou jaune, cliquer sur ce bouton ajoutera ou mettra à jour des images clés sur l'image où se trouve le pointeur de lecture vert et la couche d'os ou la couche d'emplacement correspondante. Cliquer à l’état rouge n’a aucun effet. Si l'os ou la fente est modifié à l'état rouge ou blanc, le bouton deviendra jaune, indiquant que l'os ou la fente a été modifié. Ce bouton n'est pas disponible lorsqu'aucun os ou emplacement n'est sélectionné.
Bouton du panneau de graphique de courbe : activez et désactivez le panneau de graphique de courbe.

Outil de zoom sur la chronologie

L'outil de zoom sur la chronologie est utilisé pour contrôler la mise à l'échelle de la chronologie, comme le montre la figure 16. Sur la gauche se trouvent les boutons d'ajustement à l'écran, et les boutons — et + contrôlent le zoom avant et arrière. Faire glisser le curseur peut également contrôler le zoom. Comme le montre la figure 16.

Figure 16

Outil Peau d'oignon

Une fois la fonction peau d'oignon activée, N images avant et ensuite sera affichée en même temps (3 images par défaut) la carte des ombres, ce qui permet aux animateurs de mieux positionner les mouvements des personnages et de rendre l'animation continue plus fluide. Entrez en mode animation et cliquez sur le bouton pelure d’oignon dans la barre d’outils de la chronologie pour activer la fonction pelure d’oignon, comme le montre la figure 17.

Figure 17

Une fois la fonction d'épluchage d'oignon activée, l'animation sur la scène principale apparaît en bleu (image principale) et en rouge (images suivantes ) ombres , l'animation présente un effet d'image d'ombre, comme le montre la figure 18.

Figure 18

En même temps, le pointeur de lecture vert de la timeline apparaîtra et la zone d'affichage de la pelure d'oignon sera ajustée par défaut de 3 images avant et après, et le côté gauche sera ajusté. La poignée est rouge et la poignée de réglage de droite est bleue, comme le montre la figure 19.

Photo 19

Faites glisser la poignée bleue ou rouge pour ajuster le nombre d'images affichées par la pelure d'oignon bleue ou rouge. Plus vous couvrez d'images, plus les ombres seront affichées dans le menu principal. La zone d’affichage de la pelure d’oignon se déplacera à mesure que le pointeur de lecture vert se déplacera. Pendant la lecture de l'animation, la zone d'affichage de la peau d'oignon sur le pointeur de lecture vert est masquée. Sur la scène principale, les images d'ombre rouge et bleue joueront avec l'animation d'origine. L'action d'animation de l'image d'ombre bleue précède l'animation d'origine et l'action d'animation de l'image d'ombre rouge est en retard par rapport à l'animation d'origine.

Caractéristiques de la peau d'oignon : La zone d'affichage de la peau d'oignon bleue ou rouge la plus longue ne peut pas dépasser la longueur du clip d'animation lui-même. Bien que le clip d'animation soit lu en boucle par défaut, lorsque le pointeur de lecture vert se trouve à l'image 0, aucune marionnette d'ombres à l'oignon rouge n'est affichée dans la scène principale. Lorsque le pointeur d'insertion vert se trouve sur la dernière image, aucune ombre chinoise d'oignon bleu n'est affichée dans la scène principale.

Chronologie

Les images clés de la couche d'os sont blanches, les images clés de la couche d'emplacement sont jaunes et les images clés de la couche d'événements sont rouges, contenant des événements et des sauts, l'image clé osseuse du son est rose. Le premier calque de la chronologie correspond à la disposition des surfaces mobiles et ne peut pas être modifié directement. Après avoir ajouté des images clés à un autre calque, un carré en forme de losange apparaîtra sur le calque du clip d'animation, indiquant qu'il y a des images clés dans un ou plusieurs calques en dessous. la trame actuelle. Le blanc représente les images clés du calque d'os, le jaune représente les images clés du calque d'emplacement, le rouge représente les images clés du calque d'événement et le rose représente les images clés du ciel où plusieurs calques sont mélangés. La sélection de la case en forme de diamant sélectionne toutes les images clés sous ce numéro d'image. Vous pouvez effectuer un panoramique vers la gauche et la droite dans son ensemble, faire glisser, copier, couper, coller et supprimer. Tant qu'il y a des images clés au numéro d'image correspondant, une ligne rouge apparaîtra sur la règle de la chronologie, et la règle de la chronologie défilera avec les barres de défilement haut et bas de la chronologie et sera toujours visible. Le premier niveau de la chronologie est la couche d'os ou la couche d'événements, et le deuxième niveau est la couche d'emplacements. La couche d'emplacements est en retrait d'un niveau vers la droite par rapport à la couche d'os. La relation hiérarchique entre les os parent et enfant n'est pas reflétée dans la chronologie. Il n'y a qu'une seule couche d'événements. Le calque sélectionné sera mis en surbrillance, et les os ou fentes du calque correspondant seront également sélectionnés. A l'inverse, si les os ou les fentes sont sélectionnés, le calque correspondant sera également sélectionné. Les images clés peuvent être glissées n’importe où dans le même calque de la timeline. Le panneau de chronologie est illustré à la figure 20. montré.

Figure 20

Éditeur de courbe

Éditeur de courbe Dans ce panneau, vous pouvez modifier le cadre Appliquer l'interpolation entre les images pour obtenir différents effets d’interpolation. Par exemple, si vous souhaitez que le balancement du bras d'un personnage soit d'abord plus rapide, puis plus lent lors d'une action en cours d'exécution, vous pouvez sélectionner la première image clé parmi les deux premières images clés de l'action de balancement du bras, puis cliquer sur le bouton de courbe sur la timeline comme suit : illustré Comme indiqué en 21, ouvrez le panneau de l'éditeur de courbe.

Figure 21

L'interpolation linéaire est utilisée par défaut entre les images clés. C'est juste une ligne droite dans l'éditeur de courbes. Vous pouvez voir une rangée de boutons en bas du panneau, qui sont des effets d'assouplissement prédéfinis dans l'outil, comme le montre la Figure 22.

Figure 22

Cliquer sur ces boutons peut rapidement changer la courbe en l'effet correspondant, de gauche à droite : pas d'interpolation, interpolation linéaire, parler, parler, entrer en fondu et sortir (le fondu entrant signifie d'abord lent puis rapide, le fondu sortant signifie d'abord rapide puis lent, le fondu entrant et le discours sortant signifient un rapide et un lent), comme le montre la figure 23.

Figure 23

Si vous n'êtes pas satisfait des effets de ces préréglages, vous pouvez également faire glisser les points de contrôle (blancs) sur les barres de contrôle à les deux extrémités de la courbe (les points creux) proviennent de la courbe de réglage libre, comme le montre la figure 24. Actuellement, le point de contrôle ne peut être ajusté qu'entre 100 % et 200 %. Cette restriction sera assouplie dans les versions futures. Lorsque la courbe entre dans la zone de valeur négative, cela signifie que l'animation s'exécute d'abord dans le sens inverse pendant une période, puis s'exécute dans le sens avant. Une courbe dépassant 100 % signifie que l'animation se déroulera au-delà de la position cible puis se déroulera dans la direction opposée à la position cible.

Figure 24

Il convient de mentionner que l'effet d'édition de la courbe peut se refléter dans l'animation de la scène en temps réel, et le concepteur peut lire l'animation tout en ajustant l'effet d'aperçu de la courbe. De plus, l'ajustement de la courbe modifie instantanément les données d'animation et ne nécessite pas que le concepteur clique à nouveau sur le bouton de l'image clé pour confirmer la modification. Si vous n'êtes pas satisfait de l'effet de modification, vous pouvez utiliser la fonction d'annulation pour revenir à l'état avant la modification.

3. Nouveau projet d'animation

DragonBonesPro propose des projets pratiques et rapides.

1. Créez un nouveau projet

Ouvrez le nouveau projet sur la page d'accueil de bienvenue et une boîte de dialogue apparaîtra, sélectionnez Créer une animation de quille, comme indiqué dans la figure 25.

Figure 25

Cliquez pour créer une animation de quille et les options suivantes apparaîtront : modèle d'animation squelette, modèle d'animation image par image, modèle d'animation interpolation , personnalisé , comme le montre la figure 26.

Figure 26

Cliquez sur le modèle correspondant et le modèle relatif sera sélectionné dans la colonne de création. Ils ont juste des paramètres différents et la même fonction. Vous pouvez également Après avoir créé le projet, cliquer avec le bouton droit dans les ressources et un nouveau composant apparaîtra, comme le montre la figure 27.

Figure 27

Cliquez sur le nouveau composant et la même sélection apparaîtra comme indiqué dans la figure 28.

Figure 28

2. Ajouter et supprimer des images

Faites glisser et déposez des images depuis le bibliothèque de ressources vers la fenêtre principale :

Si aucun calque n'est sélectionné ou si l'image actuelle du calque sélectionné a une image clé non nulle, un calque d'image nommé d'après le nom de l'image sera automatiquement ajouté à la chronologie.
Si un calque est sélectionné et que l'image actuelle n'a pas d'image clé, une image clé sera ajoutée à l'image actuelle et l'image sera ajoutée à l'image clé.
Si le calque est sélectionné et que l'image actuelle est une image clé vide, l'image sera ajoutée à l'image clé vide et l'image clé vide deviendra une image clé non vide.

3. Ordre des calques

Vous pouvez faire glisser et déposer dans la chronologie pour modifier l'ordre de superposition des calques.

4. Import et export de projets

Importer le projet DragonBones Pro Prend actuellement en charge l'importation de fichiers de données DragonBones (y compris json et xml) et de fichiers de packages de données (y compris png et zip) dans plusieurs formats. De plus, DragonBones. Pro prend en charge les plug-ins d'importation pour étendre le format des données importées. Le plug-in d'importation Spine 2.x et le plug-in d'importation Cocos 1.x officiellement annoncés peuvent aider DragonBones Pro importe les fichiers de données Spine et Cocos. La méthode d'importation est très simple, il suffit de glisser-déposer le fichier de données ou le fichier de package de données qui doit être importé dans le logiciel. Si le fichier de données importé est un fichier de données, la figure suivante apparaîtra : L'interface illustrée en 29.

Figure 29

Le logiciel recherchera intelligemment le fichier de jeu de textures dans le répertoire où se trouve le fichier de données s'il n'est pas trouvé ou dans le répertoire. celle trouvée est fausse, pensez à modifier manuellement le chemin, sinon l'image ne sera pas trouvée. Si vous importez un fichier de package de données, il n'y aura aucun problème si l'ensemble de textures est introuvable. De plus, le logiciel générera automatiquement le nom du projet. Si vous devez le modifier, vous pouvez le modifier manuellement.
DragonBonesPro peut exporter le projet au format json ou xml. L'image peut être sous la forme d'un jeu de textures ou d'un fichier image. La fenêtre d'exportation est illustrée dans la figure 30.

Figure 30

Le chemin de sortie est par défaut "Mon document + Nom du projet", l'utilisateur peut le spécifier manuellement, s'il exporte zip, le fichier du package apparaîtra dans le chemin de sortie spécifié.

Si vous exportez le dossier du projet, un sous-répertoire portant le même nom que le projet sera créé sous le chemin de sortie spécifié, contenant des fichiers de données et des images.

Le rapport de sortie par défaut est 1.

Les utilisateurs peuvent saisir des valeurs numériques pour contrôler la mise à l'échelle des éléments exportés.

"Couleur de remplissage" La case à cocher par défaut est non cochée (arrière-plan transparent). Une fois cochée, l'utilisateur peut cliquer sur le carré de couleur à droite pour ouvrir la fenêtre de sélection de couleur et sélectionner la couleur qui doit être utilisée comme couleur d'arrière-plan "Pack zip". La case est décochée par défaut, ce qui signifie exporter le dossier du projet. Si elle est cochée, le fichier du projet sera exporté sous la forme d'un package zip. Le fichier psd sera converti en fichier de données DragonBones ci-dessous. Un fichier script PSExportDB, jsx est fourni dans le répertoire d'installation Pro. Utilisé pour exporter des dessins de conception dans Photoshop au format DragonBones données + images.

Remarque : sur le système Mac, vous devez trouver DragonBones dans l'application Pro.app, puis cliquez avec le bouton droit et sélectionnez Afficher le contenu du package.

Le fichier de script se trouve sous /Contents/Resources/. La méthode d'exportation est la suivante : ouvrez le dessin de conception dans Photshop, puis sélectionnez la commande "Fichier->Script->Parcourir" dans le menu, puis ouvrez Rechercher le Fichier PSExportDBjsx dans l'exemple d'emplacement système, sélectionnez Ouvrir et la boîte de dialogue suivante apparaîtra :

Exporter les PNG pour exporter des images
ExportISON pour exporter les fichiers JSON
Ignorer les calques cachésIgnorer les calques cachés
Échelle globale de l'image Le rapport de mise à l'échelle

est défini comme requis. Cliquez sur le bouton OK et Photoshop commencera l'exportation. Une fois l'exportation terminée, un répertoire de DrgonBmes {nom du fichier PSD} sera généré dans le répertoire où se trouve le fichier. Le dessin de conception se trouve. Si vous exportez Check PNG et JSON en même temps, il y aura un fichier json et un répertoire Textuer portant le même nom que le fichier psd.

Sous Texture se trouvent tous les fichiers image png. Ensuite, faites simplement glisser le fichier de données exporté dans DragonBones Après avoir configuré le journal d'images dans Pro, l'importation peut être terminée. Après l'importation, la position relative, la taille et la relation hiérarchique des images sont exactement les mêmes que dans Photoshop.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!