Ce que nous avons appris jusqu'à présent

Dans la première partie de cette série, nous avons appris comment créer, éditer et exporter des images-objets à partir de Clip Studio Paint.

Il est maintenant temps d’utiliser le logiciel pour créer des sprites animés.

 

Actuellement, dans l'industrie, les animations pour les jeux 2D sont généralement réalisées avec des systèmes 2D Bones et Mesh Deformation - les pièces d'un sprite sont importées dans un programme spécifique qui crée un maillage polygonal autour de celui-ci. Les os sont associés à différentes zones de ce maillage, offrant une méthode pour «déformer» le sprite comme s'il s'agissait d'un objet 3D. Le résultat est une animation super fluide qui ne nécessite qu'une seule image pour toute l'animation du sprite.

 

Bien que les systèmes d'animation osseuse 2D soient la tendance actuelle, le système d'animation découpé peut toujours être utilisé pour créer des images-objets pour les jeux. C’est une technique qui permet de gagner du temps et que vous pouvez utiliser lors de vos premiers jeux, prototypes ou même dans un jeu complet pouvant avoir un style artistique compatible.

 

C'est également une méthode très abordable pour créer des animations pour des vidéos, des GIF pour des médias sociaux ou des graphiques pour votre chaîne de diffusion.

 

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

Animation de découpe dans Clip Studio Paint

Depuis la version 1.84, il est désormais possible d’animer le contenu d’un calque à l’aide d’une interpolation. C’est un ajout ÉNORME pour le jeu d’outils Animation.

Apprenons cette nouvelle fonctionnalité en réalisant une animation amusante:

 

1. Créez un nouveau fichier et dessinez une balle à rebondir.

2. Assurez-vous que votre panneau Montage est visible et cliquez sur ce bouton NEW TIMELINE; appuyez simplement sur OK dans la boîte de dialogue de confirmation.

3. Cliquez sur ce petit bouton de «papier courant» pour ACTIVER LE CLAVIER SUR CETTE COUCHE; Notez la petite icône ajoutée au calque actuel.

 

4. Changez votre outil secondaire en OPERATION - OBJECT et vous remarquerez les propriétés pouvant être animées pendant que l’interpolation est active.

 

5. Retour à la timeline, définissons une image clé pour cette première pose.

Vous pouvez simplement déplacer le graphique Ball un peu pour que le programme l'enregistre comme une image clé. Vous remarquerez qu’une icône en forme de losange bleu figure désormais sur la timeline ET dans les propriétés de l’objet.

6. Déplacez la timeline sur la moitié du temps (image 10 dans mon exemple) et déplacez la balle vers le haut. Rappelez-vous, déplacez d'abord le scénario sur l'image 10, puis sur l'objet. Vous pouvez maintenir SHIFT enfoncé pour contraindre le mouvement de la balle sur l’axe des Y.

 

7. Maintenant, déplacez votre timeline pour cadrer 20 et replacez la balle dans le sol;

Hit Play et le petit ballon rouge est en vie.

