Es müssen nicht immer Shader-Effekte sein. Mit den Zeichenfunktionen von GameMaker lassen sich nette Effekte erschaffen, die u. a. Ladebildschirme, Menüs und GUI zieren können.
Im folgenden Tutorial wird dieser kleine Effekt programmiert:
Das lässt sich sehr einfach über die Zeichenfunktionen lösen. Im Beispiel sind die Kreise oben und unten, aber mit ein wenig Fleiß kann er beliebig angepasst werden.
Grundsätzlich brauchen wir dazu nur ein eigenes Objekt und darin zwei Events.
Event Create
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | _circle_count = 30; // Anzahl der Kreise _circle_size = 24; // Durchmesser des Kreises _speed = 1; // Bewegungsgeschwindigkeit // Berechnung des Abstands zwischen den Kreisen basierend auf der Anzahl der Kreise und der Breite des Raums _circle_spacing = (room_width - (_circle_size * 2)) / (_circle_count - 1); // Erstellen eines Arrays für die Kreise _circles = array_create(_circle_count, 0); // Array für die x-Positionen der Kreise der zweiten Linie circles_bottom = []; // Berechnung des Abstands zwischen den Kreisen basierend auf der Anzahl der Kreise und der Höhe des Raums circle_spacing_bottom = (room_width - (_circle_size * 2)) / (_circle_count - 1); // Schleife zum Initialisieren der Kreise for (var i = 0; i < _circle_count; i++) { _circles[i] = _circle_size + (i * _circle_spacing); circles_bottom[i] = room_width - _circle_size - (i * circle_spacing_bottom); } |
Wie du sehen kannst, werden am Anfang schon die Anzahl der Kreise, die Größe und die Geschwindigkeit definiert. Dann berechnen wir den Abstand der Kreise zueinander mit der Formel: (room_width - (_circle_size * 2)) / (_circle_count - 1). Diese Formel ist äußerst nützlich, wenn du den Effekt anders verwenden möchtest, wie hier gezeigt.
Dann erstellen wir zwei Arrays für oben und unten. Sie lauten _circles und circles_bottom. Die Formel von circle_spacing_bottom ist identisch zu _circle_spacing. Ich habe das so eingerichtet, falls du den Abstand oben oder nur unten verändern möchtest.
Anschließend füllen wir unsere Arrays mit einer for-Schleife und geben darin die Positionen der Kreise oben und unten an.
Event Draw
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | draw_set_alpha(1); draw_set_color(#3380FF); for (var i = 0; i < _circle_count; i++) { // Bewegung jedes Kreises _circles[i] += _speed; // Überprüfung, ob der Kreis rechts außerhalb des Bildschirms ist if (_circles[i] > room_width + _circle_size) { // Setzen der x-Koordinate auf eine Position, die an den Anfang des Bildschirms angrenzt _circles[i] = _circle_size; } // Berechnung des Radius basierend auf der x-Position des Kreises var distance_from_center = abs(room_width / 2 - _circles[i]); var radius = (room_width / 2 - distance_from_center) * 0.03; // Multiplikationsfaktor bestimmt die Steigung der Radiusänderung // Zeichnen des Kreises an der berechneten Position mit dem berechneten Radius draw_circle(_circles[i], 64, radius, 0); // Bewegung jedes Kreises nach links circles_bottom[i] -= _speed; // Überprüfen, ob der Kreis links außerhalb des Bildschirms ist if (circles_bottom[i] < -_circle_size) { // Setzen der x-Koordinate auf eine Position, die am rechten Rand des Bildschirms angrenzt circles_bottom[i] = room_width - _circle_size; } // Berechnung des Radius basierend auf der y-Position des Kreises var distance_from_center_bottom = abs(room_height - 64 - circles_bottom[i]); var radius_bottom = (room_height - 64 - distance_from_center_bottom) * 0.03; // Multiplikationsfaktor bestimmt die Steigung der Radiusänderung // Zeichnen des Kreises an der berechneten Position mit dem berechneten Radius draw_circle(circles_bottom[i], room_height - 64, radius_bottom, 0); } |
Abgesehen von Alpha und Farbe befindet sich alles in einer großen for-Schleife. Hier gehen wir beide Arrays durch, berechnen die neuen Positionen, Größe und zeichnen die Kreise. Theoretisch könnte man auch Rechtecke oder Dreiecke nehmen.
Wichtig ist noch, was passiert, wenn ein Kreis den Bildschirm verlässt. Dann wird er neu gesetzt, etwa so: _circles[i] = _circle_size; wenn er oben rechts die Raumbreite verlässt. Im Beispiel reichen somit 30 Kreise aus, um den Eindruck einer unendlichen Animation zu hinterlassen.
Anwendungsbeispiele
Eingebaut habe ich den Effekt an zwei Stellen meiner kleinen Demo NO RUST:
Aber das Prinzip ließe sich auch als Menü nutzen. Etwa für eine Charakterauswahl, bei der man statt Kreise entsprechende Sprites anzeigt. Allerdings müsste man das Ganze noch erweitern. Etwa, dass die Bewegung stehen bleibt, sobald man mit dem Mauszeiger in den entsprechenden Bereich kommt. Und das der Sprite, auf dem der Mauszeiger liegt, mit 100 % Größe angezeigt wird.
Weiterführende Links
Wechselnde Farbverläufe in GameMaker
Selbstspielendes Breakout
Timing in GameMaker-Projekten
Projekt Snake
Projekt Tic-Tac-Toe – Teil 1
