Dans ce post, je vais vous parler de mon expérience en tant que graphiste au sein de la Ludum Dare #33 et vous exposerai certains procédés graphiques que nous avons utilisés dans notre jeu.
Nous étions deux graphistes à travailler sur le projet mais cet article ne concerne que ma propre expérience.

Le jeu en question est Internship adventure que nous vous conseillons vivement de tester avant de lire ce post.
Le jugement étant tombé ce matin à 3h, nous avons obtenu les très bons scores dans la catégorie jam (1526 participants) :

Les fichiers sources Photoshop et Flash sont fournis en fin d'article.

Pour ce jeu, nous ne voulions pas partir sur du pixel art (même si c'est une technique que j'apprécie beaucoup).
Nous nous sommes rapidement mis d'accord sur un style dont le premier plan serai traité sous la forme d'ombres chinoises tandis que les fonds seraient colorés et graphiques.

Cette direction artistique a avant tout été choisie pour nous simplifier le travail d'animation des personnages (processus toujours très long à traiter dans un jeu) tout en restant cohérente avec notre vision du jeu.
Ce choix nous permettait également de mettre en valeur des décors profonds sur lesquels nous pourrions passer plus de temps.

Nous avons également choisit dès le départ de créer de petits niveaux tenant sur un seul écran (non, nous ne sommes pas dans le LD 31 ^^) tel que des tableaux sur lesquels on pourrait s'éclater.
Le moteur utilisé nous aurait contrait à utiliser des tilesmaps sur de plus grands niveaux, or je refusait vivement d'envisager cette solution !
Ça tombait bien car le thème du jeu correspondait bien à ce choix.

Dans l'équipe, nous étions deux graphistes : Roxane et moi même (Pascal).
Nous nous sommes tout de suite mis d'accord pour travailler sur des tâches complémentaires afin de ne pas se marcher sur les pieds :
Roxane travaillerait sur les personnage et les animations tandis que je me concentrai sur les décors.

Comme vous le verrez par la suite, nous avons tout deux débordés sur le domaine de l'autre en seconde partie de la jam.

La majorité du travail sur les décors était classique et j'ai donc passé la plus grande partie de mon temps à peindre les différents plans à l'aide d'une tablette graphique sur Photoshop.
La finition des différents plans n'est pas parfaite, néanmoins, on a un résultat suffisant pour une gamejam.

Au delà de mes compétences artistique, je possède un certain nombre de connaissances techniques que j'avais envie d'exploiter, nous permettant d'aller plus loin dans la réalisation graphique du jeu. Je vais en lister un certain nombre dans les paragraphes suivants.

Il s'agit d'une technique très rependue dans l'animation et le jeu-vidéo permettant de donner de la profondeur à une scène.
L'idée est de réaliser plusieurs plans qui se déplacent à des vitesses différentes en fonction de leurs éloignements.

Bien que nous ayons choisit de partir sur des tableaux qui ne devaient pas excéder la taille d'un écran, j'ai insisté assez tôt dans le processus de création pour introduire un peu de parallaxe.
Cette technique apporte une profondeur supplémentaire dans l'image augmentant l'immersion du joueur et mettant plus encore les arrières plans en valeur.
Un premier plan était prévu avec la particularité d'être flou, mais le codeur n'a pas eu le temps de l'intégrer.

Le ciel n'a pas du tout été la partie la plus longue à réalisé, en réalité, ça a même été plutôt rapide à mettre en place, demandant simplement un peu de travail au codeur en plus du mien.

La direction artistique adoptée consistait à donner un aspect "fait à la main".
Plutôt que de partir sur de simple dégradés, nous sommes parti sur un effet de matière, mais là ou le procédé était intéressant, c'est que nous avons appliqué cet effet en temps réel dans le jeu à partir d'un simple mode de fusion (blend mode) "multiplicatif ×2". Ceci nous offrit une certaine flexibilité pour appliquer d'autres effets au ciel décris plus bas dans l'article.

Il s'agit d'un mélange malheureusement pas assez connu des développeurs qui permet d'assombrir comme d'éclaircir les pixels de l'image.
Ce procédé est par exemple utilisé pour simuler la lumière d'une lightmap.

Dans notre cas, nous l'avons plutôt utilisé pour rajouter du "grain" à la texture d'origine.

Bien qu'il ressemble un peu au mélange "Incrustation", ce mode de fusion n'existe pas naturellement dans Photoshop et pour le simuler il est nécessaire d'utiliser un calque d'effet supplémentaire.
Néanmoins, dans le code, son utilisation est beaucoup plus simple car il s'agit d'un mode de fusion standard qui était déjà utilisé dans certains jeux 3D des années 90.

Exemple de "multiplicatif ×2" dans Photoshop

La texture de dégradé du ciel a été pensée pour être à la fois très légère tout en permettant un cycle jour/nuit.
Même si la texture originale est minuscule (4×64 px), le filtering se chargera de lisser les pixels intermédiaires donnant un dégradé parfait.