8. Pour rendre le rebond de la balle plus intéressant, vous pouvez ajuster le timing (la durée / l'exposition de chaque image clé) pour ajouter la sensation de «poids» à l'objet.

Retour à la timeline, CLIQUEZ ET DRAGUEZ l'image clé centrale plus près de l'image clé finale - la balle passera plus de temps sur le mouvement ascendant ET tombera plus rapidement…

 

9. Ajoutons maintenant Squash et Stretch à cette animation.

Retour à la timeline, au milieu du mouvement ascendant de la balle (image 7 dans mon exemple), ajustez sa forme à l'aide de la commande SCALE - étirez la balle uniquement dans l'axe des ordonnées.

N'oubliez pas de désactiver FIXED ASPECT pour activer la mise à l'échelle non uniforme. Gardez le volume de la forme; si vous vous étirez dans X, compressez dans Y et vice-versa.

 

10. Pour terminer cet exemple, j'ai ajouté deux autres images Squash et Stretch avant la dernière. sur le cadre 18, j'ai prolongé la balle en Y (stretch) et dans le cadre 19, je l'ai élargie en X (squash) pour que la balle réagisse à la gravité et à l'impact au sol.

Voici les poses régulièrement espacées et sans interpolation afin que vous puissiez voir la déformation sur chaque image.

 

Et voici (ci-dessous) l'animation finale avec interpolation et quelques ajustements du timing (le mouvement est accéléré en raccourcissant la timeline et en ajoutant un cadre supplémentaire, en tenant la balle dans le ciel avant la chute).

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

Avant d’animer le personnage, quelque chose à propos de FILE OBJECTS

Lors de l'animation de la balle qui rebondit, vous remarquerez probablement quelque chose: lorsque vous utilisez l'outil TRANSFORM (pour faire pivoter, redimensionner et déplacer), il utilise toute la zone de la toile pour la déformation et pas uniquement la forme de l'objet.

 

Cela peut poser problème si nous prévoyons d’animer des objets plus complexes. Dans ces situations, il est préférable d’animer des OBJETS DE FICHIER plutôt que des couches communes.

 

// À propos de cette image: GAUCHE: la boule rouge est sur un calque et l'outil de transformation utilise la totalité de la zone du document comme référence pour transformer l'objet.

DROITE: la boule verte est un objet Fichier et la transformation est maintenant basée sur la taille de l’objet.

 

Un objet File est un conteneur avec le contenu d'un fichier externe .CLIP. Cet objet fichier peut être placé sur n’importe quel document. Toute modification apportée au fichier source se répercutera sur le document où l'objet Fichier est utilisé.

 

Par exemple, commençons à créer notre personnage principal en utilisant FILE OBJECTS. Ce processus équivaut à truquer un personnage dans un logiciel 3D et / ou n’importe quel outil d’animation squelettique.

 

Rigging de votre jeu Sprite en utilisant des objets de fichier

Commençons par créer un NOUVEAU DOCUMENT et coller une image complète de votre sprite afin que nous puissions l’utiliser comme modèle pour créer le rig. Ajustez la taille de la zone de dessin de manière à disposer de la place nécessaire à l’animation que vous souhaitez réaliser.

Pour importer les éléments de l'image-objet, utilisez l'option FILE - IMPORT - CREATE FILE OBJECT. Importez les fichiers PNG ou .CLIP transparents que vous avez créés dans la première partie de ce didacticiel.

Vous pouvez également CLIQUER ET DRAGER les fichiers de votre dossier dans la palette ITEM BANK.

 

 

Placez tous les sprites dans le canevas et utilisez le sous-outil OPERATION - OBJECT pour organiser les pièces.

Si vous avez besoin d'ajuster l'ordre Z des pièces (quel objet est devant / derrière les autres), déplacez simplement le calque correspondant vers le haut ou le bas dans la pile de calques. Pour sélectionner rapidement les calques, maintenez les touches CTRL + MAJ enfoncées et cliquez sur le canevas.

// À propos de cette image: LEFT: ordre des couches incorrect, RIGHT: le chevauchement correct des pièces.

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

Maintenant, préparons le flux de travail de l’animation. Je vous recommande vivement de déplacer votre palette de la timeline sur l’un des côtés de votre toile - il est tout simplement plus facile de comprendre ce qui est animé.

Cliquez sur NEW TIMELINE et définissez certaines propriétés de votre animation, par exemple: le nom de la séquence d'animation (Idle, Run, Walk); le nombre d'images par seconde de votre animation (12 ou 15 images par seconde conviennent à ce style de découpe) et le nombre d'images que vous allez utiliser (je commencerai par 20).

 

Vous pouvez rendre la timeline encore plus facile à gérer en modifiant l’option TAILLE DU VIGNET sur NONE; cette option n'affiche que le nom de chaque partie, similaire aux autres packages d'animation (Flash, Animate, Blender, par exemple…)

 

Pour pouvoir animer avec Interpolation dans Clip Studio Paint, vous devez l'activer sur la timeline. Sélectionnez TOUTES les couches et cliquez sur ACTIVER LES IMAGES CLÉS SUR CETTE COUCHE. Vous remarquerez que l'icône de la couche a changé.

Maintenant, quelque chose que vous devez faire dans TOUTES les couches de votre sprite, de préférence dans la première image de votre animation.

Utilisez le sous-outil OPERATION - OBJECT et déplacez le pivot de transformation (centre de rotation) de la pièce dans la position correcte (dans cet exemple, j'ai déplacé ce pivot du centre au bas de la tête, là où se trouve le cou).

 

Les bras du personnage ont également besoin du pivot pour être à la hauteur de l'épaule. Ajustez le pivot de chaque partie avant de passer à l'étape suivante ...

 

Pendant que vous définissez vos points de pivotement, effectuez des tests sur le Rig. Faites pivoter les articulations du personnage jusqu'à ce que vous trouviez la meilleure façon de l'animer.

 

Dans l'exemple, la main ne fonctionne pas en raison d'un pivot mal placé ...

 

En ajustant la position du pivot, je peux faire pivoter l'articulation de la main, créant ainsi l'illusion que tout son bras est fabriqué à partir d'une seule image.

À tout moment, vous pouvez réinitialiser la ROTATION d'un calque en réglant l'option ANGLE DE ROTATION sur 0. Il en va de même pour SCALE, où vous pouvez réinitialiser à 100.

 

Voici un schéma de la manière dont je règle les points de pivotement de chaque articulation.

 

Notez dans le plan de montage que chaque partie comporte déjà un jeu d’images clés.

Si certaines de vos couches n’ont pas d’image clé, créez-en une en déplaçant légèrement la pièce sur la toile ou manuellement à l’aide du bouton AJOUTER UNE CLÉ.

 

Terminé. Le personnage à droite est prêt à être animé.

 

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 

Animation d'une animation de type "en veille"

Une fois que votre plate-forme de personnage est définie (articulations de pivot en place et toutes les parties en images clés), il est temps de dupliquer cette première pose à la dernière image de l'animation.

 

Le moyen le plus simple de dupliquer plusieurs images consiste à sélectionner chaque image clé du scénario, à maintenir la touche ALT enfoncée, ainsi que les actions CLICK et DRAG à la position souhaitée.

 

A présent, déplacez votre sélection de la timeline vers la partie centrale de votre animation, sélectionnez toutes les parties du personnage (à l'exception de ses jambes) et déplacez-la un peu plus bas (nous créons le haut / bas d'une respiration).

 

Rappelez-vous que vous pouvez utiliser CTRL + SOURIS GAUCHE cliquez pour basculer rapidement et sélectionner les couches. Vous pouvez également déplacer les pièces à l’aide des flèches du clavier.

C'est le résultat. Très simple, mais c’est un début.

Une méthode «simple» pour casser la rigidité d'une animation change le timing des pièces en mouvement: dans l'exemple ci-dessous, j'ai retardé (déplacé à gauche) l'image clé de son corps (fille + couche de corps) afin que le mouvement commence une fraction du temps plus rapide que les autres parties. J'ai aussi retardé ses bras et sa main proportionnellement.

 

Enfin, j'ai retardé les images clés de la tête et des cheveux, donc il semble que ces parties soient «traînées» par le corps.

 

L'idée est de simuler un mouvement qui commence sur la poitrine et entraîne les autres pièces en séquence, comme un wagon de chemin de fer.

 

Quand vient le temps de chronométrer, vous devez entraîner vos yeux à remarquer ces changements subtils. Essayez de voir quelle partie commence à bouger en premier.

Jusqu’à présent, nous venions de traiter la traduction (haut et bas) des morceaux, ajoutons maintenant une rotation.

 

En commençant par la partie Tête, sélectionnez l'image clé du milieu sur la timeline (cliquez dessus pour qu'elle devienne rouge) et faites-la pivoter dans le sens contraire des aiguilles d'une montre - il ne s'agit que d'un petit mouvement.

Vous devrez également régler la rotation de ses cheveux en conséquence.

 

Voyez comment un tel petit ajustement a ajouté du poids à sa tête et à ses cheveux. Les choses commencent à devenir plus intéressantes.

 

J'ai fait la même chose pour ses bras et sa main - en faisant simplement pivoter le cadre entre chaque partie.

 

La propriété Scale peut également être animée.

J'ai sélectionné ses deux jambes (GIRL_LEGL & GIRL_LEGR) et ai utilisé l'outil OPERATION - OBJECT pour «écraser» les jambes afin qu'elles réagissent à son poids.

 

Comme nous l'avons fait dans l'exercice Bouncing Ball, n'oubliez pas de désactiver la propriété FIXED ASPECT afin de pouvoir conserver le volume de l'objet (squash en Y, étirement en X et vice-versa).

 

Squash and Stretch est quelque chose que vous pouvez utiliser dans différentes parties de votre animation, si bien que cela a l'air plus caricatural: remarquez dans l'exemple ci-dessous comment j'ai utilisé Scale pour écraser / étirer entre les images de son corps et de ses cheveux. Ils ont maintenant l'air moins rigide.

 

Une «règle» lors de la création (et de la prévisualisation) de boucles d’animation pour les jeux est de toujours conserver la même pose au début et à la fin de votre cycle d’animation. (maintenez la touche Alt enfoncée, faites glisser les images pour les dupliquer).

 

Voici un conseil: pendant que vous testez l'animation, assurez-vous de la lire de 0 à 19 (si vous avez une animation de 20 images) - dans Clip Studio Paint, vous pouvez déplacer les poignées bleues dans la timeline pour limiter la lecture. .

Cela donnera un meilleur aperçu de la boucle, car vous n'exposerez pas deux fois le même cadre (1 et 20).

 

Voir la comparaison entre la première étape de l'animation et la plus récente.

N'oubliez pas que nous venons d'utiliser 3 (en réalité 2) poses différentes pour créer cette boucle d'animation très attrayante.

Ce processus est un excellent point de départ pour une variété de mouvements que vous pouvez utiliser pour donner vie à vos sprites.

 

Animer des objets complexes, comme un personnage, peut être déroutant. Restez simple jusqu'à ce que vous développiez un meilleur sens du timing. C’est trop difficile d’essayer d’appliquer simultanément ces 12 principes classiques de l’animation.

 

C'est tout. J'espère que vous l'aimez et passons à la troisième et dernière partie de cette série, où je vous montrerai quelques astuces et astuces pour accélérer la création de graphismes animés ET, bien sûr, comment préparer ces œuvres pour le jeu. .

 

Veuillez télécharger le fichier source de cet exercice dans le lien ci-dessous.

 

Télécharger le matériel