introduction

Dans ce tutoriel, j'expliquerai ma méthode de création d'art pour les jeux vidéo 2D, ce que l'on appelle les «actifs 2D» ou «sprites» en anglais et dans la communauté des développeurs de jeux vidéo en général, pour une utilisation dans Unity ou similaire.

En particulier, je me concentrerai sur l'art pour les jeux vidéo à vue latérale ou les "sidecrollers" tels que "Ori et la forêt aveugle", "Hollow Knight" ou "Monster Boy", surtout je les mentionne car je n'utiliserai pas le pixel art, je vais simplement utiliser l'art numérique normal.

Je vais expliquer étape par étape comment créer à partir de plates-formes, de décorations et d'arrière-plans, et qu'ils s'emboîtent tous pour créer différents niveaux ou scénarios de manière cohérente et naturelle et qu'ils sont prêts à être importés dans Unity ou dans un moteur similaire à un jeu.

Clip Studio Paint, possède des outils très confortables, comme la [Règle symétrique] qui m'aident à effectuer ce type de travail rapidement.

 

Avant de commencer

Avant de commencer à dessiner / peindre, il faut penser à la résolution de nos actifs.

Bien qu'il n'y ait pas de règle spécifique sur la taille de la résolution de nos actifs, nous pouvons prendre en compte certains paramètres:

• Si nous voulons créer des ressources pour PC, les résolutions les plus courantes aujourd'hui sont «full-HD» (1920 × 1080 px) ou 1280 × 720. Bien qu'il existe également des moniteurs 4K et d'autres variantes.

• Pour les téléphones mobiles, la résolution varie considérablement, certains téléphones utilisent 720p et d'autres peuvent même atteindre 4k.

• Mon conseil est d'enquêter pour quelle plateforme vous allez créer vos actifs et en fonction de cela, choisissez une résolution.

Dans ce didacticiel, nous nous concentrerons sur la résolution la plus courante, 1080p.

Pensez à l'idée

Si vous utilisez ce tutoriel pour pratiquer votre art pour les jeux vidéo, ce serait une bonne idée de réfléchir à ce que vous aimeriez créer. Dans mon cas, je vais créer une forêt pleine de végétation, une forêt ancienne dans laquelle se perdre, avec des rochers et des plantes étranges:

 

Créons quelques croquis avant de commencer à visualiser l'idée.

1- Le sol / Plateformes

La première chose est de commencer à créer le terrain et les plates-formes sur lesquelles le personnage va marcher ou s'appuyer. Tout d'abord, nous allons créer un sol en herbe verte, avec des feuilles de différentes couleurs, ce serait un «atout» que nous pourrions à l'avenir modifier et éditer pour créer des «actifs» plus similaires qui se combinent les uns avec les autres.

 

1- Nous dessinons un petit croquis de notre idée d'herbe, très simple, rien

compliqué.

2- Sur une couche inférieure, nous peignons une base verte.

3- Retirez la couche de croquis et peignez plusieurs nuances subtiles de vert.

4- Nous commençons à ajouter des détails avec des feuilles de différentes couleurs.

5- Enfin on ajoute une petite silhouette de feuilles noires.

Test de sol horizontal rapide:

Faites le test pour voir si votre herbe se combine. Les draps noirs nous aideront à mélanger les actifs.

 

1- Sélectionnez votre morceau d'herbe et dupliquez-le.

2- Rejoignez-les d'une manière qui se combine plus ou moins.

3- Continuez à ajouter des morceaux d'herbe jusqu'à ce que vous obteniez un sol horizontal uniforme, et

enfin remplir le fond de noir.

Comme vous pouvez le voir, il semble assez bon, avec assez de style et de personnalité!

Voyons maintenant comment nous pouvons le rendre moins répétitif.

Variété dans le sol:

Bien que notre bien foncier fonctionne assez bien, nous pouvons toujours ajouter de la variété rapidement.

Technique 1:

Nous pouvons faire varier la couleur en appuyant sur [Ctrl + U] et en modifiant le curseur [Ton].

Comme vous pouvez le voir, le noir reste noir, mais les autres couleurs changent. Cela peut nous aider à créer très facilement différentes variantes d'actifs et de paramètres, sans avoir à créer de nouveaux actifs à partir de zéro.

Technique 2:

Nous pouvons varier en utilisant l'actif herbacé initial, le modifier et créer des actifs plus grands, qui occupent plus de surface et sont moins répétitifs.

 

1- Prenez votre herbe et dupliquez-la.

2- Rejoignez-les d'une manière qui se combine plus ou moins.

3- Maintenant, nous allons essayer d'ajouter plus de feuilles au milieu et d'autres couleurs pour ajouter plus de variété.

Comme vous pouvez le voir, cette technique prend un peu plus de temps, bien que le résultat final soit assez professionnel, nous avons maintenant notre actif d'origine, les actifs colorés et ce nouveau double actif. Maintenant, notre sol sera beaucoup moins répétitif, et il sera beaucoup mieux!

2- Murs, plates-formes flottantes, horizontales et verticales

