Introduction

Bonjour! Je m'appelle Hira Karmachela et ceci est mon premier message. À cette occasion, je partagerai mon expérience de création d'animation de sprite en boucle à l'aide de Clip Studio Paint. J'avais l'habitude de travailler sur des projets de conception graphique pour les besoins des jeux. Souvent, les jeux sur lesquels je travaille sont de style 8 bits ou communément appelés jeux pixel.

 

J'espère que cet article sera des conseils intéressants pour ceux d'entre vous qui recherchent des moyens de créer du pixel art à l'aide de CSP. De plus, nous allons essayer de l'animer au sprite en boucle.

Qu'est-ce qu'une animation de sprite en boucle ?

Avant de commencer la pratique, je vais partager un petit aperçu de la définition de l'animation de sprite. Dans l'industrie du graphisme ou du multimédia, le terme de sprite fait référence à une petite partie d'une grande scène sous forme d'images, à la fois statiques et animées. Pour les besoins de l'animation, plus précisément appelée animation sprite.

 

Pratiquement dans l'industrie, l'animation de sprites est souvent utilisée pour les besoins des médias interactifs, tels que les jeux ou les programmes d'application. L'animation de sprite est généralement appliquée aux personnages du jeu afin qu'ils puissent se déplacer avec divers gestes ou en tant qu'effet visuel prenant en charge la scène ou l'interface utilisateur (par exemple : icônes et boutons).

 

Techniquement, l'animation des sprites se fait image par image en utilisant le principe de pose à pose et droit devant. Par conséquent, leur utilisation est souvent en boucle où la trame finale se connectera à la trame initiale pour effectuer des mouvements sans fin.

 

Habituellement, dans les projets de jeux, j'utilise l'animation de sprites pour faire divers mouvements de personnages. Par exemple : mouvements oisifs, marcher, courir, attaquer, se défendre, se blesser et mourir. Chaque mouvement est une séquence qui sera conditionnée dans un format appelé feuille de sprite.

Préparation du fichier pour Pixel Art

D'ACCORD! Nous commençons par créer un nouveau fichier. Nous sélectionnons le préréglage "Animation" afin que l'espace de travail soit organisé en fonction de nos besoins pour créer le sprite en boucle. Le pixel art ne nécessite pas de grandes dimensions de toile, en particulier pour les besoins des sprites, la toile ne sera remplie que d'objets ou de personnages uniques. Donc, généralement, je n'utilise que des multiples de 32 pixels pour les dimensions.

 

Dans ce projet, j'ai réalisé une toile avec des tailles L = 192 px et H = 192 px. Cette taille est largement suffisante pour faire un geste de caractère même avec une marge supplémentaire.

 

Vous pouvez suivre les paramètres que j'ai définis ci-dessous.

 

Une fois la toile réalisée, la chose importante à préparer ensuite est la "Grille", qui est une ligne imaginaire qui nous aidera vraiment à organiser les pixels de manière à ce qu'ils forment une image.

 

L'étape consiste à entrer dans le menu Affichage> Grille. Ce n'est qu'en le vérifiant que vous verrez des lignes transversales et longitudinales sous forme de motifs d'échecs sur la toile.

 

 

Après cela, revenez au menu Affichage> Paramètres de la grille. La fenêtre des paramètres de grille apparaîtra. Ici, changez Gap = 1 px et Number of divisions = 0. Ensuite, vous verrez un modèle d'échecs avec des carrés plus petits et plus serrés.

 

 

Dessiner des pixels

Nous sommes maintenant prêts à dessiner ou à organiser des pixels pour créer un sprite. Dans ce projet, je vais créer un personnage gobelin avec un mouvement d'attaque. Avant de faire une animation, bien sûr il faut d'abord faire le personnage.

 

