Posts Tagged 'didacticiel'

Tutorial : l’Éclairage en level design (3ème partie)

L'interface de l'éditeur de niveaux de jeux vidéo UnrealEd, avec une map chargée
Sommaire :
Introduction
1. Théorie
2. Pratique
– 3. Des Cas particuliers (le présent billet)

7 ) Éclairage extérieur :

Avec l’introduction, dans Unreal Tournament 200x, de l’outil de modelage de terrains, de plus en plus de maps en extérieur ont vu le jour, le mode de jeu Onslaught en étant l’apothéose, d’où la nécessité de fournir aux mappers des outils adéquats pour ce genre de cadre. L’acteur qui nous concerne principalement ici est le Sunlight : celui-ci doit impérativement être placé dans la Skybox, il n’éclairera donc votre map qu’à travers les surfaces BSP réglées en Fake Backdrop. De sorte que si vous ne voyez pas sa lumière après l’avoir placé dans votre map et avoir fait un Build Lighting, il y a de bonnes chances que le problème vienne de l’un ou l’autre de ces paramètres.

Quelles sont les différences entre un Light Actor normal et le Sunlight ? Le premier a une portée limitée mais il éclaire à 360°, le second a une portée illimitée mais il n’éclaire que dans une certaine direction – les rayons de lumière qu’il produit sont tous parallèles et, par conséquent, les ombres correspondantes le sont aussi ; de même qu’un StaticSpot, il devra être orienté dans une direction précise. C’est tout. Si les différences sont minimes, leurs conséquences sont spectaculaires et extrêmement pratiques : alors que sur Unreal 1 et Unreal Tournament 99, les mappers devaient lutter avec d’innombrables Light Actors, le plus souvent réglés en LE_Cylinder et en bDirectional = True afin de les orienter dans une direction précise, il suffit maintenant de n’en placer qu’un seul. Le gain de temps est donc considérable.

Vous pouvez bien sûr, et dans une certaine mesure c’est même attendu, utiliser chacun de ces acteurs suivant ses spécificités propres : ce n’est pas parce-que vous avez un ciel dans votre map que la lumière « tombant » de celui-ci doit forcément provenir d’une Sunlight. (Et puis maintenant que j’y pense, la lumière d’un ciel est-elle obligée de « tomber » sur le map ? Y-a-t-il une raison autre qu’une volonté de réalisme pur et dur pour ne pas créer un cadre utilisant une lumière provenant de sous les pieds des joueurs ? Je vous laisse murir l’idée : l’interversion, base des contrastes d’un certain point de vue, est souvent une immense source de créativité…) Les gens qui ont longtemps mappé sur le Unreal Engine 1.0, parce-qu’ils ont dû apprendre à contourner la difficulté de l’absence de Sunlight, ont souvent un vaste panel de techniques à leur disposition pour ce type de situations ; ainsi Rogelio Olguin, alias Desperado#2, nous en fait une brillante démonstration dans DM-1on1-Desolation :

Cliquez sur l'image pour la voir en plus grand

Cette map, tout à fait spectaculaire et vibrant témoignage d’un réel talent, est entièrement éclairée « à l’ancienne » : en dépit de ses nombreuses vue sur une Skybox grandiose, vous ne trouverez ici aucune Sunlight. Pourquoi l’auteur a-t-il fait l’impasse sur un outil aussi pratique d’utilisation, aussi précis, aussi sûr ? Précisément, je crois, parce-que l’auteur se montre là particulièrement doué et préfère « dessiner » lui-même les ombres sur le sol plutôt que de laisser une machine le faire à sa place : le Light Actor qui se trouve tout en haut au-dessus de cette vaste baie vitrée éclaire en tous sens, quoique ce n’est pas tout à fait exact puisqu’il est paramétré en LE_Cylinder mais le fait est que ses ombres ne sont pas exactement parallèles, ce qui permet d’introduire dans cette zone des effets d’ombrage beaucoup plus sensibles car moins mathématiquement exacts que ne le seraient ceux d’un Sunlight. Une autre raison concerne également la disposition des fenêtres bien sûr : celle-ci s’ouvrant tout autour du map, il était impossible pour l’auteur d’utiliser un Sunlight sans tomber dans un véritable casse-tête. Voyez comment un auteur qui sait ce qu’il veut en terme d’architecture parvient à contourner le problème de l’éclairage par une solution simple, les meilleures de toutes… Il vaut de noter que l’attitude de Desperado#2 est ici l’inverse de celle que je décrivais au début de ce tutorial, à savoir qu’il faut penser l’architecture de la map en fonction de son éclairage et pas l’inverse, mais l’auteur n’en est pas à son coup d’essai ; de plus je crois vous avoir déjà dit que l’Art n’est pas une science exacte non plus.

Quelques choses à savoir à propos du soleil et, en règle générale, des éclairages venant des astres :

– il va de soi que la position du soleil dans le ciel varie en fonction du moment de la journée, de la latitude et des saisons.

– puisque le moteur Unreal ne gère pas la radiosité, l’AmbientLighting est certainement attendu dans un cadre en extérieur, mais pas forcément indispensable non plus selon votre maîtrise du sujet.

– une simple texture de Corona disponible dans les packages de textures officiels suffit à représenter le soleil dans une Skybox, ce n’est pas la peine de vous lancer dans la modélisation d’un static mesh pour ce genre de « détail » auquel les joueurs ne prêteront que très peu d’attention, à moins que votre map ne se situe tout prés d’une étoile, voire carrément à sa surface…

– la lumière du soleil n’est pas blanche, en fait elle est d’un jaune pâle presque blanc mais dont le ton Jaune est prépondérant : c’est pour cette raison qu’on a l’air d’un cadavre lorsqu’on se regarde dans le miroir de la salle de bains sous la lumière d’un néon qui est généralement tout à fait blanche. C’est aussi pour cette raison que les peintres dignes de ce nom travaillent toujours à la lumière naturelle, et non à celle d’une bougie ou, pire, d’une lampe électrique (un problème qui ne vous concerne pas vraiment puisque vous travaillez normalement sur un écran dont l’image n’est pas affectée par la lumière ambiante, mais c’est toujours bon à savoir au cas où vous souhaiteriez exprimer votre créativité picturale sur d’autres supports).

– la lumière de la lune a la même couleur que celle du soleil puisque c’est celle-ci qu’elle nous renvoie par réverbération : on admettra donc qu’elle soit un poil plus sombre compte tenu de la couleur grisâtre du sol lunaire. Par contre la quantité de lumière qu’elle nous renvoie est directement proportionnel à sa taille : une demi-lune ne renverra pas autant de lumière qu’une pleine lune par exemple, et ainsi de suite ; dans tous les cas, elle ne peut pas être égale à un éclairage solaire, pour des raisons évidentes. D’autre part, les ambiances nocturnes étant souvent éclairées de bleus – probablement parce-que les nuits sont plus fraîches que les journées – il peut être bienvenu de déroger à la règle du réalisme et d’utiliser des tons de Bleu pour représenter la lumière lunaire au lieu de tons de Jaune ; le choix vous revient quoiqu’il en soit…

– la lumière des autres planètes et celle des étoiles sont parfaitement négligeables mais si votre nuit est sans lune, il peut être bienvenu de « fausser » les choses pour ne pas avoir une map trop sombre

– par temps nuageux, la lumière du soleil tend vers le Bleu – elle s’assombrit, donc – et, surtout, les ombres sont beaucoup plus diffuses, un détail qu’on oublie souvent ; si c’est carrément une tempête, par contre, il n’y a aucun risque à utiliser un Gris sombre.

– les diverses particules flottant dans l’air – qu’un simple Fog suffit à représenter – auront vraisemblablement une influence sur la couleur du soleil, jusqu’à la teinter d’orangés voire de marrons ; à noter que sur notre planète, la couleur de la molécule d’oxygène (un bleu azur) conditionne la plus grande partie de la couleur du ciel et affecte d’une manière non-négligeable la couleur de la lumière solaire (dans l’espace, la lumière du soleil est beaucoup plus crue, voyez des reportages récents sur l’exploration spatiale pour plus de détails) ; sur des planètes extra-terrestres, c’est à votre choix…

– à l’aube et au crépuscule, la lumière du soleil tend vers l’Orange ou carrément le Rouge beaucoup plus que le Jaune ; elle ne sera certainement pas aussi pâle qu’en plein midi non plus d’ailleurs – la raison en est que selon la position du soleil dans le ciel, l’épaisseur de l’atmosphère diffère : plus celle-ci est importante, plus elle retient des couleurs, jusqu’à ce qu’il ne reste plus que les Rouges (encore une fois, ces couleurs peuvent varier drastiquement sur d’autres planètes, suivant la couleur de l’étoile de base – il peut même y en avoir plusieurs – jusqu’à la composition atmosphérique de la planète concernée) ; voyez le schéma suivant pour plus de détails :

Cliquez sur l'image pour la voir en plus grand

– et tant que j’y suis, c’est exactement l’inverse pour l’éclairage sous-marin : plus vous plongez profond et plus la lumière tend vers le bleu ; non parce que l’eau est bleue (en fait, elle n’a aucune couleur : quand vous voyez la mer ou l’océan bleu, vous voyez juste la couleur du ciel reflétée sur la surface de l’eau…), mais simplement parce que l’eau a la capacité physique d’absorber le Rouge…

