Graphiques animés pour les jeux utilisant Clip Studio Paint

Graphiques animés pour les jeux utilisant Clip Studio Paint | 3 sur 3

14 696

Dadotronic

Pour conclure cette série en trois parties, je vais vous montrer comment tirer parti de la fonctionnalité Objet de fichier pour accélérer le processus d’animation de plusieurs éléments de votre jeu et comment exporter vos graphiques pour les utiliser dans un moteur de jeu.

Dans ce prototype, toutes les pièces du puzzle partagent la même animation.

Dans les étapes suivantes, je vais démontrer un moyen efficace d’accomplir cette tâche.

Animation d'un objet proxy

Premièrement, commençons par créer un graphique proxy / modèle qui sera remplacé plus tard par les graphiques colorés. J'ai simplement fait une copie de la pièce rouge et l'ai convertie en gris. Les pièces de ce puzzle sont constituées de 2 parties: le chat et le bloc.

Exportez les graphiques au format PNG transparent.

Créez maintenant un nouveau document et utilisez FILE - IMPORT - CREATE FILE OBJECT pour placer les graphiques exportés en tant qu'objets fichier.

Activez le panneau Montage et créez un nouveau calendrier. Comme avec le personnage, vous pouvez avoir différentes séquences d'animation pour les morceaux. Je commencerai par la boucle d’animation IDLE.

N'oubliez pas - pour activer INTERPOLATION, vous devez sélectionner le calque et cliquer sur ACTIVER LES CLÉS-CLÉS SUR CETTE COUCHE.

En utilisant la même méthode que j'ai utilisée précédemment, j'ai animé cette boucle qui est lue lorsque le lecteur a besoin d'un indice. Il s’agit essentiellement de squash et d’étirement des pièces, mais à deux vitesses légèrement différentes.

Je vais créer un nouveau TIMELINE afin d’ajouter une autre séquence d’animation, cette fois-ci un mouvement pour lequel la pièce «explose» (ou quitte la scène).

Ci-dessous, vous pouvez voir les progrès clés de cette animation:

J'ai pu animer la pièce intérieure qui disparaît à l'aide de la propriété Opacity. Lorsque l'opacité est animée, un demi-diamant est affiché sous l'image clé.

J'ai senti qu'il manquait quelque chose. J'ai donc ajouté une couche supplémentaire et dessiné cette forme de «torsion» à faire pivoter avec le graphisme du chat. N’oubliez pas de convertir tout nouveau dessin en un objet File avant d’animer avec le mode d’interpolation.

Ci-dessous, vous pouvez voir la progression de cette animation. le graphique en rotation a été changé en blanc et l'opacité de la pièce externe a été animée, de sorte que toute la pièce disparaisse de la scène du jeu.

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

Remplacer les graphiques de l'animation

D'accord. Alors, si c’est notre animation pour cet actif, comment pouvons-nous la propager à tous les autres graphiques du jeu?

Laissez-moi vous montrer une méthode simple.

Commençons par exporter les éléments restants par lesquels vous allez remplacer l’objet proxy gris. Celles-ci seront les différentes couleurs des pièces (rouge, bleu, vert et jaune) que j’aurai sur la scène principale de ce puzzle, comme on le voit ci-dessous.

Maintenant, revenez au fichier dans lequel vous créez les animations, SÉLECTIONNEZ le calque de la pièce à remplacer et choisissez OBJET FICHIER - MODIFIER LE FICHIER DE L'OBJET FICHIER.

Localisez les graphiques colorés pour la partie intérieure (chat) et la partie extérieure (cadre) - les graphiques seront remplacés ET les animations fonctionnent toujours.

Il vous suffit de répéter le processus pour chaque pièce colorée.

Voici toutes les pièces remplacées et prêtes pour notre jeu:

C'est tout. Tant que vous NE SAUVEZ PAS votre fichier source (celui avec les graphiques gris animés), vous pouvez l’utiliser comme modèle et remplacer le contenu par d’autres graphiques ou variations dont vous avez besoin tout en préservant l’animation.

Cette technique peut être utilisée sur des jeux comportant plusieurs personnages, par exemple: vous créez d’abord un modèle (proxy) complet avec chaque élément et animation que vous souhaitez dans le jeu, puis vous pouvez ajouter des "skins" à ces graphiques, en appliquant les mêmes boucles animées.

Exporter les animations

Ce n’est pas obligatoire, mais je suggère d’optimiser les images que vous allez exporter. Une chose très importante à faire est de s’assurer que le sujet de l’animation est confiné sur une ‘boîte englobante’, sans transparence supplémentaire (espace vide) autour.

Une astuce intéressante consiste à créer une zone de sélection autour de votre graphique et à déplacer la chronologie de votre animation pour vérifier s’il ne reste pas de pixels en dehors de la sélection.

Dans l'exemple ci-dessous: l'image de gauche montre comment le haut de la tête se trouve en dehors de la zone de sélection; l'image de droite montre comment l'image-objet se trouve dans la zone de sélection tout au long de l'animation.

La sélection étant toujours active, accédez à FICHIER - EXPORTER ANIMATION et choisissez SÉQUENCE D'IMAGES.

