Drawing Rectangles with SpriteBatch

Just a quick code snippet which adds an extension method for drawing Rectangles to SpriteBatch:

public static class SpriteBatchHelper
{
	static Texture2D pixel;

	private static void LoadPixel(GraphicsDevice graphicsDevice)
	{
		if(pixel == null)
		{
			pixel = new Texture2D(graphicsDevice, 1, 1);
			pixel.SetData<Color>(new Color[] { Color.White });
		}
	}

	public static void DrawRectangle(this SpriteBatch spriteBatch, Rectangle rectangle, Color color)
	{
		LoadPixel(spriteBatch.GraphicsDevice);
		spriteBatch.Draw(pixel, rectangle, color);
	}
}

Calculating an angle from a Vector2

When you need to calculate an angle from a Vector2 structure, you can use this piece of code:

public static class Vector2Helper
{
	public static float CalculateAngle(Vector2 v)
	{
		float angle = 0.0f;

		if(v != Vector2.Zero)
		{
			v.Normalize();

			angle = (float)Math.Acos(v.Y);

			if(v.X < 0.0f)
			angle = -angle;
		}

		return angle;
	}
}

I used this to calculate an angle from the Vector2 of the Left Stick.

The original credit for this source code comes from here.

Drawing 2D Lines as Rotated Quads

I haven’t had much time lately with work but one question I’ve seen asked many many times is how to draw lines of different widths. So, to cut to the chase I’ll share the code I’ve used to do it.

public void DrawLine(Vector3 p1, Color c1, Vector3 p2, Color c2, int width)
{
	float distance = Vector3.Distance(p1, p2);
	float halfDistance = distance / 2.0f;
	float halfWidth = width / 2.0f;

	Vector3 difference = p2 - p1;
	Vector3 destination = new Vector3(p1.X + difference.X / 2.0f, p1.Y + difference.Y / 2.0f, p1.Z + difference.Z);

	// Calculate angle between two points
	float angle = (float)Math.Atan2(difference.Y, difference.X);

	Vector3 v1, v2, v3, v4;

	v1 = new Vector3(-halfDistance, -halfWidth, 0); // Top Left
	v2 = new Vector3(halfDistance, -halfWidth, 0); // Top Right
	v3 = new Vector3(halfDistance, halfWidth, 0); // Bottom Right
	v4 = new Vector3(-halfDistance, halfWidth, 0); // Bottom Left

	Matrix m =
		Matrix.Identity *
		Matrix.CreateRotationZ(angle) *
		Matrix.CreateTranslation(destination);

	v1 = Vector3.Transform(v1, m);
	v2 = Vector3.Transform(v2, m);
	v3 = Vector3.Transform(v3, m);
	v4 = Vector3.Transform(v4, m);

	DrawQuad(v1, c1, v2, c2, v3, c2, v4, c1);
}

I’ve left a lot of fluff code out. I usually check if the line is a width of 1 and draw a normal line. I also left out the code on how to draw a quad as that can be found many other places already.

SpriteSheet Class

I’ve been talking with a guy on the creator forums lately about SpriteSheets and so I decided it might be a good idea to post my SpriteSheet class.

It’s very simple. Only reads sprites from left to right and assumes all Sprites are the same width and height.

#region Using
using System;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;
#endregion

namespace Snow.Xna.Graphics
{
	/// 
	/// Spritesheet class.
	/// 
	public class SpriteSheet
	{
		#region Fields

		string name;

		Texture2D texture;

		Rectangle[] rectangles;

		int spriteWidth, spriteHeight;

		#endregion

		#region Properties

		/// 
		/// The name of this SpriteSheet.
		/// 
		public string Name
		{
			get { return name; }
		}

		/// 
		/// The texture for this SpriteSheet.
		/// 
		public Texture2D Texture
		{
			get { return texture; }
		}

		/// 
		/// Returns a rectangle for a sprite in the SpriteSheet.
		/// 
		/// index
		/// 
		public Rectangle this[int i]
		{
			get { return rectangles[i]; }
		}

		/// 
		/// The number of sprites in this SpriteSheet.
		/// 
		public int Count
		{
			get { return rectangles.Length; }
		}

		/// 
		/// The width of the texture.
		/// 
		public int Width
		{
			get { return texture.Width; }
		}

		/// 
		/// The width of each sprite in the SpriteSheet.
		/// 
		public int SpriteWidth
		{
			get { return spriteWidth; }
		}

