Mengubah Gambar Berwarna Menjadi Grayscale Menggunakan XNA 4.0

Pada tutorial kali ini saya akan membahas cara mengubah gambar berwarna menjadi grayscale menggunakan XNA 4.0. Cara yang diperkenalkan dalam tutorial ini dapat digunakan dalam pembuatan permainan pada platform Windows Phone 7 dan Windows.

Pada XNA 4.0 resource gambar direpresentasikan dengan kelas Texture2D. Fungsi dari kelas Texture2D yang akan digunakan adalah SetData dan GetData. Sesuai namanya, fungsi-fungsi tersebut berguna untuk mengubah dan mendapatkan data yang bertipe Color dari suatu objek dari kelas Texture2D.

Langkah-langkah pembuatan aplikasinya adalah sebagai berikut.

1. Buat project “Windows Phone Game (4.0)” baru. Sebagai contoh saya namakan project tersebut “GrayscaleConvert”.

2. Tambahkan suatu resource gambar dengan cara menekan tombol kanan mouse pada project “GrayscaleConvertContent” yang terdapat pada jendela solution explorer, kemudian pilih “Add”, dan pilih “Existing Item”. Sebagai contoh saya menambahkan gambar bernama “Koala.jpg”.

3. Tambahkan variabel-variabel berikut ini dalam file “Game1.cs”.

Texture2D myImage;
Texture2D converted

4. Tambahkan baris kode berikut ini dalam fungsi “LoadContent()”.

myImage = Content.Load<Texture2D>("Koala");
converted = new Texture2D(GraphicsDevice, myImage.Width, myImage.Height);

Color[] myImageColors = new Color[myImage.Width * myImage.Height];
Color[] newImageColors = new Color[myImageColors.Length];

myImage.GetData<Color>(myImageColors);

for (int ii = 0; ii < myImageColors.Length; ii++)
{
     byte blue = myImageColors[ii].B;
     byte green = myImageColors[ii].G;
     byte red = myImageColors[ii].R;
     byte tmp = (byte)((red + green + blue) / 3);
     if (tmp <= 100)
     {
          tmp = 1;
     }
     else
     {
          tmp = 255;
     }

     Color c = new Color(tmp, tmp, tmp);
     newImageColors[ii] = c;
}

converted.SetData<Color>(newImageColors);

5. Tambahkan baris kode berikut ini dalam fungsi “Draw(GameTime gameTime)”

spriteBatch.Begin();
spriteBatch.Draw(myImage, new Rectangle(0, 0, 200, 200), Color.White);
spriteBatch.Draw(converted, new Rectangle(0, 200, 200, 200), Color.White);
spriteBatch.End();

Untuk menjalankan aplikasi dapat dilakukan dengan cara menekan tombol F5 pada keyboard atau pilih menu “Debug” dan pilih “Start Debugging”.

Berikut ini adalah screenshot pada saat aplikasi dijalankan.

Contoh solution yang dibuat dalam tutorial ini dapat di-download di sini.