Attention: Here be dragons

This is the latest (unstable) version of this documentation, which may document features not available in or compatible with released stable versions of Godot.

Checking the stable version of the documentation...

2D Beleuchtung und Schatten

Einführung

Standardmäßig sind 2D-Szenen in Godot unshaded, d. h. Lichter und Schatten sind nicht sichtbar. Dies ist zwar schnell zu rendern, aber unshaded-Szenen können langweilig aussehen. Godot bietet die Möglichkeit, 2D-Beleuchtung und -Schatten in Echtzeit zu verwenden, was den Eindruck von Tiefe in Ihrem Projekt erheblich verbessern kann.

Keine 2D-Lichter oder Schatten, die Szene ist unshaded

Keine 2D-Lichter oder Schatten, die Szene ist unshaded

2D-Lichter aktiviert (ohne Schatten)

2D-Lichter aktiviert (ohne Schatten)

2D-Lichter und -Schatten aktiviert

2D-Lichter und -Schatten aktiviert

Nodes

An einer vollständigen 2D-Beleuchtungseinrichtung sind mehrere Nodes beteiligt:

CanvasModulate wird verwendet, um die Szene abzudunkeln, indem eine Farbe angegeben wird, die als Grundfarbe für die Umgebung dient. Dies ist die endgültige Beleuchtungsfarbe in Bereichen, die nicht von einem 2D-Licht erreicht werden. Ohne einen CanvasModulate-Node würde die endgültige Szene zu hell aussehen, da 2D-Lichter nur das vorhandene, nicht schattierte Erscheinungsbild aufhellen würden (das voll beleuchtet erscheint).

Sprite2Ds werden verwendet, um die Texturen für die Licht-Blobs, den Hintergrund und die Schattenwerfer darzustellen.

PointLight2Ds werden verwendet, um die Szene zu beleuchten. Ein Licht funktioniert normalerweise so, dass eine ausgewählte Textur über den Rest der Szene gelegt wird, um eine Beleuchtung zu simulieren.

LightOccluder2Ds are used to tell the shader which parts of the scene cast shadows. These occluders can be placed as independent nodes or can be part of a TileMapLayer node.

Die Schatten erscheinen nur auf Flächen, die von dem PointLight2D abgedeckt werden und ihre Richtung basiert auf dem Zentrum des Lichts.

Bemerkung

Die Hintergrundfarbe wird nicht beleuchtet. Wenn Sie möchten, dass Licht auf den Hintergrund geworfen wird, müssen Sie eine visuelle Darstellung für den Hintergrund hinzufügen, wie z. B. ein Sprite2D.

Die Propertys Region des Sprite2D können hilfreich sein, um schnell eine sich wiederholende Hintergrundtextur zu erstellen, aber denken Sie daran, auch Textur > Wiederholen in den Propertys des Sprite2D auf Aktiviert zu setzen.

Punktlichter

Punktlichter (auch Positionslichter genannt) sind das häufigste Element der 2D-Beleuchtung. Punktlichter können verwendet werden, um das Licht von Fackeln, Feuer, Geschossen usw. darzustellen.

PointLight2D bietet die folgenden Propertys, die im Inspektor angepasst werden können:

  • Textur: Die Textur, die als Lichtquelle verwendet werden soll. Die Größe der Textur bestimmt die Größe des Lichts. Die Textur kann einen Alphakanal haben, was nützlich ist, wenn Sie den Mischmodus Mix von Light2D verwenden, aber er ist nicht erforderlich, wenn Sie die Blending-Modi Add (Default) oder Subtract verwenden.

  • Offset: Der Offset für die Lichttextur. Anders als beim Verschieben des Licht-Nodes bewirkt das Ändern des Offsets keine Verschiebung des Schattens.

  • Texturskalierung: Der Multiplikator für die Größe des Lichts. Höhere Werte lassen das Licht weiter ausgreifen. Größere Lichter haben höhere Performancekosten, da sie mehr Pixel auf dem Bildschirm beeinflussen, also beachten Sie dies vor dem Vergrößern eines Lichts.

  • Höhe: Die virtuelle Höhe des Lichts in Bezug auf das Normal Mapping. Standardmäßig befindet sich das Licht sehr nahe an den Oberflächen, die Licht empfangen. Dadurch wird die Beleuchtung kaum sichtbar, wenn Normal Mapping verwendet wird, daher sollten Sie diesen Wert erhöhen. Die Anpassung der Lichthöhe macht nur auf Oberflächen, die Normal Mapping verwenden, einen sichtbaren Unterschied.

