Ah ah, oui, c'est le problème ! Si l'on pouvait partager ce Making Of avec vous par télépathie, ça serait l'idéal Il faudrait trouver un Cube pour obtenir ce pouvoir...

Pour rappel, il existe un petit prototype qui date de février 2014. Même si le jeu complet devrait être mieux (optimisation, gameplay, etc), il illustre assez bien les explications sur les caméras et les vidéos de transition.
Le lien est en première page de ce forum, ou bien ici.
C'est sans doute plus facile avec un exemple de comprendre tout ce qui a été écrit jusqu'ici.

Cette fois-ci je voudrais expliquer simplement “Comment faire un joli rendu en 3D”. Ah le rendu ! Je ne dirais pas que c'est une passion (c'est l'ensemble du projet qui est passionnant), mais dans toutes les métiers de la 3D c'est mon préféré. C'est sans doute parce qu'il s'agit de l'étape cruciale où l'on quitte le monde des polygones gris, et où l'on découvre pour la toute première fois à quoi vont ressembler les scènes du jeu dans le projet final. Et puis cela me rappelle les heures passées à expérimenter des shaders et des lumières pour faire des images aussi belles que dans mes jeux et films favoris, et à régler les moteurs de rendu que sont Mentalray, Final Render et Vray, jusqu'à obtenir (enfin) le résultat souhaité. Je vous parle en chinois ? Alors voyons cela de façon plus simple et point par point.

Une fois que les caméras ont été placées dans la scène modélisée et texturée (voir le chapitre précédent), on a vite envie de savoir à quoi ressemblera la scène finale : est-ce que mon jeu sera beau ? Ici le mot “beau” implique forcément un point de vue subjectif, alors ci-dessous on se focalisera d'abord sur la technique sans prendre en considération les goûts de chacun, si vous le voulez bien.

Le rendu de base

A partir de maintenant, nous partirons du principe que vous avez assimilé ce qu'est la modélisation. Précédemment j'ai modélisé les différents environnements du jeu en 3D et placé les caméras (on oublie le fait que j'ai déjà montré des rendus - c'est à dire des images finales du jeu).

Lorsque l'on termine l'étape de modélisation, on a un résultat semblable à celui ci-dessous. Un décor très gris, cubique, qui est assez éloigné de ce que je voudrais obtenir dans un jeu relativement "réaliste". C'est ce que je vois en temps réel dans 3dsmax, avant d'avoir cliqué sur "rendu".

Maintenant voici la même scène, sans réglages, juste en cliquant sur "rendu" sans rien changer :

