Hallo Leute,
ich habe mich ein wenig an Shader rumgespielt und mir fällt ein, das der Sprache recht ähnlich mit anderen Sprachen wie C#, Java etc. sind. Eigentlich ist Shader doch recht einfacher als C#/Java, da man nur die Farbe manipuliert kann.
In dieser Tutorials werde ich euch ein wenig über Shader zeigen, wie man ihn benutzt, was es bedeutet, etc. Ich werde es so simpel wies möglich versuchen zu erklären, damit jeder von euch auch gut versteht.
Ihr sollte natürlich vorher bei Shader Basic von @LEWA anschauen, den hier wird nicht so viel über Funktionen besprochen. Hier ist ja nur eine Tutorial, wie man Shader benutzen kann.
Dieser Tutorial ist eher an Fortgeschrittene GML-Erfahrung gedacht, die schon ein wenig Erfahrung beim Programmieren haben.
Wir fangen erstmal an, wie wir zum Beispiel weiße Pixel in blaue Pixel von Sprite umwandeln können.
Als Beispiel-Sprite nehmen wir dies: (jaja, ich bin ein Pixel-Artist-Profi)
Den fügt ihr erstmal als Sprite in Game Maker ein.
Jetzt erstellen wir eine Objekt "obj_blauesKopf" und wir schreiben das in Draw Event:
Fügt das Objekt in Room ein, jetzt können wir vorerst Objekt ignorieren. Wir erstellen dazu jetzt eine neue Shader und wir nennen sie "sh_whiteToBlue" um.
Wenn ihr dieser Shader jetzt öffnet, seht ihr "Vertex" und "Fragment" bei Tab. Wir ignorieren vorerst "Vertex", den brauchen wir jetzt noch nicht. Wir gehen also zu "Fragment". Da können wir unsere Farbe-Pixel manipulieren.
bei Fragment sollte euch bei euch so aussehen:
So, bei der "void main()"-Codeabschnitt wird bei jede einzelne Pixel von Sprite ausgeführt und natürlich kriegen wir auch jede einzelne Pixel von Sprite die Farbwerte.
Jetzt erkläre ich ein wenig, was "float, vec2, vec3 und vec4" bedeutet:
float -> Das ist eine Typ, welches Zahlen inklusiv Kommastellen benutzen kann. In Game Maker kennen wir als "real". Allerdings muss man bei float immer so eine Format haben: 1.0, 124.9, 300.0
vec2 -> Das ist eine Typ, welches 2x Zahlen darauf nutzen kann. Dieser beide Zahlen sind wiederum auch float. Als kleiner Beispiel (verlgleich mit Game Maker):
Vorteil bei vec2 -> es werden weniger Variable verbraucht und man kann besser einordnen.
vec3 -> Das ist wie vec2, nur man kann 3 werte statt 2 werte benutzen. Als Beispiel:
oder
vec4 -> siehe oben, man kann 4 werte statt 3 werte gleichzeitig benutzen.
gl_FragColor ist eine vec4-Typ. Das heißt, das 4 werte da drin sich befindet, nähmlich Rot, Blau, Grün und Alpha.
Und dadrin befindet sich die Farbwert von Sprite (eigentlich befindet sich die Farbwerte von Sprite in Texture2D)
Wir können die Werte auch einzeln aufrufen, indem wir zum Beispiel:
Wenn wir nur rote Pixel haben, dann sehen die gewöhnlich so aus:
Red = 255;
Green = 0;
Blue = 0;
Bei Shader würde allerdings so aussehen:
Red = 1.0;
Green = 0.0;
Blue = 0.0;
Wenn es nur halb Rot ist, dann würde es bei normaler Farbwerte so aussehen:
Red = 128;
Green = 0;
Blue = 0;
bei Shader:
Red = 0.5;
Green = 0.0;
Blue = 0.0;
Bei Shader gibt die Farbwerte nur 0 bis 1 raus.
So genug geplaudert. Jetzt wollen wir zum beispiel Weiße Pixel in Blaue Pixel umwandeln. Weiße Pixel beihaltet ja die Farbwert (Rot = 1, Grün = 1; Blau = 1) und die Blaue Pixel (Rot = 0; Grün = 0; Blau = 1).
Also schreiben wir folgendes in Shader herein:
Alles anzeigen
Wenn wir das Spiel starten, sehen wir dann eine blaues Gesicht, welches in Weiß war:
So, ihr habt es geschafft! Oder wollt ihr etwa eine grünes Gesicht haben? Dann müsst ihr die Wert blau auf 0.0 setzen und die grüne wert auf 1.0 setzen.
---
Ich weiß, meine Deutsch ist gerade nicht der beste für dieser Tutorials. Aber wenn einer mal Lust hat, dieser Tutorial zu korrigieren, dann würde ich mich sehr freuen.
Wenn es euch gut gefallen hat, dann mache ich gern eine weitere Shader-Tutorial.
//Edit: ein wenig korrigiert.
ich habe mich ein wenig an Shader rumgespielt und mir fällt ein, das der Sprache recht ähnlich mit anderen Sprachen wie C#, Java etc. sind. Eigentlich ist Shader doch recht einfacher als C#/Java, da man nur die Farbe manipuliert kann.
In dieser Tutorials werde ich euch ein wenig über Shader zeigen, wie man ihn benutzt, was es bedeutet, etc. Ich werde es so simpel wies möglich versuchen zu erklären, damit jeder von euch auch gut versteht.
Ihr sollte natürlich vorher bei Shader Basic von @LEWA anschauen, den hier wird nicht so viel über Funktionen besprochen. Hier ist ja nur eine Tutorial, wie man Shader benutzen kann.
Dieser Tutorial ist eher an Fortgeschrittene GML-Erfahrung gedacht, die schon ein wenig Erfahrung beim Programmieren haben.
Wir fangen erstmal an, wie wir zum Beispiel weiße Pixel in blaue Pixel von Sprite umwandeln können.
Als Beispiel-Sprite nehmen wir dies: (jaja, ich bin ein Pixel-Artist-Profi)
Den fügt ihr erstmal als Sprite in Game Maker ein.
Jetzt erstellen wir eine Objekt "obj_blauesKopf" und wir schreiben das in Draw Event:
Fügt das Objekt in Room ein, jetzt können wir vorerst Objekt ignorieren. Wir erstellen dazu jetzt eine neue Shader und wir nennen sie "sh_whiteToBlue" um.
Wenn ihr dieser Shader jetzt öffnet, seht ihr "Vertex" und "Fragment" bei Tab. Wir ignorieren vorerst "Vertex", den brauchen wir jetzt noch nicht. Wir gehen also zu "Fragment". Da können wir unsere Farbe-Pixel manipulieren.
bei Fragment sollte euch bei euch so aussehen:
So, bei der "void main()"-Codeabschnitt wird bei jede einzelne Pixel von Sprite ausgeführt und natürlich kriegen wir auch jede einzelne Pixel von Sprite die Farbwerte.
Jetzt erkläre ich ein wenig, was "float, vec2, vec3 und vec4" bedeutet:
float -> Das ist eine Typ, welches Zahlen inklusiv Kommastellen benutzen kann. In Game Maker kennen wir als "real". Allerdings muss man bei float immer so eine Format haben: 1.0, 124.9, 300.0
vec2 -> Das ist eine Typ, welches 2x Zahlen darauf nutzen kann. Dieser beide Zahlen sind wiederum auch float. Als kleiner Beispiel (verlgleich mit Game Maker):
Vorteil bei vec2 -> es werden weniger Variable verbraucht und man kann besser einordnen.
vec3 -> Das ist wie vec2, nur man kann 3 werte statt 2 werte benutzen. Als Beispiel:
oder
vec4 -> siehe oben, man kann 4 werte statt 3 werte gleichzeitig benutzen.
gl_FragColor ist eine vec4-Typ. Das heißt, das 4 werte da drin sich befindet, nähmlich Rot, Blau, Grün und Alpha.
Und dadrin befindet sich die Farbwert von Sprite (eigentlich befindet sich die Farbwerte von Sprite in Texture2D)
Wir können die Werte auch einzeln aufrufen, indem wir zum Beispiel:
GML-Quellcode
- varying vec2 v_vTexcoord;
- varying vec4 v_vColour;
- void main()
- {
- gl_FragColor = v_vColour * texture2D( gm_BaseTexture, v_vTexcoord );
- float roteWert = gl_FragColor.r; //Wir haben jetzt den rote Wert von Sprite in Variable "roteWert". Beachte -> float ist wie real in Game Maker.
- float blaueWert = gl_FragColor.b; //Wir haben jetzt den blaueWert von Sprite in Variable "blaueWert".
- float grüneWert = gl_FragColor.g; //Wir haben jetzt den grüne Wert von Sprite in Variable "grüneWert".
- }
Wenn wir nur rote Pixel haben, dann sehen die gewöhnlich so aus:
Red = 255;
Green = 0;
Blue = 0;
Bei Shader würde allerdings so aussehen:
Red = 1.0;
Green = 0.0;
Blue = 0.0;
Wenn es nur halb Rot ist, dann würde es bei normaler Farbwerte so aussehen:
Red = 128;
Green = 0;
Blue = 0;
bei Shader:
Red = 0.5;
Green = 0.0;
Blue = 0.0;
Bei Shader gibt die Farbwerte nur 0 bis 1 raus.
So genug geplaudert. Jetzt wollen wir zum beispiel Weiße Pixel in Blaue Pixel umwandeln. Weiße Pixel beihaltet ja die Farbwert (Rot = 1, Grün = 1; Blau = 1) und die Blaue Pixel (Rot = 0; Grün = 0; Blau = 1).
Also schreiben wir folgendes in Shader herein:
GML-Quellcode
- varying vec2 v_vTexcoord;
- varying vec4 v_vColour;
- void main()
- {
- gl_FragColor = v_vColour * texture2D( gm_BaseTexture, v_vTexcoord );
- if (gl_FragColor.r == 1.0 && gl_FragColor.g == 1.0 && gl_FragColor == 1.0){ //der Pixel ist weiß!
- gl_FragColor.r = 0.0; // r = Rot
- gl_FragColor.g = 0.0; // g = Grün
- gl_FragColor.b = 1.0; // b = Blau
- //setze weiße Pixel in blaue Pixel
- //Alternativ können wir auch so machen:
- //gl_FragColor = vec4(0.0,0.0,1.0, 1.0);
- //das ist eine vec4-Typ und darauf könnt ihr rot, grün, blau und alpha werte nutzen.
- }
- }
Wenn wir das Spiel starten, sehen wir dann eine blaues Gesicht, welches in Weiß war:
So, ihr habt es geschafft! Oder wollt ihr etwa eine grünes Gesicht haben? Dann müsst ihr die Wert blau auf 0.0 setzen und die grüne wert auf 1.0 setzen.
---
Ich weiß, meine Deutsch ist gerade nicht der beste für dieser Tutorials. Aber wenn einer mal Lust hat, dieser Tutorial zu korrigieren, dann würde ich mich sehr freuen.
Wenn es euch gut gefallen hat, dann mache ich gern eine weitere Shader-Tutorial.
//Edit: ein wenig korrigiert.
Ihr stinkt.
Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von Chinafreak ()