How to Make Your Own Texture2D in XNA Procedurally

3/27/2017

In this tutorial, I’m going to teach you the basics behind procedurally drawing your own Texture2D. This is a task that many new XNA developers struggle with and have a hard time finding any easy to understand instructions for. For this particular tutorial, we’re not going to create a whole project, instead we’re going to write small functions that can be included into any project. We’re going to look at specifically two functions. The first of which will generate a transparent texture with stars on it. The second function we’ll look at is a helper function that you may want to use in your own programs. This first function we’re going to look at will generate a transparent texture covered with white stars. This function will accept three parameters: height, width, and the number of stars to generate.

protected Texture2D GenerateStarMap(int width, int height, int numStars) { }

Now, before we continue, you need to understand that when you are creating your own Texture2D, you must do it in the form of a one-dimensional array of Colors.

var size = width * height;
Color[] mapcolors = newColor[size];

Here we declared a variable to hold the total size of the image to be generated, then we declared the array that we’re going to use to create our texture.

for(var i = 0; i < size; i++)
{
  mapcolors[i] = Color.Transparent;
}

This little for loop runs through the entire array setting every pixel to transparent. If you wanted the texture to be black with white stars then you’d set every pixel to black at this point.

Random rand = new Random();
for(var i = 0; i < 100; i++)
{
  var n = rand.Next(size);
  mapcolors[n] = Color.White;
}

What good is a star map without stars? Here we instantiated an instance of the random number generator, then we loop through creating all the stars at a random location in the array. Notice how we’re also setting the color of the star here?

var tex = newTexture2D(GraphicsDevice, width, height, false, SurfaceFormat.Color);
tex.SetData(mapcolors);
return tex;

Here we actually create our texture, specifying its height width. In the next line is where we are actually setting the values for all the pixels of the texture using the Color array we created earlier. And finally we return the texture. Here’s the whole function:

protected Texture2D GenerateStarMap(int width, int height, int numStars)
{
  var size = width * height;
  Color[] mapcolors = new Color[size];
  for(var i = 0; i < size; i++)
  {
    mapcolors[i] = Color.Transparent;
  }
  Random rand = new Random();
  for(var i = 0; i < 100; i++)
  {
    var n = rand.Next(size);
    mapcolors[n] = Color.White;
  }
  var tex = new Texture2D(GraphicsDevice, width, height, false, SurfaceFormat.Color);
  tex.SetData(mapcolors);
  return tex;
}

The next function that we’re going to look at is a utility function that you’ll want to use when creating your own procedurally generated textures. This function accepts an x coordinate, a y coordinate, and the map width and returns an integer that represents that coordinates location in a one-dimensional array. I’m sure now that you’ve looked at the texture generation method that you understand how this particular function would be beneficial. Anyways, it’s a fairly basic algorithm, so here is the whole function at once:

protected int GetArrayIndex(int x, int y, int width)
{
  if(x >= width)
    x = width -1;
  return(y * width) + x;
}

I told you it was a fairly basic algorithm. The first thing you should know is that x should never be equal or greater to width. Remember, coordinates are zero based indexers. This means that in a texture that’s 100 by 100 pixels, the top left is (0,0) and the bottom right is (99,99). For this reason, the first thing we do is test to make sure x is less than width, and if not we set it equal to one less than width, or the highest valid x value.

Respond