Erstellen Sie einen nachgestellten Ghosting-Effekt für ein Sprite

15

Ich möchte einen nachgestellten, geisterhaften Effekt eines Sprites erzeugen, der sich schnell bewegt. Etwas sehr Ähnliches wie dieses Bild von Sonic (Entschuldigung von schlechter Qualität, es ist das einzige Beispiel, das ich für den Effekt finden konnte, den ich erreichen möchte)

Geisterspur

Ich möchte dies jedoch nicht auf Sprite-Sheet-Ebene tun, um zu vermeiden, dass sich die Anzahl der Sprites in meinem Atlas im Wesentlichen verdoppelt (oder möglicherweise vervierfacht). Es ist auch sehr arbeitsintensiv.

Gibt es also einen anderen Weg, um diesen Effekt zu erzielen? Möglicherweise durch etwas Shader-Voodoo-Magie? Ich benutze Unity und 2D Toolkit, wenn das hilft.

Cooper
quelle

Antworten:

21

Sie können dies problemlos mit einem Partikelsystem und einem Shader tun. Richten Sie das Partikelsystem so ein, dass alle X Millisekunden 1 Partikel mit maximal 3 Partikeln freigesetzt wird. (Wählen Sie ein X aus, je nachdem, wie weit die nachfolgenden Sprites voneinander entfernt sein sollen.) Verwenden Sie für das Partikel dasselbe Bild wie das aktuelle Sprite des Charakters, jedoch mit einem anderen Material. Probieren Sie einige der Alpha-Blended-Shader auf dem Material aus, um den gewünschten Effekt auf die nachfolgenden Partikel zu erzielen.

Wenn Sie schicker werden möchten, können Sie die maximale Anzahl von Partikeln und andere Einstellungen basierend auf der aktuellen Geschwindigkeit des Charakters anpassen.

Hier ist ein Beispiel, das ich mit nur 1 Quad, 1 Sprite, 2 Materialien und einem Partikelsystem machen konnte.

Ich habe das Partikelsystem an das Quad angehängt und das Quad so eingestellt, dass es das Sonic-Sprite verwendet. Ich verwende nur die Einstellungen für Emission, Farbe über Lebensdauer und Renderer des Partikelsystems.

Max Partikel: 5

Simulationsraum: Welt

Lebenszeit starten: 1

Startgeschwindigkeit: 0

Farbe im Laufe der Lebensdauer: Verblassen von Weiß (Alpha 255) zu Schwarz (Alpha 0)

Rendermaterial: Verwenden des gleichen Bilds wie das Original, jedoch mit dem Shader "Partikel / Alpha gemischt".

Sonic mit nachlaufendem Partikeleffekt

LVBen
quelle
1
Das funktioniert einwandfrei. Ich muss nur herausfinden, wie das Material im Partikelsystem-Renderer programmgesteuert so eingestellt wird, dass es mit dem aktuellen Sprite-Bild übereinstimmt.
Cooper
4

Genau wie bei der Partikelsystemlösung können Sie mit 2dtoolkit den gleichen Effekt erzielen. Fügen Sie dem Charakter 3 Kinderspielobjekte hinzu, an die nur ein Sprite angehängt ist. Ändern Sie das Alpha und die Farbe nach Bedarf. Dann können Sie die lokalen Positionen des Sprites in Abhängigkeit von der Geschwindigkeit des Charakters variieren:

myTransform.localPosition = characterSpeed * distanceFactor;

Es speichert einen Zeichenaufruf (im Vergleich zu Partikeln) und gibt Ihnen die totale Kontrolle über die Ausbreitung des Effekts, wenn Sie es glatt oder gestaffelt machen möchten.

ADB
quelle
Das hat mich tatsächlich zu einer besseren Lösung geführt, die für die Verwendung von 2D Toolkit viel besser geeignet ist, aber ich bin nicht bereit, sie als akzeptierte Antwort zu markieren. Die Partikelsystemmethode ist eine weitaus allgemeinere Methode, die wahrscheinlich am besten für die meisten Unity-Entwickler geeignet ist. Ich werde die Lösung posten, die ich letztendlich verwendet habe.
Cooper
3

Die von LVBen bereitgestellte Partikelsystemlösung funktioniert zwar, ist jedoch nicht die am besten geeignete Lösung, wenn Sie 2D Toolkit für Ihre Sprites verwenden. Der Hauptgrund ist, dass es unmöglich ist, das Ghost-Trail-Material im Partikelsystem mit der aktuellen Sprite-Animation des Hauptfertigteils zu synchronisieren.

Hier ist die 2D Toolkit-freundliche Lösung, die ich letztendlich verwendet habe.

Fügen Sie für das Fertighaus, aus dem die Geister-Spur stammen soll, ein leeres Spielobjekt hinzu, das als Stamm fungiert. Fügen Sie unter diesem Stammverzeichnis eine beliebige Anzahl von tk2dSprite- oder tk2dSpriteAnimator-Spielobjekten (je nachdem, ob Sie animierte Sprites möchten oder nicht) hinzu (ich habe 4 hinzugefügt) und passen Sie deren Farbalpha-Werte entsprechend an, um den Ghosting- / Fading-Effekt zu erzielen.

Im obersten übergeordneten Update

// AmountToMove is a Vector3 of the amount we will translate this gameobject.
float y = (int)AmountToMove.y == 0 ? 0 : -AmountToMove.y;
float distanceFactor = 0.05f;
for (int i = 0; i < GhostingRoot.childCount; ++i) {
    // Based on the player's current speed and movement along the x and y axes,
    // position the ghost sprites to trail behind.
    Vector3 ghostSpriteLocalPos = Vector3.Lerp(
                                      GhostingRoot.GetChild(i).localPosition,
                                      new Vector3((-CurrentSpeed * distanceFactor * i),
                                                  (y * distanceFactor * i), 0),
                                      10f * Time.deltaTime);
    // GhostingRoot is the root gameobject that's parent to the ghost sprites.
    GhostingRoot.GetChild(i).localPosition = ghostSpriteLocalPos;
    // Sync the animations.
    // _ghostSprites is a List of the tk2dSpriteAnimator ghost sprites.
    _ghostSprites[i].Play(SpriteAnimator.CurrentClip.name);
    _ghostSprites[i].Sprite.FlipX = Sprite.FlipX;
}

Diese Lösung erzeugt den nachgestellten Ghosting-Effekt, während die Animationen der Ghost-Sprites mit dem Hauptsprite synchronisiert werden.

Cooper
quelle