Spiraleffekt in GMS 2

15. Juni 2018

Im Nicole Marie T Intro gibt es einen Spiraleffekt. Die Spirale baut sich aus einzelnen Kreisen auf, wechselt zwischendurch die Farben und neigt sich anschließend um 45°. In diesem Tutorial zeige ich, wie das geht.

Vorwissen

Dieses Tutorial baut auf das erlernte Wissen der Effekte Falling numbers und Schicker Hintergrundeffekt auf. Deshalb werde ich darauf verzichten, die dort gezeigten Grundlagen erneut zu erklären.

Im Kern funktioniert der Spiraleffekt ähnlich. Wir erstellen uns im Create-Event ein Array, welches wir mit den benötigten Werten pro Kreis füllen. Durch Alarm 0 bauen wir die Spirale langsam auf, etwa wie im Memory im GameMaker Tutorial. Dort wurden die Karten bei Spielstart einzeln auf den Tisch gelegt. Sobald alle Kreise sichtbar sind, wechseln wir die Farbe und neigen, ebenfalls in Alarm 0, langsam die Spirale um 45°.

Der Effekt bietet zahlreiche Möglichkeiten um ihn zu ändern und zu erweitern. Beispielsweise könnte man die »Ecken« des Kreises ändern, die Form der Spirale, die Form durch Rechtecke oder Dreiecke austauschen und vieles mehr. Deiner Kreativität sind keine Grenzen gesetzt!

obj_spiraleffekt

Da GMS 2 bekanntlich den ersten Raum selbst erzeugt, brauchen wir lediglich das Objekt. Im Objekt legen wir die drei Events Create, Alarm 0 und Draw an.

Event-Create

In GMS 1.x arbeitet man gerne mit room_speed, aber das funktioniert in GMS 2 nur bedingt gut. Stattdessen benutzen wir hier game_get_speed und legen die Geschwindigkeit mit game_set_speed fest.

Nun haben wir ein kleines Problem mit den Bezeichnungen der Variablen. Die Spirale besteht aus Kreisen (Ringen) und jeder Ring aus einer bestimmten Anzahl an Kreisen (draw_circle). Damit es weniger Missverständnisse gibt, habe ich die Kreise (draw_circle) bei den Variablen Pixel genannt. Das hat den Vorteil, dass wir später statt Kreise auch Dreiecke oder andere Formen nehmen können, ohne gleich alle Variablen ändern zu müssen. Wir tun also so, als wäre jede Form nur ein Bildpunkt.

Wir definieren Pixel pro Kreis und die Anzahl der Kreise, welche die Spirale haben wird. Letzteres hängt vor allem vom Raum bzw. der Bildschirmbreite ab. Nachdem wir weitere Variablen definiert haben, kommen unsere beiden Schleifen für die Kreise und die einzelnen Pixel pro Kreis. Jeder »Pixel« besitzt sieben Werte. Das ließe sich beliebig erweitern oder gar kürzen, aber mit diesen Werten hat man eine sehr gute Ausgangsposition. Wir haben:

  • x-Koordinate
  • y-Koordinate
  • Farbwert Rot
  • Farbwert Grün
  • Farbwert Blau
  • Summe der Farbe
  • Alpha

Am Ende rufen wir Alarm 0 auf.

Event-Draw

Bevor wir den Alarm anschauen, gehen wir in unser Draw-Event.

Im Prinzip haben wir wieder unsere beiden schleifen und zeichnen innerhalb der zweiten Schleife unsere Pixel. In Zeile 15 habe ich draw_set_circle_precision(24); auskommentiert. Damit wird die Genauigkeit der Kreise festgelegt. Der Wert 4 führt zu einem Viereck, der Wert 5 zu einem Fünfeck und so weiter. Dreiecke lassen sich so nicht zeichnen, dafür müsste man draw_rectangle statt draw_circle nehmen, aber immerhin haben wir hier schon einige Möglichkeiten zur Veränderung.

Der Rest vom Code regelt vorwiegend Abstand, Geschwindigkeit und Farbe der Pixel. Ab Zeile 32 verändern wir die Farbe jedes Pixel systematisch. Die Farbwerte befinden sich innerhalb einer Palette und lassen sich sehr leicht anpassen.

Alarm 0

Aufgrund der Kommentare ist der Code ziemlich selbsterklärend. Die Geschwindigkeit des Aufbaus lässt sich über die Alarm-Parameter sehr einfach regeln. Ebenfalls das kippen der Spirale. Wer den Aufbau des Effekts überspringen möchte, kann im Create-Event auch pixel_aktuell = all_pixel; statt pixel_aktuell = 0; schreiben.

Der Farbwechsel in Alarm 0 kommt nach if (neigung = 0). Hier geben wir jedem Pixel eine neue Farbe. Aufgrund der Regelung im Draw-Event mit if (col_count = 3) bekommt jedes vierte Pixel im Kreis eine andere Farbe.

Das war es auch schon. Wie gesagt, lassen sich damit viele tolle Dinge anstellen. Mit dem selben Prinzip lässt sich auch der alte Pixeltunnel-Effekt von den zahlreichen Objekten zu einem Objekt umstellen. Allerdings ist hier die Berechnung der exakten Bewegung etwas komplexer. In Tests musste ich leider feststellen, dass die Geschwindigkeit in diesem Fall kaum schneller ist, als wenn man alles über ein Array regelt. 10-20% kann man aber trotzdem rausholen.

 

Hat Dir dieser Artikel gefallen? Dann würden wir uns sehr über Unterstützung freuen.

Hinterlasse einen Kommentar

avatar
1024
  Abonnieren  
Benachrichtige mich bei