8 ) Les ombres : quelques trucs à savoir… :

Si les ombres sont fondamentales pour poser certains contrastes de base, vous pouvez aussi les utiliser pour « habiller » certaines zones vides de votre map ; l’avantage principal étant qu’ils ne nécessitent pas de polygones ni de textures supplémentaires et sont donc peu gourmands en terme de FPS tout en débarrassant le flow de détails potentiellement gênants pour le gameplay. C’est l’inversion du procédé présenté dans le paragraphe consacré à l’utilisation du LE_StaticSpot dans DM-Oceanic un peu plus haut. Quelques exemples :

Cliquez sur l'image pour la voir en plus grand

Ici, dans DM-Leviathan : avec un static mesh de quart de cylindre et une simple texture dotée d’un masque Alpha, qu’on voit sur la droite du screenshot, la lumière du Light Actor ne passe qu’à travers les zones transparentes de la texture, projetant des effets d’ombres qui donnent à ce banal angle de couloir une esthétique plus intéressante. Notez également l’utilisation efficace d’une « Red Light » dans le fond…

Cliquez sur l'image pour la voir en plus grand

Là, dans DM-DE-Ironic : voyez comment le static mesh en forme de « grille » qui décore le puits de lumière projette un réseau d’ombres habillant le sol et les murs…

Si cette astuce ne manque pas d’intérêt, il faut toutefois respecter certaines restrictions, à la fois d’ordre technique et d’ordre artistique :

– la première concerne le poids des Lightmaps : si celui-ci est souvent surestimé sur le plan des performances, son problème concerne surtout le poids du fichier total et tout ce que ça implique (temps de download, encombrement de disques durs, etc,…), je vous recommande donc de régler en Unlit toutes les surfaces dont vous serez certains qu’elles resteront invisibles aux joueurs (y compris les surfaces en Fake Backdrop)

– la qualité d’une ombre est inversement proportionnelle à l’étendue de la surface BSP sur laquelle elle est projetée : plus la surface sera vaste et plus la qualité de l’ombre sera mauvaise, tachez donc de conserver des surfaces BSP réduites ou bien, si vous constatez sur une surface BSP des artefacts indésirables que rien n’a su éliminer, considérez de réduire la taille du brush correspondant, par exemple en divisant ce brush en plusieurs morceaux. Merci à djsilt, de je ne sais plus quel forum, qui m’a permis de découvrir ce problème et qui m’en a indiqué la solution dont vous pouvez tous profiter à présent.

– la précision d’une ombre dépend de la distance depuis laquelle l’objet éclairé la projette sur une surface : faites l’expérience chez vous et placez par exemple votre main sous votre lampe de bureau, vous constaterez que plus vous la rapprochez de la surface du bureau et plus les contours de son ombre sont précis alors que si vous l’éloignez ils deviennent de plus en plus flous. Vous pouvez simuler ceci en modifiant les paramètres de Light map des surfaces BSP de votre map (dans l’onglet Pan/Rot/Scale des propriétés de surface), ainsi plus la surface sera proche de l’objet qui projette son ombre dessus et plus le chiffre, normalement à 32, sera bas. Utilisez cette astuce avec parcimonie, d’abord pour le problème évoqué plus haut, ensuite parce-que les ombres exactes sont très rares dans la réalité, même si elles sont très plaisantes pour certains yeux ; finalement parce-que « tronçonner » tous les murs de votre map en surfaces BSP multiples va rapidement devenir fastidieux sans parler du polycount qui va monter en flèche… À noter que l’utilisation judicieuse de Projectors permet d’obtenir un résultat similaire sans avoir à paramétrer des surfaces BSP multiples ; ainsi dans DM-Compressed (à gauche, le Projector tel qu’il est visible dans la map, et à droite, la texture correspondante : voyez comme les bords de celle-ci sont flous afin de simuler l’éloignement de cette partie de la grille par rapport à la source de lumière qui éclaire à travers) :

Cliquez sur l'image pour la voir en plus grand

Ce paramètre de manipulation des Light maps est une belle occasion pour examiner de plus prés le fonctionnement des algorithmes de compression des images. Contrairement à ce que le laissent supposer les apparences, les images bitmap ne sont pas « carrées » mais de simples ligne de pixels ; dans le cas d’une image en 800×600 par exemple, l’image est une ligne de pixels faisant 800 x 600 = 480 000 pixels de long : le programme utilisé pour visualiser l’image, au moment de l’afficher, comptera 800 pixels et « coupera » l’affichage de la ligne au 800éme pixel pour poursuivre l’affichage au-dessous du tout premier pixel affiché, puis affichera à nouveau 800 pixels avant de couper à nouveau la ligne pour continuer à l’afficher en-dessous, et ainsi de suite jusqu’au dernier, 480 000éme pixel. L’affichage de l’image, au final, sera constitué de 600 lignes de 800 pixels chacune. Si vous avez déjà travaillé sur de très grandes images un peu trop lourdes pour les performances de votre ordinateur, il vous ait peut-être arrivé de voir que l’affichage de celle-ci, une fois rafraîchi après une manipulation quelconque, donnait l’impression d’un texte qui s’affiche mots après mots. C’est exactement ce qu’il se passe en fait, la seule différence étant qu’il s’agit dans le cas qui nous occupe de pixels au lieu de lettres…

Cet « état de ligne » des images bitmap permet donc de créer des algorithmes de compression. Un format comme le .bmp par exemple ne compresse pas : le fichier correspondant retient le détail – donc les valeurs de chaque couleur RVB, ou CMJN suivant le spectre utilisé – de tous les pixels qui forment l’image, d’où un poids de fichier important. Un format comme le .jpg par contre « amalgame » les pixels de même couleur : si une partie de votre image est blanche, de la ligne de pixels qui la constitue le fichier ne retiendra que les valeurs des couleurs du premier pixel de la ligne et déclarera le reste des pixels constituant cette partie de la ligne comme de couleur identique au premier pixel sans se soucier de noter les valeurs précises de chacun puisqu’elles sont identiques à celles du premier d’entre eux. Un exemple simplifié à l’extrême :

Cliquez sur l'image pour la voir en plus grand

Ici, le format compressé ne retiendra que les couleurs de deux pixels : le premier Blanc et le premier Noir. Tous les pixels suivant le premier pixel Blanc seront déclarés identiques à celui-ci jusqu’à ce que la ligne parvienne au premier pixel Noir, dont la couleur sera enregistrée et assignée à tous les suivants jusqu’à la fin de la ligne constituant l’image. Faites l’expérience et enregistrez cette image après l’avoir tournée à 90° ; ensuite enregistrez chacune des deux versions de cette image, en horizontal et en vertical, dans un format non-compressif. Comparez les poids de chaque et voyez les différences…

La création de matériel custom est supposé prendre en compte de tels avantages : si vous créez une skin pour un static mesh, ou bien une texture pour du BSP, tachez d’exploiter ce fonctionnement des algorithmes de compression afin de réduire le poids de l’image finale. Il ne s’agit pas de vous encourager à faire des skins et des textures faites de motifs horizontaux, mais parfois faire faire une simple rotation de 90° à une image avant d’en enregistrer la version finale peut vous faire gagner un poids significatif, avec tous les avantages que ça implique…

9) Divers : des trucs et des astuces :

a) Le « pitch black » (ou noir complet) :

Une technique vieille comme Hérode, ou à peu prés, qui consiste à laisser dans le noir certaines parties de l’image pour laisser jouer l’imagination du spectateur qui les peuplera ainsi de ce qu’il voudra bien y mettre. Les maîtres de l’école hollandaise du clair-obscur en sont les représentants les plus connus. En mapping, l’avantage est que cela permet d’économiser des détails gourmands en ressources (textures et polygones). L’histoire des FPS regorgent de ce genre de truc : par exemple, l’antichambre de la reine Skaarj dans Unreal 1 ou bien plus récemment de nombreuses zones de Quake 4. Dans Unreal Tournament 2004, un bon exemple concerne les plafonds de CTF-BridgeOfFate :

Cliquez sur l'image pour la voir en plus grand

Ainsi que, par une forme d’interversion toujours utile aux artistes, le précipice central de cette même map :

Cliquez sur l'image pour la voir en plus grand

En suivant l’exemple de l’interversion, donc de l’inversion qui est la base de tous les contrastes, vous pouvez remplacer le Noir par du Blanc (en prenant garde toutefois d’éviter de trop éblouir les joueurs). Ainsi, dans DM-CBP2-TelMecoMEX du même Rogelio « Desperado#2 » Olguin déjà cité plus haut :

Cliquez sur l'image pour la voir en plus grand

b) Les coronas :

Ces objets sont souvent confondus avec les Lens Flares qu’on trouve dans la plupart des programmes de 3D : il s’agit de textures de halos de lumière (je suppose que le mot corona vient du verbe to coronate qui signifie « couronner » en anglais…) qu’on peut assigner à un Light Actor afin de simuler la brillance de la source correspondante et qui rajoutent une touche de réalisme difficilement contestable, surtout pour les maps à ambiance humide ou brumeuse, de tels halos se produisant dans la réalité surtout lorsque l’humidité ambiante diffuse la lumière directement autour de la source.

Quelques trucs à savoir :

