Farbverläufe bei Zeichenfunktionen in GameMaker sind so eine Sache: Zwar gibt es von Haus aus ein paar Möglichkeiten, aber wenn man die Farben wechseln möchte, kann das ein bisschen knifflig werden. Dieses Tutorial zeigt einen praktischen Ansatz.
Grundsätzlich sind Farbverläufe in GameMaker möglich. Für die Zeichnung von Rechtecken, Kreisen oder Linien existieren entsprechende Befehle. Etwa draw_circle_colour, draw_line_colour oder draw_rectangle_colour. In meiner Demo NO RUST hatte ich aber das Ziel, oben und unten Linien zu zeichnen, bei denen sich die Farben wechseln. Das kannst du nach etwa 13 Sekunden sehen:
Wozu ist das im Spiel gut?
Farben bzw. Farbverläufe können unterschiedliche Dinge symbolisieren. Etwa eine Lebensleiste, die von Rot (links) nach Grün (rechts) gehen kann. Ein Wechsel dieser Farben könnte dem Spieler andere Informationen geben, etwa von Weiß nach Blau um zu zeigen, dass der Gegner derzeit unverwundbar ist. Und statt einfach nur die beiden Farben zu tauschen, kannst du es in beliebig vielen Schritten wechseln.
Theorie
In der Theorie sollte man vor allem zwei Dinge berücksichtigen.
- Wenn wir, wie in meiner Demo, viele Farben wollen, machen wir das am besten über ein Array.
- Über den Befehl
merge_colourkönnen wir in GameMaker Studio zwei Farben miteinander mischen.
Praxis
In meinem Beispiel verwende ich lediglich eine der beiden Linien aus der Demo und zeichne sie in der Mitte des Bildschirms.
Event Create
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 | // Definiere die Farben rainbowColors = [ #FF0000, #FF2400, #FF4500, #FF6600, #FF7F00, #FFA500, #FFD700, #FFFF00, #ADFF2F, #32CD32, #008000, #00FF00, #00FFFF, #1E90FF, #0000FF, #8A2BE2, #8B008B, #8B005F, #8B002D, #AE0000 ]; numColors = array_length(rainbowColors)-1; cCount = 0; countEnd = 2; cCountTiming = 0; |
In meinem Beispiel habe ich 20 Farben definiert. Die Variable numColors brauchen wir, damit wir das auch wissen. In solchen Fällen ist es immer gut, wenn es automatisch gezählt wird, dann müssen wir nicht laufend die Werte ändern, wenn wir uns für mehr oder weniger Farben entscheiden.
Die Farben in rainbowColors sind bereits nach einem bestimmten System angeordnet. Zu Beginn starten wir mit 0 (also die erste Farbe) und enden bei 2 (die dritte Farbe). Außerdem brauchen wir noch einen Counter.
Event Draw
1 2 3 4 5 6 7 8 9 10 11 12 | var col1 = merge_colour(rainbowColors[cCount], rainbowColors[countEnd], 0.5); draw_line_width_colour(0, room_height/2, room_width, room_height/2, 4, col1, rainbowColors[cCount]); if (cCountTiming >= 10) { if (cCount < numColors) { cCount++; } else { cCount = 0; } if (countEnd < numColors) { countEnd++; } else { countEnd = 0; } cCountTiming = 0; } else { cCountTiming++; } |
Im Draw-Event wird zuerst eine neue Farbe col1 für die Linie berechnet. Diese Farbe wird durch eine Mischung zwischen der aktuellen Farbe rainbowColors[cCount] und der Endfarbe rainbowColors[countEnd] bestimmt, wobei das Mischverhältnis 0,5 beträgt.
Danach wird eine Linie von links nach rechts auf der Bildschirmmitte gezeichnet. Die Linie hat eine Breite von 4 Pixeln und den Farbverlauf col1 bis rainbowColors[cCount]. Die Positionen der Linie sind festgelegt, um von der linken Seite des Raums x = 0 bis zur rechten Seite des Raums x = room_width und auf halber Höhe des Raums y = room_height/2 zu verlaufen.
Schließlich wird überprüft, ob cCountTiming größer oder gleich 10 ist. Wenn dies der Fall ist, wird überprüft, ob cCount und countEnd kleiner als die Gesamtzahl der Farben im Array sind. Wenn ja, werden sie inkrementiert, andernfalls werden sie auf 0 zurückgesetzt. cCountTiming wird zurückgesetzt, um die Zeit bis zur nächsten Farbänderung zu zählen.
Bei einer Spielgeschwindigkeit von 60 FPS wird die Farbe sechsmal pro Sekunde gewechselt.
Das war es auch schon. Mit dieser Technik sollten Farbverläufe in deinem Spiel kein Problem mehr sein.
Weiterführende Links
Shader-Effekt: CRT
Selbstspielendes Breakout
Projekt Snake
Projekt Tic-Tac-Toe – Teil 1
