Making of des graphismes de "Internship Adventure" - Page 1 - Sujet de discussion

Making of des graphismes de "Internship Adventure"

Dernier message
Portrait de Papou008
Inscrit le : 31/08/2014
Commentaires : 8
Messages : 44
#1
Message Sujet: Making of des graphismes de "Internship Adventure"     15/09/2015 à 10:08

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

Theme 4.50/5 (5ème position) Innovation 4.31/5 (6ème position) Overall 4.33/5 (9ème position) Humor 4.45/5 (14ème position) Graphics 4.65/5 (21ème position) Fun 4.07/5 (23ème position) Audio 4.22/5 (24ème position) Mood 4.23/5 (29ème position)

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

Préparation

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.

IMAGE(http://ludumdare.com/compo/wp-content/uploads/2015/09/Ref1.jpg)

Quelques références : Limbo, Badland & Donkey Kong Retuns

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.

Distribution des rôles

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.

IMAGE(http://ludumdare.com/compo/wp-content/uploads/2015/09/Internship_Roxane.jpg)

Internship_RoxaneRoxane travaillant sur la chenille

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.

Au boulot !

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.

IMAGE(http://ludumdare.com/compo/wp-content/uploads/2015/09/Internship_Lava.jpg)

Internship_LavaPartie de l'arrière plan du niveau de l'usine

IMAGE(http://ludumdare.com/compo/wp-content/uploads/2015/09/Internship_Forest.jpg)

Internship Adventure - Forest Partie du plan intermédiaire du niveau de la forêt

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.

Parallaxe

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.

IMAGE(http://ludumdare.com/compo/wp-content/uploads/2015/09/Parallaxe.gif)

Exemple de parallaxe sur un décor temporaire

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.

IMAGE(http://ludumdare.com/compo/wp-content/uploads/2015/09/Internship_Depth.jpg)

Les 4 couches de profondeur de la forêt

Ciel

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.

Texture

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.

IMAGE(http://ludumdare.com/compo/wp-content/uploads/2015/09/Intership_Sky.jpg)

Les ciels simple et texturés

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.

IMAGE(http://ludumdare.com/compo/wp-content/uploads/2015/09/Blend_Lightmap.jpg)

Lightmap utilisant le mode de fusion "multiplicatif ×2"

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

IMAGE(http://ludumdare.com/compo/wp-content/uploads/2015/09/Blend_Detail.jpg)

Texture de détail utilisant le mode de fusion "multiplicatif ×2"

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.

IMAGE(http://ludumdare.com/compo/wp-content/uploads/2015/09/Photoshop_File.png)
Exemple de "multiplicatif ×2" dans Photoshop

Dégradé

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.

IMAGE(http://ludumdare.com/compo/wp-content/uploads/2015/09/Filering.png)

Deux façons de zoomer sur la texture originale

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.

IMAGE(http://ludumdare.com/compo/wp-content/uploads/2015/09/Internship_DayNight.png)

Un simple dégradé permet de créer une transition fluide entre jour et nuit

Étoiles

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.

IMAGE(http://ludumdare.com/compo/wp-content/uploads/2015/09/Internship_Stars.gif)

Mouvement de la rotation des étoiles dans le ciel

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.

IMAGE(http://ludumdare.com/compo/wp-content/uploads/2015/09/Blend_add.jpg)

Exemple de mode de fusion en additif sans utiliser de transparence

Agencement des couches

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

IMAGE(http://ludumdare.com/compo/wp-content/uploads/2015/09/Internship_SkyLayers.png)

Couches utilisées pour composer un ciel du jeu

Éclairage

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.

IMAGE(http://ludumdare.com/compo/wp-content/uploads/2015/09/Internship_DayNightEnvironment.jpg)

EnvironmentEnvironnement de nuit et de jour

Premiers plans

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.

IMAGE(http://ludumdare.com/compo/wp-content/uploads/2015/09/Internship_Border.gif)

Contours classique VS Contours fondu

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.

IMAGE(http://ludumdare.com/compo/wp-content/uploads/2015/09/Internship_GameLayer.png)

Premier plan de la forêt

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.

IMAGE(http://ludumdare.com/compo/wp-content/uploads/2015/09/Intership_3D.jpg)

Rendus 3D brut

IMAGE(http://ludumdare.com/compo/wp-content/uploads/2015/09/Intership_3DComposite.jpg)

CompositeRendu 3D retravaillé sur Photoshop

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.

Mr Borbopopo

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.

IMAGE(http://ludumdare.com/compo/wp-content/uploads/2015/09/Internship_MrBorbopopo.png)

La première version possédait de petits bras

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.

IMAGE(http://ludumdare.com/compo/wp-content/uploads/2015/09/MrBorbopopo_Construction.png)

Formes composant Mr Borbopopo

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.

IMAGE(http://ludumdare.com/compo/wp-content/uploads/2015/09/MrBorbopopo_Mouth.png)

Différentes tailles de bouches de Mr Borbopopo

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.

IMAGE(http://ludumdare.com/compo/wp-content/uploads/2015/09/MrBorbopo_FinalSteps.png)

Étapes de finition de la sprite

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

Fin

C'est ici que ce long article prend fin.

IMAGE(http://ludumdare.com/compo/wp-content/uploads/2015/09/MrBorbopopo_Jump.gif)

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

IMAGE(http://ludumdare.com/compo/wp-content/uploads/2015/09/Photoshop_File.png)
La forêt

IMAGE(http://ludumdare.com/compo/wp-content/uploads/2015/09/Photoshop_File.png)
L'usine

IMAGE(http://ludumdare.com/compo/wp-content/uploads/2015/09/Flash_File.png)
Animation de Mr Borbopopo

IMAGE(http://ludumdare.com/compo/wp-content/uploads/2015/09/Photoshop_File.png)
Planche de Mr Borbopopo

1 commentaire
Portrait de Papou008
Inscrit le : 31/08/2014
Commentaires : 8
Messages : 44
Message Sujet: Re: Making of des graphismes de "Internship Adventure"     15/09/2015 à 14:54

Pour information, je part en voyage pendant trois semaines et ne serai probablement pas présent pour répondre à d'éventuelles questions.