In den ersten beiden Teilen dieser Serie haben wir sehr viel über Shader gelernt. Neben der Manipulation von Sprites und Post-Processing gibt es aber noch andere Anwendungsmöglichkeiten. Mit Shadern kann man auch bildschirmfüllende Effekte programmieren.
Vorteile und Anwendung
Während wir beim Post-Processing lediglich das manipulieren, was bereits auf dem Bildschirm sichtbar ist, werden wie im dritten Teil ganz neue Inhalte generieren. Der Vorteil, dies mit Shadern zu machen, ist einfach erklärt: Mit Shadern sind Dinge möglich, die sich mit den Mitteln von Game Maker überhaupt nicht, oder nur sehr schwer umsetzen lassen. Die Zeichenfunktionen sind diesbezüglich sehr limitiert und vergleichsweise langsam.
Mandelbrot-Fraktal mit GM-Mitteln
Als Benchmark ein kleiner Test. Das folgende Beispiel zeichnet ein Mandelbrot-Fraktal mit draw_rectangle() auf ein Surface. Es wird im Create-Event vorberechnet und dauert, je nach Prozessor, vergleichsweise lange und sieht dazu noch recht bescheiden aus. Und nicht vergessen: Am Ende haben wir nur einen Frame.
Create-Event
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 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | x = 0; y = 0; // Funktion zur Berechnung des Mandelbrot-Sets für eine gegebene komplexe Zahl c function calculate_mandelbrot(cx, cy) { var zx = 0; var zy = 0; var value = 0; // Iterationen durchführen, bis der Wert des Mandelbrot-Sets bestimmt werden kann while (value < 256 && zx * zx + zy * zy < 4) { // Neue Z-Koordinaten berechnen var nzx = zx * zx - zy * zy + cx; var nzy = 2 * zx * zy + cy; zx = nzx; zy = nzy; value++; } // Wert des Mandelbrot-Sets zurückgeben return value; } width = 320; height = 200; surface = surface_create(width, height); // Transparentes schwarzes Surface erstellen transparent_black = surface_create(1, 1); surface_set_target(transparent_black); draw_set_color(c_black); draw_set_alpha(1); // Alpha-Wert auf 1 setzen draw_rectangle(0, 0, 1, 1, false); surface_reset_target(); for (var xx = 0; xx < width; xx++) { for (var yy = 0; yy < height; yy++) { var cx = xx / width * 3.5 - 2.5; var cy = yy / height * 2 - 1; var value = calculate_mandelbrot(cx, cy); var color = c_white; if (value > 16) { if (value < 20) color = make_color_rgb(255, 0, 0); else if (value < 24) color = make_color_rgb(255, 128, 0); else if (value < 28) color = make_color_rgb(255, 255, 0); else if (value < 32) color = make_color_rgb(128, 255, 0); else if (value < 36) color = make_color_rgb(0, 255, 0); else if (value < 40) color = make_color_rgb(0, 255, 128); else if (value < 44) color = make_color_rgb(0, 255, 255); else if (value < 48) color = make_color_rgb(0, 128, 255); else if (value < 52) color = make_color_rgb(0, 0, 255); else if (value < 56) color = make_color_rgb(128, 0, 255); else if (value < 60) color = make_color_rgb(255, 0, 255); else if (value < 64) color = make_color_rgb(255, 0, 128); else if (value < 72) color = make_color_rgb(128, 0, 64); else if (value < 80) color = make_color_rgb(128, 0, 255); else if (value < 96) color = make_color_rgb(128, 64, 255); else if (value < 112) color = make_color_rgb(0, 128, 255); else if (value < 128) color = make_color_rgb(0, 255, 255); else if (value < 144) color = make_color_rgb(0, 255, 128); else if (value < 160) color = make_color_rgb(128, 255, 0); else if (value < 176) color = make_color_rgb(255, 128, 0); else if (value < 192) color = make_color_rgb(255, 255, 0); else if (value < 208) color = make_color_rgb(255, 128, 128); else if (value < 224) color = make_color_rgb(255, 255, 128); else if (value < 240) color = make_color_rgb(128, 255, 128); else if (value < 256) color = make_color_rgb(128, 255, 255); else color = c_white; } else { color = c_black; } surface_set_target(surface); if (color == c_black) { // Transparentes schwarzes Surface zeichnen draw_surface_ext(transparent_black, xx, yy, 1, 1, 0, color, 0); } else { // Nicht-schwarzen Pixel zeichnen draw_set_color(color); draw_rectangle(xx, yy, xx + 1, yy + 1, false); } surface_reset_target(); } } |
Draw-Event
1 2 | // Surface auf dem Bildschirm anzeigen draw_surface(surface, 0, 0); |
Wie man im Code sehen kann, hat das Fraktal nur eine Größe von 320×200 Pixel – und dauert dennoch recht lange für die Berechnung. Wie flott das im Shader geht, werden wir später sehen.
So weit zu den Vorteilen, aber wozu sind solche Effekte gut? Einerseits, wie so oft in solchen Tutorials, sind sie einfach schön anzusehen. Egal ob Intro, Fake-Cracktro, Hauptmenü oder Credits: Mit solchen Effekten lassen sich Spieler beeindrucken. Doch sie können auch spielrelevant sein. Man muss sich nur mal einen ausgefeilten Tunneleffekt im Hintergrund vorstellen, durch den ein Sprite-Raumschiff fliegt, um nur ein Beispiel zu nennen.
Abgesehen davon kann es extrem Spaß machen – und letztlich geht es genau darum bei der Programmierung.
Projektionsfläche
Es gibt mehrere Möglichkeiten, einen Shader-Effekt auf dem ganzen Bildschirm anzuzeigen. Im Tutorial möchte ich zwei davon zeigen, wobei ich in den Beispielen nur noch die zweite, einfachere Varianten anwenden werde.
Die Vertex-Texture-Methode
In Game Maker gibt es die Funktion draw_vertex_texture(). Sie definiert die Position eines texturierten Scheitelpunktes für ein Primitiv. Zur Verwendung müssen wir zunächst eine Sprite-Textur erstellen, wofür wir die Funktion sprite_get_texture() brauchen. Kurz gesagt: Wir werden eine Textur erstellen, die aus zwei Polygonen besteht. Darauf rendern wir den Shader Effekt.
Zur Verdeutlichung etwas Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | shader_set(sh_shader); // Wir legen die Parameter des Shaders fest // Hier erstellen wir die Textur mit den beiden Polygonen var tex = sprite_get_texture(s_shader, 0); draw_primitive_begin_texture(pr_trianglestrip, tex); draw_vertex_texture(offset_x, offset_y, 0, 0); draw_vertex_texture(offset_x + width, offset_y, 1, 0); draw_vertex_texture(offset_x + width, offset_y + height, 1, 1); draw_vertex_texture(offset_x, offset_y + height, 0, 1); draw_vertex_texture(offset_x, offset_y, 0, 0); draw_vertex_texture(offset_x + width, offset_y + height, 1, 1); draw_primitive_end(); shader_reset(); |
Der eigentliche Shader-Code fehlt hier, weil ich den Fokus auf die Textur legen möchte. Der Ablauf ist wie folgt:
- Wir setzen den Shader.
- Wir definieren die Parameter (
shader_set_uniform_f()etc.) - Mit
sprite_get_texture()wird eine Textur erstellt. - Mit
draw_vertex_texture()definieren wir je drei Punkte eines Dreiecks. Das ist unser Polygon. Die beiden Dreiecke ergeben ein Rechteck. - Das Zeichnen wird mit
draw_primitive_end()undshader_reset()beendet.
Viel Aufwand für wenig Effekt?
Tatsächlich ist es mehr Code, als die Methode, die gleich gezeigt wird. Sie ist wahrscheinlich auch etwas langsamer. Der Vorteil ist, dass man den Effekt mit dieser Methode etwas besser kontrollieren kann. Man kann Größe und Position zur Laufzeit ganz einfach ändern. Wenn man das Rechteck in viele weitere Polygone unterteilt, kann man so einen Effekt auch auf kreative Weise ein- und ausblenden.
Außerdem haben wir so einmal mit einer Textur gearbeitet, was man vor allem im 3D-Bereich gut gebrauchen kann.
Die Surface-Methode
Wer die ersten beiden Teile bereits durchgearbeitet hat, dem wird dies vertraut vorkommen.
1 2 3 4 5 | [/video]</p]shader_set(sh_shader); // Hier machen wir irgendwas mit dem Shader // Dann zeichnen wir unsere Fläche draw_surface_ext(application_surface, 0, 0, 1, 1, 0, c_white, 0); shader_reset(); |
Das sieht schon etwas unkomplizierter aus. Wir setzen unseren Shader, stellen die Parameter ein (nicht im Beispiel enthalten) und zeichnen, wie gewohnt, mit draw_surface_ext() eine Oberfläche. Für die meisten vollflächigen Effekte sollte das ausreichen.
Auf den nachfolgenden Seiten möchte ich einige praktische Beispiele zeigen. Dabei zeige ich den Code für Create- sowie Draw-Event und natürlich den Fragment-Shader. Das erste Beispiel betrifft Plasma-Effekte, wie man sie aus Demos der frühen 1990er Jahre kennt. Das allererste Beispiel zeigt die Vertex-Texture-Methode, alle weiteren Beispiele die Surface-Methode.
