Work in progress

The content of this page was not yet updated for Godot 4.2 and may be outdated. If you know how to improve this page or you can confirm that it's up to date, feel free to open a pull request.

Animation d'éléments découpés

Qu'est-ce que c'est ?

Traditionnellement, cutout animation est un type d'animation en stop motion stop motion animation dans laquelle des morceaux de papiers (ou d'autre matériaux fins) sont découpés en formes spéciales et arrangé dans des représentations d'objets et de personnage en 2D. Le corps des personnages est généralement fait de plusieurs pièces. Ces pièces sont arrangé et photographié une fois par image clé du film. L'animateur bouge et tourne les morceaux à petits pas entre chaque photo pour créer l'illusion du mouvement quand les images sont montrés les unes après les autres.

Les simulations d'animation de découpe peuvent maintenant être créées à l'aide d'un logiciel tel qu'il est vu dans South Park et Jake and the Never Land Pirates.

Dans les jeux vidéo, cette technique est également devenue populaire. Des exemples de ceci sont Paper Mario ou Rayman Origins .

Animation cutout dans Godot

Godot fournit des outils pour travailler avec des rigs de cutout et est idéal pour le processus de travail :

  • Le système d'animation est entièrement intégré au moteur : Cela signifie que les animations peuvent contrôler beaucoup plus que le simple mouvement des objets. Les textures, la taille des sprites, les pivots, l'opacité, la modulation des couleurs, et plus encore, peuvent tous être animés et mélangés.

  • Combine animation styles: AnimatedSprite2D allows traditional cel animation to be used alongside cutout animation. In cel animation different animation frames use entirely different drawings rather than the same pieces positioned differently. In an otherwise cutout-based animation, cel animation can be used selectively for complex parts such as hands, feet, changing facial expressions, etc.

  • Éléments sur mesure : Des formes personnalisées peuvent être créées avec Polygon2D permettant l'animation UV, les déformations, etc.

  • Systèmes de particules : Un rig d'animation de découpes peut être combiné avec des systèmes de particules. Cela peut être utile pour les effets de magie, les jetpacks, etc.

  • Custom Colliders : Définissez des collisionneurs et des zones d'influence dans différentes parties des squelettes, ce qui est idéal pour les boss et les jeux de combat.

  • Animation Tree : Permet des combinaisons complexes et des mélanges entre plusieurs animations, de la même façon que cela fonctionne en 3D.

Et bien plus encore !

Fabrication de GBot

Pour ce tutoriel, nous utiliserons comme contenu de démonstration les morceaux du personnage GBot, créé par Andreas Esau.

../../_images/tuto_cutout_walk.gif

Get your assets: cutout_animation_assets.zip.

Mettre en place le rig

Créer un node2d vide en tant que racine de la scène où nous travaillerons :

../../_images/tuto_cutout1.png

Le premier nœud du modèle est la hanche. Généralement, en 2D et 3D, la hanche est la racine du squelette. Cela facilite l'animation :

../../_images/tuto_cutout2.png

Le prochain sera le torse. Le torse doit être un enfant de la hanche, alors créez un sprite enfant et chargez la texture du torse, puis adaptez-le correctement :

../../_images/tuto_cutout3.png

Ça a l'air bon. Voyons si notre hiérarchie fonctionne comme un squelette en faisant tourner le torse. Nous pouvons faire cela en appuyant sur E pour entrer en mode de rotation, et en faisant glisser avec le bouton gauche de la souris. Pour quitter le mode de rotation, appuyez sur ESC.

../../_images/tutovec_torso1.gif

Le pivot de rotation est incorrect et doit être ajusté.

This small cross in the middle of the Sprite2D is the rotation pivot:

../../_images/tuto_cutout4.png

Ajustement du pivot

The pivot can be adjusted by changing the offset property in the Sprite2D:

../../_images/tuto_cutout5.png

The pivot can also be adjusted visually. While hovering over the desired pivot point, press V to move the pivot there for the selected Sprite2D. There is also a tool in the tool bar that has a similar function.

../../_images/tutovec_torso2.gif

Continuez à ajouter des morceaux de corps, en commençant par le bras droit. Assurez-vous de placer chaque sprite à sa place correcte dans la hiérarchie, afin que ses rotations et translations soient relatives à son parent :

../../_images/tuto_cutout6.png

Avec le bras gauche, il y a un problème. En 2D, les nœuds enfants apparaissent devant leurs parents :

../../_images/tuto_cutout7.png

Nous voulons que le bras gauche apparaisse derrière la hanche et le torse. Nous pourrions déplacer les nœuds du bras gauche derrière la hanche (au-dessus du nœud de la hanche dans la hiérarchie de la scène), mais alors le bras gauche n'est plus à sa place dans la hiérarchie. Cela signifie qu'il ne serait pas affecté par le mouvement du torse. Nous allons corriger ce problème avec les nœuds RemoteTransform2D.

Note

Vous pouvez également résoudre les problèmes d'ordonnancement de la profondeur en ajustant la propriété Z de tout nœud héritant de Node2D.

