Saisonwechsel-Enthüllungseffekt

10

Ich habe mir den Teaser-Trailer zu Seasons After Fall angesehen und war beeindruckt von dem Effekt, den sie für den Übergang zwischen den Jahreszeiten verwenden (ca. 21-24 Sekunden):

Animation mit dem Enthüllungseffekt

Die Levelkunst, einschließlich des Hintergrunds und der Vordergrundplattformen, wechselt von einem sepiafarbenen Herbst zu einem lavendelfarbenen Winter, wobei sich der Effekt vom Spielercharakter ein wenig nach außen ausbreitet, als würde Wasser durch Papier sickern.

Es sieht nach mehr als nur einem Palettenwechsel aus, da sich Details in den Blatt- und Rindenmustern im Übergang ändern.

Wie kann ich in einem 2D-Unity-Spiel einen ähnlichen Effekt erzielen?

Jessca Stone
quelle

Antworten:

12

Eine Möglichkeit, dies zu erreichen, besteht darin, die beiden Hintergründe mithilfe einer Alpha-Karte zu mischen. Ein einfacher Ansatz wäre, den "hinteren" (versteckten) Hintergrund und dann den "vorderen" (anfangs sichtbaren) Hintergrund zu rendern. Verwenden Sie den Alpha-Kanal des vorderen Hintergrunds oder eine separate Alpha-Textur, um die Transparenz des vorderen Hintergrunds wie bei jedem transparenten oder durchscheinenden Sprite zu steuern. Wenn diese Alpha-Karte kleiner als eins ist, werden Teile des hinteren Hintergrunds durchscheinen.

Dann geht es nur noch darum, diese Alpha-Karte entsprechend dem gewünschten Effekt zu erstellen. In dem Video, das Sie zeigen, sieht es so aus, als ob eine solche Karte mit einem "malerischen" Ansatz erstellt wurde. Dies kann das zufällige Platzieren von Kreisen mit einem Alpha von Null beinhalten (die an ihren Rändern auf 1,0 Alpha abfallen). Platzieren Sie diese Kreise eng vor dem Ursprung der Enthüllung und lockern Sie die Vorspannung im Laufe der Zeit so, dass sie sich nach außen ausbreiten. Wenn Sie dies tun, möchten Sie wahrscheinlich auch den Radius der Kreise erweitern.

Sie können diesen Ansatz nach Bedarf anpassen, um den Effekt auf Ihre Wünsche abzustimmen. Einfache Kreise sehen beispielsweise möglicherweise etwas zu "fleckig" aus, und Sie möchten stattdessen möglicherweise zufällig einen zufällig ausgewählten vorautorisierten "Pinselstrich" in die Maske stempeln. Selbst die zufällige Platzierung selbst sieht möglicherweise etwas zu ungeordnet aus. Stattdessen können Sie die Alphamaske entlang einer vorgefertigten Kurve oder eines Splines stempeln, um einen bestimmten Stil hervorzuheben.


quelle
Hoppla, ich habe anscheinend zur gleichen Zeit wie Sie eine sehr ähnliche Antwort geschrieben. ^ _ ^; Entschuldigung für die Überlappung.
DMGregory
Vielen Dank für die Antwort, ich werde dies ausprobieren und mich bei Ihnen melden, es funktioniert!
Nochmals vielen
Sie können auch vier oder fünf Übergänge von Hand zeichnen und die Drehung nur ein wenig randomisieren. Ich bezweifle, dass es irgendjemand interessieren wird, wenn es so schnell und im schlimmsten Fall ist, dass Sie mit Rotation und horizontaler Skalierung spielen können.
Fund Monica Klage
Tut mir leid, um noch einmal zu stören, aber ich habe mich gefragt, ob Sie das näher erläutern können, da ich es selbst getestet habe, aber es war etwas klobig und ich konnte es auch nicht transparent machen. Entschuldigung nochmal für die Störung und danke!
Jessca Stone
Auf den ersten Blick klingt es so, als ob viele Dinge dort möglicherweise falsch sein könnten. Ich kann Ihnen hier nicht wirklich beim Debuggen helfen, aber es ist möglich, dass jemand im Spieleentwicklungs-Chat dazu in der Lage ist, und manchmal finden Sie mich auch dort.
7

Ich würde dies mit einem benutzerdefinierten Shader auf meinen SpriteRenderern angehen, der zwei Texturen verwendet, eine für jede Version, zwischen der Sie wechseln möchten.

(Selbst wenn ich diesen Effekt für den Übergang zwischen mehr als zwei Zuständen verwende, würde ich dennoch versuchen, das Spiel so zu strukturieren, dass wir jeweils nur zwei zum Rendern benötigen: den alten und den nächsten Zustand. Wir lassen diesen Übergang spielen bis zum Abschluss, bevor wir den Spieler einen Übergang in einen dritten Zustand einleiten lassen. An diesem Punkt können wir unseren vorherigen "alten" Zustand ersetzen, da er nicht mehr sichtbar ist.

Dieser Shader würde zwischen den beiden Texturen überblenden und eine dritte einkanalige Textur als Maske für den Effekt verwenden (z. B. Schwarz = 100% alter Zustand, Grau = 50/50 Mischung, Weiß = 100% neuer Zustand). Ich würde diese Maskentextur im Bildschirmbereich abbilden.

Dann habe ich eine zweite Kamera eingerichtet, die in eine RenderTexture gerendert werden soll, um diese Maske zu generieren. Diese zweite Kamera würde sich mit meiner Hauptkamera bewegen und ihrer FoV / orthografischen Größe entsprechen, sodass jede Animation in meiner Ansicht sowohl für die Welt gilt als auch die Maske konsistent enthüllt. Diese Kamera wird vor meiner Hauptkamera gerendert und so eingerichtet, dass nur Inhalte auf einer speziell festgelegten "Enthüllungs" -Ebene angezeigt werden. Im Videobeispiel sieht es so aus, als würden sie mithilfe eines Partikelsystems eine Ansammlung kleiner Wolkenformen in diese Enthüllungstextur aufteilen, die sich im Laufe der Zeit ausdehnt und dem Übergang eine organisch aussehende Ausbreitungskante verleiht.

DMGregory
quelle
Vielen Dank für die Antwort, ich werde dies ausprobieren und mich bei Ihnen melden, es funktioniert! Vielen Dank noch mal!
Jessca Stone