Share
Das Parallax-Scrollen ist eine einfache und effektive Methode, um die Illusion von Tiefe in einem 2D-Spiel zu erzeugen. Unabhängig davon, ob Sie einen vertikalen Shooter oder einen horizontalen Platformer mit seitlichem Scrollen entwickeln, ist Parallax-Scrollen eine bewährte Grundausstattung für Spiele, die das Eintauchen und die grafische Wirkung Ihres Projekts erheblich verbessern wird.
In diesem Tutorial werde ich die Grundlagen des Parallax-Scrolling und verschiedene Implementierungsmethoden so behandeln, dass Sie das Parallax-Scrolling unabhängig von Ihrem aktuellen Skill-Level sicher und erfolgreich in Ihre Fähigkeiten einführen können.
Versuchen Sie es mit der folgenden Demo, um Szenen zu sehen, die horizontal, vertikal und beides ohne Parallaxen scrollen. Klicken Sie auf die Demo, um sie zu aktivieren, wechseln Sie dann mit den Zahlentasten die Szenen und mit den Pfeiltasten das Raumschiff (für die entsprechenden Szenen)..
Parallaxe ist definiert als die scheinbare Verschiebung eines beobachteten Objekts aufgrund einer Änderung der Position des Beobachters. Beim 2D-Parallax-Scrollen ändert sich die Position des Beobachters nur entlang der x- und y-Achse. Nur die Geschwindigkeit und Position eines Objekts ändert sich mit der Position des Beobachters, da das Skalieren des Objekts eine Änderung entlang der Z-Achse erfordern würde.
Takashi Nishiyama Mondpatrouille ist weithin als erstes Spiel mit 2D-Parallaxen-Scrollen bekannt, aber die Technik wurde bereits im Jahr 1933 in der traditionellen Animation verwendet. Mit einer Mehrfachkamera konnten Animateure einen nicht-stereoskopischen 3D-Effekt erzeugen, der die Illusion von Tiefe erzeugte, indem sie andere erlaubten Kunstgegenstände bewegen sich mit unterschiedlichen Geschwindigkeiten in Bezug auf die wahrgenommene Entfernung vom Kameraobjektiv. So wird in modernen Videospielen das Parallax-Scrollen erreicht. Statt einer Mehrfachkamera werden Szenen aus mehreren Ebenen und einer einzelnen Spielkamera oder -ansicht zusammengesetzt.
Durch Aufteilen der Hintergrund- und Vordergrundelemente eines Spiels in verschiedene Ebenen ist es möglich, die Geschwindigkeit und Position dieser Elemente anhand ihrer Ebenen zu steuern. Der Beobachter ist in diesem Fall der Spieler und die Spielkamera bleibt auf einen bestimmten Punkt oder ein bestimmtes Objekt fokussiert, während sich die Hintergrund- und Vordergrundebene entsprechend verschieben.
Dieser Fokuspunkt bewegt sich mit 'normaler' Geschwindigkeit oder der durch das Gameplay definierten Geschwindigkeit. Hintergrundobjekte bewegen sich langsamer als der Fokuspunkt, während sich Vordergrundobjekte schneller als der Fokuspunkt bewegen. Dies führt zu einer Illusion von Tiefe, die eine 2D-Szene intensiver erscheinen lässt.
In unserem ersten Beispiel haben wir eine sehr einfache Szene einer Straße bei Nacht, die ein horizontales Scrollen ohne interaktive Elemente beinhaltet. Die verschiedenen Hintergrundebenen bewegen sich mit vorbestimmten Geschwindigkeiten entlang der x-Achse. Im Moment wollen wir uns auf die Grundlagen des Parallax-Scrolling konzentrieren, ohne sich um Spielerbewegungen oder Blickwechsel zu kümmern.
Lassen Sie uns zunächst die einzelnen Elemente und Attribute unserer Szene aufschlüsseln. Das Spielfenster ist 600x300px und unsere Kunstobjekte haben jeweils eine Breite von mindestens 600px. Durch die Verwendung von Hintergrundelementen, die größer als das Spielfenster sind, können Sie verhindern, dass das gesamte Asset zu einem bestimmten Zeitpunkt sichtbar ist. Da die Ebenen gekachelt sind, wird dies dazu beitragen, zu viele offensichtliche Wiederholungen zu vermeiden, da dasselbe Asset unbegrenzt durchläuft.
Die vier Schichten, aus denen unsere erste Szene besteht.Unsere Szene besteht aus vier Schichten. In diesem Beispiel definiert die Nummer der Ebene die Reihenfolge, in der das Asset auf den Bildschirm gezeichnet wird, sowie seine Bewegungsgeschwindigkeit. Wenn dies ein Side-Scrolling-Plattformer wäre, würde sich unser Player-Objekt auf Layer 3 befinden. Diese Ebene wäre der Brennpunkt des Beobachters und würde auch die Geschwindigkeit der Hintergrund- und Vordergrundebenen bestimmen.
Layer 2 bewegt sich langsamer als Layer 3 und Layer 1 bewegt sich langsamer als Layer 2. Layer 4 ist als Vordergrundebene vorhanden und bewegt sich daher schneller als der Fokus auf Layer 3.
Es gibt mehrere Möglichkeiten, wie Sie diese Art der Parallax-Scroll-Technik implementieren können. In diesem Beispiel bewegen sich die Ebenen mit vorbestimmten Geschwindigkeiten, ohne sich gegenseitig zu referenzieren. Wenn Sie mehrere Szenen mit unterschiedlichen Mengen an Hintergrund- und Vordergrundebenen planen, sollten Sie die Schichtgeschwindigkeit am besten durch Ablesen der aktuellen Geschwindigkeit der Brennpunktebene definieren. Zum Beispiel, wenn der Fokus auf Layer 3 liegt und sich mit einer Geschwindigkeit von bewegt 5, dann würde sich jede nachfolgende Hintergrundebene mit einer Geschwindigkeit von weniger als bewegen 5. Alle Vordergrundebenen würden sich mit einer Geschwindigkeit von mehr als bewegen 5.
// Variablen focal_point_speed = 5; schichtdifferenz = 1; // Brennpunkt Layer layer3.hspeed = focal_point_speed; // Hintergrundschichten layer2.hspeed = layer3.hspeed - layer_difference; layer1.hspeed = layer2.hspeed - layer_difference; // Vordergrundebenen layer4.hspeed = layer3.hspeed + layer_difference; layer5.hspeed = layer4.hspeed + schichtdifferenz;
Während das Parallax-Scrollen meistens mit horizontalen Hintergründen verwendet wird, kann es auch in vertikalen Szenen verwendet werden, wie in diesem Space-Shooter-Beispiel. Es gibt möglicherweise effizientere Möglichkeiten, ein Sternfeld zu erstellen, aber das Parallax-Scrollen erledigt die Arbeit.
Das wichtigste Beispiel für dieses vertikale Beispiel ist, dass das Parallax-Scrollen in allen vier Richtungen entlang der X- und Y-Achse funktioniert. (Wir werden sehen, wie wichtig dies in unserem dritten und letzten Beispiel ist.)
Diese Szene verfügt über vier Hintergrundebenen: einen statischen schwarzen Hintergrund und drei Sammlungen von Sternen unterschiedlicher Größe. Der statische Hintergrund bewegt sich nicht, und jede nachfolgende Schicht von Sternen wird größer und schneller. Die letzte Schicht von Sternen bestimmt letztendlich die vertikale Geschwindigkeit des Brennpunkts, das Raumschiff des Spielers. Diese Art des Parallax-Scrollens ermöglicht es uns, die Tiefe des Raums zu simulieren und gleichzeitig die Vorwärtsbewegung zu simulieren. Das Schiff des Spielers bewegt sich zwar nie auf dem Bildschirm nach oben, aber Sie haben immer noch das Gefühl, dass die Raumfahrt schnell ist.
Nun, da wir ein besseres Verständnis dafür haben, worum es beim Parallax-Scrollen geht, können wir damit beginnen, eine Szene zu konstruieren, in der sowohl horizontales als auch vertikales Scrollen implementiert sind, zusammen mit einer Spielansicht, die die Bewegung eines vom Spieler kontrollierten Objekts verfolgt.
In der Demo am Anfang des Tutorials ist diese Szene in zwei Beispiele unterteilt. Die erste Version zeigt, wie die Szene aussieht, ohne dass die Parallaxe durchlaufen wird. Die zweite Version bietet volles vertikales und horizontales Parallax-Scrollen und zeigt wirklich, wie das Parallax-Scrollen der ursprünglich sehr flachen und leblosen Szene viel Eintauchen und Tiefe verleihen kann.
Der wichtigste Aspekt dieses Beispiels ist die Spielerbewegung und die Spielansicht. Da unser Hintergrund nicht mehr auf eine vorgegebene Geschwindigkeit oder Bildschirmposition festgelegt ist, müssen wir die Geschwindigkeit und Position jeder Ebene im Verhältnis zum Ansichtsfenster berechnen, während sich der Spieler bewegt.
Der Ursprung unseres Sichtfensters befindet sich in der oberen linken Ecke bei (X, Y). Der Ursprung jedes Hintergrundebenen-Assets befindet sich in der oberen linken Ecke des Sprites um (0,0). Durch Ermitteln der aktuellen X- und Y-Koordinaten des Ansichtsfensters in Bezug auf die Spielwelt können wir eine Berechnung durchführen, um zu bestimmen, wo der Ursprung einer Hintergrundebene in der Szene platziert werden soll. Diese Position ändert sich, wenn sich das Ansichtsfenster basierend auf dieser Berechnung bewegt.
Durch die Verwendung unterschiedlicher Werte bei der Berechnung jeder Ebene können wir jede Ebene mit unterschiedlichen Geschwindigkeiten bewegen, abhängig davon, wie schnell sich der Spieler bewegt.
Der Code zum Zeichnen der Ebene, die direkt hinter unserem Player-Objekt liegt, hat folgendes Format: draw_background_tiled_horizontal (layer, x, y) woher draw_background_tiled_horizontal () ist eine einfache Funktion, um ein gekacheltes Asset an einem bestimmten Ort zu zeichnen, und bg_ex_3_2 ist unser Layer-Asset.
// Schicht 3 draw_background_tiled_horizontal (bg_ex_3_2, view_xview [view_current] / 2.5, (view_yview [view_current] / 10) + 300);
Der X-Wert der Ebene wird in diesem Fall durch den X-Wert der aktuellen Ansicht, geteilt durch einen Wert von, definiert 2,5, Erzeugen einer horizontalen Bewegung, die sich etwas langsamer bewegt als die Bewegung der Ansicht.
In ähnlicher Weise wird der Y-Wert der Ebene durch den Y-Wert der aktuellen Ansicht geteilt durch definiert 10. Der Y-Wert der Schicht wird dann um erhöht 300 um es richtig in Bezug auf die Spielwelt zu positionieren. Ohne diesen zusätzlichen Zusatz von 300, Das Asset würde am oberen Rand der Spielwelt erscheinen und nicht am unteren Rand, wo wir es haben wollen.
Diese Werte unterscheiden sich offensichtlich in Ihrem Projekt. Wichtig ist jedoch zu beachten, dass die Bewegungsgeschwindigkeit der Ebene mit zunehmender Teilungszahl ansteigt, jedoch nur bis zu einem bestimmten Punkt. Bei der Division kann sich die Ebene nur mit derselben Geschwindigkeit bewegen oder langsamer als die Geschwindigkeit des Players.
Die zwei Ebenen hinter dieser Ebene bewegen sich langsamer, daher sind die Teilungsnummern kleiner:
// Schicht 1 draw_background_tiled_horizontal (bg_ex_3_0, view_xview [view_current] / 1.5, (view_yview [view_current] / 2.5) + 175); // Schicht 2 draw_background_tiled_horizontal (bg_ex_3_1, view_xview [view_current] / 2, (view_yview [view_current] / 5) +250);
Um eine Ebene zu erstellen, die sich schneller als der Brennpunkt bewegt, z. B. eine Vordergrundebene, muss eine geringfügige Änderung vorgenommen werden. In diesem Beispiel gibt es keine Vordergrundebene, und die Brennpunktebene ist eigentlich nur am unteren Rand des Bildschirms sichtbar. Der Spieler kann nach oben und über den Brennpunkt hinaus fliegen, der den Boden darstellt, sodass das Schiff selbst zum Brennpunkt wird. Wir bezeichnen den Boden als den Brennpunkt in diesem Beispiel, da der Boden die einzige Ebene ist, die sich mit der gleichen wahrgenommenen Geschwindigkeit bewegt wie das Raumschiff. Hier bekommen wir unser wahres Geschwindigkeitsgefühl in der Szene.
Die Bodenebene bewegt sich schneller als die Ansicht selbst. Der Code zum Zeichnen dieser Ebene unterscheidet sich geringfügig von den anderen Hintergrundebenen:
// Brennpunktebene (Boden) draw_background_tiled_horizontal (bg_ex_3_3, -view_xview [view_current] * 1.5, -view_yview [view_current] + 700);
Mit Ebenen, die sich schneller als die Ansicht bewegen, übernehmen wir die Negativ X- und Y-Werte der aktuellen Ansicht und mit einem bestimmten Wert multiplizieren. Bei der Berechnung der Geschwindigkeit von Vordergrundebenen ist keine Unterteilung erforderlich. In diesem Beispiel bewegt sich die Bodenschicht mit einerinhalbfachen horizontalen Geschwindigkeit schneller als die Geschwindigkeit des Sichtfensters. Es wird keine Multiplikation mit der vertikalen Geschwindigkeit der Ebene durchgeführt, daher bewegt sich diese mit der gleichen Geschwindigkeit wie die Ansicht. Ein zusätzlicher Wert von 700 wird zum Y-Wert der Ebene hinzugefügt, um sie an der gewünschten Stelle am unteren Rand der Spielwelt zu platzieren.
Das Parallax-Scrollen ist eine einfache, aber sehr effektive Methode, um einem 2D-Spiel die Illusion von Tiefe zu verleihen. Ich hoffe, die Beispiele in der Demo haben gezeigt, wie effektiv sie sein kann, und ich hoffe, dass das Tutorial selbst gezeigt hat, wie einfach es ist, es zu implementieren!
Accentsconagua