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-Parallaxe
Einführung
Parallaxe ist ein Effekt, der verwendet wird, um Tiefe zu simulieren, indem sich Texturen mit unterschiedlicher Geschwindigkeit relativ zur Kamera bewegen. Godot stellt den Knoten Parallax2D bereit, um diesen Effekt zu erzielen. Man kann jedoch immer noch leicht ins Stolpern geraten, daher bietet diese Seite ausführliche Beschreibungen einiger Eigenschaften und wie man einige häufige Fehler behebt.
Bemerkung
This page covers how to use Parallax2D, which is recommended to use over the ParallaxLayer and ParallaxBackground nodes.
Erste Schritte
The parallax node supports adding nodes that render things as children, so you can use one or many nodes to make up each
layer. To begin, place each node or nodes you want to have scroll independently as a child of their own parallax node.
Make sure that the top left of the textures used are at the (0, 0) crossing, like in the image below. See the section
on positioning for why this is important.
The scene above uses one prepared texture for the higher clouds in a Sprite2D, but you could just as easily use multiple nodes spaced out to compose the layer.
Scroll-Skala
Das Rückgrat des Parallaxeffekts ist die Eigenschaft scroll_scale. Sie fungiert als Scrollgeschwindigkeitsmultiplikator und ermöglicht es Ebenen, sich für jeden Achsensatz mit einer anderen Geschwindigkeit als die Kamera zu bewegen. Ein Wert von 1 lässt den Parallaxknoten mit der gleichen Geschwindigkeit wie die Kamera scrollen. Wenn Sie möchten, dass Ihr Bild beim Scrollen weiter weg erscheint, verwenden Sie einen Wert unter 1, bei 0 kommt es vollständig zum Stillstand. Wenn Sie möchten, dass etwas näher an der Kamera erscheint, verwenden Sie einen Wert über 1, wodurch es schneller scrollt.
Die obige Szene besteht aus fünf Ebenen. Einige gute scroll_scale-Werte könnten sein:
(0.7, 1)- Wald(0.5, 1)- Hügel(0.3, 1)- Untere Wolken(0.2, 1)- Höhere Wolken(0.1, 1)– Himmel
Das folgende Video zeigt, wie sich diese Werte auf das Scrollen im Spiel auswirken:
Unendliche Wiederholung
Parallax2D bietet einen Bonuseffekt, der Texturen die Illusion einer unendlichen Wiederholung verleiht. repeat_size weist den Knoten an, seine Position nach vorne oder hinten zu verschieben, wenn die Kamera um den eingestellten Wert scrollt. Dieser Effekt wird erreicht, indem allen um den Wert versetzten untergeordneten Canvas-Elementen eine einzelne Wiederholung hinzugefügt wird. Während die Kamera zwischen dem Bild und seiner Wiederholung scrollt, springt sie unsichtbar zurück, wodurch der Eindruck eines sich wiederholenden Bildes entsteht.
Da es sich um einen heiklen Effekt handelt, können unerfahrene Benutzer bei der Einrichtung leicht Fehler machen. Lassen Sie uns das „Wie“ und „Warum“ einiger häufiger Probleme durchgehen, auf die Benutzer stoßen.
Schlechte Dimensionierung
Der Effekt der unendlichen Wiederholung lässt sich am einfachsten bearbeiten, wenn Sie ein Bild haben, das für eine nahtlose Wiederholung konzipiert ist und die gleiche Größe oder größer als Ihr Ansichtsfenster hat, bevor Sie repeat_size festlegen. Wenn Sie keine Assets erhalten können, die für diese Aufgabe konzipiert sind, gibt es einige andere Dinge, die Sie tun können, um Ihr Bild hinsichtlich der Größe besser vorzubereiten.
hier ist ein Beispiel für eine Textur, die für ihr Ansichtsfenster zu klein ist:
Wir können sehen, dass die Größe des Ansichtsfensters 500 x 300 beträgt, die Textur jedoch 288 x 208. Wenn wir repeat_size auf die Größe unseres Bildes einstellen, wird der unendliche Wiederholungseffekt nicht richtig gescrollt, da die Originaltextur das Ansichtsfenster nicht abdeckt. Wenn wir repeat_size auf die Größe des Ansichtsfensters einstellen, haben wir eine große Lücke. Was können wir tun?
Verkleinern Sie das Ansichtsfenster
The simplest answer is to make the viewport the same size or smaller than your textures. In Project Settings > Display > Window, change the Viewport Width and Viewport Height settings to match your background.
Skalieren Sie Parallax2D
Wenn Sie keinen pixelgenauen Stil anstreben oder eine leichte Unschärfe Ihnen nichts ausmacht, können Sie die Texturen auch größer skalieren, damit sie auf Ihren Bildschirm passen. Legen Sie die scale von Parallax2D fest und alle untergeordneten Texturen werden entsprechend skaliert.
Skalieren der untergeordneten Knoten
Ähnlich wie beim Skalieren von Parallax2D können Sie Ihre Sprite2D-Knoten so skalieren, dass sie groß genug sind, um den Bildschirm abzudecken. Beachten Sie, dass einige Einstellungen wie Parallax2D.repeat_size und Sprite2D.region_rect die Skalierung nicht berücksichtigen. Daher müssen diese Werte basierend auf der Skalierung angepasst werden.
Wiederholen Sie die Texturen
Sie können auch gleich von vorne beginnen, indem Sie zu einem früheren Zeitpunkt im Prozess untergeordnete Knoten vorbereiten. Wenn Sie beispielsweise ein Sprite2D haben, das Sie wiederholen möchten, das aber zu klein ist, können Sie es wie folgt wiederholen:
setze region_enabled auf
trueStellen Sie region_rect auf ein Vielfaches der Größe Ihrer Textur ein, groß genug, um das Ansichtsfenster abzudecken.
Unten können Sie sehen, dass das Bild durch zweimaliges Wiederholen groß genug wird, um den Bildschirm abzudecken.
Schlechte Positionierung
Es kommt häufig vor, dass Benutzer alle ihre Texturen fälschlicherweise so einstellen, dass sie auf (0,0) zentriert sind:
dies erzeugt Probleme mit dem Endloswiederholungseffekt und sollte vermieden werden. Die „Endloswiederholungsleinwand“ beginnt bei (0,0) und dehnt sich nach unten und rechts bis zur Größe des Werts repeat_size aus.
Wenn die Texturen auf dem Schnittpunkt (0,0) zentriert sind, wird die Leinwand mit der unendlichen Wiederholung nur teilweise abgedeckt und wiederholt sich daher nur teilweise.
Würde eine Erhöhung der repeat_times das Problem beheben?
Das Erhöhen von repeat_times würde in einigen Szenarien technisch funktionieren, ist aber eine Lösung mit roher Gewalt und nicht das Problem, das sie lösen soll (wir werden das gleich besprechen). Eine bessere Lösung besteht darin, zu verstehen, wie der Wiederholungseffekt funktioniert, und die Parallaxentexturen von Anfang an entsprechend einzurichten.
Überprüfen Sie zunächst, ob Texturen auf die negativen Teile der Leinwand überlaufen. Stellen Sie sicher, dass die in den Parallaxknoten verwendeten Texturen in die „unendliche Wiederholungsleinwand“ passen, beginnend bei (0,0). Wenn Parallax2D.repeat_size richtig eingestellt ist, sollte es ungefähr so aussehen, mit einer einzelnen Schleife des Bilds, die gleich groß oder größer als das Ansichtsfenster ist:
Wenn Sie darüber nachdenken, wie das Bild über den Bildschirm scrollt, wird zunächst angezeigt, was sich innerhalb des roten Rechtecks befindet (bestimmt durch repeat_size), und wenn es den Bereich innerhalb des gelben Rechtecks erreicht, wird das Bild nach vorne gescrollt, um die Illusion eines endlosen Scrollens zu erzeugen.
Wenn Sie das Bild außerhalb der „Leinwand mit unendlicher Wiederholung“ positioniert haben und die Kamera das gelbe Rechteck erreicht, wird die Hälfte des Bildes abgeschnitten, bevor es wie im folgenden Bild nach vorne springt:
Scroll-Offset
Wenn Ihre Parallax-Texturen bereits korrekt funktionieren, Sie aber lieber an einem anderen Punkt beginnen möchten, verfügt Parallax2D über eine Eigenschaft scroll_offset, mit der der Beginn der unendlichen Wiederholungsleinwand verschoben wird. Wenn Ihr Bild beispielsweise 288 x 208 groß ist, können Sie durch Festlegen von scroll_offset auf (-144,0) oder (144,0) beginnen, wenn Sie es auf halber Höhe des Bildes beginnen lassen.
Wiederholungsdurchläufe
Im Idealfall sind Ihre Parallaxentexturen gemäß dieser Anleitung groß genug, um den Bildschirm auch beim Herauszoomen abzudecken. Bisher hatten wir eine perfekt passende 288 x 208-Textur in einem 288 x 208-Ansichtsfenster. Es treten jedoch Probleme auf, wenn wir herauszoomen, indem wir Camera2D.zoom auf (0,5, 0,5) setzen:
Auch wenn für das Ansichtsfenster bei der Standardzoomstufe alles richtig eingestellt ist, wird es beim Herauszoomen kleiner als das Ansichtsfenster, wodurch der unendliche Wiederholungseffekt unterbrochen wird. Hier kann repeat_times Abhilfe schaffen. Durch Festlegen eines Werts von 3 (eine zusätzliche Wiederholung hinten und vorne) ist es jetzt groß genug, um den unendlichen Wiederholungseffekt zu ermöglichen.
Wenn diese Texturen vertikal wiederholt werden sollten, hätten wir einen y-Wert für repeat_size angegeben. repeat_times würde automatisch auch oben und unten eine Wiederholung hinzufügen. Dies ist nur eine horizontale Parallaxe, sodass über und unter dem Bild ein leerer Block verbleibt. Wie lösen wir das? Wir müssen kreativ werden! In diesem Beispiel strecken wir den Himmel höher und das Gras-Sprite tiefer. Die Texturen unterstützen jetzt die normale Zoomstufe und das Herauszoomen auf die halbe Größe.
Geteilter Bildschirm
Die meisten Tutorials zum Erstellen eines Splitscreen-Spiels in Godot beginnen mit dem Schreiben eines kleinen Skripts, um das Viewport.world_2d des ersten SubViewports dem zweiten zuzuweisen, sodass sie eine gemeinsame Anzeige haben. Häufig tauchen Fragen dazu auf, wie ein Parallaxeffekt zwischen beiden Bildschirmen geteilt werden kann.
Der Parallaxeffekt täuscht eine Perspektive vor, indem er die Positionen verschiedener Texturen im Verhältnis zur Kamera verschiebt. Dies ist verständlicherweise problematisch, wenn Sie mehrere Kameras haben, da Ihre Texturen nicht an zwei Orten gleichzeitig sein können!
This is still achievable by cloning the parallax nodes into the second (or third or fourth) SubViewport. Here's how a setup looks for a two player game:
Of course, now both backgrounds show in both SubViewports. What we want is for each parallax to only show in their corresponding viewport. We can achieve this by doing the following:
Leave all parallax nodes at their default visibility_layer of 1.
Set the first SubViewport's canvas_cull_mask to only layers 1 and 2.
Do the same for the second SubViewport but use layers 1 and 3.
Give your parallax nodes in the first SubViewport a common parent and set its visibility_layer to 2.
Do the same for the second SubViewport's parallax nodes, but use a layer of 3.
How does this work? If a canvas item has a visibility_layer that doesn't match the SubViewport's canvas_cull_mask, it will hide all children, even if they do. We use this to our advantage, letting the SubViewports cut off rendering of parallax nodes whose parent doesn't have a supported visibility_layer.
Vorschau im Editor
Vor 4.3 wurde empfohlen, jede Ebene in ihrem eigenen ParallaxBackground zu platzieren, die Eigenschaft follow_viewport_enabled zu aktivieren und die einzelnen Ebenen zu skalieren. Diese Methode war schon immer schwierig umzusetzen, ist aber immer noch möglich, indem man einen CanvasLayer anstelle eines ParallaxBackground verwendet.
Bemerkung
eine weitere Empfehlung ist KoBeWis „parallax2d preview“-Add-on. Es bietet ein paar verschiedene Vorschaumodi und ist sehr praktisch!