– l’influence sur les performances n’est pas négligeable : une corona par source de lumière est plus qu’assez, attendez-vous à de sérieuses pertes de FPS si vous en abusez, quelque soit le réalisme que vous obtiendrez en échange… Pour cette même raison, ne vous sentez pas obligé d’attribuer une corona à toutes les sources de lumière de votre map : c’est juste un truc en plus, pas une condition sine qua non !

– placez les coronas au plus prés de la surface de la source de lumière et de son centre : il n’y a rien de plus irréel qu’une corona flottant dans les airs, prenez le temps de regarder de prés la position de votre corona par rapport à sa source de lumière pour être certain de ne pas laisser d’intervalle entre les deux, ce genre de chose se voit beaucoup plus facilement qu’on croit au cours d’une partie… Ceci étant dit, l’utilisation d’une corona ne s’arrête pas aux sources de lumière (ce peut-être le halo d’un réacteur à fusion par exemple…), ainsi pour d’autres cas il peut bien sûr être tout à fait logique que la corona ne soit contre rien du tout

– les coronas ne sont pas visibles dans une Skybox : vous ne pourrez donc pas en utiliser pour simuler le soleil, les étoiles ou je ne sais quoi d’autres ; il vous faudra placer une texture de corona sur un brush ou bien un static mesh pour que celle-ci soit visible dans la Skybox. En revanche, vous pouvez bien sûr utiliser une corona pour représenter le soleil si celle-ci est bien dans la map au lieu de la Skybox, le résultat en étant assez spectaculaire même si parfois un peu trop éblouissant : ajustez la taille et la position de la corona de manière à ce que ce soleil simulé donne l’impression d’être « infiniment lointain » ce qui ne sera pas toujours possible suivant votre projet aussi ne vous faites pas des migraines pour un détail auquel très peu de joueurs feront attention puisqu’il sera un peu « trop » haut

– par défaut, la taille d’une corona est « fixe » : c’est-à-dire que sa taille à l’écran ne varie pas quelque soit la distance à partir de laquelle on l’observe, ce qui peut être gênant pour la vision des joueurs selon les circonstances (elles peuvent facilement éblouir, voyez le screenshot tiré de DM-CBP2-TelMecoMEX ci-dessus). Afin d’y remédier, les développeurs ont doté les coronas de paramètres supplémentaires dans Unreal Tournament 200x : Light Properties -> Corona -> MaxCoronaSize et MinCoronaSize vous permettront de « fixer » la taille de vos coronas comme ça vous arrange. Pour avoir longtemps galéré sur UnrealEd 2.0 avec des coronas qui ne voulaient rien savoir, croyez-moi, ce truc-là est très pratique, mais n’en abusez pas non plus : la plupart du temps les réglages par défaut sont tout à fait adéquats, ne transformez pas une bête fonction en casse-tête parce-que vous cherchez le réalisme absolu, vous ne le trouverez jamais avec cette version du Unreal Engine de toutes façons…

c) Le Fog :

Une fonction du Unreal Engine qui a été énormément améliorée depuis la version précédente, pour Unreal Tournament 99 donc. Si beaucoup de mappers en ont abusé dés les premières maps pour Unreal Tournament 2003, il faut bien admettre que ce truc-là a des aspects bien pratiques, à la fois sur le plan technique et au niveau artistique : le premier pour son impact sur les performances, tout ce qu’il cache n’étant pas pris en compte pour le rendu, le second pour le réalisme qu’il ajoute, les objets devenant de plus en plus brumeux et tirant sur le bleu au fur et à mesure qu’on s’en éloigne puisque l’épaisseur d’atmosphère qui nous en sépare devient plus importante. Malheureusement, le Fog n’est pas toujours votre ami car, en abolissant la netteté, il tend à détruire les contrastes et à délaver les couleurs, donc à ruiner vos efforts : utilisez-le avec parcimonie, car si un léger Fog est plus qu’assez pour renforcer une ambiance, ce n’est pas lui qui fait une atmosphère.

Un autre problème consiste à mêler des Zones utilisant des paramètres de Fog différents, voire juxtaposer une Zone avec Fog avec une sans Fog du tout : passer de l’une à l’autre provoquera une apparition – ou une disparition, suivant le sens de déplacement – brutale du Fog. Ce sera toujours trop brutal, à moins que vous n’utilisiez exactement les même paramètres de Fog dans toute votre map, ce qui va poser des problèmes tôt ou tard : vous êtes supposé être le maître de votre projet, pas son esclave, ce n’est pas lui qui doit vous diriger mais à vous de le commander. Ainsi, vous trouverez un paramètre très pratique dans ZoneInfo Properties -> ZoneLight -> DistanceFogBlendTime : celui-ci permet de contrôler le temps que mettra le Fog à disparaître ou à apparaître à la sortie ou à l’entrée d’une Zone à Fog. Ajustez selon vos préférences.

Vous pouvez également utiliser une Zone intermédiaire où le Fog sera moins important, comme une sorte de « tampon » en quelque sorte, afin d’augmenter ou de diminuer progressivement le Fog entre Zones contigües en utilisant des réglages légèrement différent dans chaque Zone, mais ça risque de devenir rapidement un casse-tête aussi vous en reviendrez certainement assez vite au DistanceFogBlendTime de toutes manières. Inutile de préciser que vous pouvez bien sûr mélanger ces deux possibilités.

Note : un Fog présent dans une Zone ne sera pas visible depuis une autre Zone. Il n’y a rien à faire contre ça pour autant que je sache : si vous connaissez une solution, n’hésitez pas à m’écrire…

d) L’éclairage pour maps de Team Game (CTF, DDOM, BR,…) :

Vous devez probablement avoir compris maintenant pourquoi les équipes de Team Games sont en Rouge ou en Bleu : ce sont tout simplement les couleurs les plus opposées du spectre RVB.

S’il est assez commun d’utiliser des dominantes de Rouge pour la base de l’équipe rouge et des dominantes de Bleu pour l’équipe bleue, leurs variantes sont à manipuler avec précaution. J’ai souvent vu des maps suivant ces combinaisons de couleurs de façon peu heureuse. Si le Bleu accompagne bien le Blanc, ce n’est pas le cas du Rouge : une fois pâli, celui-ci prend une teinte délavée qui fonctionne généralement « mal » (on rejoint là le principe des Red Lights qui ne devraient être utilisées que dans les coins les plus sombres d’une map), alors que le Bleu est souvent déjà pâle tel qu’on le conçoit (probablement une habitude qui nous vient de voir tous les jours l’azur du ciel…) ; par conséquent, je vous recommanderais de mélanger le Rouge de la base correspondante avec du Jaune, le Vert provoquant un contraste trop important mais néanmoins envisageable si celui que vous choisissez n’est pas trop criard et suffisamment pâle pour ne pas trop détonner…

D’autre part, il n’est pas absolument nécessaire d’utiliser exclusivement du Rouge et du Bleu pour colorer les bases de votre map de Team Game : certains mappers se sont essayés à des couleurs différentes par le passé, voire à des jeux de textures (une map pour Unreal Tournament 99 en particulier, appelée CTF-Times et dont le nom de l’auteur m’échappe, a su jouer sur un tel contraste d’une façon qui, je crois, a quelque peu marqué les esprits…) ; plus récemment, les cartes multi de Quake 4 ont clairement démontré que le Orange et le Vert sont suffisamment contrastés pour faire l’affaire et remplacer les sempiternels Rouge et Bleu, dans cet ordre. N’hésitez pas à explorer d’autres possibilités.

Vous pouvez également jouer sur le cadre lui-même : par exemple, un soleil crépusculaire, donc tendant vers le Rouge, teindra de Rouge et d’Orange la base Rouge alors que la base opposée, placée de manière à être éclairée à contre-jour pour faire notre affaire, se teintera de Bleu et de Vert. Par exemple. Inversement, si votre map est en orbite autour d’une étoile bleue, intervertissez les choses, la base Bleue étant éclairée de face alors que la Rouge se tient dans la pénombre…

e) La technique « Lruce Bee » :

Lruce est un auteur pour qui j’ai le plus grand respect : non seulement ses travaux comptent parmi les plus réussis de la communauté, voire les plus marquants (voyez donc DM-Victoria, pour Unreal Tournament 2003 exclusivement, si vous croyez encore que seuls des static meshes et des textures customs peuvent donner de la personnalité à une map…), mais il est également d’une humanité qui devrait servir d’exemple à certains.

La technique qu’il a élaboré consiste à éclairer au maximum l’ensemble de la map (donc de régler au maximum le Brightness de chaque Light Actor, toutes proportions gardées bien entendu) pour ensuite baisser progressivement la luminosité jusqu’à obtenir un éclairage adéquat. Cette technique « inversée » par rapport à la normale – et il n’est plus utile à présent de vous rappeler ce que je pense des inversions – permet d’éviter les zones trop sombres qu’un éclairage parfois un peu timide a tendance à conserver malgré l’auteur.

Cette technique inhabituelle ne présente qu’un seul défaut pour le mapper débutant : elle génère facilement des greenishes. Le greenish est un défaut d’éclairage qui se produit lorsqu’une surface reçoit trop de lumière, celle-ci se teintant d’un jaune verdâtre particulièrement déplaisant qui n’a rien à voir avec la couleur du/des Light Actor(s) qui l’éclaire(nt) : ajustez donc les Brightness environnant en conséquence.