Wenn Sie keine vorgefertigte Textur für ein Licht haben, können Sie diese "neutrale" Punktlichttextur verwenden (Rechtsklick > Bild speichern unter...):

Neutrale Punktlichttextur

Neutrale Punktlichttextur

Wenn Sie einen anderen Abfall benötigen, können Sie eine Textur prozedural erstellen, indem Sie dem Licht über die Property Textur einen New GradientTexture2D zuweisen. Nachdem Sie die Ressource erstellt haben, erweitern Sie den Abschnitt Füllen und setzen Sie den Füllmodus auf Radial. Anschließend müssen Sie den Farbverlauf selbst so anpassen, dass er von opakem Weiß zu transparentem Weiß wechselt, und seinen Startpunkt in die Mitte legen.

Gerichtetes Licht

Directional lighting is used to represent sunlight or moonlight. Light rays are casted parallel to each other, as if the sun or moon was infinitely far away from the surface that is receiving the light.

DirectionalLight2D bietet die folgenden Propertys:

  • Höhe: Die virtuelle Höhe des Lichts in Bezug auf das Normal Mapping (0.0 = parallel zu Oberflächen, 1.0 = senkrecht zu Oberflächen). Standardmäßig ist das Licht vollständig parallel zu den beleuchteten Flächen. Dadurch wird die Beleuchtung kaum sichtbar, wenn Normal Mapping verwendet wird, daher sollten Sie diesen Wert erhöhen. Die Anpassung der Lichthöhe macht nur bei Flächen, die Normal Mapping verwenden, einen visuellen Unterschied. Die Höhe hat keinen Einfluss auf das Aussehen der Schatten.

  • Max Abstand: Der maximale Abstand von der Kameramitte, den Objekte haben dürfen, bevor ihre Schatten gecullt werden (in Pixel). Eine Verringerung dieses Wertes kann verhindern, dass Objekte, die sich außerhalb der Kamera befinden, Schatten werfen (und gleichzeitig die Performance verbessern). Der Camera2D-Zoom wird bei Max Abstand nicht berücksichtigt, was bedeutet, dass bei höheren Zoom-Werten die Schatten beim Zoomen auf einen bestimmten Punkt früher ausgeblendet werden.

Bemerkung

Gerichtete Schatten werden immer unendlich lang erscheinen, unabhängig vom Wert der Höhe-Property. Dies ist eine Einschränkung der Schatten-Rendering-Methode, die für 2D-Lichter in Godot verwendet wird.

Um gerichtete Schatten zu haben, die nicht unendlich lang sind, sollten Sie Schatten im DirectionalLight2D deaktivieren und stattdessen einen benutzerdefinierten Shader verwenden, der aus dem 2D-Signed Distance Field liest. Dieses Distance Field wird automatisch aus LightOccluder2D Nodes in der Szene generiert.

Allgemeine Licht-Propertys

Sowohl PointLight2D als auch DirectionalLight2D bieten gemeinsame Propertys, die Teil der Light2D-Basisklasse sind:

  • Aktiviert: Ermöglicht das Umschalten der Sichtbarkeit des Lichts. Im Gegensatz zum Ausblenden des Light Nodes werden durch die Deaktivierung dieser Property die Child-Elemente des Lichts nicht ausgeblendet.

  • Nur Editor: Wenn diese Option aktiviert ist, ist das Licht nur im Editor sichtbar. Im laufenden Projekt wird es automatisch deaktiviert.

  • Farbe: Die Farbe des Lichts.

  • Energie: Der Multiplikator der Lichtintensität. Höhere Werte ergeben ein helleres Licht.

  • Blending-Modus: Die für die Lichtberechnungen verwendete Blending-Formel. Die Standardeinstellung Hinzufügen ist für die meisten Anwendungsfälle geeignet. Subtrahieren kann für negative Lichter verwendet werden, die physikalisch nicht genau sind, aber für spezielle Effekte verwendet werden können. Der Blending-Modus Mix mischt den Wert der Pixel, die der Textur des Lichts entsprechen, mit den Werten der darunter liegenden Pixel durch lineare Interpolation.

  • Bereich > Z Min: Der niedrigste vom Licht beeinflusste Z-Index.

  • Bereich > Z Max: Der höchste vom Licht beeinflusste Z-Index.

  • Bereich > Ebene Min: Die unterste visuelle Ebene, die vom Licht betroffen ist.

  • Bereich > Ebene Max: Die höchste visuelle Ebene, die vom Licht betroffen ist.

  • Bereich > Objekt-Cull-Maske: Steuert, welche Nodes Licht von diesem Node erhalten, abhängig von den aktivierten visuellen Ebenen Occluder Light Mask der anderen Nodes . Dies kann verwendet werden, um zu verhindern, dass bestimmte Objekte Licht erhalten.