Une fois que nous avons notre sol, nous pouvons commencer à penser aux murs et aux plates-formes verticales. Pour l'herbe, ma méthode est très simple.

 

Nous dupliquons l'actif, et avec l'outil [Transformation gratuite] Contrôle + Maj + T, nous modifions l'actif comme il nous convient.

 

Nous pouvons utiliser le retournement horizontal pour le retourner, changer l'angle à 90º pour le rendre vertical, ou même diagonal si vous le souhaitez.

Voici mes exemples.

 

Une fois que nous aurons les variations, vous verrez à quel point il est facile de créer différents niveaux de terrain. Par exemple, faisons un carré flottant.

 

Placez simplement vos nouveaux actifs modifiés dans un carré et remplissez en noir la partie vide au milieu.

Comme vous pouvez le voir, c'est super simple et le résultat est assez bon. Ce carré pourrait être une plate-forme flottante sur laquelle votre personnage peut tenir.

Non seulement nous pouvons créer des carrés, mais ces actifs peuvent être modifiés à votre guise. Par exemple, et fait deux rectangles suivant les mêmes techniques expliquées ci-dessus, en mélangeant le petit actif et le double actif.

Nous avons maintenant 3 plateformes différentes!

Nous collecterons les actifs que nous avons créés jusqu'à présent.

Un petit truc que je fais est le suivant:

Nous copions nos ressources et appuyons sur [Ctrl + U] et, en modifiant le curseur [Légèreté], nous convertissons toutes les pièces en noir. Ces pièces nous serviront à se placer devant celles qui ont de la couleur et pourront ainsi couvrir des erreurs ou créer des éléments au premier plan.

Maintenant, avec tous ces atouts, nous pouvons commencer à tester de petits niveaux. En utilisant les pièces que nous avons construites dans les étapes précédentes, j'ai pu créer ce petit tunnel.

3- Décorations

Maintenant, nous allons créer des décorations différentes afin que notre scène / niveau soit plus varié et unique.

 

Les plantes:

 

Commençons par créer des plantes.

 

1- Dessinez des plantes simples.

2- Ajoutez de la couleur sous la ligne d'esquisse.

3- Avec un ton plus foncé souligne et ajoute de l'ombre pour donner du volume.

4- Enfin, ajoutez des détails.

Voici quelques exemples d'utilisation des plantes. Si nous utilisons la même astuce pour les convertir en noir, nous pouvons les placer dans une couche supérieure pour créer plus de détails et de profondeur. C'est une technique très simple, mais elle donne des résultats très colorés.

Rochers:

 

Créons des roches.

 

1- Dessinez des rochers simples.

2- Ajoutez de la couleur sous la ligne d'esquisse. Dans mon cas, j'ai utilisé du gris.

3- Petit à petit nous donnons des détails et ajoutons des tonalités différentes. Vous pouvez utiliser des couleurs

que vous avez déjà utilisé dans les plantes pour mieux combiner.

4- Ajoutez des tons plus sombres pour créer du volume dans la roche.

5- Nous les dupliquons et faisons [retournement vertical]. Appuyez sur [Ctrl + U] et en modifiant le curseur [Luminosité], nous convertissons toutes les pièces en noir.

 

6- Nous les réunissons et à l'aide d'un pinceau mélangeur nous unifions les deux parties. Ce processus peut prendre un peu plus de temps, assurez-vous qu'il est le meilleur possible.

Voici quelques exemples d'utilisation simultanée de plantes et de roches.

Roches avec de l'herbe / des monticules:

 

Nous allons créer des rochers avec de l'herbe pour ajouter plus de variété.

 

1- Dessinez un tas d'herbe.

2- Ajoutez de la couleur sous la ligne d'esquisse. Dans mon cas, j'ai utilisé des tons verts.

3- Petit à petit nous donnons des détails et ajoutons des tonalités différentes. Vous pouvez utiliser des couleurs que vous avez déjà utilisées sur les plantes pour mieux les assortir. Ce processus est un peu compliqué car il nécessite un certain temps. Vous pouvez utiliser l'outil [Règle symétrique] pour vous aider à créer cet actif plus rapidement.

4- Une fois terminé, nous ajoutons des variations pour rompre avec la symétrie de la règle et pour qu'elle ne soit pas aussi répétitive.

Maintenant, à partir de ce rocher, nous pouvons créer de plus grandes variations pour décorer les espaces ouverts.

Nous rassemblons trois monticules et nous les unifions progressivement jusqu'à obtenir un nouvel actif similaire au précédent.

Voici un exemple d'utilisation de ces monticules d'herbe.

Colonnes:

 

Nous pouvons également créer des colonnes qui peuvent bloquer le passage du personnage ou se positionner derrière lui, pour tenir des plates-formes flottantes ou simplement pour servir de décoration.

 

1- Dessinez une colonne avec de la végétation.

2- Ajoutez de la couleur sous la ligne d'esquisse. Dans mon cas j'ai utilisé les mêmes couleurs que celles du sol, des tons verts.