Dans la boîte de dialogue suivante, localisez le dossier d'exportation des images et veillez à respecter les options suivantes:

Nom du fichier: ajoutez un préfixe pour le nom de vos fichiers;

-Sélectionnez le format PNG pour conserver la transparence;

Dans les paramètres de taille, choisissez Zone de sélection pour exporter les images dans le cadre de sélection que vous avez créé. (voir note ci-dessous à propos de cette option)

Si nécessaire, vous pouvez également redimensionner vos sprites à partir de cet écran.

// REMARQUE: l'option Paramètres de taille - Zone de sélection est uniquement disponible sur la version Clip Studio Paint EX. si vous avez la version Pro, vous pouvez simplement CROPER l'image à la bonne taille avant de l'exporter. //

Terminé! Vous pouvez maintenant charger ces images dans votre moteur de jeu.

Presque toutes les trousses de création de jeux utilisent des séquences d'images pour afficher un personnage animé à l'écran. C’est la technique la plus courante, mais il est bon de se rappeler que l’optimisation (ce mot encore) est toujours préférée pour le développement de jeux.

Dans la prochaine étape, je vous montrerai comment utiliser un outil autonome gratuit pour créer des feuilles d’image-objet et des images Atlas.

Création d'images Atlas et de feuilles de Sprite

Dans un scénario de développement de jeux, les images-objets et les images Atlas aident à réduire la puissance de traitement utilisée pour charger une image dans la mémoire du système.

Au lieu de charger différents fichiers PNG pour afficher l’animation, vous pouvez fournir une seule image contenant toutes les images de l’animation ET un fichier de données avec les coordonnées et les informations afin que le moteur puisse «lire» la feuille de sprite et localiser les images spécifiques à un moment donné.

Les images Atlas sont identiques, mais au lieu d’images d’animation, vous ne faites que regrouper divers graphiques d’un jeu sur une seule image.

Malheureusement, il n’existe aucun moyen simple (automatique) de créer une feuille de calcul ou une image Atlas à l’aide de Clip Studio Paint.

Pour cet exemple, je vais utiliser un outil appelé ‘Free Texture Packer’. C’est un outil gratuit et il existe même une version en ligne qui peut être utilisée (lien dans les notes de bas de cet article).

Voici comment l’utiliser étape par étape:

[ ÉTAPE 1.]

Ouvrez le programme et chargez vos images. vous pouvez également faire glisser et déposer vers cette zone (bleue).

[ ÉTAPE 2.]

Une fois les images chargées, vous pouvez commencer à ajuster les propriétés de votre feuille Sprite. VOUS DEVEZ parler à votre programmeur ou à votre artiste principal pour obtenir des détails sur la manière dont les ressources sont importées dans le moteur.

Les options les plus importantes ici sont:

La largeur / hauteur correspond à la taille de votre feuille de travail / atlas; Les moteurs de jeu fonctionnent généralement avec des cartes de 256 512,1024,2048… L'option PUISSANCE DEUX doit être cochée la plupart du temps, ainsi que FIXED SIZE si vous devez forcer vos textures à avoir la même taille.

ALLOW ROTATION, ALLOW TRIM et TRIM MODE peuvent être modifiés afin que vous puissiez insérer davantage d'images dans la feuille de sprites. Les modes Découper et Rotation activés sont préférés avec les images statiques (atlas); pour les animations, vous êtes plus en sécurité lorsque celles-ci sont désactivées, de sorte que les images-objets soient alignées et dotées du même espace transparent.

Dans mon exemple ci-dessous, je choisis d'emballer l'animation inactive Girl dans une texture carrée de 2048x2048.

Pour prévisualiser votre animation dans l'outil, sélectionnez toutes les images dans le panneau de droite et cliquez sur le bouton ANIMATIONS. Utilisez le curseur pour contrôler la vitesse.

Pour terminer le processus, sélectionnez le format de votre fichier de données / coordonnées (cela sera informé par votre programmeur et le moteur que vous utilisez), localisez le dossier dans lequel enregistrer, puis cliquez sur EXPORTER.

Le résultat final sera une image de texture et un fichier de données (pouvant être ouvert dans n’importe quel éditeur de texte) - ceux-ci doivent avoir la même heure.

Conclusion

Au cours des années, j’ai utilisé Flash, Animate et, plus récemment, Spine pour créer ces animations simples destinées à des prototypes et à des jeux indépendants, mais lorsque Celsys a ajouté Interpolation en tant que fonction d’animation, j’ai enfin eu l’occasion de simplifier davantage mon flux de travail.

J'espère que cette série a été informative et que vous pouvez utiliser n'importe laquelle de ces techniques pour démarrer votre premier projet de jeu.

Il convient de rappeler que ce type de flux d’animation peut être utilisé pour créer des actifs pour d’autres types de projets: graphiques animés pour votre chaîne Stream ou Youtube, petits gifs amusants pour les réseaux sociaux ou même des courts métrages d’animation utilisant le style découpé.

S'il vous plaît, si vous créez quelque chose après avoir lu cet article - faites-le moi savoir afin que je puisse promouvoir votre travail sur mon fil RSS.

Merci d'avoir lu.

Rendez-vous dans le prochain conseil.