Wie kann ich einen Flammeneffekt wie im Titelbildschirm von Ocarina of Time erstellen?

102

Ich möchte einen Flammeneffekt wie den folgenden aus dem Logo auf dem Titelbildschirm des N64-Spiels "Die Legende von Zelda: Ocarina of Time" nachbilden:

Ein kurzer Blick auf die im ROM verwendeten Texturen liefert eine einzelne 32x32-Textur, die dem Effekt ähnelt, aber ich weiß nicht, wie dieses Bild (vorausgesetzt, es ist das richtige) in den Effekt umgewandelt wird, der auf dem Logo zu sehen ist.

Wie kann ich etwas ähnliches implementieren?

graphic-effects

— nathanburns
quelle

Ich habe Ihre Frage leicht angepasst, um zu fragen, wie ein ähnlicher Effekt erzielt werden kann, da wir Fragen, wie andere Spiele bestimmte Ergebnisse umsetzen, nicht als thematisch betrachten.

— Josh

Fragen Sie nach einer prozeduralen Technik oder genügen auch einfache vorgefertigte Effekte?

— Bálint

Ich habe nicht die Zeit und das Wissen , um eine vollständige Antwort zu schreiben, aber vielleicht könnte es über erfolgen Farbe Radfahren .

— Alexandre Vaillancourt

@JoshPetrie Danke, das war ich wirklich

— NathanBurns

Soweit ich mich an die Technik erinnere, besteht der schwierige Teil darin, das Bild mit den Pixeln unter Verwendung der entsprechenden Palette zu erstellen, nicht mit den Farben an sich. Das Radfahren erfolgt im Code über eine Teilmenge der Farben.

— Alexandre Vaillancourt

Antworten:

248

Machen Sie zuerst eine Weiß-auf-Schwarz-Maske aus Ihrem Logo / Text und verwischen Sie sie.

Erstellen Sie dann eine sich wiederholende (tileable) Solid Noise-Textur (hier wird GIMP verwendet).

Verwenden Sie den Filter Map-> Tile ..., um ein 3x3-Kachelmuster (in diesem Beispiel 128x128 x 3 = 384x384) für den nächsten Schritt zu erstellen, um sicherzustellen, dass unsere Textur immer noch wiederholbar ist. Wir behalten nur den mittleren Teil bei.

Verwenden Sie "Weichzeichnen"> "Bewegungsunschärfe", um die Textur nach oben zu verwischen und nur das mittlere Drittel beizubehalten (zurück auf 128 x 128).

Multiplizieren Sie beide Texturen auf der GPU und verwenden Sie diese für die Deckkraft.

Animieren Sie es dann, indem Sie die Mustertextur nach oben über die Maskentextur bewegen:

Fertig für den Animationsteil.

Dann können Sie eine Verlaufskarte (schwarz -> rot -> gelb -> weiß) anwenden , um ihr Feuerfarben zu verleihen:

Andere Farben können verwendet werden, um ein furchtbar blaues Feuer, ein hellgelbes Aura-Feld, einen rauchigeren Effekt usw. zu erzeugen.

Wenn Sie dies als Additiv über Ihrem Logo und dem 3D-Rendering kombinieren , erhalten Sie den gewünschten Effekt:

+ + =

Der Effekt kann abgedunkelt werden, indem die Masken- und / oder Musterhelligkeit und / oder die Scheitelpunktfarbe und / oder die Verlaufsfarbabbildung auf das gewünschte Niveau eingestellt werden.

Sie können sogar zwei strukturierte Muster (Maske * Feuermuster * Feuermuster) mit unterschiedlichen Geschwindigkeiten und Richtungen verwenden, um einen komplexeren Feuereffekt zu erzielen.

Auf dem N64 haben sie möglicherweise eine Näherung der Maske mit einem Dreiecksnetz und einer Scheitelpunktfarbe anstelle der Maskentextur erstellt, da die Hardware des N64 hinsichtlich der Texturen eingeschränkt ist. Das Endergebnis ist jedoch dasselbe ((Scheitelpunktfarbe * Musterstruktur) vs ( Maskenstruktur * Musterstruktur)).

