Posts Tagged ‘draw


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.

Twitter Updates

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