Schatten einrichten

Nachdem Sie die Schatten > Aktiviert-Property auf einem PointLight2D oder DirectionalLight2D-Node aktiviert haben, werden Sie zunächst keinen visuellen Unterschied sehen. Das liegt daran, dass noch keine Nodes in Ihrer Szene über Occluder verfügen, die als Basis für den Schattenwurf verwendet werden.

Damit Schatten in der Szene erscheinen können, müssen LightOccluder2D-Nodes zur Szene hinzugefügt werden. Diese Nodes müssen auch über Occluder-Polygone verfügen, die so gestaltet sind, dass sie mit dem Umriss des Sprites übereinstimmen.

Neben ihrer Polygon-Ressource (die gesetzt sein muss, um einen visuellen Effekt zu haben), haben LightOccluder2D-Nodes 2 Propertys:

  • SDF-Kollision: Wenn diese Option aktiviert ist, ist der Occluder Teil eines in Echtzeit generierten Signed Distance Fields, das in benutzerdefinierten Shadern verwendet werden kann. Wenn keine benutzerdefinierten Shader verwendet werden, die aus diesem SDF lesen, macht die Aktivierung keinen visuellen Unterschied und hat keine Performanceeinbußen, so dass dies standardmäßig aktiviert ist.

  • Occluder Lichtmaske: Diese Eigenschaft wird in Verbindung mit der Eigenschaft Schatten > Objekt-Cull-Maske von PointLight2D und DirectionalLight2D verwendet, um zu steuern, welche Objekte für jedes Licht Schatten werfen. Dies kann verwendet werden, um zu verhindern, dass bestimmte Objekte Schatten werfen.

Es gibt zwei Möglichkeiten, Light Occluders zu erstellen:

Automatisches Erzeugen eines Light Occluders

Occluder können automatisch aus Sprite2D-Nodes erstellt werden, indem man den Node auswählt, auf das Menü Sprite2D oben im 2D-Editor klickt und dann LightOccluder2D-Nachbar erstellen wählt.

In dem daraufhin angezeigten Dialogfeld werden die Kanten des Sprites von einem Umriss umgeben. Wenn der Umriss genau mit den Kanten des Sprites übereinstimmt, können Sie auf OK klicken. Wenn der Umriss zu weit von den Rändern des Sprites entfernt ist (oder sich in die Ränder des Sprites "frisst"), passen Sie Wachsen (Pixel) und Schrumpfen (Pixel) an und klicken Sie dann auf Vorschau aktualisieren. Wiederholen Sie diesen Vorgang, bis Sie zufriedenstellende Ergebnisse erhalten.

Manuelles Zeichnen eines Light Occluders

Erstellen Sie einen LightOccluder2D Node, wählen Sie den Node aus und klicken Sie oben im 2D-Editor auf den "+"-Button. Wenn Sie aufgefordert werden, eine Polygon-Ressource zu erstellen, antworten Sie mit Ja. Sie können dann mit dem Zeichnen eines Verdeckungspolygons beginnen, indem Sie klicken, um neue Punkte zu erstellen. Sie können vorhandene Punkte entfernen, indem Sie sie mit der rechten Maustaste anklicken, und Sie können neue Punkte von der vorhandenen Linie aus erstellen, indem Sie auf die Linie klicken und sie dann ziehen.

Die folgenden Propertys können bei 2D-Lichtern mit aktiviertem Schatten angepasst werden:

  • Farbe: Die Farbe der schattierten Bereiche. Standardmäßig sind schattierte Bereiche vollständig schwarz, aber dies kann für gestalterische Zwecke geändert werden. Der Alphakanal der Farbe steuert, wie stark der Schatten durch die angegebene Farbe eingefärbt wird.

  • Filter: Der für Schatten zu verwendende Filtermodus. Die Standardeinstellung Keine ist am schnellsten zu rendern und eignet sich gut für Spiele mit einer Pixelart-Ästhetik (aufgrund seiner "blockigen" Optik). Wenn Sie einen weichen Schatten wünschen, verwenden Sie stattdessen PCF5. PCF13 ist sogar noch weicher, aber auch am anspruchsvollsten zu rendern. PCF13 sollte aufgrund der hohen Rendering-Kosten nur für wenige Lichter auf einmal verwendet werden.

  • Filter Glatt: Steuert, wie stark die Schatten abgeschwächt werden, wenn Filter auf PCF5 oder PCF13 eingestellt ist. Höhere Werte führen zu einem weicheren Schatten, können aber dazu führen, dass Banding-Artefakte sichtbar werden (insbesondere bei PCF5).

  • Objekt-Cull-Maske: Steuert, welche LightOccluder2D-Nodes Schatten werfen, abhängig von ihren jeweiligen Occluder Lichtmaske-Propertys.

