Dans cet article, je vais vous montrer comment utiliser Clip Studio Paint pour créer des graphiques (images-objets) de jeux.

 

Ce sera une série en trois parties.

 

[Partie 1] Je vais expliquer mon processus pour créer des sprites prêts pour l’animation pour un prototype de jeu mobile à l’aide de Clip Studio Paint uniquement.

 

[Partie 2] Je me concentrerai sur l'animation - offrant un flux de travail solide pour animer des séquences à l'aide de la méthode du style de découpe et introduisant la nouvelle fonctionnalité d'interpolation désormais disponible dans le logiciel.

 

La [Partie 3] sera consacrée à l’exportation et à certains conseils et astuces que vous pouvez utiliser pour accélérer la création de différents actifs.

 

 

Faisons le.

 

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

 

Planifiez vos pas

Tout d’abord: lors de la création d’actifs pour le développement de jeux, il est très important que vous preniez en compte la sortie finale de l’affichage.

 

Je vous recommande fortement de consacrer du temps à la recherche ou simplement à discuter avec votre équipe (artiste principal, producteur ou programmeur) du meilleur rapport d'écran et de la meilleure résolution pour créer les graphiques.

 

[En règle générale:]

 

• L’art vectoriel est toujours préféré, mais c’est un processus plus lent.

Si le style de votre jeu prend en charge cette méthode de création, créez la plupart de vos graphiques en mode vectoriel.

 

 

• Les graphiques raster / bitmap sont plus rapides à créer, mais vous pouvez avoir des problèmes de mise à l'échelle si vous devez augmenter la résolution une fois votre illustration terminée.

 

Essayez de créer vos actifs à au moins le double de la taille de votre résolution finale ; Toujours avoir une résolution plus élevée de vos sprites produits.

 

Pour ce projet, je vais créer les actifs en mode bitmap / raster.

 

Pour avoir un point de référence quant à la taille d'image idéale pour créer l'illustration, j'ai effectué une recherche rapide sur les résolutions d'écran communes des plates-formes pour lesquelles le jeu pourrait être publié.

 

J'ai obtenu deux informations clés de mes recherches:

 

une. La résolution maximale de l'écran est de 2224 pixels (zone bleue).

 

b. Pour que le jeu fonctionne correctement sur les appareils mobiles et les tablettes, je dois centrer mes graphiques importants sur 1080 pixels (zone rouge).

Création de la planche

Avec les informations précédentes à l'esprit, j'ai créé un Art Board avec tous les graphiques pour cette maquette de jeu. En faisant cela, je peux avoir une meilleure idée du jeu ET il est plus facile de maintenir la cohérence pendant la production (puisque vous pouvez travailler sur des lots).

// À propos de cette image: j'ai importé les concepts de mon carnet de croquis dans Art Board et commencé tout de suite les dessins approximatifs. Rassembler tous les graphiques dans le même fichier permet de vérifier leurs relations (taille et couleurs).

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

 

Plus tard dans cette série, je vais utiliser la méthode d’animation par découpage sur ces sprites - et non la méthode habituelle dessinée à la main, image par image, qui est courante dans Clip Studio Paint.

 

Pour que cela fonctionne, je dois dessiner et isoler chaque partie qui va bouger.

À ce stade, votre processus deviendra très fastidieux si vous devez gérer tous les calques différents (Ligne, Couleur, Ombrage) de chaque objet.

 

Une suggestion ici est de [se concentrer sur la création / création et de quitter l’organisation pour plus tard].

 

Dans l'exemple ci-dessous, tous les graphiques ont été créés comme s'il s'agissait d'un seul dessin: un calque pour les lignes, d'autres pour les couleurs à plat, l'ombrage, etc.

 

// À propos de cette image: dans mon Art Board, tous mes graphismes partagent la même structure de calque - mon processus de création serait interrompu si j'essayais de créer et d'organiser en même temps.

 Organisation et exportation de pièces

Clip Studio Paint possède une fonctionnalité très intelligente dans laquelle vous pouvez manipuler (déplacer, copier / couper / coller et effacer les pixels) à partir de plusieurs calques sélectionnés, à condition que:

 

(A) Ils sont sélectionnés sur la pile de couches;

(B) Ils sont tous sélectionnés via un groupe de couches;