Conclusion :

Voilà à peu prés tout ce que je peux vous dire sur l’éclairage pour UnrealEd dans l’état actuel de mes connaissances. Il va de soi que ce tutorial ne contient pas toutes les techniques possibles et imaginables, j’espère juste que vous aurez eu l’occasion de retenir deux ou trois trucs qui vous seront d’une utilité un jour. Si certains détails vous ont paru peu clairs, ou semblent mériter des explications supplémentaires selon vous, n’hésitez pas à me le faire savoir par le moyen de votre choix et je tacherais de rendre les choses plus compréhensibles.

Maintenant, lancez UnrealEd et au boulot.

Sommaire :
Introduction
1. Théorie
2. Pratique
– 3. Des Cas particuliers (le présent billet)

Tutorial : l’Éclairage en level design (2de partie)

L'interface de l'éditeur de niveaux de jeux vidéo UnrealEd, avec une map chargée
Sommaire :
Introduction
1. Théorie
– 2. Pratique (le présent billet)
3. Des Cas particuliers

4) Techniques d’éclairage de base : mettre les mains dans le cambouis

Les indispensables contrastes ne se résument pas qu’aux couleurs, ce serait trop simple : en effet, les divers paramètres des Light Actors sont autant de sources de contrastes possibles, vous n’êtes pas supposés n’utiliser que leur couleur (qui correspond aux paramètres Hue et Saturation) mais aussi leur brillance (Brightness) et leur rayon (Radius), pour le premier en juxtaposant des Light Actors de Brightness très éloigné, pour le second en juxtaposant des Light Actors de Radius très différent. Il va sans dire que vous pouvez bien sûr – c’est même fortement conseillé – mélanger ces contrastes pour en obtenir de plus importants encore. Ainsi, par exemple, un Light Actor Cyan à la Saturation haute, au Radius vaste et de Brightness faible s’opposera à un Light Actor Orange de Saturation basse, de Radius restreint et de Brightness fort ; et ainsi de suite pour toutes les autres couleurs et leurs complémentaires respectives…

Si la base de connaissances la plus instructive reste l’Histoire de l’Art classique (n’ayez pas peur de vous déplacer jusqu’à un musée pour observer de prés des toiles de maîtres, ou passez du temps à surfer sur des sites spécialisés qui en proposent des reproductions, vous en trouverez facilement grâce à l’ami Glou-Glou…), il n’est pas absolument indispensable de maîtriser cette matière pour devenir un artiste compétent. La plupart des maps officielles sont largement suffisantes ; quelques exemples :

Cliquez sur l'image pour la voir en plus grand

Ici, DM-Goliath : c’est l’archétype de l’éclairage en couleurs primaires et secondaires « pures » car le Bleu-Cyan s’y oppose directement au Orange, une harmonie de couleurs qu’on retrouve souvent au cinéma d’ailleurs, particulièrement dans les atmosphères sombres. Ici, la juxtaposition des couleurs primaires directement aux couleurs secondaires correspondantes peut se faire grâce aux tons très achromatiques du package de texture choisi. A l’époque d’Unreal Tournament 99, beaucoup de mappers amateurs utilisaient des textures aux tons très neutres – le package Richrig en tête de liste – afin d’éclairer leurs maps des couleurs de leur choix (voyez DM-1on1-Trite pour un autre exemple type tiré d’Unreal Tournament 2004) : si cette technique reste parfaitement efficace et tout à fait respectable, elle n’en sent pas moins une certaine « facilité » d’exécution qui satisfait rarement un artiste digne de ce nom. Lorsque vous l’aurez utilisée quelques fois, vous voudrez certainement passer à autre chose et expérimenter des combinaisons différentes où votre sensibilité personnelle aura plus de place pour s’exprimer…

Cliquez sur l'image pour la voir en plus grand

Là, DM-DE-Osiris2. Voyez comme la lumière ambiante et forte (donc de Radius et de Brightness élevés…) de ton Jaune-Orange s’oppose aux nuances de Vert plus ponctuelles et discrètes. Voyez également comme le contraste est subtil : avec des tons généraux Jaune-Orange, les couleurs complémentaires devraient se situer entre le Violet et le Cyan, hors l’auteur a choisi du Vert. La raison en est assez simple. Les packages de textures du thème égyptien proposent essentiellement du matériel dans des tons jaunes et sablés – dits « chauds » en raison de leur ressemblance avec des flammes certainement – sur lesquels des tons cyans et azurs – dits « froids » par leur opposition aux précédents – fonctionnent généralement mal. Pourquoi ? Parce-que ces textures, étant Jaune-Orange, contiennent peu de Bleu et par conséquent ne peuvent que difficilement en renvoyer lorsqu’elles sont éclairées. Il en résulte une couleur « sale » et peu attrayante qui gâche souvent le résultat. Ainsi, le choix du Vert s’impose-t-il à peu prés de lui-même car celui-ci est obtenu en mêlant du Cyan à du Jaune (voyez le Cercle Chromatique), ce même Jaune qui est la couleur dominante des textures du thème égyptien : pour qu’une texture et le Light Actor qui l’éclaire s’accordent bien, il vaut mieux qu’ils partagent un ton commun, comme le démontre le screenshot ci-dessus.

Cliquez sur l'image pour la voir en plus grand

Finalement DM-Insidious. En dépit de sa simplicité en terme de plan et, donc, de gameplay, ses qualités d’éclairage restent tout à fait intéressantes par leur variété mais aussi, surtout, car elles contredisent une bonne partie des recommandations que je vous ais faites jusqu’à présent – mais je ne serais probablement pas le premier à vous dire que l’Art n’est pas une science exacte… Voyez comment le Rouge des puits de lave au centre s’oppose directement et radicalement au Vert des espèces de cuves à clones sur leur gauche ; et ce n’est pas tout car les murs courbes de part et d’autres du screenshot sont eux éclairés d’un Bleu-Violet pâle. Le package de textures choisi est dominé de Marrons et d’Ocres avec des pointes de Orange et de Vert plus ou moins discrètes ; souvenez-vous de ce que je vous disais du Marron : cette « couleur » est la somme de toutes les autres en quantités équivalentes dans le spectre CMJ, ce qui permet à l’auteur d’utiliser ici une grande variété de couleurs à un même endroit ; en fait on trouve rassemblés dans cette zone du map tous les tons majeurs du spectre RVB. Bien sûr, on distingue assez nettement une dominante de Vert à travers l’utilisation intensive du DistanceFog mais le Bleu et le Rouge sont néanmoins présents aussi.

Remarque : ce n’est probablement pas pour rien que le Vert est si souvent utilisé compte tenu de sa position dans le spectre RVB ; en effet, situé à mi-chemin des deux couleurs extrêmes, celui-ci permet de les compléter toutes deux sans poser un contraste trop « violent » pour les yeux du spectateur. Si vous hésitez quant à la couleur à adopter, le Vert est souvent le candidat idéal quelque soit la situation.

Notes :

– le choix du nombre de couleurs à utiliser dans une map est souvent difficile. Pas assez et les contrastes sont absents, trop et on a rapidement mal aux yeux. Personnellement, mon chiffre de prédilection est trois (un chiffre important pour tous les créatifs, au moins dans les domaines des Arts Picturaux) : deux couleurs générales à peu prés complémentaires et une troisième, plus sporadique, pour introduire un peu de variété. Je vous ais déjà donné des exemples de maps utilisant moins de couleurs que ça (DM-Gestalt et DM-Icetomb) mais vous en trouverez peu qui en utilisent davantage. Quoiqu’il en soit, je vous recommande fortement de ne pas dépasser cinq, dont deux d’entre elles seront certainement très ponctuelles (c’est-à-dire de Radius très faible). Bien sûr, il va de soi que des différences de tons obtenues par une simple manipulation de Saturation à partir d’un même ton de base ne sont pas à proprement parler des couleurs différentes (un Jaune pâle se distingue peu d’un autre plus foncé) mais un Jaune et un Orange – ce n’est qu’un exemple, j’aurais pu cité le Bleu et le Vert ou bien le Rouge et le Violet – sont bien évidement deux couleurs différentes.

– des sources de lumières sont particulièrement souhaitées pour vos Light Actors. J’entends par là qu’à chaque Light Actor disposé dans votre map devrait correspondre soit un motif de texture évoquant une source de lumière (pour Unreal Tournament 99 par exemple), soit un static mesh de système d’éclairage (pour Unreal Tournament 2Kx) : ce peut être une banale lampe ou un réverbère, une enseigne de magasin ou une console d’ordinateur. N’hésitez pas à prendre exemple sur les objets qui vous entourent dans la vie de tous les jours pour observer de quelle manière ils produisent de la lumière et peuvent ainsi vous inspirer pour développer des idées d’éclairage ; bien sûr, il est fortement recommandé d’étudier les maps fournies avec le jeu lui-même également, voire en priorité. Cependant, et contrairement à ce que peuvent le laisser penser certains sites de tests et de reviews peut-être un peu trop à cheval sur les choses techniques, il n’est pas toujours nécessaire d’avoir une source pour placer un Light Actor dans une map : parfois, un simple manque de lumière dans une zone peut vous amener à utiliser un Light Actor qui ne correspond à aucune source évidente, spécialement dans le cas de simulation de la radiosité… Quelle est cette bête-là ? J’y viens…