Bemerkung

Lighting and shadow resolution in pixel-art games

The engine computes 2D lighting and shadows at the Viewport's pixel resolution, not at the source texture's texel resolution. The appearance of lights and shadows depends on your window or Viewport resolution, not on the resolution of individual sprite textures.

If you create a pixel-art game and want pixelated or blocky lighting and shadows that match your art style, Nearest texture filtering will not achieve this effect. Nearest filtering affects only how the engine samples textures — it does not change how the engine renders lighting and shadows.

To achieve pixelated lighting and shadows, use a custom shader to modify LIGHT_VERTEX and SHADOW_VERTEX to snap light sampling to a pixel grid. The following shader snaps lighting to a grid using the floor() function:

shader_type canvas_item;

uniform float pixel_size = 4.0;

void fragment() {
    // Snap lighting and shadows to pixel grid.
    LIGHT_VERTEX.xy = floor(LIGHT_VERTEX.xy / pixel_size) * pixel_size;
    SHADOW_VERTEX = floor(SHADOW_VERTEX / pixel_size) * pixel_size;

    // Normal rendering.
    COLOR = texture(TEXTURE, UV);
}

This works by dividing the position by pixel_size to convert to grid space, using floor() to round down to the nearest grid point, then multiplying back to convert to screen space. The result forces the engine to sample lighting from discrete grid positions, which creates the pixelated effect.

For more information on canvas item shaders, see CanvasItem shaders.

Harte Schatten

Harte Schatten

Weiche Schatten (PCF13, Filterglättung 1.5)

Weiche Schatten (PCF13, Filterglättung 1.5)

Weiche Schatten mit Schlierenartefakten aufgrund von zu hohem Filter Smooth (PCF5, Filterglättung 4)

Weiche Schatten mit Schlierenartefakten aufgrund von zu hohem Filter Smooth (PCF5, Filterglättung 4)

Normal und Specular Maps

Normal Maps und Specular Maps können die Tiefenwirkung Ihrer 2D-Beleuchtung erheblich verbessern. Ähnlich wie beim 3D-Rendering können Normal Maps dazu beitragen, dass die Beleuchtung weniger flach wirkt, indem sie ihre Intensität in Abhängigkeit von der Richtung der Oberfläche, die das Licht empfängt, variieren (auf einer Pixel-Basis). Specular-Maps tragen ebenfalls zur Verbesserung der visuellen Darstellung bei, indem sie einen Teil des Lichts zum Betrachter zurückreflektieren.

Both PointLight2D and DirectionalLight2D support normal mapping and specular mapping. Normal and specular maps can be assigned to any 2D element, including nodes that inherit from Node2D or Control.

Eine Normal Map gibt die Richtung an, in die jedes Pixel "zeigt". Diese Information wird dann von der Engine verwendet, um die Beleuchtung auf 2D-Oberflächen in einer physikalisch plausiblen Weise korrekt anzuwenden. Normal Maps werden in der Regel aus handgemalten Height Maps erstellt, sie können aber auch automatisch aus anderen Texturen generiert werden.

Eine Specular Map legt fest, wie stark jedes Pixel Licht reflektieren soll (und in welcher Farbe, wenn die Specular Map Farbe enthält). Je heller die Werte sind, desto heller ist die Reflexion an der betreffenden Stelle der Textur. Specular Maps werden in der Regel durch manuelle Bearbeitung erstellt, wobei die diffuse Textur als Grundlage dient.

Tipp

Wenn Sie keine Normal- oder Specular-Maps für Ihre Sprites haben, können Sie diese mit dem kostenlosen und quelloffenen Tool Laigter erzeugen.

Um Normal Maps und/oder Specular Maps auf einem 2D-Node einzurichten, erstellen Sie eine neue CanvasTexture-Ressource für die Property, von der Textur des Nodes gezeichnet wird. Zum Beispiel, auf einem Sprite2D:

