• 4Minuten
blank

In Spielen kommt es oft vor, dass Bilder oder kleine Sprites ein- oder ausgeblendet werden müssen. Wenn die Bordmittel von GameMaker Studio ausgeschöpft sind, bieten sich Shader für kreativere Lösungen an.

Bevor es losgeht: Wenn du noch nie mit Shadern gearbeitet hast, solltest du vorher das Einführungstutorial lesen.

Möglichkeiten

Egal ob Titelbild, Intro oder Charaktere im Spiel: Immer wieder müssen wir Grafiken ein- und ausblenden. Meistens wird dazu der Alpha-Wert verwendet, aber auf Dauer ist das sehr langweilig und etwas unkreativ. Gerade bei Titelbildern hätten wir noch die Möglichkeit, sie reinscrollen zu lassen, bei Charakteren im Spiel wird das, je nach Spiel, schon schwierig.

Dabei gäbe es sehr viele theoretische Möglichkeiten, dies zu tun. Etwa, dass die Einzelnen Pixel aus dem Raum herangeflogen kämen um ein Bild zusammen zu setzen. Aber das ist mit GameMaker und den meisten anderen Entwicklungsumgebungen nicht möglich. Grafiken können bewegt, gedreht, teilweise noch verzerrt oder über Alpha geblendet werden. Damit ist die Palette der Möglichkeiten erschöpft. Doch zum Glück gibt es ja Shader.

Zeilenweise ein- und ausblenden

Das hier gezeigte Verfahren habe ich in meiner Demo NO RUST verwendet. Du kannst das im folgenden Video ab Sekunde 14 beim Logo in der Mitte sehen.

Der Effekt ist natürlich sehr alt, man kennt das vor allem aus Demos der 1980er und Anfang 1990er Jahre. Aber ich denke, das kann heute noch wirken – nicht nur bei Retro-Games.

Möglicherweise denkst du jetzt, dass das ja total easy ist. Man setzt nur ein schwarzes Rechteck davor und skaliert es runter und dann wieder rauf. Ja, das wäre möglich, aber dann würde man, wie in der Demo zu sehen, die Sterne im Hintergrund nicht sehen. Wenn wir den hier gezeigten Shader verwenden, könnte im Hintergrund auch ein Affe im Clown Kostüm tanzen und wir würden ihn immer noch sehen.

Entdecke die Möglichkeiten

Mit den Grundeinstellungen des Tutorials sieht der Effekt so aus:

Hier wird ein beliebiges Bild zeilenweise eingeblendet. Sobald es bei 100% ist, wird es wieder ausgeblendet. Dies kann auch über einen Timer eingestellt werden.

Der Shader und das zugehörige Objekt sind konfigurierbar. Du kannst nicht nur einstellen, ob es ein- oder ausgeblendet werden soll, sondern auch Geschwindigkeit, Start des Fortschritts und die Richtung. D. h. Du kannst bspw. von Anfang an die Hälfte des Bildes anzeigen und den Rest zeilenweise einblenden. Diese Möglichkeit ist u. a. interessant, wenn man ein bestimmtes Timing zur Musik erreichen möchte. Außerdem kann es bei einem Intro im Comic-Style interessant sein, wenn man erst die obere Hälfte anzeigt und der Rest langsam erscheint.

Durch die Variable _direction kannst du seitlich oder über die Diagonale blenden. Der Wert sollte zwischen 0 und 360 liegen.

Das Problem ist nur, dass man, je nach Richtung, die Werte und Variablen anpassen muss. Darauf gehe ich weiter unten noch ein bisschen ein.

Der Shader

Der Fragment-Shader blendet die Grafik in einer bestimmten Richtung ein oder aus, basierend auf einem Fortschrittswert, indem er die Transparenz der Pixel entsprechend ihrer Position relativ zur Ausblendungsrichtung anpasst. Auf die einzelnen Formeln gehe ich nicht weiter ein. Es reicht zu wissen, wie das Prinzip funktioniert.

Das Objekt

Im Objekt brauchen wir drei Events. Create, Step und Draw. Im Step regeln wir den Fortschritt.

Event Create

Über die Vergabe der Variablennamen kann man sich (wie so oft) streiten. Der Fortschritt der Ausblendung liegt am Anfang bei 100 %. Wir wollen also einblenden. Wir blenden von oben nach unten, also stehen alpha_up auf true und _direction auf 180. Da ist sein kann, dass man mehrere Arten von Fadings hat, habe ich den Shader im Create-Event in die Variable shader geschrieben. Das ist besser, als es laufend im Draw-Event zu ändern.

Event Step

Das ist nur ein Beispiel, wie man Ein- und Ausblendung regeln kann. Die perfekte Methode musst du für dich selbst herausfinden.

Event Draw

Wie immer setzen wir den Shader, übergeben die Variablen und dann zeigen wir dazwischen noch unsere Grafik mit draw_sprite an.

Variationen

Wenn du von links nach rechts einblenden willst, musst du nur _direction = 90; verwenden.

Von unten links nach oben rechts stellst du _direction = 45; ein.

Von unten nach oben brauchst du _direction = 0;.

Je nachdem, wie alpha_up, alpha_down, progress und _direction stehen, sind auch andere Kombinationen möglich.

Du kannst es auch im Uhrzeigersinn blenden!

Create

Ändere diese Zeile:

Step

Füge im Step-Event folgende Zeile hinzu:

Wie du sehen kannst, lässt sich mit dem einfachen Shader recht viel anstellen.

Weiterführende Links

Shader-Effekt: Wellen für den Hintergrund
Sternenscroller fast auf Warp
Raster bar Effekt
Bitmap-Fonts im GameMaker
Textscroller: Wellen und einzelne Farben

Autor

Abonnieren
Benachrichtige mich bei
guest

0 Comments
Inline Feedbacks
Alle Kommentare anzeigen