5) La radiosité : reproduire le cheminement de la lumière

La lumière ne se contente pas d’éclairer les objets qu’elle touche : ses rayons vont de la source jusqu’aux objets et sont renvoyés par la surface de ceux-ci jusque dans votre rétine, ce qui vous permet de les voir. Mais le trajet n’est pas aussi simple : en fait, les rayons de lumière « rebondissent » tous azimuts comme une balle sur un terrain de squach, perdant à chaque fois une partie de leur couleur suivant l’objet sur lequel ils sont reflétés. Si certains moteurs de rendu sont capables de reproduire ce mécanisme hautement complexe, ce n’est pas encore le cas du temps réel car un tel procédé consomme énormément de ressources de calcul (1), pour un résultat somme toute pas si intéressant que ça, d’autant plus qu’il existe des moyens de simuler la chose avec plus ou moins de bonheur suivant votre maîtrise du sujet…

Voici un exemple tiré de DM-Injector :

Cliquez sur l'image pour la voir en plus grand

Dans les cercles rouges, les Light Actors reproduisant l’éclairage principal, disposés comme il se doit à proximité de la source (ici la « bande » de néons bleus juste derrière) ; dans le cercle vert, un troisième Light Actor reproduisant la réflection de cette lumière bleue de base sur l’environnement immédiat de ces néons. Si vous consultez les paramètres de chacun de ces Light Actors dans UnrealEd, vous constaterez que leur paramètre de couleur (Hue  et Saturation) sont pratiquement identiques (une valeur de Hue  = 150 au lieu de 153 pour le Light Actor cerclé de vert…) mais leur Brightness et leur Radius varient pratiquement du simple au double (respectivement 112.5 et 36 pour le Light Actor en vert contre 300 et 18 pour les deux autres) ! Ces écarts s’expliquent par le fait que plus une lumière se reflète souvent et plus elle perd de sa luminosité (Brightness) sur chaque objet sur lequel elle se reflète, par contre la quantité de lumière restante se répand sur une surface plus vaste, proportionnelle à celle qu’éclaire la lumière de la source initiale, ici exprimée par le paramètre Radius.

Un petit schéma explicatif du principe :

Voici une pièce cubique vue de coté ; en haut, la source de lumière principale (un banal plafonnier…), avec un Light Actor [1] juste en-dessous pour représenter la lumière qu’il produit : directement dessous et au niveau du sol, un second Light Actor [2] reproduisant la réflection sur le sol en contrebas de la lumière principale ; enfin, sur les murs latéraux, deux autres Light Actors [3] de part et d’autres pour simuler la lumière réfléchie par la première réflection [2] sur les murs. La taille des flèches et leur couleur représentent le trajet de la lumière et sa déperdition en Brightness alors que leur nombre indique le volume (Radius) sur lequel se diffuse cette lumière deux fois réfléchie. Bien sûr, il ne s’agit que d’un schéma de principe : vous n’êtes pas tenu d’utiliser ce nombre précis de Light Actors pour chacune de vos sources de lumière ; en fait, la plupart du temps, deux sont largement suffisants, et au-delà de trois, non seulement l’éclairage de votre map va vite devenir un cauchemar mais en plus l’impact sur les performances sera prohibitif. Gardez les choses simples, c’est assez compliqué comme ça…

Note : la déperdition de lumière est ici, dans le schéma comme dans l’exemple de DM-Injector, simplifiée à l’extrême ; ce n’est qu’une exposition de principe. En effet, il ne suffit pas de modifier les paramètres de Brightness et de Radius pour obtenir une bonne simulation de radiosité : en fait, la couleur renvoyée dépend de la couleur du matériau sur lequel la lumière se reflète. Par exemple, une lumière blanche se reflétant sur un mur rouge ne sera plus constituée quasi-exclusivement de Rouge, de Vert si elle est reflétée par un mur vert, de Bleu si elle est reflétée par un mur bleu, etc… Malheureusement, les packages de textures utilisent rarement une couleur uniforme – c’est ce qui distingue souvent les bonnes textures des mauvaises d’ailleurs, mais ce n’est pas le problème du mapper – de sorte qu’une réelle simulation de radiosité devient vite un cauchemar dans son exécution. Pour simplifier le paramétrage, je vous propose de modifier la couleur de votre Light Actor en l’assombrissant tout simplement : ceci peut se faire en choisissant une couleur de même ton mais de Hue légèrement différent (plus noir, donc), ou bien en choisissant une couleur tirant davantage vers le Rouge ou le Bleu, soient les extrémités du spectre RVB, suivant la position initiale du ton de base sur ce spectre (ainsi, une lumière jaune reflétera du jaune-orangé, une orange du orange rougeâtre, une verte du vert-bleu, et ainsi de suite…) ; les gens qui, comme moi, viennent de la 3D précalculée connaissent bien ce genre de trucs en règle générale et chacun a développé ses propres techniques : à vous de créer les vôtres…

Remarque : la quantité de lumière reflétée par une surface dépend quasi-entièrement de sa rugosité ; plus une surface est lisse et plus la quantité de lumière qu’elle renvoie est importante. C’est parce-qu’une surface moins lisse, plus « chaotique » en quelque sorte, au moins au niveau atomique, va refléter la lumière en tous sens au fur et à mesure que celle-ci en touchera les diverses aspérités, y compris entre ces aspérités, où elle perdra de plus en plus de sa brillance et des ses couleurs sans pour autant vraiment quitter la surface proprement dite, au lieu de toutes les renvoyer dans la même direction. Ainsi, le verre étant une des matières les plus lisses de l’univers reflète la quasi-totalité de la lumière qu’il reçoit. À l’inverse, le bois brut, par exemple, reflète très peu de lumière et doit être verni pour avoir l’air brillant. Inutile de préciser que ce mécanisme optique joue un rôle prépondérant dans le processus de mapping : un environnement très neuf ou humide sera probablement très lumineux alors qu’un environnement plus ancien, perclu de rouille et de moisi créant des micro-aspérités, sera certainement beaucoup plus sombre.

Astuce : les mappers aguerris utilisent souvent deux Light Actors pour une même source de lumière principale : le premier avec des paramètres « normaux » alors que le second, de même couleur et placé une unité ou deux à coté du premier, a son Brightness deux à quatre fois moindre et son Radius augmenté proportionnellement, de deux à quatre fois donc. Ce truc permet d’obtenir des effets d’éclairage très diffus en adoucissant les dégradés de luminosité ; de plus, placer les deux Light Actors l’un tout contre l’autre permet d’éviter des dédoublements des ombres – un « défaut » certain pour le réalisme d’un environnement – tout en les rendant plus floues et donc plus « vraies » car les ombres exactes sont pratiquement absentes dans la nature…

6) Techniques avancées : quelques cas particuliers

a) Les Lightboxes :

Lorsque vous placez un plafonnier dans votre map, son éclairage sur le sol et l’environnement immédiat peut faire l’objet de paramétrages particulier, en fait c’est même fortement conseillé. Contrairement à ce que prétend la rumeur (que j’ai grandement contribué à propager, mea culpa, mea magna culpa), ce n’est pas DavidM qui a inventé ce truc mais CliffyB, preuve en sont ses Réflexions sur la création de Niveaux pour Unreal Tournament, où il explique de manière assez sommaire « Vous pouvez utiliser des lumières cylindriques pour créer des cercles de lumières sur les sols et plafonds de votre carte, mais n’en abusez pas. Ils conduisent à éclairer très peu. Essayez d’utiliser une combinaison des lumières circulaires et ambiantes dans des zones particulières. » En gros, le truc consiste à utiliser une série de deux ou trois Light Actors disposés verticalement sous le plafonnier et dont les paramètres différents permettront un éclairage particulier de cette zone afin de bien reproduire le fameux effet Lightbox, improprement nommé car il reproduit en fait un cône de lumière beaucoup plus qu’une boite…

En voici un exemple, tiré de CTF-December :

Cliquez sur l'image pour la voir en plus grand

Si DavidM n’a pas inventé ce truc, il a tout de même grandement contribué à le populariser, entre autre en mettant au point une méthode aux paramètres précis dont vous trouverez le détail, pour Unreal Tournament 99 seulement mais qui est facilement adaptable pour Unreal Tournament 2Kx, sur son site personnel.

Une variante intéressante mais somme toute assez attendue est utilisée dans DM-DE-Grendelkeep : le LightEffect LE-StaticSpot permet de reproduire un cône de lumière au sens strict du terme. Paramétrez le Light Actor de cette manière

Light Properties -> Advanced -> bDirectional = True et faites pointer vers le sol la petite flèche qui apparaît, puis

Light Properties -> Lighting -> LightEffect = LE_StaticSpot et vous devriez voir la lumière se réduire à un cercle sur le sol ; modifiez le Radius pour changer la taille de ce cercle de lumière – ainsi que son Brightness éventuellement – et n’oubliez pas de placer un second Light Actor sur le sol lui-même pour simuler la réflection de la lumière du plafonnier sur l’environnement comme on l’a vu précédemment.

Inutile de préciser que ce truc n’est pas exclusivement réservé aux plafonniers car ses applications possibles sont multiples : à vous de saisir ces opportunités.

b) Les « lumières rouges » :