Erstellen einer CanvasTexture-Ressource für einen Sprite2D-Node

Erstellen einer CanvasTexture-Ressource für einen Sprite2D-Node

Erweitern Sie die neu erstellte Ressource. Hier finden Sie mehrere Propertys, die Sie anpassen müssen:

  • Diffus > Textur: Die Textur der Grundfarbe. In diese Property laden Sie die Textur, die Sie für das Sprite selbst verwenden.

  • Normal Map > Textur: Die Textur der Normal Map. Laden Sie in dieser Property eine Normal Map-Textur, die Sie aus einer Height Map generiert haben (siehe Tipp oben).

  • Specular > Textur: Die Specular-Map-Textur, von der die Spiegelungsintensität jedes Pixels auf der diffusen Textur gesteuert wird. Die Specular Map ist normalerweise in Graustufen gehalten, kann aber auch Farbe enthalten, um die Farbe der Reflexionen entsprechend zu multiplizieren. Laden Sie in dieses Property eine von Ihnen erstellte Specular-Map-Textur (siehe Tipp oben).

  • Specular > Farbe: Der Farbmultiplikator für Specular-Reflexionen.

  • Specular > Glanz: Der Specular-Exponent der für Reflexionen verwendet wird. Niedrigere Werte erhöhen die Helligkeit der Reflexionen und machen sie diffuser, während höhere Werte die Reflexionen stärker lokal eingrenzen. Hohe Werte eignen sich besser für nass aussehende Oberflächen.

  • Textur > Filter: Kann so eingestellt werden, dass der Texturfiltermodus überschrieben wird, unabhängig davon, auf was die Property des Nodes eingestellt ist (oder die Projekteinstellung Rendern > Texturen > Canvas-Texturen > Default-Texturfilter).

  • Textur > Wiederholung: Kann so eingestellt werden, dass der Textur-Filtermodus überschrieben wird, unabhängig davon, was in der Property des Nodes eingestellt ist (oder in der Projekteinstellung Rendern > Texturen > Canvas-Texturen > Default-Textur-Wiederholung).

Nach der Aktivierung von Normal Mapping werden Sie möglicherweise feststellen, dass Ihre Lichter schwächer erscheinen. Um dies zu beheben, erhöhen Sie die Property Höhe an Ihren PointLight2D- und DirectionalLight2D-Nodes. Sie können auch die Property Energie der Lichter leicht erhöhen, um die Intensität der Beleuchtung vor der Aktivierung des Normal Mapping anzugleichen.

Verwendung additiver Sprites als schnellere Alternative zu 2D-Lichtern

Wenn Sie bei der Verwendung von 2D-Lichtern auf Performanceprobleme stoßen, kann es sich lohnen, einige von ihnen durch Sprite2D-Nodes zu ersetzen, die additives Blending verwenden. Dies eignet sich besonders für kurzlebige dynamische Effekte, wie Kugeln oder Explosionen.

Additive Sprites sind viel schneller zu rendern, da sie keine separate Rendering-Pipeline durchlaufen müssen. Darüber hinaus ist es möglich, diesen Ansatz mit AnimatedSprite2D (oder Sprite2D + AnimationPlayer) zu verwenden, mit dem animierte 2D-"Lichter" erstellt werden können.

Allerdings haben additive Sprites im Vergleich zu 2D-Lichtern ein paar Nachteile:

  • Die Blending-Formel ist im Vergleich zur "echten" 2D-Beleuchtung ungenau. In ausreichend beleuchteten Bereichen ist dies in der Regel kein Problem, aber dies verhindert, dass additive Sprites völlig dunkle Bereiche korrekt beleuchten.

  • Additive Sprites können keine Schatten werfen, da sie keine Lichter sind.

  • Additive Sprites ignorieren Normal- und Specular-Maps, die auf anderen Sprites verwendet werden.

Um ein Sprite mit additivem Blending darzustellen, erstellen Sie einen Sprite2D-Node und weisen ihm eine Textur zu. Scrollen Sie im Inspektor nach unten zum Abschnitt CanvasItem > Material, klappen Sie ihn aus und klicken Sie auf das Dropdown-Menü neben der Property Material. Wählen Sie Neues CanvasItemMaterial, klicken Sie auf das neu erstellte Material, um es zu bearbeiten, und stellen Sie dann Mischmodus auf Hinzufügen.