Commençons… avec des cercles

Chris Hildenbrand

Traducteur

Alexandre Laurent

- Titre : Commençons… avec des cercles

- Auteur : Chris Hildenbrand

- Traducteur : Alexandre Laurent

- Parution : 22 juillet 2014

- Mise à jour : 9 août 2014

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2014 Chris Hildenbrand. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Introduction

- I-A. Obstacles communs

- I-A-1. Trop d'espoir

- I-A-2. Définissez un thème

- I-A-3. Consistance

- I-A-4. Perte de focus

- II. Commençons

- III. Remerciements

- IV. Commenter

I - Introduction

La création de ses propres graphismes est une nécessité pour la plupart des développeurs indépendants. À cause des contraintes du budget ou dans la plupart des cas du manque de budget, de nombreux développeurs de jeux indépendants ne peuvent pas recruter un artiste ou acheter des graphismes.

Avec l'aide des logiciels libres comme Gimp, Inkscape, Truespace, DAZ Studio et Vue Pioneer (pour ne mentionner que certains d'entre eux) combinés aux notions de base de création de graphismes, presque tout le monde peut créer des résultats impressionnants et professionnels.

Je vais essayer de commencer avec des idées basiques et des exercices pour améliorer ces notions. Tous les exemples reposeront sur des logiciels libres. La manière de travailler sera identique si vous travaillez avec un autre logiciel comme Adobe Illustrator, Adobe Photoshop, CorelDraw ou autre. Je vais essayer de mentionner les différentes approches pour l'ensemble des logiciels. Avec la vaste variété de logiciels disponibles actuellement et l'infinité d'outils et de techniques de création de graphismes, il est impossible de tout couvrir, mais je vais essayer de garder mes exemples assez simples pour travailler avec les logiciels de votre choix.

Laissez-moi clarifier quelques idées reçues communes lorsqu'arrive l'étape de création de graphismes.

« J'ai besoin d'outils coûteux pour créer des graphismes vraiment professionnels. »

Non, vous n'en avez pas besoin ! Il y a de nombreux outils gratuits offrant une vraie alternative. Gimp est l'un des exemples les plus connus dans le royaume de la 2D ainsi que Blender pour la 3D. Pour un graphiste à temps complet, la mise à jour de vos outils afin de rejoindre « le standard industriel » est logique. Surtout pour faciliter les échanges et le partage lors de la coopération avec d'autres artistes utilisant des fichiers de format standard.

« Acheter un outil cher créera automatiquement des graphismes meilleurs. »

Non, cela ne le fera pas. C'est toujours l'artiste créant les graphismes qui les rend bien. Même avec les outils les plus simples comme le papier et le crayon, un bon artiste peut créer des pièces impressionnantes alors que les outils les plus sophistiqués nécessitent toujours un bon artiste pour créer quelque chose de spécial.

« Je ne peux pas faire de graphisme. Je ne sais même pas faire un bonhomme en bâtons. »

Si, vous pouvez. C'est là que les ordinateurs modernes entrent en scène et vous permettent de créer de bons graphismes sans avoir un diplôme en art.

« Mon jeu est bon tel quel. Je n'ai pas besoin de graphismes. »

Si, vous en avez besoin. Le marché du jeu indépendant s'étend de plus en plus et est plus attractif que dans le passé. Afin que votre jeu se démarque, il doit tout faire : avoir un bon gameplay aussi bien que des visuels consistants et attrayants, ainsi que des sons et des musiques qui correspondent.

I-A - Obstacles communs

I-A-1 - Trop d'espoir

L'un des principaux problèmes des développeurs indépendants est qu'ils attendent trop d'eux-mêmes. Pour les développeurs seuls ou les petits studios, il est presque impossible de faire un jeu AAA possédant la qualité des grands studios. Vous devez essayer et viser les étoiles. Réaliser des jeux consiste en cela. Faites de votre mieux et repoussez constamment vos limites en améliorant vos talents… mais pensez de façon réaliste et réajustez vos attentes par rapport à vos compétences et votre budget. Ce sera un grand pas en avant pour réaliser le meilleur jeu que vous puissiez faire.

I-A-2 - Définissez un thème

La plupart du temps, la création d'un jeu arrive comme une étincelle. Nous avons une idée sur la façon dont le jeu devrait fonctionner et nous commençons à créer. La création concrète de graphismes dans les premières étapes du développement peut souvent mener à des problèmes, car le jeu évolue durant le développement. Habituellement, cela aide de créer un moteur de jeu et le cœur fonctionnel avant de commencer le travail sur les graphismes. Une fois que vous savez comment le jeu se joue, il est beaucoup plus facile de trouver un thème visuel qui corresponde à son ensemble.

I-A-3 - Consistance

La création d'un aspect consistant est un élément clé pour acquérir une bonne expérience de jeu. Cela commence avec l'icône, l'écran de démarrage et continue jusqu'à l'écran de gameover. Les erreurs les plus courantes sont :