Encore une fois une paternité injustement attribuée à DavidM : ces choses existent depuis au moins Quake 2 et on en trouve de nombreux exemples dans Unreal 1 et Unreal Tournament 99. Elles sont souvent utilisées dans les maps à l’atmosphère industrielle ou futuriste, surtout dans les coins sombres – voire carrément noirs – où elles fonctionnent le mieux. Voici leurs paramètres :

Brightness = 200

Hue = 0

Saturation = 0

Radius = entre 6 et 10 (cette dernière valeur est strictement indicative, essayez toutefois de ne pas trop vous en éloigner : le rouge pur fonctionne généralement mal sur de trop vastes surfaces…)

c) Les StaticSpots :

Cette « variante » des Lightboxes permet de représenter l’éclairage d’un projecteur dont la lumière est projetée, comme son nom l’indique, dans une direction précise. En effet, une erreur couramment rencontrée dans le mapping consiste à placer un Light Actor standard pour la lumière d’une source qui envoie ses rayons dans une certaine direction seulement ; hors le Light Actor de base éclaire à 360° de sorte que le mur sur lequel se trouve la source de lumière est lui aussi éclairé alors que les rayons de cette source sont supposés être envoyés dans la direction opposée. Par exemple, dans DM-Rankin :

Cliquez sur l'image pour la voir en plus grand

Le problème est ici assez évident : la série de static mesh utilisée pour éclairer ce couloir est visiblement constituée d’une paire de néons engoncée dans une armature métallique qui devrait bloquer la lumière autour du plafonnier s’il existait dans la réalité. Hors, ce n’est pas le cas : on voit clairement que la poutre sur laquelle sont fixés ces plafonniers est elle aussi éclairée… Le choix d’un static mesh différent aurait pu résoudre le problème.

Maintenant, voyez comment le Light Effect LE_StaticSpot peut fournir une variation beaucoup plus crédible, ici dans DM-Oceanic :

Cliquez sur l'image pour la voir en plus grand

En orientant le Static Spot vers le bas et légèrement contre le mur, puis en réglant son angle d’ouverture de façon appropriée, le mapper a rendu un éclairage réaliste compte tenu du type de source de lumière choisi : le Light Actor n’éclaire pas derrière la source de lumière. Voyez également comment ces cônes de lumière habillent les murs : sans cet effet, les parois auraient l’air beaucoup plus vides, ainsi cette astuce vous permet de décorer certaines zones de votre map sans utiliser des polygones ou des textures plus gourmands en ressources, voire qui peuvent gêner le gameplay. A noter que l’auteur aurait pu ici rajouter un Light Actor contre le mur afin de simuler la réflection de la lumière sur ce mur vers l’intérieur du couloir…

Ceci peut devenir une base de réflexion pour la création de vos propres static meshes : observez attentivement comment sont conçues les sources de lumière qui vous entourent, chez vous par exemple, et vous serez capables non seulement d’utiliser cette astuce de façon appropriée mais aussi de créer des static meshes qui permettent de l’exploiter au mieux. En règle générale, alors que les néons éclairent tout autour d’eux – pour autant qu’il n’y ait pas d’obstacles au trajet de la lumière, comme dans l’exemple de DM-Rankin – les lampes normales sont souvent faites pour éclairer dans une certaine direction. Même lorsqu’il y a un abat-jour qui laisse passer une partie de la lumière, celle-ci est très faible, la plus grande partie passe par en haut ou par en bas ; ceci afin d’éviter que la lumière soit trop éblouissante, d’une façon assez semblable aux halogènes sur pied qu’on tourne généralement contre le mur pour obtenir l’éclairage par réflection contre la paroi.

(1) ce tutorial a été écrit avant la sortie d’Half Life 2.

Suite du tutorial (3éme Partie : Des Cas particuliers)

Sommaire :
Introduction
1. Théorie
– 2. Pratique (le présent billet)
3. Des Cas particuliers

Tutorial : l’Éclairage en level design (1ère partie)

L'interface de l'éditeur de niveaux de jeux vidéo UnrealEdSommaire :
Introduction
– 1. Théorie (le présent billet)
2. Pratique
3. Des Cas particuliers

Si j’ai choisi les techniques d’éclairage en level design comme sujet de mon premier tutorial, c’est pour une raison assez simple mais pas forcément intuitive : le fait est que les formes et l’architecture sont les marionnettes de la lumière ; en d’autres termes, il faut penser l’architecture d’une map en fonction de la façon dont on va l’éclairer et surtout pas essayer de contraindre l’éclairage à s’adapter aux formes (en fait, si, vous pouvez, mais attendez-vous à y passer beaucoup plus de temps que si vous suivez la méthode que je vous recommande). Pour résumer, donc, la méthode du mapping est plus ou moins inversée par rapport à l’ordre d’utilisation des outils tels qu’ils sont présentés dans l’éditeur.

Pour les autres, qui cherchent à comprendre comment utiliser les outils d’éclairage de UnrealEd, vous êtes sur la bonne page ! Cependant, il ne s’agit pas ici de vous apprendre le fonctionnement de ces outils : vous êtes supposé savoir ce qu’est un Light Actor et quels en sont les paramètres avant de lire ce tutorial. Si vous avez encore des lacunes à ce sujet, je vous recommande de commencer par ce tutorial de Drakeslayer, autrement vous ne comprendrez certainement rien.

ATTENTION : les techniques et outils présentés dans ce tutorial concernent UnrealEd 3.0 et donc la création de maps pour Unreal Tournament 200x, voire pour Unreal 2 dans une certaine mesure ; il n’est pas garanti que ce tutorial fonctionnera exactement de la même façon pour d’autres éditeurs utilisant le moteur Unreal ou un de ses dérivés tels que XIIIed, DevastationEd, et j’en oublie… D’autres part, si on peut raisonnablement supposer que la plupart des outils présentés ici seront toujours disponibles dans l’éditeur de Unreal Tournament 2007, il n’est en rien garanti que ce sera le cas (1) : utilisez-le donc en toutes connaissances de cause. Quant à UnrealEd 1.0 et 2.0, soit pour Unreal 1 et Unreal Tournament 99, je tacherais de préciser si les techniques décrites sont envisageables ou non…

Une dernière chose : ce tutorial n’a absolument pas pour but de vous apprendre à faire de « belles » choses mais juste de vous donner quelques trucs et astuces pour vous simplifier la tâche au cours de votre processus de mapping. Comme pour la plupart des activités artistiques, faire une map agréable à l’œil est facile mais faire une « belle » map est une affaire de pure chance : suivez la méthode et vous mettrez les chances de votre coté en espérant qu’elles vous seront favorables, faites-en à votre tête et le résultat ne sera en aucun cas garanti.

Vous êtes prêts ? Alors c’est parti !

1) La lumière : qu’est-ce que c’est ?

Si vous posez la question à un physicien, il vous répondra que la lumière est la partie visible du spectre électromagnétique, celui-ci faisant partie des quatre éléments principaux de l’univers avec la gravité, les interactions fortes et les interactions faibles. Il va sans dire que les artistes ont appris à domestiquer la lumière bien longtemps avant que les savants ne l’expriment sous formes d’équations, de sorte que vous n’avez pas vraiment besoin d’en savoir plus mais un peu de culture G ne fait pas de mal… Par contre, ça me permet de poser quelques éléments de base qu’il vous sera utile de savoir pour la suite du tutorial.

Jetez donc un coup d’œil au schéma suivant :

Cliquez sur l'image pour la voir en plus grand

De gauche à droite, la longueur d’onde – mesurée en nanomètre (soit 1 nm = 1 millionième de millimètre) – des rayonnements se réduit : de totalement inoffensifs, ceux-là deviennent de plus en plus mortels. Le spectre électromagnétique est donc composé d’une série de radiations : celles qui nous intéressent se trouvent entre 400 et 700 nm car c’est dans cet intervalle qu’elles affectent la rétine et sont donc « visibles » (des procédés artificiels permettent également de représenter les radiations « invisibles » mais, bien sûr, celles-ci ne nous concernent pas).

La partie inférieure du schéma représente la décomposition de la lumière lorsque celle-ci est passée à travers un prisme. C’est l’expérience que mena Newton en 1676 pour démontrer que la lumière était composée d’une infinité de couleurs. Pour ce qui nous concerne, on en retient le Rouge, le Vert et le Bleu car Young démontra en 1800 que mélanger ces trois tons à des degrés variables permet de reproduire toutes les autres couleurs visibles.

On distingue deux sortes de couleurs : les couleurs chromatiques et les couleurs achromatiques. Ces dernières sont le Noir, le Blanc et toutes les valeurs de Gris intermédiaires, alors que les premières sont celles qui comportent ne serait-ce qu’une infime parcelle de couleur Rouge, Verte ou Bleu. Les couleurs chromatiques se définissent à travers trois attributs (entre parenthèses, le terme anglais utilisé dans UnrealEd) :

– luminosité (Brightness) : c’est la densité relative des couleurs, chromatiques ou achromatiques ; dans UnrealEd cet attribut correspond à la brillance du Light Actor concerné : plus il est élevé et plus la lumière est forte

– teinte (Hue) : c’est la nuance de la couleur ; le Rouge, le Jaune, le Vert, le Bleu,… sont des teintes ; bien qu’il n’y en ait « que » 256 dans UnrealEd, les deux autres attributs permettent de les nuancer au point de pouvoir reproduire toutes les couleurs visibles par l’œil humain

