Vertikale Textscroller werden vor allem bei Credits, Abspann oder beim Erzählen der Geschichte verwendet. In GameMaker sind solche Scroller sind i. d. R. leicht zu realisieren. Doch manchmal möchte man es verschönern, indem man den scrollenden Text oben und unten ein- bzw. ausblendet. Hier schauen wir uns eine simple Möglichkeit an.
Die Grenzen des Machbaren
Das Titelbild – es handelt sich um den Abspann der Demo NO RUST – sieht man gut, worum es geht. Ein gewöhnlicher, vertikaler Textscroller soll unten eingeblendet und oben ausgeblendet werden. Leider stoßen die Bordmittel von GameMaker Studio hier an Grenzen.
Dabei gibt es gleich mehrere Schwierigkeiten. Wir können einen Text zwar färben, verzerren, den Alpha-Wert beeinflussen, aber letzteres nur für den ganzen Text. Um das zu erreichen, was wir wollen, müssten wir einen relativ hohen Aufwand betreiben, etwa den Text in einzelne Zielen zerstückeln und diese in ein Array schreiben. Dann scrollen wir die Zeilen hoch und sobald der Text eine bestimmten Wert auf der Y-Achse erreicht, verändern wir den Alpha-Wert. Das funktioniert, ist aber, wie gesagt, ein hoher Aufwand, auch für den PC.
Eine weitere Möglichkeit wäre die Anwendung von Shadern. Der Aufwand für so einen Shader ist nicht wesentlich geringer. Viel einfacher ist es, wenn wir es faken und einfach nur so tun als ob.
Fake the fade!
Das Prinzip ist einfach. Wir brauchen eine Grafik zur Überlagerung:
Diese Grafik zeigen wir einfach oben und unten (um 180° gedreht) über dem Text an.
In der Demo sieht der Code für das Draw-Event des Textscrollers so aus:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | draw_set_alpha(1); draw_set_color(#000000); draw_rectangle(0, 0, room_width, 100, 0); draw_rectangle(0, room_height-100, room_width, room_height, 0); draw_set_font(f_end_part); draw_set_color(#FFFFFF); draw_set_halign(fa_center); draw_set_valign(fa_top); draw_text_shadow(x_start, y_start+y_pos, txt, #FFFFFF, #000000, 1, 0.5, 8, 1); y_pos -= scroll_speed; if (y_pos < scrollerEnd) { instance_destroy(); } draw_set_alpha(1); draw_sprite(s_textfader, 0, 0, 0); draw_sprite_ext(s_textfader, 0, room_width, room_height, 1, 1, 180, c_white, 1); |
Erst zeichne ich oben und unten schwarze Balken. Danach kommt der Text mit meiner eigenen draw_text_shadow-Funktion. Dieser wird dann mit der Geschwindigkeit scroll_speed hoch gescrollt.
Die letzten beiden Zeilen zeichnen den Textfader oben und unten. Und ja, man hätte die Grafik von der Breite her auch auf 64 Pixel (oder noch weniger) beschränken und skalieren können.
Probleme?
Je nach Hintergrund kann dieser Effekt mal mehr, mal weniger gut wirken. Im Fall der Demo fällt es überhaupt nicht unangenehm auf. Wenn sich im Hintergrund aber eine Berglandschaft oder irgendetwas Buntes befindet, könnte es schlecht wirken.
In so einem Fall sollte man die Höhe der Grafiken anpassen oder sich doch für eine der oben beschriebenen Methoden entscheiden.
Weiterführende Links
Old School Textscroller
Texte im Kreis bewegen
Retro-Grafik gestern und heute