Nœud RemoteTransform2D

Le nœud RemoteTransform2D transforme les nœuds quelque part ailleurs dans la hiérarchie. Ce nœud applique sa propre transformation (y compris toute transformation héritée de ses parents) au nœud distant qu'il cible.

Cela nous permet de corriger l'ordre de visibilité de nos éléments, indépendamment de la location de ces parties dans la hiérarchie du cutout.

Créez un nœud RemoteTransform2D en tant qu'enfant du torse. Appelez le remote_arm_l. Créez un autre nœud RemoteTransform2D à l'intérieur du premier et appelez le remote_hand_l. Utilisez la propriété Remote Path des deux nouveaux nœuds pour cibler les sprites arm_l et hand_l respectivement :

../../_images/tuto_cutout9.png

Le déplacement des nœuds RemoteTransform2D déplace maintenant les sprites. Ainsi, nous pouvons créer des animations en ajustant les transformations RemoteTransform2D :

../../_images/tutovec_torso4.gif

Compléter le squelette

Complétez le squelette en suivant les mêmes étapes pour le reste des pièces. La scène qui en résulte devrait ressembler à celle-ci :

../../_images/tuto_cutout10.png

Le rig résultant sera facile à animer. En sélectionnant les nœuds et en les faisant pivoter, vous pouvez animer efficacement la cinématique d'avance (FK).

Ceci est bien pour de simples objets et rigs, mais il y a des limitations :

  • Sélectionner des sprite dans la fenêtre d’affichage principale peut devenir difficile dans les rigs complexes. L'arbre de scène finit par être utilisé pour sélectionner des parties à la place, ce qui peut s’avérer plus lent.

  • les Inverse Kinematics (IK) sont utiles pour animer des extrémités comme les mains ou les pieds et ne peuvent être utilisées avec notre rig dans son état actuel.

Pour résoudre ces problèmes, nous utiliserons les squelettes de Godot.

Squelettes

Dans Godot, il y a une aide pour créer des "os" entre les nœuds. Les nœuds liés aux os sont appelés squelettes.

A titre d'exemple, transformons le bras droit en squelette. Pour créer un squelette, une chaîne de nœuds doit être sélectionnée de haut en bas :

../../_images/tuto_cutout11.png

Ensuite, cliquez sur le menu Squelette et sélectionnez Make Bones.

../../_images/tuto_cutout12.png

Cela ajoutera des os couvrant le bras, mais le résultat peut être surprenant.

../../_images/tuto_cutout13.png

Pourquoi la main n'a pas d'os ? Dans Godot, un os relie un nœud à son parent. Et il n'y a actuellement aucun enfant du nœud de la main. Sachant cela, essayons encore une fois.

The first step is creating an endpoint node. Any kind of node will do, but Marker2D is preferred because it's visible in the editor. The endpoint node will ensure that the last bone has orientation.

../../_images/tuto_cutout14.png

Sélectionnez maintenant toute la chaîne, de l'extrémité au bras et créez des os :

../../_images/tuto_cutout15.png

Le résultat ressemble beaucoup plus à un squelette, et maintenant le bras et l'avant-bras peuvent être sélectionnés et animés.

Créez des points de terminaison pour toutes les extrémités importantes. Générer des os pour toutes les parties articulables du cutout, avec la hanche comme la connexion centrale entre chacun d'eux.

Vous remarquerez peut-être qu'un os supplémentaire est créé lors de la connexion de la hanche et du torse. Godot a relié le nœud de la hanche à la racine de la scène avec un os, et nous ne voulons pas cela. Pour résoudre ce problème, sélectionnez le nœud racine et le nœud de hanche, ouvrez le menu Squelette, cliquez sur " Effacer les os ".

../../_images/tuto_cutout15_2.png

Votre squelette final devrait ressembler à ceci :

../../_images/tuto_cutout16.png

Vous avez peut-être remarqué une deuxième série de points d'extrémité dans les mains. Cela aura bientôt un sens.

Maintenant que le rig est terminé pour l'ensemble du personnage, l'étape suivante consiste à mettre en place les chaînes IK. Les chaînes IK permettent un contrôle plus naturel des extrémités.

Chaînes IK

IK stands for inverse kinematics. It's a convenient technique for animating the position of hands, feet and other extremities of rigs like the one we've made. Imagine you want to pose a character's foot in a specific position on the ground. Without IK chains, each motion of the foot would require rotating and positioning several other bones (the shin and the thigh at least). This would be quite complex and lead to imprecise results. IK allows us to move the foot directly while the shin and thigh self-adjust.

Note

IK chains in Godot currently work in the editor only, not at runtime. They are intended to ease the process of setting keyframes, and are not currently useful for techniques like procedural animation.

Pour créer une chaîne IK, sélectionnez une chaîne d'os de l'extrémité à la base pour la chaîne. Par exemple, pour créer une chaîne IK pour la jambe droite, sélectionnez ce qui suit :

../../_images/tuto_cutout17.png

Alors activez cette chaîne pour IK. Allez dans Edit > Make IK Chain.

