IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Commençons… avec des cercles

Les deux auteur et traducteur

Traducteur : Profil ProSite personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

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).

Image non disponible Image non disponible
Commencez avec un cercle.Image non disponible
Image non disponible
Ajoutez un autre cercle plus petit de la même couleur et encore un, blanc, plus petit.
Image non disponible
Passez au noir et ajoutez un autre cercle avec un cinquième cercle blanc pour le reflet de lumière.
Image non disponible
Dupliquez les cercles de l'œil et déplacez-les de l'autre côté.
Image non disponible
Ajoutez un petit cercle d'une couleur plus sombre au-dessus de l'œil.
Image non disponible
Convertissez les cercles en chemins (Chemin/Objet en chemin) et utilisez l'outil d'édition de chemin Image non disponible pour le déformer.
Image non disponible
Ajoutez un autre cercle et déformez ses nœuds supérieurs et inférieurs pour dessiner une bouche.
Image non disponible
Dupliquez la bouche et changez la couleur de remplissage à blanc.
Image non disponible
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. Image non disponible
Image non disponible Image non disponible
L'immense avantage des graphismes vectoriels est la facilité de modification.
Image non disponible
Après avoir changé les couleurs des cercles, redimensionnez les cercles noirs et blancs.
Image non disponible
… et ajustez la position pour avoir une autre expression faciale.
Image non disponible
Dupliquez et redimensionnez les différents éléments permet des possibilités infinies.
Image non disponible
Déformez les cercles pour avoir une bouche et des antennes.
Image non disponible
… ou simplement en modifiant la couleur pour changer la personnalité du personnage.
Image non disponible
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.

Image non disponible Image non disponible
Commencez avec un canevas vide (de préférence deux fois la taille de l'image du jeu) et créez un nouveau calque.
Image non disponible
Au lieu de dessiner un cercle, nous créons simplement un masque circulaire.Image non disponible
Image non disponible
… et utilisons l'outil de remplissage pour colorier le cercle.Image non disponible
Image non disponible
Dupliquez le calque et redimensionnez-le de la moitié de la taille. Image non disponible Placez le nouveau calque à sa position.Image non disponible
Image non disponible
Créez un autre calque et déplacez-le de l'autre côté.
Image non disponible
Dupliquez et redimensionnez les calques une nouvelle fois. Utilisez les options couleur/colorier pour changer la couleur des duplicatas à blanc.
Image non disponible
Répétez l'opération pour créer deux autres cercles noirs plus petits et deux blancs pour les reflets des yeux.
Image non disponible
Dupliquez les cercles noirs et coloriez-les avec une teinte marron.
Image non disponible
Redimensionnez la bouche et ajoutez un duplicata de calque blanc. Redimensionnez et tournez Image non disponible 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. Image non disponible

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.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

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 ni 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.