SpriteBatch Magic: Grayscale

In der Serie SpriteBatch Magic stelle ich in unregelmäßigen Abständen (Pixel-) Shader vor, die als Effekt für den SpriteBatch verwendet werden können und diesen so erheblich aufwerten können.

In diesem zweiten Artikel der Reihe stelle ich – nachdem ich im ersten Beitrag die Grundlagen erklärt hatte – den Effekt Grayscale vor, der das Sprite in Graustufen umwandelt.

Die Umwandlung von Farben in Graustufen ist extrem einfach. Die für jede Farbe resultierende Graustufe gibt dabei ganz einfach den Intensitäts- oder Helligkeitswert der jeweiligen Farbe wieder.

Diesen Effekt könnte man beispielsweise anwenden, wenn man die tote Spielfigur als Geist darstellen möchte, der sich zum Spawn-Point bewegt.

Eine kleine Besonderheit gibt es dabei jedoch. Das Auge reagiert unterschiedlich stark auf die Farbbestandteile Rot, Grün und Blau. Daher sollte man diese bei der Berechnung der Graustufe auch entsprechend gewichten, damit das Ergebnis anständig aussieht. Die korrekten Werte dafür sind:

  • Rot: 29,9%
  • Grün: 58,7%
  • Blau: 11,4%

Der Shader dafür ist nicht sonderlich kompliziert:

float4 PixelShaderFunction(VertexShaderOutput input) : COLOR0
{
    float4 color = tex2D(textureSampler, input.texCoord);
    float gray = color.r * 0.299 + color.g * 0.587 + color.b * 0.114;

    return float4(gray, gray, gray, color.a);
}

Zunächst ermitteln wir in Zeile 3 den Farbwert aus der Sprite-Textur. Deren Farbbestandteile gewichten wir in Zeile 4 zu einem Intensitätswert. Dabei sind die einzelnen Farbbestandteile im Wertbereich 0.0 bis 1.0 und daher habe ich die prozentuale Gewichtung ebenfalls in diesen Wertebereich verschoben.

In Zeile 6 steigen wir dann mit der „grauen Farbe“ als Rückgabewert aus. Da eine Graustufe nur eine Intensität ist, müssen wir diesen Wert allen drei Farbbestandteilen zuweisen. Den Alpha-Wert, also die Transparenz verändern wir dabei nicht und übernehmen diese ohne Änderung aus der Textur.

Wie ihr seht, gibt es für Graustufen nicht viel zu erklären, da dies doch ein recht einfacher Effekt ist. Sollten noch Fragen bestehen, nutzt bitte die Kommentarfunktion.

Advertisements

Veröffentlicht am 29.04.2011 in Grundlagen, SpriteBatch, Tutorial, XNA, XNA 3.1, XNA 4.0 und mit , , , , , , , getaggt. Setze ein Lesezeichen auf den Permalink. 2 Kommentare.

  1. Hallöchen,

    da schmeiße ich mein E-Mail Programm an, und siehe da, neue Artikel auf deinem Blog.

    Freut mich, da ich diese Kenntnisse in meinen derzeitigen Projekt sehr gut gebrauchen kann.

    Grüße und ein schönes Wochenende, Kai.

  1. Pingback: SpriteBatch Magic: Grundlagen « "Mit ohne Haare"

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: