Home arrow TUTORIALS arrow Pixel Manipulation
Pixel Manipulation PDF Print E-mail
Written by Mark Thomas   
Wednesday, February 07 2007
Article Index
Pixel Manipulation
Page 2
Copy this code over the Draw() function:
  protected override void Draw(GameTime gameTime)
   //draw our first tile
   spriteBatch.Draw(tileMap,new Rectangle(0,0,48,48),new Rectangle(0,0,48,48), Color.White);
   //draw our second tile
  spriteBatch.Draw(tileMap, new Rectangle(48, 0, 48, 48), new Rectangle(48, 0, 48, 48),      Color.White);
   //draw our dynamic tile
   spriteBatch.Draw(texTile, new Rectangle(96, 0, 48, 48), Color.White);
If you've worked with textures before, this should look pretty ordinary to you. We are simply using the Draw() method of our SpriteBatch object to output our textures onto the screen. If we run this now, we should see something like this:

Initial output


Finally, we'll go a step further, turning our dynamic texture into a greyscale version of itself. Add the following function to your code:
  private void GrayScale(ref uint[] rgba)
   for (int x = 0; x < texTile.Width; x++)
    for (int y = 0; y < texTile.Height; y++)
     uint f = rgba[x + y * texTile.Width];
     //bit shifting and other voodoo magiks are applied
     uint r = ((((uint)f) & 0x000000FF) << 16);//red     
     if (r > 255) r = 255;
     if (r < 0) r = 0;
     uint g = ((((uint)f) & 0x000000FF) << 8);//green
     if (g > 255) g = 255;
     if (g < 0) g = 0;
     uint b = ((((uint)f) & 0x000000FF) << 0);//blue
     if (b > 255) b = 255;
     if (b < 0) b = 0;
     //uint a = (((uint)0xFF) << 24);//alpha, which I am throwing out.

     uint gray = (r + g + b) / 3;
     if (gray > 255) gray = 255;
     if (gray < 0) gray = 0;
     Microsoft.Xna.Framework.Graphics.Color color;

     //grayscale the pixel. this tends to wash things out.
     color = new Color((byte)gray, (byte)gray, (byte)gray);
     //put our pixel back in the array
     rgba[x + y * texTile.Width] = color.PackedValue;

This function accepts the array of uint variables that holds our dynamic texture data. It loops through the array, using bitshift operators to access the individual red, green, and blue components that are ultimately being held by the integers. I won't attempt explaining this, because there are many places on the web that can explain it better than I can. I will explain the grayscale part though; basically, the way to produce gray is to take the average of the red, blue, and green components. To do this, once we have each part collected, we add them together and divide by three. Then we create a new Color object and populate it with this data, and finally shove the integer back in the array from whence it came.
After uncommenting the call to this function in your  CreateDynamicTileTexture() method, run the program. You should now see something like this:

Final output


I had intended to demonstrate some cool effects such as magnification, or randomly blending textures together. Unfortunately, time got away from me, but hopefully this gives you some ideas on how you can use similar techniques in your own games.
Download the source for this tutorial here

Last Updated ( Wednesday, February 07 2007 )
Next >
Hot Seat, Ltd - Consulting and Games
Web hosting services