Page 1 of 1

How to make your own Texture2D in XNA procedurally

#1 magius96  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 71
  • View blog
  • Posts: 777
  • Joined: 15-April 09

Posted 07 February 2013 - 02:18 PM

In this tutorial, Im 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 easily to understand instructions for.
For this particular tutorial, were not going to create a whole project, instead were going to write small functions that can be included into any project. Were going to look at specifically two functions. The first of which will generate a transparent texture with stars on it. The second function well look at is a helper function that you may want to use in your own programs.
This first function were 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 = new Color[size];


Here we declared a variable to hold the total size of the image to be generated, then we declared the array that were 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 youd set every pixel to black at this point.
    Random rand = new Random();
    for(var i=0;i<numStars;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 were also setting the color of the star here?
    var tex = new Texture2D(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. Heres 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<numStars;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 were going to look at is a utility function that youll 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.

Im sure now that youve looked at the texture generation method that you understand how this particular function would be beneficial. Anyways, its 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 thats 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.

Is This A Good Question/Topic? 4
  • +

Replies To: How to make your own Texture2D in XNA procedurally

#2 H2012  Icon User is offline

  • New D.I.C Head

Reputation: 9
  • View blog
  • Posts: 25
  • Joined: 19-September 12

Posted 04 September 2013 - 05:22 AM

Good morning Magius96,


This is exactly what I was looking for!
Thank you for the work you put into this, I appreciate it.


Wishing you well,
-H2012
Was This Post Helpful? 1
  • +
  • -

#3 magius96  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 71
  • View blog
  • Posts: 777
  • Joined: 15-April 09

Posted 10 September 2013 - 09:47 AM

I'm glad it helped somebody. Thank you for the feedback.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1