In den letzten Wochen habe ich mal wieder die erste Star Trek Serie angeschaut (TOS). Und da kam der Wunsch in mir auf, einen Sternenscroller zu programmieren, der aussieht, als würde man ganz schnell durch das Weltall düsen.
Dass es verschiedene Möglichkeiten gibt, einen solchen Effekt zu programmieren, wurde bereits in anderen Tutorials gezeigt (siehe Links ganz unten). Heute verwenden wir einen anderen Ansatz.
Die Theorie
Der Effekt ist relativ simpel und lässt sich gut anpassen. Um ihn zu realisieren, brauchen wir zwei Objekte. Das eine Objekt ist ein einzelner „Stern”, welcher hier als Linie dargestellt wird. Dieser Stern fliegt, beginnend bei einer beliebigen Ausgangsposition, an den Bildschirmrand. Jeder Stern sieht so aus, als hätte er seinen Ursprung in der Bildschirmmitte. Wir haben verschiedene Parameter wie Winkel, Distanz zur Mitte, Geschwindigkeit und Alpha. Das heißt: Wem das Video oben zu dunkel ist, der kann es u. a. über den Alphawert verändern. Wenn der Stern den Bildschirm verlässt, wird er automatisch wieder in die Mitte gesetzt um neu zu starten.
Jetzt wäre ein einzelner Stern sehr öde. Je nach Auflösung des Spiels bzw. des Raums brauchen wir schon etwas mehr. Ich habe es auf 1920×1080 angepasst und fand, dass 600 ein recht guter Wert ist. Und das machen wir in einem zentralen Objekt: Wir verteilen die Objekte, in diesem Fall 600 an der Zahl, auf dem Bildschirm.
obj_star_lines
Legen wir gleich los. Im Stern brauchen wir drei Events.
Create-Event
1 2 3 4 5 6 7 8 | x_start = room_width/2; y_start = room_height/2; x = random(room_width); y = random(room_height); distance = 0; alpha = 0; |
Hier legen wir unsere Variablen fest. x_start und y_start sind die Bildschirmmitte. Es kann sehr interessant sein, wenn man den Start verschiebt, etwa auf 0, 0.
Mit x und y legen wir die tatsächliche Ausgangsposition fest, damit nicht alle Sterne in der Mitte beginnen. distance und alpha setzen wir zunächst auf 0 und berechnen sie später.
Step-Event
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | // Berechne die Distanz zum Ursprung distance = point_distance(x, y, x_start, y_start); // Berechne den Winkel zwischen dem Stern und dem Ursprung direction = point_direction(x_start, y_start, x, y); // Alpha alpha = distance / (room_width * 1.2); // Bewege den Stern in Richtung des Ursprungs mit der aktuellen Geschwindigkeit x += speed * lengthdir_x(1, direction); y += speed * lengthdir_y(1, direction); // Wenn der Stern den Bildschirm verlässt, landet er wieder in der Mitte if (x > room_width) || (x < 0) || (y > room_height) || (y < 0) { x = x_start; y = y_start; alpha = 0; } |
Der Code ist ziemlich selbsterklärend. Man kann die Sterne heller machen, indem man bspw. das * 1.2 entfernt.
Nun müssen wir den Stern noch zeichnen.
Draw-Event
1 2 3 4 5 6 | var _xx = x + lengthdir_x(64, direction); var _yy = y + lengthdir_y(64, direction); draw_set_alpha(alpha); draw_line_width_color(x, y, _xx, _yy, 2, #000000, #FFC0CB); |
Im Prinzip zeichnen wir hier nur eine Linie, die vom Winkel her von der Mitte nach Außen, bezogen auf direction, ausgerichtet ist. Der Farbverlauf geht bei mir von Schwarz zu einem sehr hellen Rosa. Auch das könnt ihr nach Belieben anpassen.
Hauptobjekt
Das Hauptobjekt, in dem wir alle Sterne generieren, besteht dann nur noch aus einem Event.
Create-Event
1 2 3 4 5 6 7 8 9 10 11 | randomize(); // Erstelle eine Schleife, um 600 Sterne zu erstellen for (var _i = 0; _i < 600; _i++) { // Erstelle ein neues Stern-Objekt var _star = instance_create_layer(random(room_width), random(room_height), „Instances", obj_star_lines); // Setze eine zufällige Geschwindigkeit für den Stern _star.speed = random_range(2, 6); } |
Wir initialisieren den Zufallsgenerator. Dann starten wir eine for-Schleife, welche wir sechshundert Mal durchlaufen. Dabei platzieren wir jeden Stern zufällig im Raum. Am Ende geben wir jedem Stern noch eine Geschwindigkeit mit, die im Beispiel zwischen 2 und 6 liegt. Wer einen witzigen Effekt sehen will, kann die 6 in 60 ändern.
Das war es auch schon wieder. Viel Spaß dabei, per Warpgeschwindigkeit zu fliegen.
Weiterführende Links
Sterne aus der Tiefe
Horizontaler Sternenscroller und Parallax scrolling
Shader-Programmierung 1: Grundlagen und Sprites