Pour passer du jour à la nuit, rien de plus simple, il suffit d'appliquer le dégradé à un surface deux fois plus haute que l'écran, puis de décaler cette surface dans un sens ou dans l'autre.

Pour les étoiles, ça a été plus difficile.
En fait le plus dur était de convaincre le codeur de les intégrer car il n'avait pas que ça à faire, néanmoins, je le remercie car il a pris le temps de réaliser ce que j'avais dans la tête.

L'idée est proche de celle du dégradé, la grosse différence est qu'il s'agit de faire une rotation sur la surface plutôt qu'une translation tout en faisant changer son alpha progressivement.

Pour optimiser la mémoire, nous avons fait une texture qui boucle et se répète de 1024×1024 pixels.

Cette couche est traitée avec un autre mode de fusion très utilisé dans le jeu vidéo et plus particulièrement dans les FX : l'additif.

Le ciel est composé de quatre couches avec des modes de fusion bien précis.
Nous avons vu précédemment 3 des couches utilisées pour le ciel. Une quatrième fut utilisée pour rehausser les couleurs de la haute atmosphère avec le mode de fusion "multiplicatif ×2".

Lors du passage du jour à la nuit, nous avons vu qu'un certain nombre d'ajustements étaient appliqués au ciel, mais les plans intermédiaires sont également affectés.
Les deux couches intermédiaires sont simplement multipliées par un couleur blanche le jour, gardant l'éclairage originale de la texture tandis que ces dernières sont multipliées par une couleur bleue la nuit permettant une meilleure intégration.

Les premier plans devaient être traités sous la forme d'ombres chinoises, néanmoins, nous avons eu peur que ces derniers ne soient pas assez lisibles combinés avec les arrières plans.
Nous avons alors utilisé un contour blanc pour bien différencier les éléments gameplay des éléments décoratifs.

Nous devions mettre en place un système de contour plus complexe, permettant aux formes de se fondre les unes dans les autres.

Je l'avoue, les premiers plans sont la partie graphique dont je suis le moins fière et en réalité, c'est un peu normal car elle a été faite dans l'empressement à la fin de la jam.

Nous avons néanmoins tenté une approche en deux plans et je remercie Roxane qui a pu me donner un coup de main à l'élaboration de ce premier plan de la forêt.
Collaboration

Nous vous parlions dans le paragraphe précédent de l'aide de Roxane sur le premier plan de la forêt, mais elle m'aida également sur l'usine en réalisant des modélisations en 3D que j'intégrais dans la scène.

Une fois de plus ces travaux ont été réalisés en tout fin de production, quelques heures avant le rendu, et les finitions ne sont que très grossières.

Dès la fin du deuxième jour, je suis passé sur le deuxième monstre, abandonnant temporairement les décors pour donner un coup de main à Roxane.
J'ai eu la chance de pouvoir travailler dessus de A à Z.

Je suis d'abord parti sur une grosse tête de monstre qui en fin de compte ressemblait plus à un cyclope dans une coquille d’œuf (chacun le voir comme il l'entend).

J'ai mis beaucoup de temps à trouver une méthode d'animation satisfaisante. J'ai finalement décidé de le réaliser en vectoriel sur flash en profitant au maximum de mes connaissances en animation cartoon.

La silhouette fut animé assez facilement à l'aide d'images clés en décomposant le personnage en trois parties principales comme une sorte de bonhomme de neige. L’œil fut séparé de la tête afin d'augmenter l'aspect cartoon du personnage.
La bouche fut la partie la plus difficile à réaliser, car dessinée à l'aide de trais vectoriels sur chacune des 72 images de l'animation. Certaines frames d'animation ont d'ailleurs nécessité de modifier l'épaisseur du trais pour simuler une ouverture ou fermeture de la bouche.

Une fois les animations terminées, il restait encore un peu de travail.
Les frames ont été exportées sous la forme d'un grand nombre d'images png puis recomposées sous forme de planche à l'aide Graphics Gale.

Graphics Gale est un petit programme qui ne paie pas de mine avec son interface des années 90, mais il s'agit d'un outil très pratique pour l'animation et plus encore pour le pixel art. Je vous le recommande grandement, d'autant plus qu'il est gratuit sous réserve de ne pas vouloir exporter vos créations sous forme de gif animé ou de curseur.

La planche fut ensuite récupérée dans Photoshop et finalisée à l'aide d'effet automatique. L'avantage de travailler sur une planche d'animation est que les effets s'appliquent sur toutes les frames à la fois, évitant de faire des scripts en batch.

Seul quelques frames nécessitaient un petit ajout de blanc lorsque le contour n'était pas propre tel que l'image ci-dessus.

C'est ici que ce long article prend fin.

Je vous remercie pour votre attention et vous propose comme convenu les sources des deux niveaux et du personnage.

La forêt

L'usine

Animation de Mr Borbopopo

Planche de Mr Borbopopo