Lumières et Ombres 2D¶
Introduction¶
Ce tutoriel explique comment fonctionne l'éclairage 2D dans le projet démo lights and shadows. Il commence par une brève description des ressources utilisées dans la démo finale et décrit ensuite comment faire une scène comme la démo étape par étape.
Toutes les ressources de ce tutoriel se trouvent dans le répertoire de démonstration officiel sur GitHub. Je vous suggère de le télécharger avant de commencer. Vous pouvez également le télécharger à partir du gestionnaire de projet. Lancez Godot et dans la barre du haut, sélectionnez "Modèles" et recherchez "2D Lights and Shadows Demo".
Configuration¶
Pour cette démonstration, nous utilisons quatre textures : deux pour les lumières, une pour les ombres portées et une pour l’arrière-plan. J'ai inclus des liens vers tous les éléments ici si vous souhaitez les télécharger séparément de la démo.
La première est l'image d'arrière-plan (background.png) utilisée dans la démo. Vous n'avez pas nécessairement besoin d'un arrière-plan, mais nous en utilisons un pour la démo.
La seconde est une image simple en noir (caster.png) à utiliser comme objet diffuseur d'ombres. Pour un jeu de haut en bas, cela peut être un mur ou tout autre objet qui projette une ombre.
Vient ensuite la lumière elle-même (light.png). Si vous cliquez sur le lien, vous verrez sa taille. L'image que vous utilisez pour une lumière doit couvrir la zone que vous souhaitez que votre lumière couvre. Cette image mesure 1024x1024 pixels, vous devez donc l’utiliser pour couvrir 1024x1024 pixels dans votre jeu.
Enfin, nous avons l’image Spotlight (spot.png). La démo utilise un blob pour montrer où se trouve la lumière et la plus grande image de lumière pour montrer l’effet de l'éclairage sur le reste de la scène.
Nœuds¶
- La démo utilise quatre nœuds différents :
CanvasModulate est utilisé pour assombrir la scène.
Sprites sont utilisés pour afficher les textures des gouttes lumineuses, de l’arrière-plan et des ombres portées.
Les nœuds Light2D sont utilisés pour éclairer la scène. La manière dont fonctionne une lumière consiste généralement à ajouter une texture sélectionnée sur le reste de la scène pour simuler l'éclairage. Mais elle peut être utilisée d'une autre manière, par exemple en masquant des parties de la scène.
LightOccluder2Ds sont utilisés pour indiquer au shader quelles parties de la scène projettent des ombres. Les ombres apparaissent uniquement sur les zones couvertes par la Lumière et leur direction est basée sur le centre de la Lumière.
Lumières¶
Les Lumières couvrent toute l'étendue de leur texture respective. Elles utilisent un mélange additif pour ajouter la couleur de leur texture à la scène.
Les Lumières ont quatre Modes : Add, Sub, Mix, et Mask.
Add ajoute la couleur de la texture lumineuse à la scène. Cela éclaire la zone sous la lumière.
Sub soustrait la couleur de la lumière de la scène. Cela assombrit la zone sous la lumière.
Mix mélange la couleur de la lumière avec la scène sous-jacente. La luminosité qui en résulte se situe à mi-chemin entre la couleur de la lumière et celle en dessous.
Mask est utilisé pour masquer les zones couvertes par la lumière. Les zones masquées sont cachées ou révélées en fonction de la couleur de la lumière.
Pour la démo, les lumières ont deux composants, un nœud Light2D (qui est l'effet de la lumière elle-même) et un Sprite qui est une image montrant l'emplacement de la source de lumière. Un enfant Sprite n'est pas nécessaire pour faire fonctionner un Light2D.
Ombres¶
Les ombres sont créées en croisant un Eclairage avec un LightOccluder2D.
Par défaut, les ombres sont désactivées. Pour les activer, cliquez sur Light et dans la section Ombres, cochez la case Activées.
Dans la démo nous utilisons un Sprite avec une texture pour faire les "Shadow Casters", mais en réalité tout ce dont vous avez besoin est un couple de LightOccluder2Ds. Par lui-même le LightOccluder2D ressemble à un point sombre et dans cette démo le Sprite est juste un carré noir.
Pas à pas¶
Maintenant que nous avons couvert les bases des nœuds utilisés, nous pouvons maintenant suivre pas à pas le processus de création d’une scène similaire à celle trouvée dans la démo.
Ajoutez d’abord un Sprite et définissez sa texture avec l’image d'arrière-plan. Pour votre jeu, cela peut être n'importe quel arrière-plan que vous choisissez. Pour ce style d'ombre, il s'agira certainement d'une texture de sol.
Créez ensuite trois Light2D's et réglez leurs textures sur l’image éclairage. Vous pouvez modifier leur couleur dans la section supérieure. Par défaut, les ombres sont désactivées et le mode est réglé sur add. Cela signifie que chaque lumière ajoute sa propre couleur à tout ce qui se trouve en dessous.
Ajoutez ensuite un Sprite enfant à chacun des nœuds Éclairage et définissez la texture des Sprite's sur l'image de tâche. Chacun de ceux-ci doit rester centré sur le nœud Éclairage. La tâche est l'image de la lumière elle-même tandis que Éclairage montre l'effet de la lumière sur la scène. LightOccluder2D's considérera la position de la lumière comme étant le centre du nœud Éclairage, raison pour laquelle nous voulons que la tâche soit centrée sur son parent Éclairage.
Note
Les animations de la démo ne seront pas abordées ici. Voir Introduction aux fonctions d'animation pour des informations sur la création d'animations.
À l'heure actuelle, la scène devrait sembler trop brillante. En effet, les trois lumières ajoutent de la couleur à la scène. C'est pourquoi la démo utilise un CanvasModulate dans la scène. Le CanvasModulate recouvre la fenêtre de visualisation par une couleur spécifique.
Ajoutez un CanvasModulate à la scène et définissez sa couleur sur rgb (70, 70, 70). Cela rendra la scène suffisamment sombre pour que vous puissiez voir distinctement les effets des lumières.
Ajoutons maintenant les projecteurs d'ombres.
La démo utilise un Node nommé "casters" pour organiser les projecteurs d'ombres. Ajouter un Node2D à la scène. Il sera utilisé pour regrouper tous les projecteurs d'ombres. De cette façon, nous pouvons tous les afficher et les cacher en même temps.
Chaque projecteur d'ombres est composé d'un Sprite, avec un LightOccluder2D enfant. Pour la démo, le Sprite a une texture définie sur caster image et rien d'autre. L'enfant LightOccluder2D est là où toute la magie se produit. Dans un jeu, le Sprite pourrait être plus qu'une boîte noire ; ce pourrait être une image de n'importe quel objet projetant l'ombre : un mur, un coffre magique, ou autre chose.
Les LightOccluder2Ds indiquent au jeu la forme de l'obturateur. Ils contiennent un OccluderPolygon2D qui est un conteneur pour un polygone et d'autres informations. Pour cette démo, comme notre mur est un carré, nous définissons Polygon à un carré. Les autres paramètres par défaut conviennent.
Le premier paramètre, Closed, peut être soit on ou off. Un polygone fermé occulte la lumière provenant de toutes les directions. Un polygone ouvert n'occulte que la lumière provenant d'une seule direction.
Le Cull Mode vous permet de choisir la direction dans laquelle vous souhaitez que l'on procède à l'abattage. La valeur par défaut est "Désactivé", ce qui signifie que l'occulteur projette une ombre quel que soit le côté où la lumière est allumée. Les deux autres réglages "Sens horaire" et "Sens anti-horaire" font référence à l'ordre d'enroulement des sommets du polygone. L'ordre d'enroulement est utilisé pour déterminer quel côté de la ligne se trouve à l'intérieur du polygone. Seules les lignes orientées vers l'extérieur projettent des ombres.
Pour illustrer la différence, voici une image d'un LightOccluder2D avec Closed défini sur désactivé dans le OccluderPolygon2D correspondant, de sorte que les lignes du polygone peuvent être vues :
Note
Cull Mode est réglé sur Désactivé. Les trois lignes projettent des ombres.
Note
Cull Mode est réglé sur Clockwise. Seules les lignes du haut et de droite projettent des ombres.
Note
Cull Mode est réglé sur Counter-Clockwise. Seule la ligne du bas projette une ombre. Si Fermé était réglé sur Allumé, il y aurait une ligne verticale supplémentaire à gauche qui projetterait également une ombre.
Quand vous avez ajouté le LightOccluder2Ds, les ombres ne sont toujours pas apparues. Vous devez revenir dans le Light2Ds et sous la section Ombre, réglez Activer sur Allumé. Cela active les ombres à bords durs comme dans l'image ci-dessous.
Pour donner aux ombres cet aspect doux et agréable, nous réglons les variables filter, filter smooth et gradient length. Godot prend en charge le Percentage Closer Filtering (PCF), qui prend plusieurs échantillons de la carte des ombres autour d'un pixel et les estompe pour créer un effet d'ombre adoucit. Plus le nombre d'échantillons est élevé, plus l'ombre paraîtra douce, mais plus ce sera lent. C'est pourquoi Godot fournit 3-13 échantillons par défaut et vous permet de choisir. La démo utilise PCF7.
Note
C'est une ombre rendue avec les paramètres de la démo. longueur de dégradé est défini sur 1.3, filtre lisse est défini sur 11.1 et filter est défini sur PCF7.
Note
filtre est réglé sur PCF13. Notez que l'ombre devient plus large, c'est parce que la distance entre les échantillons est basée sur la variable filtre lisse.
Pour utiliser le filtrage, vous devez définir la variable filtre lisse. Cela dicte la distance qui sépare les échantillons. Si vous voulez que la zone souple s'étende assez loin, vous pouvez augmenter la taille de filtre lisse. Cependant, avec peu d'échantillons et un grand filtre lisse, vous pouvez voir des lignes se former entre les échantillons.
Note
filter smooth est réglé sur 30.
Les différents nœuds Light dans la démo utilisent des valeurs différentes pour le filtre doux. Jouez avec et voyez ce que vous aimez.
Note
filter smooth est réglé sur 0.
Enfin, il y a la variable gradient length. Pour certaines ombres douces, il est préférable que l'ombre ne commence pas immédiatement sur l'objet, car cela produit un bord dur. La variable de longueur du dégradé crée un dégradé doux pour commencer l'ombre afin de réduire l'effet du bord dur.
Note
gradient length est réglé sur 0.
Note
gradient length est réglé sur 10.
Vous devrez jouer un peu avec les options pour trouver les paramètres qui conviennent à votre projet. Il n'y a pas de bonne solution pour tout le monde, c'est pourquoi Godot offre tant de flexibilité. Gardez simplement à l'esprit que plus le filtre est élevé, plus les ombres seront chères à générer.