Wir können die Vertex-Farbe weiterhin verwenden, aber 20 Jahre später können wir unser Leben einfacher gestalten und nur zwei oder mehr Texturen verwenden. Selbst die heutigen mobilen GPUs können problemlos mit einer zusätzlichen Textur von 256 x 128 Grau umgehen.

— Stephane Hockenhull
quelle

Ich denke, wir haben einen Gewinner - danke @StephaneHockenhull, das ist genau die Technik, nach der ich gesucht habe

— NathanBurns

Heilige Kuh das ist eine gute Antwort!

— John Gordon

"grässlich" oder "gespenstisch"?

— CJ Dennis

Es hat auch die Bedeutung "schrecklich im Aussehen". "Tragen Sie diese Krawatte nicht; es ist schrecklich". Ich habe Ihren Satz als "Andere Farben können einen wirklich schlechten oder Raucheffekt hervorrufen" interpretiert. "Ghostly" ist eindeutig, auch wenn es nicht so stark ist, wie Sie möchten.

— CJ Dennis

Ich wünschte, ich könnte Ihnen eine zweite Gegenstimme für das sehr ernsthafte Malen von Pferden geben.

— Erkennungs

Es gibt ein paar Möglichkeiten, wie Sie es tun könnten, aber aus meinem Kopf heraus,

1) Lassen Sie die Flammen + das Logo in einem Bild zusammenfügen und animieren Sie es im Wesentlichen mit einem Sprite Sheet.

2) Rendern Sie das Logo auf einer UI-Ebene und platzieren Sie einige Partikeleffekte auf der UI-Ebene.

Nach dem Aussehen dieses Bildes sieht es so aus, als gäbe es drei Schichten Schild und Schwert, Flammen und Text (von hinten nach vorne sortiert).

Es gibt viele Möglichkeiten, einen ähnlichen Effekt zu erzielen. Dies hängt davon ab, in welcher Engine Sie entwickeln und was Sie implementieren können.

— unknownSPY
quelle

Wenn die ROMs eine kleine Flammentextur enthalten, würde ich vermuten, dass dies mit einer Art Partikeleffekt geschieht.

Dies geschieht, indem zuerst ein Sprite für den Titel und das Logo auf den Bildschirm gelegt wird. Platzieren Sie anschließend eine Reihe von Partikelemittern, die einen Flammeneffekt hinter dem Titel-Sprite erzeugen. Das heißt, ihre Z / Screen-Tiefe ist so, dass sie hinter dem Titel gerendert werden.

Hier ist ein Beispiel für die Verwendung von GameMaker-Partikeleffekten, um Flammen zu erzeugen, die Ihnen einige Gedanken über das Potenzial dieses Ansatzes geben könnten ...

http://martincrownover.com/gamemaker-examples-tutorials/particles-fire/

— Tim Holt
quelle

Vielen Dank für den Vorschlag. Wenn die Textur nicht mit der in dem Tutorial übereinstimmt, mit dem Sie verlinkt haben, sondern den 32x32-Bereich ohne Transparenz ausfüllt, gibt es einen offensichtlichen Weg, dies mit Partikeln zu tun?

— NathanBurns

Ich würde nur meine eigene Flammentextur für das Partikel erstellen, wenn das Original keine Transparenz hat. Ich gehe hier davon aus, dass es sich wahrscheinlich stattdessen um einen Partikeleffekt handelt, es sei denn, der Originaltitel wurde mit einem vollständigen animierten Sprite erstellt (einschließlich des Flammeneffekts).

— Tim Holt

@TimHolt Möglicherweise überschätzen Sie die Hardwarefunktionen des Nintendo 64. Wenn Sie auf diese Weise einen "soliden" Flammeneffekt erzeugen würden, wären wahrscheinlich viel mehr Partikel erforderlich gewesen, als die Hardware rendern konnte.

— Duskwuff

@duskwuff - stimmt, aber ich glaube nicht, dass der Benutzer dies auf alter Hardware implementiert. Die Antwort ist immer noch gültig für jedes anständige (moderne) System.

— Tim Holt

@duskwuff die frage ist, wie man es jetzt umsetzt. Fragen (und Antworten) darüber, wie andere Spiele etwas getan haben, sind hier nicht zum Thema. Hardware-Fähigkeiten des N64 spielen hier keine Rolle. (Siehe Josh Petries Kommentar zu der Frage)