- la surutilisation de polices : gardez-en juste deux ou trois pour l'ensemble de l'interface utilisateur (à moins que la police ne soit utilisée dans les images pour les boutiques/présentations/etc.) ;

- Les changements radicaux de lumière et de contraste : gardez les écrans sur un même niveau – vous pouvez progresser à travers le royaume des couleurs – par exemple en commençant avec un jeu fade qui devient de plus en plus coloré pour les boss ou scènes épiques ;

- Les effets Photoshop : ils sont amusants mais la plupart des « artistes » pensent que plus vous en utilisez, mieux l'image sera… Ma suggestion est de limiter votre utilisation à quelques effets que vous pouvez réutiliser et faire varier ;

- l'éclairage : regardez vos écrans et imaginez les sources d'éclairage nécessaires pour créer les effets de lumières, ombres des éléments du jeu et de l'interface utilisateur… C'est effrayant le nombre de fois où vous trouvez des lumières utilisées aléatoirement pour les objets qui apparaissent sur un même écran.

I-A-4 - Perte de focus

Il est très facile de se perdre avec les graphismes aussi bien qu'avec le code. Nous avons tous tendance à nous concentrer sur les éléments que nous aimons, tout en négligeant ceux que nous n'aimons pas. Généralement, un bon exemple est le système de menus/interfaces utilisateur. Ceux-ci sont habituellement implémentés vers la fin du développement tout en ayant une motivation très basse. Mais au final, c'est l'une des premières choses que le joueur verra et ces éléments peuvent grandement définir l'aspect du jeu.

II - Commençons

Le premier tutoriel repose sur Inkscape et utilise principalement l'outil de cercles (marqué en orange dans la boîte à outils sur la gauche) et l'outil de nœuds (marqué en gris).

Commencez avec un cercle.

Ajoutez un autre cercle plus petit de la même couleur et encore un, blanc, plus petit.

Passez au noir et ajoutez un autre cercle avec un cinquième cercle blanc pour le reflet de lumière.

Dupliquez les cercles de l'œil et déplacez-les de l'autre côté.

Ajoutez un petit cercle d'une couleur plus sombre au-dessus de l'œil.

Convertissez les cercles en chemins (Chemin/Objet en chemin) et utilisez l'outil d'édition de chemin pour le déformer.

Ajoutez un autre cercle et déformez ses nœuds supérieurs et inférieurs pour dessiner une bouche.

Dupliquez la bouche et changez la couleur de remplissage à blanc.

Créez un autre petit cercle noir pour ajouter quelques détails au visage.

… et notre personnage de jeu basé sur des cercles est prêt.

L'immense avantage des graphismes vectoriels est la facilité de modification.

Après avoir changé les couleurs des cercles, redimensionnez les cercles noirs et blancs.

… et ajustez la position pour avoir une autre expression faciale.

Dupliquez et redimensionnez les différents éléments permet des possibilités infinies.

Déformez les cercles pour avoir une bouche et des antennes.

… ou simplement en modifiant la couleur pour changer la personnalité du personnage.

Des images plus avancées peuvent être créées en utilisant des dégradés et en ajoutant des versions plus claires et plus sombres de la forme pour avoir un effet cartoon basique (plus d'information sur cela plus tard).

Un résultat très similaire peut être obtenu avec un outil de dessin (par exemple avec l'outil cercle de Gimp). Le processus de travail est quelque peu différent mais tant que vous gardez les éléments sur différents calques, c'est facile de les déplacer, altérer ou modifier.

Commencez avec un canevas vide (de préférence deux fois la taille de l'image du jeu) et créez un nouveau calque.

Au lieu de dessiner un cercle, nous créons simplement un masque circulaire.

… et utilisons l'outil de remplissage pour colorier le cercle.

Dupliquez le calque et redimensionnez-le de la moitié de la taille. Placez le nouveau calque à sa position.

Créez un autre calque et déplacez-le de l'autre côté.

Dupliquez et redimensionnez les calques une nouvelle fois. Utilisez les options couleur/colorier pour changer la couleur des duplicatas à blanc.

Répétez l'opération pour créer deux autres cercles noirs plus petits et deux blancs pour les reflets des yeux.

Dupliquez les cercles noirs et coloriez-les avec une teinte marron.

Redimensionnez la bouche et ajoutez un duplicata de calque blanc. Redimensionnez et tournez les sourcils.

Voici notre personnage de jeu créé entièrement en redimensionnant et manipulant une forme simple, sans même utiliser de compétence de dessin.

Cela conclut mon premier article. J'espère que vous vous amusez à refaire quelques-uns de ces tutoriels par vous-même et jouer avec Inkscape, Gimp et autres.

III - Remerciements

Cet article est une traduction autorisée de l'article paru sur 2D Game Art for programmers. Je remercie chaleureusement Chris Hildenbrand de nous avoir permis de le traduire.

IV - Commenter

Vous pouvez commenter cet article sur le forum.