Pas de grosse différence (j'ai surtout ajouté les arêtes en noir pour vous aider à voir les polygones). Il va falloir tôt ou tard ajouter des textures et un éclairage.

Mais avant cela, il faut que l'on considère le nombre de polygones qui seront affichés à l'écran et pris en compte pendant le processus de rendu. Pour le moment on a des angles très visibles. On souhaite généralement que les modèles 3D soient les plus lisses possibles, arrondis, sans la moindre trace de polygone... à l'inverse de ce que l'on trouvait sur Nintendo 64 par exemple. Il faut ajouter un paramètre de "lissage" (= mesh smooth) sur les différents objets qui manquent de polygones et dont on veut casser les angles. Lorsque l'on règle ce paramètre de lissage, on peut choisir un certain nombre d'itérations qui définissent la quantité de polygones par objet. Plus on met d'itérations, plus il y aura de polygones, et plus les formes seront lisses. Mais en contrepartie, s'il y a trop de polygones, on s'expose à des erreurs au rendu (plantages), ou à des temps de rendu terriblement longs et ingérables, et il vaut donc mieux trouver le juste milieu.

Vous l'avez compris, l'étape de rendu n'est pas seulement une question de texture et de lampes : beaucoup de paramètres sont pris en compte par l'ordinateur, comme le nombre de polygones, les rebonds de lumière, les émissions de particules, et plein d'autres possibilités. En fait, le mot "rendu" englobe tous les calculs que peut faire l'ordinateur, bien que la plupart soient invisibles : le calcul de chaque élément de la scène est fait à ce stade. Pour produire une image "finale", il faut que l'ordinateur compile tout ce qui a été défini auparavant à chaque étape du projet.

Voici alors la même scène, après avoir réglé l'affichage des polygones selon le niveau de détails souhaité. Vous voyez la différence ?

Ajout de lampes

La première chose que l'on a envie de faire ensuite, c'est de se débarrasser de cette grisaille en ajoutant des textures; pourtant il me semble plus judicieux de travailler l'éclairage d'abord. La raison, c'est que sans textures on voit mieux les formes des objets, si bien qu'il est plus facile de définir l'endroit où placer chaque lampe et l'intensité des ombres projetées. Lorsque les textures sont placées, on fait moins attention aux détails de la lumière, car on se focalise sur d'autres détails des objets.

J'ai donc commencé par ajouter une petite lampe jaune sur chaque luminaire 3D de la scène. Voilà ce que ça donne :

Je trouve que l'ambiance est déjà plus personnelle ainsi. J'aime bien la façon dont ces petits lampions propagent leur lumière sur les troncs d'arbres. Après encore un peu de travail et l'ajout de certaines lampes, j'arriverai à obtenir quelque chose de sympa. En général il faut y aller à tâtons, en essayant de voir ce qui serait le plus logique dans le monde réel, et il est bien rare d'être satisfait du résultat du premier coup !

Textures

Il est enfin temps d'ajouter les textures ! C'est un processus assez long, que nous avons pu voir dans les chapitres précédents. En fait il y a 2 moments pour travailler les textures, selon les goûts et les cas : soit on les crée objet par objet (donc au fur à mesure de la modélisation), soit on les crée scène par scène (donc dans l'environnement complet). Il n'y a pas de règle, mais il est indispensable de retravailler les textures dans la scène complète, afin de trouver la bonne harmonie de couleurs et de matières à apporter.

Pour chaque élément d'un décor en 3D (herbe, arbre, lanterne, etc) on peut soit prendre des photos soi-même dans le monde réel et les plaquer sur les objets 3D, soit utiliser des librairies de textures sur internet. Généralement j'ai recours aux 2 solutions. Il n'est pas rare en vacances que je photographie des matériaux divers (roche, gazon, écorce d'arbre...) pour les ajouter dans ma propre bibliothèque, mais il est également très pratique de recourir aux textures d'internet qui facilitent grandement la production. On n'a pas toujours tout sous la main, et lorsqu'il faut texturer un objet spécifique, il arrive même de ne pas le trouver dans la vraie vie.

A titre d'exemple voici les textures des lanternes. Vous pouvez voir que j'ai utilisé 3 textures différentes sur cet objet : un métal un peu doré pour la sphère principale, un jaune luisant pour l'ampoule, et un bronze gris foncé pour le support vertical.

Lorsque l'on plaque ces textures sur le modèle 3D, elles vont encore manquer de réalisme. C'est là que l'on crée des shaders. Pour comprendre le concept, imaginez une photo (plate, donc) de votre main : la texture de peau semblera fausse, puisque ce n'est qu'une photo. Ca se verra qu'il ne s'agit pas de votre vraie main en relief. Ce problème revient lorsque l'on utilise les textures dans les scènes 3D : si on ne parvient pas à restituer certaines propriétés des matières qui composent les objets, alors les textures resteront sans vie. Autrement dit pour recréer de la vraie peau, il faut superposer plusieurs couches telles que le derme et l'épiderme, et c'est la même chose en 3D. Le shader, c'est la superposition de plusieurs photos qui donneront du réalisme à la matière. Votre texture principale (la photo de départ) est une couche de matière appelée "diffuse", à laquelle on ajoute de nouvelles propriétés : le spéculaire permet de faire briller la matière selon la lumière dans la scène (cela permet de définir si un objet est en métal, en plastique, en verre...). La réflexion ajoute des reflets, tandis que la réfraction permet de rendre l'objet transparent et de déformer ce que l'on voit à travers, comme dans un prisme en verre. Le "bump" ajoute un faux relief, permettant par exemple de creuser des rides plus réalistes dans un visage 3D, ou d'ajouter de la profondeur à l'écorce d'un arbre. Et ainsi de suite.
Il existe des milliers de possibilités et de combinaisons possibles de ces paramètres, permettant de reproduire de façon fidèle la plupart des objets qui nous entourent dans la vraie vie.

A noter : la plupart des effets de shaders (tels que la réflexion) ne sont visibles qu'une fois le rendu terminé. Ils n'apparaissent pas en temps réel dans les vues de 3dsmax, et il faut donc faire les réglages en plusieurs fois, en faisant des rendus "previews" sur des images fixes de plus petite taille.

Il faut répéter la création de textures+shaders pour chaque objet du décor, jusqu'à ce que la scène soit entièrement couverte. Voici le résultat dans le cas présent :

J'imagine qu'au milieu de tout ce fouillis, vous n'y voyez pas grand chose. J'ai donc fait une deuxième capture en cachant les arêtes des polygones, et en lissant les objets.

Je suis sûr que vous n'êtes pas encore convaincu, mais c'est normal : il s'agit toujours de ce que je vois en temps réel dans le logiciel, lorsque je travaille dans la scène. Alors si l'on veut voir le résultat final avec les lumières, les lissages et de belles textures bien nettes, il faut cliquer sur le bouton "rendu" et laisser l'ordinateur calculer quelques instants. Voici le résultat :

Temps de rendu

Tout ce que j'ai présenté sur les différentes étapes de rendu ci-dessus peut donner l'impression que c'est assez facile. Je confirme qu'il n'y a rien de très compliqué, et il s'agit surtout d'expérimenter différents réglages (position des lampes, placement des textures...), mais comme bien souvent il y a des subtilités. L'un des plus gros challenges que l'on rencontre, ce sont les temps de rendu. C'est l'ordinateur qui travaille, sans aucune intervention de l'utilisateur (qui a normalement tout réglé avant), et cela veut dire que selon la puissance de la machine, cela prendra plus ou moins de temps. C'est un facteur très très important à prendre en compte lorsque l'on travaille en pré-calculé, parce qu'une fois le rendu lancé, votre PC va passer son temps à calculer, ses ressources seront utilisées à 100%, et vous ne pourrez donc rien faire d'autre pour avancer dans votre jeu.

Quelqu'un qui travaille en 3D temps réel aura passé beaucoup de temps à optimiser ses scènes et à régler le nombre de polygones visibles à l'écran. Le résultat dépend donc beaucoup de la puissance de l'ordinateur qui fera tourner le jeu. Vous savez bien qu'un jeu qui tourne sur un PC puissant sera bien plus détaillé qu'un jeu qui tourne sur Nintendo DS. En quelque sorte, le rendu est simplifié et se fait en temps réel. Mais lorsque l'on utilise la 3D pré-calculée, il faut penser différemment. La puissance de la machine utilisée pour le jeu aura moins d'importance : la qualité visuelle des images du jeu sera donc à peu près le même sur toutes les machines, quelle que soit leur puissance, puisqu'il ne s'agit plus que d'afficher des images (autrement dit des jpg, bmp…). Ce n'est plus de la 3D une fois dans le jeu, mais bel et bien de la 2D avec un aspect de 3D.

Alors, si le PC de jeu n'a pas besoin d'être performant, ça veut forcément dire qu'il faut de la puissance à un moment donné pour préparer tout ça en amont : c'est bien là le but de l'étape de rendu. Or il est crucial d'optimiser les réglages de rendu (décrits plus haut) afin de ne pas rendre le calcul infaisable. S'il y a trop de polygones à lisser, qu'il y a des reflets dans tous les sens, qui passent à travers de la réfraction, et des objets qui projettent des ombres ultra-réalistes, cela nécessite forcément un plus gros temps de calcul. Et puisque pendant le calcul on ne peut rien faire, il faut l'anticiper pour lancer les rendus la nuit, et faire en sorte que tout soit terminé et exploitable le lendemain matin. Sans quoi le projet peut prendre du retard de jour en jour, jusqu'à devenir impossible à terminer.

La dernière image présentée ci-dessus a été calculée en près de 2 minutes (720 pixels de large). Vous voyez donc que le résultat n'est pas instantané. Vous me direz, 2 minutes ce n'est pas la mer à boire, mais on ne parle bien que d'une seule image.

Dans Catyph, j'ai près de 200 scènes avec une résolution de 1920 pixels de large. Chaque image de ces scènes prend, après optimisation, environ 3 minutes de calcul de rendu. Il faut aussi penser aux vidéos de transition entre chaque scène du jeu. Chacune de ces vidéos doit faire en moyenne 3 secondes, et est jouée à 25 images/seconde.

Maintenant, à nous de faire un rapide calcul. Si, comme je l'estime, j'ai 200 vidéos de 3 secondes à rendre, cela signifie que mon PC devra calculer près de 600 secondes de vidéo au total (200 vidéos x 3s). Si, pour chaque vidéo, il y a 25 images/seconde, cela signifie qu'il y a au total 15 000 images à rendre (600 secondes x 25 img/s). Vous me suivez ?

Enfin, comme je le mentionnais plus haut, mon PC a besoin de 3 minutes en moyenne (180 s) pour rendre 1 seule image. Cela signifie donc que, pour la totalité des vidéos de transition du jeu, il faudra 2 700 000 secondes (15 000 images x 180 s), c'est à dire 750 heures de rendu ! Cela correspond à 1 mois entier 24h/24 de calcul, uniquement dédié au rendu ! Une période pendant laquelle je ne peux pas travailler concrètement sur le projet. Ce mois entier de rendu est bien évidemment échelonné sur toute la durée de la production, et je fais en sorte de lancer les rendus la nuit pour disposer de la machine le lendemain.

Comme je le disais cela n'a rien de compliqué, mais il faut de l'organisation en conséquence, à moins de disposer d'une ferme de rendu ou d'une grosse puissance de calcul. Le plus compliqué à gérer, c'est lorsque l'on découvre une erreur dans les rendus et qu'il faut tout relancer.

La prochaine fois nous ferons un peu de retouche d'image dans After Effects afin d'améliorer ces rendus, pour redonner un peu d'éclat aux vidéos et images un peu ternes et ajouter quelques effets visuels.

Lorsque l'on travaille en 3D et que l'on veut créer quelque chose de réaliste et de joli, il y a 2 solutions :
1 - Travailler chaque détail d'une scène dans le moindre détail jusqu'à ce que tout semble parfait.
2 - Utiliser un logiciel de retouche d'image pour corriger les défauts et tenter de rattraper des problèmes qui n'ont pas été détectés à temps.

Dans le cas d'un jeu en 3D temps réel, on est dans le cas n°1 car une fois le jeu en mouvement, le joueur peut tout regarder à 360°, si bien que le moindre défaut dans les textures, les objets et les éclairages est immédiatement visible. Par chance en pré-calculé, je suis plutôt dans le cas n°2. Cela ne veut pas dire que le travail de modélisation/éclairage/rendu doit être bâclé ! Mais j'ai une ultime chance de "corriger" un problème de dernière minute. C'était particulièrement simple dans ASA: A Space Adventure, puisque le jeu était entièrement constitué d'images fixes : je pouvais retoucher chaque image du jeu dans photoshop (ou équivalent). Dans le cas de Catyph, c'est un peu plus compliqué à cause des transitions vidéos : je ne peux pas supprimer un pixel mal placé en utilisant l'outil tampon dans photoshop, puisque les vidéos du jeu sont des suites d'images : il y a du mouvement (le pixel mal placé - s'il existe - se déplacera à l'écran). Il reste heureusement bien des façons de "rattraper" des erreurs de rendu dans des vidéos.

Quand on travaille avec des vidéos, le montage des plans est normalement réalisé pendant l'étape de post-production, c'est à dire lorsque tout le contenu visuel a été créé et est prêt à être utilisé. Il semble difficile d'imaginer qu'un réalisateur de film va faire le montage de ses plans avant qu'ils aient été filmés (mis à part en se projetant avec un storyboard mais c'est un autre sujet) : c'est pour cela que dans le monde de l'animation, il existe l'étape de post-production, afin de faire le montage des plans définitifs qui ont été créés durant l'étape de production. Une partie de l'équipe fait les modélisations, les animations et les rendus (= production) et une autre partie de l'équipe s'occupera plus tard du compositing, des retouches et du montage (= post-production). Ici comme je travaille seul, j'ai plutôt choisi de traiter la retouche vidéo ("compositing") immédiatement, pendant l'étape de production, parce que c'était plus facile pour moi de découper les plans pour les intégrer ensuite dans le moteur du jeu Visionaire (voir le chapitre sur les caméras et le découpage en séquences). Quoi qu'il en soit, il n'y a jamais de façon précise de faire les choses et seul le résultat compte. Comme toujours jusqu'ici, tout ce que j'écris ne concerne que ma propre méthodologie, et il ne s'agit en aucun cas de règles à suivre à la lettre dans le développement d'un jeu de ce type. Ce que je vous décrirai ensuite sur la "retouche" de vidéos correspond donc aux différents éléments que j'ai choisi de modifier afin d'améliorer la qualité visuelle du jeu, tout en prenant en compte les restrictions techniques liées au travail de vidéos plutôt que d'images fixes. Les principales modifications concernent : le changement de teintes/saturation, de contraste, l'utilisation de masques pour corriger des bugs d'affichage, l'ajout d'effets spéciaux, l'utilisation de calques et de passes de rendu, ou encore la modification ou l'ajout de ciels et d'arrières-plans…

