Gestion des ombres en RTP-Like

Toujours dans l'optique de fournir des pistes de réflexions aux graphistes intéressés par le style RTP-Like, vous trouverez dans ce tutoriel les bases théoriques et pratiques sur les ombres portées et leur gestion.

La partie théorique se limite volontairement au minimum nécessaire à savoir pour comprendre comment sont générées les ombres, et n'a aucune prétention d'être exhaustive. L'objectif est simplement de donner des repères et un peu de vocabulaire, je n'entre pas dans le détail des calculs d'angles, entre autres.
La partie pratique nécessite un logiciel gérant les calques, mais les outils utilisés restent simples et aucune manipulation avancée ne sera requise.

J'espère que vous trouverez une utilité à ce tutoriel et prendrez plaisir à le lire. Pour toute remarque ou suggestion, n'hésitez pas à m'en faire part ici ou par MP.
Bonne lecture !


I - Approche théorique


1 - Notions fondamentales & vocabulaire

A - Deux types d'ombres



B - Deux types de sources lumineuses


¹ : Attention, il est important de garder à l'esprit que chaque source peut être considérée différemment en fonction du référentiel.
Un lampadaire sera par exemple une source ponctuelle éclairant une maison, mais deviendra une source étendue s'il éclaire un insecte.


On peut voir sur le schéma ci-dessus que dans le cas d'un éclairage part source étendue, une partie de l'ombre est cependant à moitié éclairée. On appelle cette zone la pénombre, elle est logiquement 50% moins opaque que l'ombre portée de base.


2 - Application au level design et au mapping sur RPG Maker

A - Cas de figures rencontrés

En pratique, il existe deux types d'environnements susceptibles d'être éclairés : les environnements extérieurs d'une part, et les intérieurs.



B - Erreurs à ne pas commettre

Certaines erreurs de gestion des ombres sont récurrentes car faciles à commettre. La capture d'écran ci-dessous montre les trois plus courantes :
• La distance entre les arbres est négligeable devant leur distance par rapport au soleil. Ainsi, comme dit plus haut, ils projettent tous une ombre de la même opacité.
Cependant, nous avons aussi établi qu'une ombre n'a pas d'épaisseur.
De ce fait, même si on peut les superposer conceptuellement, c'est en réalité impossible. L'intersection de deux ombres générées par une même source ne sera donc jamais plus foncée que les ombres en elles-mêmes.
• Par ailleurs, la gestion des couches est maladroite : les troncs et le bas du feuillage des petits arbres ne sont pas touchés par l'ombre portée du grand arbre, de même que le tronc mort.
• Même chose pour les champignons, affichés via un évènement : ils seront placés au-dessus de la troisième couche et des éléments n'ayant pas une priorité de superposition particulière, ce qui inclut les ombres.

Ces maladresses sont en grande part dues au logiciel, mais peuvent être évitées avec un peu de pratique, comme nous allons le voir dans la seconde partie du tutoriel.

Une autre erreur tend à proliférer avec la mode des rayons de soleil ajoutés grâce aux brouillards. On voit de plus en plus ces effets de rayons jaunes à l'opacité dégradée venant d'endroits improbables, totalement incohérents avec la direction des ombres.
Cette composition de Mark1707, qui présente un mapping soigné et très bien maitrisé, se voit ruinée par des effets de lumière qui contredisent totalement l'orientation des ombres.
Les rayons vont même jusqu'à recouper une zone d'ombre, ce qui n'a aucun sens !

Attention donc à bien faire correspondre la direction d'éventuels effets lumineux à celle des ombres


II - Solutions pratiques et création d'ombres réalistes


1 - Définir l'origine de la lumière pour définir la forme des ombres

A ) Orientation de la lumière dans les ressources de base

Les ressources graphiques du RTP constituent la base de travail en RTP-Like. Nous empruntons et éditons les éléments afin d'en former de nouveaux en s'assurant qu'ils gardent le même style.
De ce fait, nos éléments vont sans doute hériter de l'éclairage et de l'ombrage des modèles.

Il est donc intéressant d'analyser d'où vient la lumière et la direction des ombres des ressources de base.
Voici une sélection de quelques éléments qui permettent d'observer facilement l'origine de la lumière ainsi que la direction des ombres :

Les éléments semblent éclairés de face, et les ombres s'étendent derrière les éléments, un peu vers la droite. Les ombres sont de taille réduite, la source doit donc être en hauteur.
En deux dimensions, l'origine de la lumière est en bas à gauche de l'écran :

Si on projette notre espace en trois dimension, on obtient une représentation plus précise de la position de la source :