Shader-Effekt: Wellen für den Hintergrund

  • 2Minuten

Du bist auf der Suche nach einem Hintergrundeffekt für Credits oder Hauptmenü? Dann ist dieser Shader-Effekt womöglich perfekt für dein Retro-Game.

Das Titelbild sieht womöglich etwas seltsam aus, aber in Bewegung macht der Effekt echt etwas her:

Du kannst den Effekt gut an Deine Bedürfnisse anpassen. So lässt sich bspw. der Zoom verändern, die Bewegung und natürlich die Farben und Geschwindigkeit. Im Video habe ich über GUI-Draw einen Text drüber gelegt, damit du sehen kannst, wie es als Credit-Hintergrund wirken würde. Doch kommen wir gleich zum Code.

Shader-Code

Der Shader erzeugt ein sich bewegendes, wellenförmiges Muster auf dem Bildschirm, das dynamisch zwischen zwei Farben wechselt.

Die Bildkoordinaten werden normalisiert und diskretisiert, um einen Rastereffekt zu erzeugen. Dies wird durch die Verwendung von v_vTexcoord und resolution erreicht. Wie wir gleich sehen werden, geben wir dieses mal nicht die Bildschirmauflösung an den Shader weiter, sondern eine Zahl. Im Beispiel ist es die 1. Je größer diese Zahl ist, umso mehr zoomen wir rein. Umgekehrt können wir natürlich auch rauszoomen.

Durch die Anwendung von Sinusfunktionen auf die normalisierten Koordinaten (uv) in Abhängigkeit von der Zeit entsteht eine komplexe, wellenartige Bewegung. Du kannst selbst mit den Zahlen experimentieren und so die Auswirkung besser verstehen.

Es wird eine weitere, sanftere Bewegung hinzugefügt, um das Muster organisch erscheinen zu lassen. Dies wird durch die Anwendung von Sinusfunktionen auf die Koordinaten erreicht. Außerdem gibt es zwei Grundfarben: Dunkelblau und Orange. Die Mischung dieser Farben erfolgt dynamisch basierend auf den Sinuswerten der Koordinaten, was zu einem harmonischen Farbübergang führt. Das Muster selbst ist dabei ein verzerrtes, weiches Schachbrettmuster.

Die Bewegung wird – wie in allen Shader-Tutorials hier – durch die Zeitvariable gesteuert.

Objekt

Create-Event

Wir starten die Variable time mit 0 und bestimmen mit time_add, wie schnell diese gesteigert wird. Je größer die Zahl, umso schneller bewegt sich der Hintergrund.

Draw-Event

In Zeile 4 sehen wir den Unterschied zu anderen Shader-Effekten. Indem wir die 1 für x und y verändern, können wir den Effekt zoomen.

Weiterführende Links

Shader-Programmierung 1: Grundlagen und Sprites
Shader-Effekt: Warping
Shader-Effekt: Interferenz-Effekt

Autor

Abonnieren
Benachrichtige mich bei
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x