3- Petit à petit nous donnons des détails et ajoutons des tonalités différentes. Vous pouvez utiliser des couleurs que vous avez déjà utilisées sur les plantes pour mieux les assortir.

4- Ajoutez une silhouette noire pour avoir plus de variété pour aider à combiner avec d'autres actifs en noir. (Ci-dessous un exemple.)

Nous dupliquons l'actif, et avec l'outil [Transformation gratuite] Contrôle + Maj + T, nous modifions l'actif comme il nous convient.

Nous pouvons utiliser [Flip Horizontal] pour le retourner, l'étirer ou l'aplatir pour créer rapidement différentes variations.

Voici un exemple d'utilisation des colonnes avec d'autres actifs. Comme vous pouvez le voir, le noir des colonnes est parfait avec le toit.

Collection des actifs créés à ce jour:

Rassemblons tous les actifs et voyons si nous devons créer autre chose.

4- Suppléments

Puisque mon idée principale était de créer une forêt, j'ajouterai d'autres décorations, peut-être avec des couleurs différentes pour se démarquer du reste, nous pouvons également ajouter une sorte d'obstacle qui blesse le joueur comme des pointes.

 

1- Dessinez différentes plantes des précédentes. J'ai également dessiné une brochette.

2- Ajoutez de la couleur sous la ligne d'esquisse. Dans mon cas, j'ai utilisé des tons bleus et jaunes.

3- Petit à petit nous donnons des détails et ajoutons des tonalités différentes. Vous pouvez utiliser des couleurs que vous avez déjà utilisées dans les plantes afin qu'elles se combinent mieux, tout comme dans les actifs précédents.

4- Nous continuons d'affiner les nouvelles décorations jusqu'à ce que nous soyons satisfaits du résultat final.

À partir de ceux-ci, nous pouvons faire de nouvelles variations très rapidement.

 

En dupliquant la feuille plusieurs fois, nous pouvons la repositionner pour créer une plante complètement nouvelle. L'outil [Transformation libre] Contrôle + Maj + T sera très utile pour ce type de modification rapide.

Avec la fougère, nous pouvons faire varier la couleur en appuyant sur [Ctrl + U] et en modifiant le curseur [Ton]. Nous pouvons également le modifier avec [Free Transformation] Control + Shift + T.

En dupliquant la feuille plusieurs fois et en changeant le ton et la luminosité, nous pouvons créer différentes plantes similaires les unes aux autres et qui se combinent les unes avec les autres.

Nous pouvons également faire de même avec des brochettes pour créer des rangées et des murs.

Voici un exemple utilisant certains de nos atouts et ces nouvelles décorations.

N'oubliez pas de jouer avec les éléments noirs pour créer de la profondeur et du contraste.

5- Bordure noire et exemples finaux

C'est tout ce que j'ai créé jusqu'à présent.

Nous pouvons encore utiliser quelques astuces supplémentaires. Par exemple, j'aime ajouter une bordure noire qui entoure tous nos actifs. C'est une technique assez simple qui donne une touche un peu plus de dessin animé.

 

1- Cliquez sur [contrôle + clic] sur la vignette du calque. Vous verrez qu'une sélection est ajoutée autour de nos actifs.

2- Appuyez sur [Ctrl + T] pour accéder au mode Échelle / Rotation. Vous verrez qu'un petit menu apparaît avec différents boutons et icônes. Cliquez sur l'icône que je surligne en jaune et nous accèderons à [Développer la zone sélectionnée], avec deux pixels ce serait suffisant.

3- On clique sur l'icône [Remplir] de couleur noire.

 

4- Le résultat final serait notre atout avec une bordure noire.

Nous faisons de même avec tous nos actifs en même temps, et le résultat final serait le suivant.

Ce sont quelques-uns des scénarios que j'ai réussi à concevoir avec ces actifs pour mon jeu vidéo. Comme vous pouvez le voir, vous pouvez jouer avec différentes nuances pour créer de la profondeur.

 

• En utilisant des couleurs plus claires, nous pouvons créer de la distance.

• En utilisant des couleurs plus sombres, nous créons une proximité.

En cela, j'ai changé les tons, afin qu'ils soient plus bleus, d'un simple clic, nous pouvons totalement changer la sensation et l'apparence de nos actifs.

Méfiez-vous de cet abîme abîme!

Derniers conseils

 

• Apprendre à concevoir l'art pour les jeux vidéo demande beaucoup de temps, de créativité et de dévouement, ne vous découragez pas si au début les choses ne vont pas bien.

• Comme vous l'avez vu dans ce tutoriel Clip Studio Paint, il dispose de nombreux outils qui facilitent leur création. Devenez enseignant du programme pour tirer le meilleur parti de votre temps.

• Jouez à des jeux vidéo et observez leur art et comment les créateurs conçoivent les scénarios, inspirez-vous de vos jeux préférés, essayez de penser à la façon dont ils les ont créés, puis appliquez ce qui est observé dans vos propres créations.

 

J'espère que vous avez aimé le tutoriel, toute question, vous pouvez laisser un message ci-dessous.

Je vous remercie!

Maaot