		/// 
		/// The height of the texture.
		/// 
		public int Height
		{
			get { return texture.Height; }
		}

		/// 
		/// The height of each sprite in the SpriteSheet.
		/// 
		public int SpriteHeight
		{
			get { return spriteHeight; }
		}

		#endregion

		/// 
		/// Create a new SpriteSheet and determine the number of sprites in the sheet.
		/// 
		/// 
		/// Width of each sprite.
		/// Height of each sprite.
		public SpriteSheet(string name, Texture2D texture, int spriteWidth, int spriteHeight)
			: this(name, texture, spriteWidth, spriteHeight, 0)
		{
		}

		/// 
		/// Create a new SpriteSheet.
		/// 
		/// 
		/// Width of each sprite.
		/// Height of each sprite.
		/// The number of sprites in the sheet.
		public SpriteSheet(string name, Texture2D texture, int spriteWidth, int spriteHeight, int count)
		{
			this.name = name;
			this.texture = texture;
			this.spriteWidth = spriteWidth;
			this.spriteHeight = spriteHeight;

			if(count == 0)
			{
				int numX = texture.Width / spriteWidth;
				int numY = texture.Height / spriteHeight;

				rectangles = new Rectangle[numX * numY];
			}
			else
			{
				rectangles = new Rectangle[count];
			}

			int x = 0, y = 0;
			for(int i = 0; i < rectangles.Length; i++)
			{
				rectangles[i] = new Rectangle(x, y, spriteWidth, spriteHeight);

				x += spriteWidth;
				if(x >= texture.Width)
				{
					x = 0;
					y += spriteHeight;
				}
			}
		}

		public static implicit operator Texture2D(SpriteSheet spriteSheet)
		{
			return spriteSheet.Texture;
		}
	}
}

You can create a new SpriteSheet and use it like this:

SpriteSheet spriteSheet = new SpriteSheet("tiles", Content.Load("tiles"), 64, 64);

spriteBatch.Begin();

spriteBatch.Draw(spriteSheet,
		        new Rectangle(0, 0, spriteSheet.SpriteWidth, spriteSheet.SpriteHeight),
			spriteSheet[0],
			Color.White);

spriteBatch.End();

Which loads a spritesheet with sprites of size 64×64. It then draws the first Sprite in the SpriteSheet. You of course wouldn’t want to load the spritesheet every frame as well.

Feel free to use this code without restriction.

Edit: I copied and pasted the second piece of code from somewhere else so I fixed two typos.

Colors and Hex

I recently needed to write out Color(s) as an xml attribute. I wrote 2 methods to read and write the Color(s) as Hex strings. Here ya go:

namespace Snow.Xna.Graphics
{
	public static class ColorHelper
	{
		private static char[] _hexDigits = {'0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'};

		public static string ToHexString(Color color)
		{
			byte[] bytes = new byte[4];

			bytes[0] = color.A;
			bytes[1] = color.R;
			bytes[2] = color.G;
			bytes[3] = color.B;

			char[] chars = new char[8];

			for(int i = 0; i < 4; i++)
			{
				int b = bytes[i];
				chars[i * 2] = _hexDigits[b >> 4];
				chars[i * 2 + 1] = _hexDigits[b & 0xF];
			}

			return new string(chars);
		}

		private static byte HexDigitToByte(char c)
		{
			switch(c)
			{
				case '0': return (byte)0;
				case '1': return (byte)1;
				case '2': return (byte)2;
				case '3': return (byte)3;
				case '4': return (byte)4;
				case '5': return (byte)5;
				case '6': return (byte)6;
				case '7': return (byte)7;
				case '8': return (byte)8;
				case '9': return (byte)9;
				case 'A': return (byte)10;
				case 'B': return (byte)11;
				case 'C': return (byte)12;
				case 'D': return (byte)13;
				case 'E': return (byte)14;
				case 'F': return (byte)15;
			}

			return (byte)0;
		}

		public static Color FromHexString(string hex)
		{
			if( hex.Length != 8 )
				return Color.Black;

			int a = (HexDigitToByte(hex[0]) << 4) + HexDigitToByte(hex[1]);
			int r = (HexDigitToByte(hex[2]) << 4) + HexDigitToByte(hex[3]);
			int g = (HexDigitToByte(hex[4]) << 4) + HexDigitToByte(hex[5]);
			int b = (HexDigitToByte(hex[6]) << 4) + HexDigitToByte(hex[7]);

			return new Color((byte)r, (byte)g, (byte)b, (byte)a);
		}
	}
}