La chose la plus importante dans la création de personnages animés est d'organiser les images dans le système de calques. Ceci est destiné à faciliter le processus d'animation, nous n'avons donc besoin que de redessiner certains calques pour créer certaines poses. N'oubliez pas que l'animation des sprites dépend beaucoup du principe de pose à pose.

 

Voici le calque que j'ai fait pour chaque pose.

 

Je vais rendre cela facile. Au début, nous n'avons besoin de créer qu'un seul dossier de calque avec le nom "pose_01". Plus tard, nous pouvons copier ce dossier pour les prochaines poses. Ensuite, créez un calque pour la première partie du corps. Nous ferions mieux de commencer par la tête.

Comme les techniques de dessin en général, on peut commencer par faire du dessin au trait. Heureusement, CSP dispose d'un outil qui peut être utilisé pour organiser les pixels. Utilisez le type "Marqueur" "Dot Pen" si facilement que chaque trait remplira les cases de la grille avec des pixels.

Formez ensuite la tête du personnage que vous voulez en arrangeant les pixels. Dans ce projet, j'ai réalisé un personnage gobelin avec une vue 3/4.

 

Habituellement, je fais différentes couches entre le dessin au trait et la coloration. Cependant, sur la base de mon expérience dans la création de pixel arts, il est plus efficace de combiner tous les processus sur un seul calque. La simple séparation des calques en fonction de la partie du corps du personnage dépend des besoins d'animation.

 

Ainsi, pour la coloration, arrangez simplement la tonalité de couleur d'une teinte à l'autre en fonction des besoins du calque.

 

Système de calques pour l'animation

Ensuite, créez d'autres parties du corps avec des calques séparés. Je divise le corps de ce personnage gobelin dans les sections suivantes en couches séquentielles de haut en bas : tête, main gauche, corps, arme, main droite, jambe gauche et jambe droite.

 

Le système de couches vise à faciliter le processus d'animation. N'oubliez pas que nous n'avons actuellement qu'un seul dossier de calque pour représenter une pose. Ensuite, nous aurons besoin d'autres poses pour effectuer une série de mouvements. Grâce au système de calques, au lieu de redessiner les personnages pour différentes poses, nous n'avons qu'à redessiner les calques requis et simplement copier les autres calques sans changer la pose.

 

 

Préparation de la chronologie

Si toutes les parties du corps sont complètes, essayez de vérifier chaque partie afin qu'elle puisse être enchaînée correctement et former une unité corporelle proportionnelle. Ensuite, nous créons d'autres poses en utilisant "pose_01" avec le système de calques qui a été créé.

 

Avant cela, nous préparons la chronologie à l'avance pour le processus d'animation. L'étape consiste à entrer dans le menu Fenêtre > Chronologie. Ensuite, le panneau Chronologie apparaîtra sur l'écran du bas.

 

Ensuite, copiez le dossier de calque "pose_01" en allant dans le menu Calque > Dupliquer le calque.

 

Convertissez ensuite la copie du dossier de calque en calque (normal) en allant dans le menu Calque> Convertir le calque. Une boîte de dialogue apparaîtra pour changer le nom de la couche. Passez à "animating_pose_01". Nous avons maintenant 1 cellule à animer.