../../_images/tuto_cutout18.png

En conséquence, la base de la chaîne deviendra Jaune.

../../_images/tuto_cutout19.png

Once the IK chain is set up, grab any child or grand-child of the base of the chain (e.g. a foot), and move it. You'll see the rest of the chain adjust as you adjust its position.

../../_images/tutovec_torso5.gif

Astuces d’animation

La section qui suit est une collection d’astuces pour créer des animations pour vos cutout rigs. Pour plus d’informations sur le fonctionnement du système d’animation de Godot, référez-vous à Introduction aux fonctions d'animation.

Définition des clés d'animation et exclusion des propriétés

Des éléments contextuels spéciaux apparaissent dans la barre d'outils supérieure lorsque la fenêtre de l'éditeur d'animation est ouverte :

../../_images/tuto_cutout20.png

Le bouton de clé permet d'insérer des clés d'animation de localisation, de rotation et d'échelle pour les objets ou les os sélectionnés à la position actuelle de la tête de lecture.

Les boutons de basculement "loc", "rot" et "scl" (pour "location", "rotation" et "agrandissement") à gauche du bouton clé modifient sa fonction, vous permettant de spécifier pour laquelle des trois propriétés les clés d'animations seront créées.

Voici une illustration de l'utilité de cette méthode : Imaginez que vous avez un nœud qui a déjà deux clés d'animation animant uniquement son échelle. Vous voulez ajouter un mouvement de rotation chevauchant au même nœud. Le mouvement de rotation devrait commencer et se terminer à des moments différents du changement d'échelle déjà établi. Vous pouvez utiliser les boutons de basculement pour que seules les informations de rotation soient ajoutées lorsque vous ajoutez une nouvelle clé d'animation. De cette façon, vous pouvez éviter d'ajouter des clés d'animation d'échelle non désirées qui perturberaient l'animation d'échelle existante.

Créer une position de repos

Pensez à une pose au repos dans laquelle votre « cutout rig » devrait être lorsqu’aucune autre pose n’est active dans votre jeu. Créez un pose au repos comme suit :

1. Make sure the rig parts are positioned in what looks like a "resting" arrangement.

  1. Créez une nouvelle animation, renommez-la "rest".

  2. Sélectionnez tous les nœuds dans votre rig (la sélection rectangulaire devrait faire l’affaire).

4. Make sure the "loc", "rot", and "scl" toggle buttons are all active in the toolbar.

5. Press the key button. Keys will be inserted for all selected parts storing their current arrangement. This pose can now be recalled when necessary in your game by playing the "rest" animation you've created.

../../_images/tuto_cutout21.png

Modification de la rotation uniquement

Lorsqu'on anime un rig de cutout, ce n'est souvent que la rotation des nœuds qui doit changer. La position et l'échelle sont rarement utilisés.

Ainsi, lors de l'insertion des clés, vous pouvez trouver pratique de n'avoir que le bouton "rot" actif la plupart du temps :

../../_images/tuto_cutout22.png

Cela évitera la création de pistes d'animation non désirées pour la position et l'échelle.

Animer des chaînes IK

Lors de l'édition des chaînes IK, il n'est pas nécessaire de sélectionner toute la chaîne pour ajouter des clés d'animation. La sélection du point d'extrémité de la chaîne et l'insertion d'une clé d'animation entraîne automatiquement l'insertion de clés d'animation pour toutes les autres parties de la chaîne également.

Déplacer visuellement un sprite derrière son parent

Il est parfois nécessaire de faire changer la profondeur visuelle d'un nœud par rapport à son nœud parent pendant une animation. Pensez à un personnage face à la caméra, qui sort quelque chose de derrière son dos et le tient devant lui. Au cours de cette animation, le bras entier et l'objet dans sa main devraient changer leur profondeur visuelle par rapport au corps du personnage.

Pour corriger ça, il y a une propriété "Behind Parent" (montrer derrière le parent) sur tous les nœuds qui héritent de Node2D. Quand vous planifiez votre squelette, pensez aux mouvements qu'il aura besoin de faire et réfléchissez à comment vous utiliserez "Behind Parent" et/ou les nœuds RemoteTransform2D. Ils fournissent des fonctionnalités qui se chevauchent.

../../_images/tuto_cutout23.png

Réglage des courbes de transition pour plusieurs clés

Pour appliquer la même courbe d'assouplissement à plusieurs clés d'animation à la fois :

  1. Sélectionnez les clés appropriées.

  2. Cliquez sur l'icône crayon en bas à droite du panneau d'animation. Cela ouvrira l'éditeur de transition.

  3. Dans l'éditeur de transition, cliquez sur la courbe souhaitée pour l'appliquer.

../../_images/tuto_cutout24.png

Déformation squelettique 2D

La déformation squelettique peut être utilisée pour améliorer un rig de cutout, en permettant à des parties séparées de se déformer organiquement (par exemple, des antennes qui tremblent pendant qu'un personnage d'insecte marche).

Ce processus est décrit dans un tutoriel séparé.