– saturation (Saturation) : c’est le degré de saturation de chaque teinte, plus une couleur est saturée et plus elle est colorée, moins elle est saturée et plus elle est pâle (à noter que dans UnrealEd ce paramètre est « inversé » : plus le paramètre Saturation est élevé et plus la couleur pâlit…)

2) Les contrastes : pourquoi sont-ils indispensables ?

Si la lumière nous permet de distinguer les formes qui nous entourent et donc de nous orienter dans notre environnement, elle a aussi une autre propriété fondamentale : les zones qu’elle n’éclaire pas restent dans l’ombre et sont donc plus sombres que le reste de notre champ de vision. Ainsi, notre cerveau est capable d’apprécier les notions de profondeurs et de volumes, la fameuse « Troisième Dimension » chère aux infographistes de l’image de synthèse. Si un jour vous avez l’occasion de voir un peintre au travail, observez bien de quelle manière il mélange les clairs et les obscurs, ainsi que toutes les nuances intermédiaires, pour créer une impression d’espace sur sa toile (bien sûr, ça ne marche pas avec la peinture abstraite…)

Comme il vaut mieux une bonne image que 10 000 mots :

Cliquez sur l'image pour la voir en plus grand

A gauche, la forme telle qu’elle est dans l’absolu ; au centre, la même éclairée « plein pot » à 360° ; à droite, avec un éclairage provenant du centre gauche (l’espèce de halo sur l’arête droite étant provoqué par la réverbération de la lumière depuis le sol sur le volume) : voyez comme la disposition des ombres font la forme immédiatement identifiable sans aucune réflexion de la part de l’observateur, de même que sa position indiquée par son ombre portée (celle-ci tend à s’assombrir au fur et à mesure qu’elle s’éloigne de l’objet et que la lumière réverbérée sur l’arête droite de l’objet s’atténue)

Note : la figure centrale illustre bien le problème du ZoneLighting. Cette technique, bien que rapide, tend à « bouffer » les contrastes de l’éclairage : poussée à l’extrême comme ici, elle détruit tous vos efforts, utilisez-la donc avec parcimonie (des valeurs maximales de 16 ou 32 en Brightness devraient être votre limite maximum).

Bien sûr, l’exemple présenté ici est simplifié, en fait à la limite du monochromatique (soit 1 couleur et ses déclinaisons, comme une composition en Noir et Blanc plus les niveaux de Gris intermédiaires en quelque sorte…), un système de couleur au potentiel très restreint qui est peu utilisé par les mappers compte tenu de ses limitations. Il ne faut cependant pas croire qu’il est inutile ou même à proscrire : vous trouverez quelques maps officielles qui utilisent avec beaucoup de talent ce système monochromatique de couleurs très proches, comme DM-Gestalt ou, dans une certaine mesure, DM-Icetomb. En voici des screenshots, n’hésitez pas à ouvrir le fichier dans UnrealEd pour voir comment leurs auteurs respectifs ont contourné les difficultés rencontrées :

Cliquez sur l'image pour la voir en plus grand

Cliquez sur l'image pour la voir en plus grand

Astuce : ce procédé m’a été enseigné il y a… bien longtemps par ma première prof’ d’art, Marie-Hélène Astruc, à qui je dois à peu prés 90% de ce que je sais en matière de création artistique. Lorsque vous travaillez sur une composition pendant un certain temps, l’image de celle-ci a tendance à « s’imprimer » dans votre cerveau de sorte que vous n’en percevez plus les défauts : ainsi, regarder celle-ci dans un miroir régulièrement vous permet d’en déceler les faiblesses de contrastes puisque la voir inversée est comme la regarder d’un œil neuf. Bien sûr, ça ne fonctionne pas tout à fait de la même façon en mapping puisque vous créez un environnement en trois dimensions que vous observez de plusieurs points de vue successifs dans UnrealEd mais dans le cas d’un point de vue fixe (comme le point de spawn d’une map solo par exemple, ou bien la sortie d’un corridor où le champ de vision du joueur est restreint, ou encore dans le cas d’une décoration imposante telle que dans la salle du Super Shield de DM-Injector), le truc pourra éventuellement vous être utile : de temps en temps, prenez un screenshot de la zone concernée et inversez-la dans un logiciel de manipulation d’image, tel que Photoshop par exemple ; ce « coup du miroir » (souvenez-vous de l’expression, j’y reviendrais…) est assez fondamental chez tout artiste qui se respecte et vous permettra de déceler des faiblesses que vous ne verriez peut-être pas en temps normal…

Remarque : l’artiste débutant est souvent tenté de foncer la couleur pour obtenir des contrastes et, contrairement à ce que l’exemple ci-dessus peut vous laisser croire, ce n’est pas forcément une « bonne » chose. En effet, les peintres d’antan utilisaient presque exclusivement du bleu (précisément, du Cyan, j’y reviendrais…) pour foncer leurs couleurs mais jamais de Noir ; celui-ci est une invention des imprimeurs qui a à peine un siècle à peu prés et aucun artiste dont les œuvres sont dans les musées n’a jamais utilisé cette « couleur » pour la simple et bonne raison qu’elle n’existait pas : pour obtenir du « noir » – qui était en réalité un marron plus ou moins foncé – les peintres mélangeaient en quantités égales les trois couleurs primaires. Que sont les couleurs primaires ? Passez à la suite pour le savoir…

3) La complémentarité des couleurs : des contrastes colorés

Le monochromatisme n’ayant qu’un intérêt limité, les artistes ont rapidement mis au point un système de contraste semblable basé sur les couleurs. Au début, les peintres utilisaient des poudres de minerai mélangées à de l’eau pour obtenir leurs peintures ; ils affinèrent cette technique par la suite en mélangeant les poudres à de l’huile qui sèche beaucoup plus lentement et permet de travailler la toile sur le long terme ; avec la chimie moderne, des techniques encore plus complexes sont devenues possibles, telle que l’acrylique… Très vite, ils cessèrent de jongler avec des milliers de poudre et n’utilisèrent plus que trois couleurs pour obtenir toutes les autres en les mélangeant en quantités différentes : ces trois couleurs principales – le Cyan (un Bleu pâle), le Magenta (un Rouge légèrement rosé) et le Jaune – sont appelées « couleurs primaires » et le produit de leur mélange, « couleurs secondaires ». Vers la fin du XIXème siècle, les imprimeurs adoptèrent à leur tour les couleurs et, naturellement, reprirent celles qu’utilisaient les peintres en adaptant à leurs machines la technique du pointillisme conçue par Seurat et Van Gogh : celle-ci consiste à juxtaposer des minuscules points de couleurs primaires les uns à coté des autres afin de recréer par une forme d’illusion d’optique les dégradés de couleurs (dites « couleurs secondaires ») normalement obtenus en mélangeant les poudres de minerai évoquées plus haut. Vues de loin, les couleurs se mélangent parfaitement alors que de prés, les points de couleurs primaires sont parfaitement discernables. Quelques exemples :

Cliquez sur l'image pour la voir en plus grand

Si vous prenez le temps d’observer de près une image dans un magazine (n’ayez pas peur de prendre une loupe…), vous remarquerez que l’image est composée d’une multitude de points juxtaposés qui, vus de loin, reproduisent les couleurs intermédiaires et les dégradés nécessaires pour éviter des surfaces de couleurs uniformes, et souvent abruptes, qu’on appelle des « aplats » (ce qui ne veut pas dire que les aplats doivent être absolument proscrits, l’Art Moderne l’a bien démontré, mais en règle générale une image faite de nombreux dégradés est plus agréable à l’œil) : sur Photoshop, ces points sont appelés des pixels…

Pendant des siècles, les artistes utilisèrent toutes les couleurs secondaires qu’ils purent obtenir des couleurs primaires et on crut longtemps qu’il n’y en avait pas d’autres, jusqu’à ce qu’on invente la photographie en couleurs. Alors il s’avéra que certaines couleurs obtenues sur une pellicule photo ne pouvaient pas être imprimées telle quelle, les couleurs des imprimeurs – et donc celles des peintres – étaient trop restreintes : c’est la raison pour laquelle on parle de « couleurs imprimables » (CMJN) et de « couleurs visibles » (RVB) dont le spectre est plus vaste que celui des précédentes. Le problème qui nous concerne étant que la complémentarité des couleurs repose sur le spectre CMJN : comment y incorporer les couleurs du spectre RVB ?

Souvenez-vous de ce que je vous disais plus haut à propos de la lumière en tant que partie visible du spectre électromagnétique : la lumière n’est en réalité qu’une « ligne droite » dont le seul contraste extrême qu’on peut obtenir consiste à juxtaposer l’une à coté de l’autre les deux extrémités de ce spectre, soit le Rouge et le Bleu. Plutôt limité, non ? D’autant plus que le résultat n’est généralement pas fameux car trop abrupt, voyez DM-1on1-Squader pour plus de détails… Une solution consiste à représenter le spectre RVB en triangle et à y juxtaposer le spectre CMJ de la façon suivante :

Note : contrairement à ce qui est montré ici, le mélange en quantités parfaitement égales des couleurs primaires du spectre RVB est supposé donner du Blanc et non du Noir car celui-ci est le produit du mélange en quantités parfaitement égales des couleurs primaires du spectre CMJ ; ce schéma est simplement supposé vous montrer un principe de superposition de deux spectres a priori incompatibles, suivez-le donc avec un grain de sel…