// À propos de cette image: Dans Clip Studio Paint, vous pouvez sélectionner et affecter les pixels de plusieurs calques sélectionnés. C’est une fonctionnalité très utile pour modifier des parties de votre dessin sans avoir à fusionner les calques.

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

 

Exportons maintenant correctement chaque partie de l’image-objet afin que vous puissiez l’utiliser pour créer une animation découpée dans Clip Studio Paint et / ou pour créer une image Atlas pouvant être utilisée dans différents outils d’animation (Spine, Spriter, Unity).

// À propos de cette image: un atlas est une grande image contenant plusieurs sprites. Ceci réduit la consommation de mémoire, car le périphérique n'a qu'à charger (appeler) une seule image contenant tous les sprites que vous utiliserez dans un jeu ou un personnage.

J'ai essayé de nombreuses méthodes pour accélérer le processus d'exportation. Voici la séquence d’étapes qui, à mon avis, est le moyen le plus efficace d’accomplir cette tâche:

[ ÉTAPE 1.]

 

Sur la pile de calques, sélectionnez tous les calques utilisés pour créer votre graphique (lignes, couleurs, ombrage, etc.). Ensuite, utilisez l’outil Lasso pour sélectionner la zone que vous voulez transformer sur un Sprite (dans cet exemple, je n’exporterai que la tête de la fille).

 

[ ÉTAPE 2.]

 

Lorsque la sélection est active, allez à ÉDITER - COPIER (ou CTRL + C), puis à FICHIER - CRÉER UN NOUVEAU À PARTIR DU CLIPBOARD.

[ÉTAPE 3.]

 

Un nouveau fichier est créé avec une partie de l'image-objet ET sa structure (utile pour les éditions futures) intactes. Désactivez maintenant la visibilité de la couche de papier afin que l'image-objet ait un arrière-plan transparent.

 

// IMPORTANT: Notez que l'image-objet est précisément contenue dans un rectangle; il n’ya pas d’espace supplémentaire autour. C'est une bonne pratique lors de l'exportation d'images-objets pour les moteurs.

[ ÉTAPE 4.]

 

Vous pouvez maintenant exporter le sprite dans un nouveau fichier. allez dans FICHIER - EXPORTATION (COUCHE SIMPLE) et choisissez PNG.

[ÉTAPE 5.]

 

Il est toujours bon de nommer vos sprites en conséquence. Pour ce projet, je nommerai les morceaux du personnage de la manière suivante: GIRL_ (Nom du BodyPart) .png

[ÉTAPE 6.]

 

Cette boîte de dialogue d'exportation au format PNG est utile car vous pouvez ajuster la taille de votre graphique sans modifier l'art d'origine. Disons que le programmeur a besoin que le personnage ait la moitié de sa taille dans le jeu. Vous pouvez facilement exporter à nouveau les images en modifiant la valeur du rapport d'échelle sur 50% (par exemple).

Et tu as fini...

 

... pour ce premier sprite. :(

 

Heureusement, il existe un moyen d’accélérer ce processus dans Clip Studio Paint.

 

[Vous pouvez utiliser une action automatique (macro) pour automatiser cette séquence.]

 

J'ai créé et je partagerai cette action avec vous. veuillez vous reporter aux notes sur cet article pour obtenir le lien de téléchargement.

Pour importer cette action, allez au sous-outil AUTO ACTION et choisissez IMPORT SET; vous pouvez ensuite copier ou déplacer ce dernier vers votre jeu d’actions automatique par défaut.

 

Retournez dans Art Board, [Sélectionnez une zone de votre image] que vous souhaitez exporter vers un sprite, puis cliquez sur le petit bouton PLAY.

 

L'action demandera le nom et la taille avant la fermeture automatique du fichier temporaire.

Répétez le processus pour toutes les parties de votre image. Dans cet exemple, j’ai toutes les pièces nécessaires pour «rigiler» et animer le personnage.

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

 

C'est tout.

 

Dans l'article suivant, je vais vous montrer comment [animer] cette image-objet dans Clip Studio Paint, à l'aide de la méthode d'animation par découpage.

 

C’est une méthode de travail très efficace et vous pouvez créer des séquences de jeux ou divers types d’animations à utiliser dans votre projet (graphiques Twitch et Youtube, gifs pour les réseaux sociaux, par exemple).

 

Télécharger le matériel