2D Beleuchtung und Schatten¶
Einführung¶
In dieser Anleitung wird erklärt, wie die 2D-Beleuchtung im Beispiel-Projekt Beleuchtung und Schatten funktioniert. Es beginnt mit einer kurzen Beschreibung der in dem finalen Beispiel verwendeten Ressourcen und beschreibt dann Schritt für Schritt, wie eine Szene wie in diesem Beispiel erstellt wird.
Alle Ressourcen für dieses Tutorial finden Sie im offiziellen Demo-Repository auf GitHub. Ich schlage vor, dass Sie es herunterladen, bevor Sie beginnen. Alternativ kann es vom Projektmanager heruntergeladen werden. Starten Sie Godot und wählen Sie in der oberen Leiste "Vorlagen" und suchen Sie nach "2D Lights and Shadows Demo".
Aufbau¶
Für dieses Beispiel verwenden wir vier Texturen: zwei für die Lichter, eine für die Schattenwerfer und eine für den Hintergrund. Ich habe hier Links zu allen hinzugefügt, wenn Sie sie separat von der Demo herunterladen möchten.
Das erste ist das Hintergrundbild (background.png), das in der Demo verwendet wird. Sie benötigen nicht unbedingt einen Hintergrund, aber wir verwenden einen für die Demo.
Das zweite ist ein einfaches schwarzes Bild (caster.png), das als Schattenwerfer Objekt verwendet werden soll. Bei einem Top-Down-Spiel kann dies eine Wand oder ein anderes Objekt sein, das einen Schatten wirft.
Als nächstes kommt das Licht selbst (light.png). Wenn Sie auf den Link klicken, werden Sie feststellen, wie groß es ist. Das Bild, das Sie für ein Licht verwenden, sollte den Bereich abdecken, den Ihr Licht abdecken soll. Dieses Bild ist 1024 x 1024 Pixel groß, daher sollten Sie es verwenden, um 1024 x 1024 Pixel in Ihrem Spiel abzudecken.
Zuletzt haben wir das Spotlight-Bild (spot.png). Die Demo verwendet einen Blob, um zu zeigen, wo sich das Licht befindet, und das größere Lichtbild, um die Wirkung des Lichts auf den Rest der Szene zu zeigen.
Nodes¶
- Das Beispiel verwendet vier verschiedene Nodes:
CanvasModulate wird verwendet, um die Szene abzudunkeln.
Sprites werden verwendet, um die Texturen für die Lichtflecken, den Hintergrund und für die Schattenwerfer anzuzeigen.
Light2Ds werden verwendet, um die Szene zu beleuchten. Die Art und Weise, wie ein Licht normalerweise funktioniert, besteht darin eine ausgewählte Textur über dem Rest der Szene hinzuzufügen, um die Beleuchtung zu simulieren. Es kann aber auch auf andere Weise verwendet werden, z.B. um Teile der Szene auszublenden.
LightOccluder2Ds werden verwendet, um dem Shader mitzuteilen, welche Teile der Szene Schatten werfen. Die Schatten erscheinen nur in Bereichen, die von Light2D abgedeckt werden, und ihre Richtung basiert auf der Mitte des Lichts.
Lichter¶
Lichter decken den gesamten Umfang ihrer jeweiligen Textur ab. Sie verwenden eine additive Überblendung, um der Szene die Farbe ihrer Textur hinzuzufügen.
Lichter haben vier Modi: Add, Sub, Mix, und Mask.
Add Fügt der Szene die Farbe der hellen Textur hinzu. Es hellt den Bereich unter dem Licht auf.
Sub subtrahiert die Farbe des Lichts von der Szene. Es verdunkelt den Bereich unter dem Licht.
Mix mischt die Farbe des Lichts mit der zugrunde liegenden Szene. Die resultierende Helligkeit liegt in der Mitte zwischen der Farbe des Lichts und der Farbe darunter.
Mask wird verwendet, um Bereiche auszublenden, die vom Licht bedeckt sind. Ausgeblendete Bereiche werden je nach Lichtfarbe ausgeblendet oder aufgedeckt.
Für die Demo bestehen die Lichter aus zwei Komponenten, dem Licht selbst (der Beleuchtungseffekt) und einem Sprite Blob, welches ein Bild ist, das die Position der Lichtquelle zeigt. Ein untergeordnetes Element Sprite ist nicht erforderlich, damit ein Licht funktioniert.
Schatten¶
Schatten werden erzeugt, indem ein Licht mit einem LightOccluder2D kombiniert wird.
Standardmäßig sind Schatten deaktiviert. Um sie einzuschalten, klicken Sie auf Light und aktivieren Sie im Abschnitt Shadows Enabled.
In der Demo verwenden wir ein Sprite mit einer Textur darauf, um den "Shadow Casters" zu erstellen, aber in Wirklichkeit brauchen Sie nur ein paar LightOccluder2Ds. An sich sieht der LightOccluder2D wie ein dunkler Fleck aus und in dieser Demo ist das Sprite nur ein schwarzes Quadrat.
Schritt für Schritt¶
Nachdem wir uns nun mit den Grundlagen der verwendeten Nodes befasst haben, können wir Schritt für Schritt durch den Prozess des Erstellens einer Szene wie der in der Demo gehen.
Fügen Sie zuerst ein Sprite hinzu und setzen Sie seine Textur auf das `Hintergrundbild <https://raw.githubusercontent.com/godotengine/godot-demo-projects/master/2d/lights_and_shadows/background.png> `_. Für Ihr Spiel kann dies ein beliebiger Hintergrund sein. Bei dieser Art von Schatten handelt es sich höchstwahrscheinlich um eine Bodentextur.
Als nächstes erstellen Sie drei Light2Ds und setzen ihre Texturen auf Lichtbild <https://raw.githubusercontent.com/godotengine/godot-demo-projects/master/2d/lights_and_shadows/light.png> `_. Sie können ihre Farbe im oberen Bereich ändern. Standardmäßig sind Schatten deaktiviert und der ``Modus` ist auf Add eingestellt. Dies bedeutet, dass jedes Licht die eigene Farbe dem sich darunter befindenden Objekt hinzufügt.
Fügen Sie als Nächstes jedem der Licht Node ein untergeordnetes Sprite Element hinzu, und setzen Sie die Sprite Textur auf das Blob-Bild. Jedes dieser Elemente sollte auf dem Licht Node zentriert bleiben. Der Blob ist das Bild des Lichts selbst, während der Licht Node den Effekt zeigt, den das Licht auf die Szene hat. Der LightOccluder2D Node behandelt die Position des Lichts als Mittelpunkt des Licht Nodes, weshalb wir möchten, dass der Blob auf seinem übergeordneten Light Node zentriert wird.
Bemerkung
Die Animationen in der Demo werden hier nicht behandelt. Siehe Einführung in die Animationsfunktionen für Informationen zum Erstellen von Animationen.
Im Moment sollte die Szene zu hell aussehen. Dies liegt daran, dass alle drei Lichter der Szene Farbe hinzufügen. Aus diesem Grund verwendet die Demo in der Szene ein CanvasModulate. Das CanvasModulate multipliziert das gesamte Ansichtsfenster mit einer bestimmten Farbe.
Fügen Sie der Szene ein CanvasModulate hinzu und setzen Sie die Farbe auf rgb (70, 70, 70). Dadurch wird die Szene ausreichend dunkel, um die Auswirkungen der Lichter deutlich zu sehen.
Jetzt fügen wir die Schattenwerfer hinzu.
Die Demo verwendet einen Node namens "casters", um die Schattenwerfer zu organisieren. Fügen Sie der Szene einen Node2D hinzu. Es wird verwendet, um alle Schattenwerfer zu gruppieren. Auf diese Weise können wir sie alle gleichzeitig ein- und ausblenden.
Jeder Schattenwerfer besteht aus einem Sprite mit einem LightOccluder2D Unterobjekt. Für die Demo hat das Sprite eine Textur, die auf das Caster-Bild eingestellt ist und sonst nichts. Das Unterobjekt LightOccluder2D ist der Ort, an dem die ganze Magie geschieht. In einem Spiel kann das Sprite mehr als ein schwarzes Quadrat sein; Es könnte ein Bild von jedem Objekt sein, das den Schatten wirft: eine Wand, eine magische Truhe oder irgendetwas anderes.
LightOccluder2Ds sagt dem Spiel, welche Form der Okkluder hat. Sie enthalten ein OccluderPolygon2D, das ein Container für ein Polygon und einige andere Informationen ist. Da unsere Wand ein Quadrat ist, setzen wir für diese Demo Polygon auf ein Quadrat. Die anderen Standardeinstellungen sind in Ordnung.
Die erste Einstellung, Closed, kann entweder an oder aus sein. Ein geschlossenes Polygon absorbiert Licht aus allen Richtungen. Ein offenes Polygon absorbiert Licht nur aus einer Richtung.
Mit Cull Mode können Sie auswählen, in welche Richtung "weggeschnitten" werden soll. Die Standardeinstellung ist Disabled, was bedeutet, dass der Okkluder einen Schatten wirft, egal auf welcher Seite sich das Licht befindet. Die beiden anderen Einstellungen ClockWise und CounterClockWise beziehen sich auf die Wicklungsreihenfolge der Eckpunkte des Polygons. Die Wicklungsreihenfolge wird verwendet, um zu bestimmen, welche Seite der Linie innerhalb des Polygons liegt. Nur nach außen gerichtete Linien werfen Schatten.
Um den Unterschied zu veranschaulichen, ist hier ein Bild von einem LightOccluder2D mit Closed auf aus gesetzt im entsprechenden OccluderPolygon2D, so dass die Linien des Polygons gesehen werden können:
Bemerkung
Cull Mode ist auf Disabled gesetzt. Alle drei Linien werfen Schatten.
Bemerkung
Cull Mode ist auf ClockWise gesetzt. Nur die obere und rechte Linie werfen Schatten.
Bemerkung
Cull Mode ist auf CounterClockWise gesetzt. Nur die unterste Line wirft einen Schatten. Wenn Closed auf an gesetzt wäre, gäbe es links eine zusätzliche vertikale Linie, die ebenfalls einen Schatten werfen würde.
Wenn Sie LightOccluder2Ds hinzugefügt haben werden die Schatten immer noch nicht angezeigt. Sie müssen zurück zu Light2Ds und im Abschnitt Shadow Enable auf an setzen. Dadurch werden Schatten mit harten Kanten wie im Bild unten aktiviert.
Um den Schatten ein schönes, weiches Aussehen zu verleihen, setzen wir die Variablen filter, filter smooth, und gradient length. Godot unterstützt die `Percentage Closer Filtering <https://developer.nvidia.com/gpugems/GPUGems/gpugems_ch11.html>`_(PCF), bei der mehrere Abtastwerte der Schattenkarte um ein Pixel herum verwischt werden, um einen gleichmäßigen Schatteneffekt zu erzielen. Je höher die Anzahl der Abtastwerte, desto glatter sieht der Schatten aus, aber desto langsamer die Berechnung. Aus diesem Grund stellt Godot standardmäßig 3-13 Abtastwerte zur Verfügung und ermöglicht Ihnen die Auswahl. Die Demo verwendet PCF7.
Bemerkung
Dies ist ein Schatten, der mit den Einstellungen der Demo gerendert wird. gradient length ist auf 1.3 gesetzt, filter smooth ist auf 11.1 gesetzt und filter ist auf PCF7 gesetzt.
Bemerkung
filter ist auf PCF13 gesetzt. Beachten Sie, wie der Schatten breiter wird. Dies liegt daran, dass der Abstand zwischen den Abtaswerten auf der Variablen filter smooth basiert.
Um die Filterung nutzen zu können, müssen Sie die Variable filter smooth setzen. Dies bestimmt, wie weit die Abtastwerte voneinander entfernt sind. Wenn Sie möchten, dass sich der weiche Bereich ziemlich weit erstreckt, können Sie die Größe von filter smooth erhöhen. Bei wenigen Abtastwerten und einem großen filter smooth können Sie jedoch Linien zwischen den Abtastwerten erkennen.
Bemerkung
filter smooth ist auf 30 gesetzt.
Die verschiedenen Licht Nodes in der Demo verwenden unterschiedliche Werte für die Filterglättung. Spielen Sie damit herum und sehen Sie, was Ihnen gefällt.
Bemerkung
filter smooth ist auf 0 gesetzt.
Schließlich gibt es die Variable gradient length. Bei einigen glatten Schatten ist es manchmal besser, dass der Schatten nicht sofort auf dem Objekt beginnt, da dies eine harte Kante erzeugt. Die Verlaufslänge-Variable erzeugt einen glatten Verlauf am Anfang des Schattens, um den Effekt der harten Kante zu verringern.
Bemerkung
gradient length ist auf 0 gesetzt.
Bemerkung
gradient length ist auf 10 gesetzt.
Sie müssen ein wenig mit den Optionen herumspielen, um Einstellungen zu finden, die zu Ihrem Projekt passen. Es gibt keine richtige Lösung für alles, weshalb Godot so viel Flexibilität bietet. Denken Sie daran, dass die Schatten umso rechenintensiver sind, je höher der filter eingestellt ist.