Déplacez le calque "animating_pose_01" dans le dossier Animation (le dossier de calque qui est automatiquement créé lors de la création d'un nouveau fichier avec un préréglage d'animation - chaque calque spécifié dans ce dossier sera considéré comme un cellulo d'animation).

 

Dans le dossier Animation, nous trouverons un calque vide qui existe déjà. Sélectionnez le calque puis supprimez-le.

 

Nous devons maintenant spécifier le calque "animating_pose_01" en tant que cellulo d'animation. En termes simples, nous pouvons utiliser les icônes de support dans le panneau Chronologie. Sélectionnez l'image 1 dans la chronologie, puis cliquez sur l'icône "Spécifier les cellulos" comme indiqué ci-dessous. Une boîte de dialogue apparaîtra pour confirmer, sélectionnez "animation_pose_01" puis cliquez sur OK.

Pose à pose

Maintenant, nous avons l'image clé initiale dans notre animation. Ensuite, nous devons faire une deuxième pose et ainsi de suite. L'étape consiste à copier à nouveau le dossier de calque "pose_01", puis à double-cliquer sur le nom du calque pour le renommer en "pose_02".

Sélectionnez le dossier de calque "pose_01", puis changez l'opacité à 50% pour le rendre transparent. Ainsi, nous pouvons apporter des modifications à la pose dans le dossier de calque "pose_02".

 

Simplement, ce que je fais, c'est décaler quelques pixels sur certains calques en fonction du mouvement voulu, de manière à créer une nouvelle pose durable avec la pose précédente. Pendant ce temps, je n'ai pas changé la structure des pixels des autres calques comme le calque "tête" et j'ai seulement changé sa position pour suivre la nouvelle pose.

 

Si la deuxième pose est terminée, l'étape suivante consiste à convertir le dossier de calque "pose_02" en calque (Normal : animating_pose_02). Ensuite, enregistré dans le dossier Animation et spécifié comme animation cel. Pour le processus de spécification cel, j'enregistre animating_pose_02 dans l'image 4. Cela signifie que je donne une durée d'environ 0,1 seconde pour la première image clé (animating_pose_01) ou égale à trois images.

 

Effectuez les étapes ci-dessus pour faire la pose jusqu'à la dernière pose. Dans ce projet, j'ai fait 7 poses pour que le personnage gobelin ait un mouvement d'attaque. La chose à noter est la dernière pose, c'est-à-dire que pose_07 doit continuer jusqu'à la pose initiale, c'est-à-dire pose_01. Ainsi, il fera un mouvement sans fin ou une animation en boucle.

 

Animation

En fait, ce processus sera très simple car nous avons déjà des poses qui représentent l'image clé dont nous avons besoin pour devenir une série de mouvements. Avant de vous assurer que l'animation fonctionne bien dans la Timeline. Conditionnez tous les dossiers de calques dans un état masqué.

 

Ensuite, assurez-vous que toutes les cellules sont dans leurs cadres respectifs dans la chronologie. Une caractéristique intéressante de la chronologie CSP est la "pelure d'oignon". Cette fonctionnalité nous permet de voir la pose avant et après la pose que nous examinons.

 

Vous pouvez tester l'animation en appuyant sur l'icône de lecture dans la chronologie. Si l'animation ne s'arrête pas et que l'aiguille de la chronologie continue, même si nous ne remplissons la cellule que jusqu'à la 23e image, ne vous inquiétez pas. Cela se produit parce qu'au début de la création du fichier, nous n'avons pas défini correctement la durée de lecture. Cela peut facilement faire défiler vers la droite et trouver l'aiguille bleue de la chronologie sur le côté droit, puis la faire glisser et l'enregistrer sur le cadre dont nous avons besoin.

 

Édition

Après avoir été convaincu du mouvement sur notre animation ça fait du bien. Il est alors temps de le publier. Habituellement, je regroupe l'animation de sprite dans une feuille de sprite en fonction des besoins du client. Les feuilles de sprites sont créées en PNG transparent pour faciliter la composition des développeurs de jeux. Ensuite, le sprite sera animé par codage.

 

Cependant, en tant que soumission client ou processus d'approbation, j'exporte généralement l'animation de sprite dans des GIF animés en boucle. L'étape consiste à aller dans le menu Fichier > Exporter l'animation > GIF animé. Ensuite, quelques cases apparaîtront et nous n'aurons plus qu'à les confirmer si nécessaire.

 

D'ACCORD! C'est tout ce que je peux partager. J'espère que cela vous sera utile et s'il vous plaît, aidez-moi à faire plus de conseils en:

 

Suivez mon Instagram :

 

Abonnez-vous à ma chaîne YouTube :

Lis mes autres messages :

Merci :)