Pour bien se remettre dans le contexte : à la fin de la partie précédente, je vous ai présenté le rendu suivant, qui est un rendu brut (tel qu'il est sorti de 3dsmax) :

Ce rendu nécessite certainement d'être amélioré sur certains aspects, et je me concentrerai au moins sur la profondeur, l'ajout de contraste, et un ajustement des couleurs. Il faut toutefois être conscient qu'à ce stade, on ne peut plus changer l'éclairage 3D, et la seule chose que l'on peut faire désormais est de jouer sur des dégradés sombres/clairs pour simuler un éclairage différent, afin de mettre en valeur certaines parties de l'image si besoin. L'autre solution pour revoir l'éclairage est bien entendu de relancer le rendu 3D, mais si vous avez suivi le chapitre précédent, vous avez compris que cela nécessite de longues heures de calcul. Bien souvent, je ne peux pas me permettre de relancer un rendu déjà terminé (à moins qu'il y ait vraiment un problème flagrant), étant donné que d'autres sont en file d'attente (--> les autres décors du jeu). C'est donc là l'intérêt du "compositing".

Voyons maintenant les différentes possibilités à ma disposition pour améliorer une vidéo dans After Effects. C'est donc la partie que j'appelle "compositing" (désolé de me répéter !). Pourtant ce nom n'est pas des plus approprié lorsqu'il ne s'agit que de quelques changements de couleurs et de contrastes. On parle souvent de compositing lorsqu'il y a une image à recomposer à partir de plusieurs éléments séparés (plusieurs calques/couches, un matte painting, etc.). Je vais malgré tout conserver ce terme qui résume bien l'idée générale de cette étape de production, alors voyons en quoi cela consiste.
 
L'idée la plus simple, pour redonner un peu de personnalité à une image, est de travailler ses couleurs. Je considère personnellement que l'image de départ (voir ci-dessus - le rendu brut) tire trop vers le jaune. Les tons jaunes sont intéressants, parce qu'ils rappellent le soleil, l'été, la chaleur, et toutes sortes de choses positives et agréables. Mais si l'on ne fait pas attention, les tons jaunes peuvent aussi tendre vers des connotations peu souhaitables, telles que, par exemple, un t-shirt blanc qui serait délavé et trop vieux. Le jaune rappelle la saleté d'une certaine façon, et c'est un peu la sensation que j'ai en regardant le rendu brut ci-dessus. Pour parler clairement et de façon un peu crue, un noir jauni tirera vers le caca d'oie, et un blanc jauni vers du pipi de chat. J'ai donc envie de modifier la teinte jaune pour qu'elle tire d'avantage vers le rouge orangé, rappelant ainsi un soleil couchant ou une fin d'après-midi. Au cœur d'une forêt, cela sera plus agréable, étant donné que je ne souhaite pas trop aller dans les tons verts, qui rappellent trop les forêts terrestres et la chlorophylle des arbres. Par ailleurs le ciel de cette région, Saad, est de couleur jaune, apportant beaucoup de chaleur dans les décors.
 
Dans l'image suivante, le résultat est délibérément exagéré, afin de rendre le changement évident.

Malheureusement, changer les couleurs est bien souvent insuffisant pour améliorer une image ou une vidéo. C'est là qu'il devient intéressant d'avoir recours aux effects spéciaux (FX). Les FX sont de différentes catégories et l'on peut citer par exemple le fameux "lens flare" qui simule la réflection des rayons du soleil dans l'objectif d'une caméra. Mais il peut aussi s'agir de fumée, de particules de toutes sortes, de rayons lumineux à travers les branches d'un arbre, d'éclairs électriques… Il y a probablement des possibilités infinies lorsque l'on commence à jouer avec les paramètres d'After Effects.

A nouveau j'ai délibérément exagéré le procédé dans l'image d'exemple ci-dessous. J'ai ajouté des rayons de lumière qui passent à travers les feuilles, ainsi qu'un lens flare sur la lanterne. Pour l'image finale, il faudra bien sûr que ce soit beaucoup plus subtile.

On peut également utiliser des flous pour masquer des bugs de rendu. Les flous sont vraiment très pratiques lorsqu'une texture n'apparait pas comme elle devrait, et sont fréquemment utilisés pour éviter de relancer un rendu 3D.
Ils sont également très utiles pour aider le joueur à se focaliser sur une partie très précise d'une image, en "masquant" d'une certaine façon le premier ou l'arrière-plan (ou les deux à l'occasion). Et puis les flous apportent généralement un certain cachet à une image et peuvent être vraiment agréables à regarder.

Dans ce nouvel exemple (exagéré), j'ai flouté les bords de l'image, nous permettant d'oublier un peu la présence des arbres de chaque côté, afin que l'on se focalise sur le chemin central.

Je terminerai avec 2 filtres très utiles. Il arrive fréquemment que les rendus bruts en 3D manquent de précision dans les contours des objets (cela peut être dû à un réglage d'anti-aliasing, permettant de trouver un bon rapport entre le temps de rendu et la qualité finale), auquel cas nous pouvons avoir recours à un filtre d'accentuation de la netteté (sharpen).
En complément, j'aime mixer les filtres de "grain" qui permettent de dégrader une image à la façon d'un véritable objectif de caméra, en ajoutant du bruit, du grain, ou en diminuant volontairement la qualité de l'image elle-même comme le ferait une télévision.

Ces 2 possibilités (netteté et grains) sont très pratiques, et c'est d'autant plus vrai dans le cas d'un jeu de Science-Fiction, où l'atmosphère est parfois volontairement mystérieuse, voire angoissante.

Parmi les plugins que j'ai achetés pour After Effects et qui me servent souvent dans Catyph, je pourrais recommander Trapcode Particular, Reelsmart Motion Blur et Videocopilot Twitch pour les plus connus. Il existe des centaines de plugins compatibles avec After Effects (plus ou moins utiles), et je pourrais encore conseiller de jeter un coup d’œil aux suites Sapphire et Red Giant.

C'est à peu près tout ce que je peux présenter parmi les effets spéciaux. Il y a toutefois des techniques plus avancées que j'utilise à chaque étape, en utilisant ce que l'on appelle généralement des "passes" de rendu. Ainsi j'ai souvent recours à une passe d'Ambient Occlusion et à une passe de Z-depth. Travailler avec des passes de rendu donne bien plus de sens au terme “compositing”, puisque l'on va recomposer une image à partir de plusieurs images différentes.

Sur le site core-cg.com, j'ai trouvé un bon condensé des différentes passes de rendu que l'on peut sortir de 3dsmax (et de la plupart des logiciels de 3D) :

http://core-cg.com/documentation/_static/contact_sheet.jpg

Généralement on utilise ces passes en les superposant, à l'aide des différents réglages de calques disponibles (multiplication, soustraction, luminosité, écran, etc...). Si vous avez déjà utilisé photoshop, vous comprenez sans doute ce dont il s'agit. C'est toutefois une partie un peu plus technique, et je souhaitais garder ce "making of" relativement simple d'accès.
Pour faire simple et comprendre rapidement l'usage des passes de rendu (qui représentent un formidable outil), on peut prendre l'exemple du Z-depth cité plus haut. Il s'agit ni plus ni moins d'une image en dégradés de gris qui simule la profondeur de la scène par rapport à la caméra. Plus on s'éloigne de la caméra, plus c'est sombre, et plus on s'approche, plus c'est clair. Cela offre de nombreuses possibilités, comme la création d'un brouillard lointain, l'ajout de flous d'objectif, ou encore des changements de luminosité selon la distance d'affichage. La plupart des artistes 3D qui font des rendus réalistes ont recours au Z-depth d'une façon ou d'une autre pour apporter du réalisme à leurs images.

Passe de Z + rendu brut.
Utilisation du Z pour flouter selon la distance.
 
Pour terminer, je vais simplement vous présenter le résultat du compositing. Je n'ai pas utilisé tous les effets cités plus haut, car ce n'est pas toujours judicieux. Par ailleurs je n'ai pas souhaité aller trop loin et risquer de dégrader la qualité de l'image. Voici donc le comparatif entre le rendu brut 3D, et l'image retouchée pendant cette étape de "compositing".

J'espère que vous avez compris le fonctionnement de cette étape et son intérêt. C'est la fin de l'étape de Production, nous avons fait le tour de toutes les techniques requises pour créer les graphismes du jeu. Je n'ai plus qu'à appliquer ce processus complet pour chaque région du jeu afin de créer les différentes zones à visiter dans CATYPH !

La prochaine fois nous passerons à l'étape de "post-production" et nous verrons comment utiliser tout ce travail de création 3D dans le moteur du jeu : Visionaire Studio.

Je sais bien que tout ce que j'ai écrit jusqu'à maintenant n'était pas toujours précis ("professionnel"), mais j'espère que vous avez compris l'idée générale. C'est difficile de synthétiser plusieurs mois de travail sans faire d'erreurs, en vulgarisant les étapes pour que vous puissiez tout comprendre, quel que soit votre niveau en développement de jeux.

Précédemment nous avons vu la plus grosse partie du développement : la création du monde en 3D. Ce monde, après l'étape de rendu, n'est désormais plus qu'une série d'images "plates" aux formats jpg et png, et des vidéos avi. La notion de 3D n'aura bientôt plus lieu d'être évoquée, puisque les données relatives aux axes X, Y et Z, aux polygones et aux éclairages dynamiques seront perdues définitivement (à moins de revenir dans le logiciel de 3D), et nous travaillons désormais avec des méthodes 2D qui sont valables pour tout type d'image : photos, dessins... et pré-calculé, comme dans notre cas précis.

Il est temps de remettre un peu d'ordre dans tous les éléments créés jusqu'ici pour les utiliser dans les prochaines étapes : les importer dans le moteur de jeu (Visionaire Studio dans le cas présent). Si vous vous souvenez, j'avais anticipé ce travail dans l'étape 3, lorsque j'ai créé les caméras : j'ai expliqué pourquoi je découpais les scènes en plusieurs séquences vidéos + images fixes. N'hésitez pas à retourner brièvement consulter cette section (Production, 3 - caméras) si vous pensez en avoir besoin.

A ce stade, les rendus sont sensés être terminés, et mon ordinateur n'a plus besoin de tourner toutes les nuits. Toutefois nous devons quand même nous assurer que tout est correct, qu'il ne manque rien, et qu'il n'y a pas de gros bug graphique.
Cela peut se faire au fur à mesure de la post-production.

Tout en vérifiant nos rendus, nous devons nous assurer qu'ils permettent de créer les énigmes et le jeu correctement. Prenons par exemple notre première énigme. Elle est facile à créer et à programmer, avec juste quelques interrupteurs à allumer ou à éteindre.
Voici une capture d'écran de cette énigme comme on la voit dans les bandes-annonces du jeu, ou dans le prototype jouable :

Ceci est assez simple à scripter dans Visionaire. La chose la plus importante est de bien préparer les différents éléments qui seront animés à l'écran, ou qui seront interactifs. Si on regarde l'image du puzzle ci-dessus, on sait tout de suite que parmi les éléments interactifs il y aura les interrupteurs, l'ampoule à gauche qui devra s'allumer ou s'éteindre, et les icones d'aides visuelles (appelés "hotspots" - il s'agit des flèches et curseurs qui indiquent où cliquer - pas forcément très visibles ici en image fixe).

Chacun de ces éléments interactifs doit être prévu dans une image à part. Quant à l'image de fond, elle sera rendue en un seul morceau. Nous ajouterons les éléments séparés par dessus, en PNG avec alpha (transparence), comme des calques devant un arrière-plan dans Photoshop par exemple. Pour simplifier, on superpose les couches (interrupteurs), de façon à pouvoir interagir avec chacune d'entre elles séparément.

Afin de pouvoir inclure et utiliser tous ces éléments, il faut bien sûr anticiper leur création au moment des rendus (en production, c'est à dire bien plus tôt).
Voici la scène 3D d'origine de cette énigme (on revient temporairement en arrière, en production) :

Dans cette scène, j'ai déjà sélectionné (en blanc) certaines des parties interactives qu'il nous faut séparer. Je vais donc les isoler une par une (cacher le reste du décor) et faire un rendu en PNG au cas par cas.

Cela permet d'obtenir les pièces suivantes :

Le contour blanc est supposé transparent.

Je dois aussi anticiper le résultat à l'écran lorsqu'on allumera l'ampoule. Là je ne peux plus utiliser la transparence des PNG, car l'ampoule pourrait projeter de la lumière et des ombres, ou modifier les objets alentours (dans ce cas précis, elle crée un large halo lumineux). Je n'ai donc guère d'autre choix que de rendre une image jpg assez large, dont je couperai tout ce qui ne change pas à l'écran :

Cette image devra être placée de façon très exacte au-dessus de l'ampoule éteinte, aux bonnes coordonnées x et y. Elle est invisible (masquée) lorsque l'ampoule est éteinte, et s'allume lorsque l'énigme est réussie. Pour cela, une variable passe de 0 à 1, pour signifier que c'est le bon moment pour montrer l'image allumée. Nous y reviendrons.

Maintenant que nous avons isolé chacun des éléments du puzzle, on peut les cacher dans la scène 3D d'origine, et faire un rendu de l'arrière-plan :

Normalement tout est prêt : on pourra par exemple placer les interrupteurs devant cet arrière plan (vous voyez, ils ne sont plus là, il ne reste que leur support sphérique).

Tout ce qu'il reste à faire, c'est préparer les icones pour les "hotspots" (zones cliquables) et les effets spéciaux (FX).  Le seul FX de cette scène est la pluie au premier plan qui coule sur la visière en verre du cosmonaute. Je l'ai créée dans After Effects en mixant plusieurs calques avec des masques animés et en utilisant le plugin Particular. Cette animation sera chargée en mémoire en permanence dans la région Kynan, alors elle doit être la plus légère possible (donc courte). Elle doit également être prévue pour tourner en boucle car c'est une pluie incessante. Pour cela, la première et la dernière image de la séquence de pluie doivent être identiques.

Voici une image extraite de la séquence de pluie :

Là encore, les contours blancs sont sensés être transparents.

J'ai utilisé le même procédé dans After Effects pour créer les hotspots, c'est à dire les flèches animées et les points d'actions :

Et ainsi nous avons tout ce qu'il nous faut.

Je pense que vous avez deviné la dernière étape : nous allons assembler l'énigme en empilant tous ces éléments sur des calques séparés dans Visionaire.

Voici l'assemblage des différents calques que nous venons de créer :

Cette image contient tout ce dont nous avons besoin en cours de jeu. Il ne manque plus qu'une chose : créer les scripts et les actions qui permettront de rendre l'énigme interactive. En gros, anticiper les différents scénarios possibles : que se passe-t-il lorsque l'on clique sur un interrupteur plutôt qu'un autre ? Et sur deux en même temps ? A quel moment l'ampoule s'allume-t-elle ? Etc.
Ce sera le sujet de la prochaine partie.

On a un peu abandonné la traduction du Making Of en français, mais il était presque terminé. On reprendra peut-être un jour quand on sera plus disponibles, si ça intéresse suffisamment de monde. Quoi qu'il en soit, Catyph est terminé et sortira sur Steam le 11 Mai, textes en français, pour Windows. Le jeu est vraiment grand et long pour un jeu indé (comptez au strict minimum 10 heures pour en venir à bout), et inclut une soluce intégrée en mode Normal. Amateurs de Science-Fiction, à vos agendas !

Catyph est sorti il y a plus d'un mois, mais il n'est pas trop tard pour découvrir le jeu ! Justement, il existe désormais une démo jouable à télécharger sur Steam pour se faire une idée (la soluce existe en ligne par ici - en anglais, mais google trad devrait suffire à vous débloquer si besoin)

Par ailleurs, nous vous proposons un petit défi. Le meilleur participant pourra gagner un cadeau !

Vous n'êtes pas trop fan des jeux d'énigmes? Dans la version complète de Catyph, vous avez la possibilité de jouer à un mini-jeu d'arcade pour récupérer des points et débloquer des astuces. Avec le collectif The Icehouse, nous avons décidé de vous offrir une version "standalone" de ce mini-jeu pour fêter les vacances d'été ! Vous pouvez télécharger Super Blue Matter ici.

Super Blue Matter vous place aux commandes d'un vaisseau spatial dans un jeu de scoring 2D très simple. Avec les flèches gauche/droite de votre clavier, vous devez éviter les dangereuses météorites, et collecter autant de Matière Bleue que possible.

Ce jeu orienté arcade/réflexes est assez dur, et vous pourriez avoir besoin d'essayer plusieurs fois pour tenir les 30 seconde de chaque partie !! Mais n'abandonnez pas trop vite : dans ce jeu, tout est généré aléatoirement, si bien que chaque partie est différente de la précédente : parfois plus facile... parfois plus dure !

Le vrai défi pour le développeur lors de la création de Super Blue Matter a été de créer ce jeu d'arcade avec Visionaire Studio, un moteur dédié à la création de jeux d'aventure point & click (une toute autre approche). C'était donc très intéressant de chercher des astuces pour développer ce jeu dans un style totalement différent.

Le développeur de Catyph, Simon, a aussi un défi à vous proposer :

Faites un nouveau Score dans Super Blue Matter! Un score supérieur à 200 000 est très bon.
Serez-vous protégés par la force ?
Partagez vos scores avec nous sur le forum Steam!

Postez une capture d'écran de votre Score, et nous pourrions même donner un petit cadeau au meilleur joueur d'ici quelque temps !

On en profite pour remercier toutes les personnes qui nous ont encouragé pendant la création de Catyph. Ca a été un sacré travail, et nous avons appris un peu plus chaque jour. Rendez-vous dans quelques mois avec un nouveau jeu soutenu par The Icehouse, sans doute bien différent !