Archive for the 'Tutorial' Category


How to Draw lines, circles and polygons using SpriteBatch in xna

In this tutorial, i am going going to show how to draw lines, circles, rectangles and other polygons using the spritebatch. Here is a video of the final project in action.

The base for this tutorial is how to draw a line. After that, the other shapes are nothing more than a combination of lines (even the circle, as you’ll see).

A line is drawn by skewing a 1×1 pixel texture (known as blankTexture) over its length and rotating it accordantly. Here’s the code snipped that does that.

public static void DrawLineSegment(SpriteBatch spriteBatch, Vector2 point1, Vector2 point2, Color color, int lineWidth)

float angle = (float)Math.Atan2(point2.Y – point1.Y, point2.X – point1.X);
float length = Vector2.Distance(point1, point2);

spriteBatch.Draw(blankTexture, point1, null, color,
angle, Vector2.Zero, new Vector2(length, lineWidth),
SpriteEffects.None, 0f);

This code is based from the code from XNAWIKI.

After knowing how to draw a line, its simple to create a function to draw any polygon.


public static void DrawPolygon(SpriteBatch spriteBatch, Vector2[] vertex, int count, Color color, int lineWidth)
if (count > 0)
for (int i = 0; i < count – 1; i++)
DrawLineSegment(spriteBatch, vertex[i], vertex[i + 1], color, lineWidth);
DrawLineSegment(spriteBatch, vertex[count – 1], vertex[0], color, lineWidth);

Here is how you would use that function to draw a rectangle using the method above.

public static void DrawRectangle(SpriteBatch spriteBatch, Rectangle rectangle, Color color, int lineWidth)
Vector2[] vertex = new Vector2[4];
vertex[0] = new Vector2(rectangle.Left, rectangle.Top);
vertex[1] = new Vector2(rectangle.Right, rectangle.Top);
vertex[2] = new Vector2(rectangle.Right, rectangle.Bottom);
vertex[3] = new Vector2(rectangle.Left, rectangle.Bottom);

DrawPolygon(spriteBatch, vertex, 4, color, lineWidth);


Drawing a circle is a little more tricky. Since we can’t draw a circle directly, we will set points in the circle radius and then connect them. The more points we use, the more realistic the circle will be, but it will also require more time to be draw.

public static void DrawCircle(SpriteBatch spritbatch, Vector2 center, float radius, Color color, int lineWidth, int segments = 16)

Vector2[] vertex = new Vector2[segments];

double increment = Math.PI * 2.0 / segments;
double theta = 0.0;

for (int i = 0; i < segments; i++)
vertex[i] = center + radius * new Vector2((float)Math.Cos(theta), (float)Math.Sin(theta));
theta += increment;

DrawPolygon(spritbatch, vertex, segments, color, lineWidth);

This code we can also draw pentagons, hexagons and so on. All you need to specify is the current number in the segments parameter.

Now there is something that is missing. How about if we extend the spritebatch in order to be able to draw a circle using “spriteBatch.DrawCircle( center, radius, color, lineWidth, segments)” rather than be force to use DrawLine(spriteBatch, radius, colorm lineWidth, segments)”.

That is actually very simple!

Since this methods are static the only thing we have to do is to insert the keywork this before the SpriteBatch parameter. i. e., rather than specifying:

public static void DrawCircle(SpriteBatch spritbatch, Vector2 center, float radius, Color color, int lineWidth, int segments = 16)

we specify:

public static void DrawCircle(this SpriteBatch spritbatch, Vector2 center, float radius, Color color, int lineWidth, int segments = 16)

And like magic, we extend the spritebatch to add the method DrawLine. Now we just have to do the same for the other methods.

Experiment the code for yourself. Download it in the link below.

Source Code

(click here to download the full project)

Other Links

How to draw a line from XNAWIKI.


See ya next Monday ;). Oh and follow me on Twitter.


How to create a destructible Texture in XNA

Ever wonder how to create a destructible texture like the one in Worms games? Well, then you are in luck.
In this tutorial, i am going to show how to create a destructible texture2D, as shown in the video above.

The term destroy refers to setting the pixels to transparent.

The class used to manage this texture is called “DestructibeTexture2D”. The class will receive a texture as the constructor and will provide methods to destroy that texture based on 3 shapes: circle, rectangle and based on another texture.

In order to access the pixels from a Texture2D we have to use the method “GetData” whose parameter will include and Color object array which will be populated with pixels’ data. The next snippet shows how that’s done:

Texture2D texture  = Content.Load(textureName);
Color[] data = new Color[texture.Width * texture.Height];

Whenever we want  to set the pixels in the texture, we use the “SetData” method whose parameter is the Color object array.


Now, when we want to change the data of a pixel, we just need to change the Color array object corresponding to that pixel and the set the data in the texture. The next code snippet changes the color of the pixel in the third row and fourth column to green.

data[4 + 3*texture.Width] = Color.Green;
With this in mind it should be easy to change the color of any pixel to transparent. The next code snippet shows how set a rectangle in the texture to transparent.
public void DestroyTexture(Rectangle rectangle)
int areaLeft = Math.Max(0, rectangle.Left);
int areaRight = Math.Min(Texture.Width, rectangle.Right);
int areaTop = Math.Max(0, rectangle.Top);
int areaBottom = Math.Min(Texture.Height, rectangle.Bottom);
for (int i = areaLeft; i < areaRight; i++)
for (int j = areaTop; j < areaBottom; j++)
TextureData[i + j * Texture.Width] = Color.Transparent;

Pretty simple, hay? =)

This is all you need to know to create your own destructible texture.

You can download the d texture class and all the test project source code using the link below.

You should know that the class provides to implementation for each destruction method, one fast and another that receives in the parameter a bool that is set true if the texture changed or false if the texture did not.

I think that the code is  pretty much self-explanatory. Any question fell free to comment below ;).

Usage Example

Here is an example on how to use the destructible texture class.

//Load destructible texture
Texture2D textureTemp = Content.Load("Level");
DestructibleTexture2D destructibleTexture  = new DestructibleTexture2D(textureTemp, GraphicsDevice);
//Destroy texture in shape of a rectangle
Rectangle rectangle = new Rectangle(30, 30, 40, 20);

Source Code

(you can download the project full source code here.)

Interesting Links

Emanuel Feronato’s Destructible Terrain in Flash

Reimer’s resources

Twitter Updates

Error: Twitter did not respond. Please wait a few minutes and refresh this page.