Aux extrémités du triangle, le spectre de la lumière visible RVB (RGB en anglais), et en son centre, le spectre CMJ (CMY en anglais) – présenté sous la forme du Cercle Chromatique, seule et unique bible de tous les peintres – composé de Cyan (C), de Magenta (M) et de Jaune (J), les couleurs secondaires obtenues par le mélange en quantités égales des couleurs primaires correspondantes sont placées sur le cercle entre les primaires concernées :

– Cyan + Magenta = Violet (V)

– Magenta + Jaune = Orange (O)

– Jaune + Cyan = Vert (V ; attention : ce n’est pas exactement le même Vert que celui du spectre RVB, celui-ci n’étant pas « imprimable » comme je vous le disais plus haut…)

Les couleurs secondaires sont donc les « couleurs complémentaires » de la couleur inutilisée pour les obtenir : suivez les double flèches blanches pour trouver la couleur complémentaire d’une couleur primaire et vice-versa. Ces « couleurs complémentaires » sont donc les « opposées » des couleurs primaires et ainsi celles avec lesquelles il faut conjuguer les primaires pour obtenir les meilleurs contrastes, donc les notions de volume et d’espace nécessaires pour une bonne compréhension d’un volume, ou d’un environnement dans le cas du mapping. Voici un exemple d’utilisation de couleurs complémentaires dans une image qui ressemble à une autre que vous connaissez déjà : voyez comme le cylindre, maintenant en orange, se détache clairement du fond bleu, la couleur primaire complémentaire de la précédente :

Cliquez sur l'image pour la voir en plus grand

Note : pour le spectre RVB, la conjugaison des couleurs est dite « soustractive » alors que pour le spectre CMJ, elle est dite « additive » et la raison en est assez simple. Concernant le spectre CMJ, vous avez probablement déjà compris : l’addition des couleurs primaires sur une feuille blanche permet de reproduire les dégradés de couleurs, que ce soit par la technique de pointillisme des imprimeurs ou par le mélange des pâtes de peinture sur la palette du peintre (ou directement sur la toile pour les véritables maîtres). Pour ce qui est du spectre RVB, c’est un peu plus subtil : en fait, les couleurs n’existent « pas » en réalité, il y a juste des matériaux dont les structures atomiques leur permet de retenir certaines des couleurs de la lumière qu’ils reçoivent alors qu’ils renvoient les autres, donc celles qu’on voit ; ainsi se produit une « soustraction » de certaines couleurs, la lumière reçue en est dépouillée et ne subsistent plus que les autres qui donnent leur « couleur » aux choses qui nous entourent. Il va sans dire qu’aucun moteur 3D n’est capable de reproduire en temps réel tous les détails d’une telle complexité, d’où le rôle prépondérant des textures et des matériaux dans l’éclairage d’une map : compte tenu de l’importance de cet élément, j’y reviendrais en détails plus loin…

Remarque : comme je le disais plus haut à propos de DM-1on1-Squader, trop de contrastes tend à tuer le contraste. En gros, ça fait mal aux yeux. De nombreux exemples se trouvent dans les productions pour la jeunesse, celles de Walt Disney en tête de liste : les jeunes ayant plus de mal que les adultes à distinguer les couleurs, il est nécessaire d’utiliser de très forts contrastes et des couleurs très saturées pour exprimer les volumes. Ne vous sentez pas obligé de transformer votre map en Las Vegas ou en Alice aux Pays des Merveilles pour donner de bonnes notions de profondeur : une harmonie de couleurs est souvent ce qu’il y a de mieux, à la fois pour les yeux et pour éviter de passer pour un gros balourd (je vous donnerais quelques exemples commentés un peu plus loin). En cas de doute, n’oubliez pas que le miroir est votre ami… Voici un exemple de map éclairée à la Walt Disney selon moi (DM-Curse4) :

Cliquez sur l'image pour la voir en plus grand

Inutile de préciser que ce genre d’éclairage fonctionne « mal » pour un thème comme celui-là qui se veut infernal et démoniaque : en fait, on a davantage l’impression de se trouver dans un lieu féérique et merveilleux qu’aux portes de l’Enfer. L’auteur s’est-il trompé dans son choix ou a-t-il trop tiré sur la limite de son concept ? On ne le saura certainement jamais mais toujours est-il qu’il y a là ce qui me semble être un problème d’éclairage… Vous ne serez peut-être pas de cet avis cependant.

Cet exemple me permet de passer au point suivant : le symbolisme des couleurs, ou quand l’Art rejoint la philosophie, voire la métaphysique. Certains imbéciles obscurantistes, dont je tairais les noms par politesse, affirment haut et fort dans leurs tutoriaux et sur les forums spécialisés que certaines couleurs valent mieux que d’autres en raison de leur symbole. Cette thèse est difficilement soutenable, pour plusieurs raisons. La première, c’est que si les artistes depuis l’aube de l’Art ont toujours utilisé la quasi-totalité des couleurs à leur disposition (des connaissances de base en Histoire de l’Art permettent de s’en assurer), c’est bien qu’elles ont toutes leur utilité et qu’il n’y en a pas de meilleures que d’autres. En fait, le choix d’une harmonie de couleurs dépend beaucoup plus du thème de l’œuvre que du choix personnel de son auteur. Ce qui m’amène à la raison suivante : le symbolisme des couleurs varie considérablement d’une culture à l’autre (preuve en est la politique désastreuse de la General Motors au cours des années 60 qui essaya de vendre en Asie des voitures peintes aux couleurs de l’Amérique, avec des conséquences dramatiques pour les bénéfices), ce qui veut dire que votre symbolisme durement travaillé durant d’interminables heures perdra tout son sens suivant si le spectateur de votre travail est africain, asiatique ou je ne sais quoi, chose qui arrive beaucoup plus tôt qu’on ne croit en ces temps modernes où n’importe qui peut télécharger votre travail depuis n’importe quel point de la planète. Ne perdez pas votre temps avec des chimères, ne vous trompez pas de chemin : vous êtes artiste, pas philosophe ni métaphysicien, votre travail consiste à permettre aux spectateurs de ressentir une émotion devant votre travail. Ce qu’il en fera ne vous regarde pas : connaissez vos limites.

(1) Ce tutorial a été écrit en 2006, alors qu’UT3 – alors appelé UT2007 – n’était pas encore sorti.

Suite du tutorial (2de Partie : Pratique)

Sommaire :
Introduction
– 1. Théorie (le présent billet)
2. Pratique
3. Des Cas particuliers

Tutorial : l’Éclairage en level design

Ecran de démarrage de l'éditeur de niveaux UnrealEd 3.0Introduction

Ceux d’entre vous qui pratiquent la conception de niveaux de jeux vidéo – c’est-à-dire le mapping, aussi appelé level design – s’intéresseront peut-être à un didacticiel que j’ai écris il y a maintenant un certain temps sur les techniques d’éclairage en 3D temps réel.

Ce tutorial se divise en trois parties, dont la première présente la théorie de la lumière dans tout ce qu’elle a de plus général – depuis ses fondements physiques jusqu’à ses applications pratiques dans les domaines picturaux. Y sont décrits avec plus ou moins de détails l’importance des contrastes dans la représentation des volumes et des effets de profondeur, ainsi que la complémentarité des couleurs telle qu’elle est utilisée depuis des siècles dans le domaine de la peinture mais aussi plus récemment au cinéma et en photographie – quoique sur des bases assez différentes dans ces deux derniers domaines… Cette partie s’adresse à tous les artistes de la 3D, quelle que soit la technologie qu’ils utilisent, en tâchant de vulgariser un enseignement universel et plusieurs fois millénaire – celui-là même que j’ai suivi à travers mes études artistiques.

La seconde partie, plus spécifique au moteur Unreal, propose des cas pratiques dont beaucoup – au moins dans la première moitié de cette page précise – peuvent être appliqués, plus ou moins tels quels, à la plupart des technologies actuelles de la 3D. Une certaine souplesse dans leur interprétation sera toutefois requise pour ceux d’entre vous qui travaillent avec des technologies foncièrement différentes de celle développée par Epic Games. Du reste, un artiste est supposé apprécier faire des expérimentations de sorte que vous devriez vous retrouver en terrain connu si vous avez l’âme d’un créatif…

La troisième et dernière partie se place dans une veine semblable à celle de la seconde à travers l’exposition de techniques presque toutes exclusives au moteur Unreal mais il n’est pas exclu que vous y trouviez de quoi faire dans un registre technologique différent, et surtout dans les chapitres concernant les effets d’ombre ainsi que celui présentant divers trucs et astuces.

En vous souhaitant un bon mapping, je vous invite à cliquer sur un des liens suivant pour commencer votre lecture.

Suite du tutorial (1ère partie : Théorie)

Sommaire :
– Introduction (le présent billet)
1. Théorie
2. Pratique
3. Des Cas particuliers

N.B. : les lecteurs plus à l’aise avec l’anglais que le français apprécieront certainement de consulter la traduction intégrale de ce tutorial par Arcadia Vincennes, professionnel du level design, qui m’a fait l’honneur de poster cette version sur son propre site, ici même.


Entrer votre e-mail :