Difference between revisions of "Drawing Shapes"
(Created page with " <syntaxhighlight lang=c#> // Make a 1x1 texture named pixel. Texture2D pixel = new Texture2D(graphicsDeviceReferenceHere, 1, 1); // Create a 1D array of color data to...") |
(→Adding new methods) |
||
(20 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
+ | Believe it or not, MonoGame doesn't include any methods for drawing shapes. But you can still use one of many techniques to draw shapes, this will focus on textures and will ignore primitives. | ||
+ | |||
+ | =Using Textures= | ||
+ | Much easier than drawing primitives, we can use a texture to draw each point of the shape, the texture is generated using 1 x 1 pixels: | ||
+ | |||
+ | ==Filled Rectangle== | ||
+ | The code below can be placed into the `Draw()` method. | ||
<syntaxhighlight lang=c#> | <syntaxhighlight lang=c#> | ||
− | |||
// Make a 1x1 texture named pixel. | // Make a 1x1 texture named pixel. | ||
Texture2D pixel = new Texture2D(graphicsDeviceReferenceHere, 1, 1); | Texture2D pixel = new Texture2D(graphicsDeviceReferenceHere, 1, 1); | ||
Line 17: | Line 23: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
+ | ==Outline Only== | ||
<syntaxhighlight lang=c#> | <syntaxhighlight lang=c#> | ||
+ | //With your main variables add | ||
+ | Texture2D pixel; | ||
+ | |||
// In LoadContent() | // In LoadContent() | ||
− | + | pixel = new Texture2D(GraphicsDevice, 1, 1, false, SurfaceFormat.Color); | |
pixel.SetData(new[] { Color.White }); // so that we can draw whatever color we want on top of it | pixel.SetData(new[] { Color.White }); // so that we can draw whatever color we want on top of it | ||
Line 28: | Line 38: | ||
spriteBatch.End(); | spriteBatch.End(); | ||
− | // | + | // Add this method underneath your main `Draw()` method |
− | |||
− | |||
− | |||
− | |||
− | |||
private void DrawBorder(Rectangle rectangleToDraw, int thicknessOfBorder, Color borderColor) | private void DrawBorder(Rectangle rectangleToDraw, int thicknessOfBorder, Color borderColor) | ||
{ | { | ||
Line 46: | Line 51: | ||
rectangleToDraw.Y, | rectangleToDraw.Y, | ||
thicknessOfBorder, | thicknessOfBorder, | ||
− | rectangleToDraw.Height), borderColor); | + | rectangleToDraw.Height), borderColor); |
+ | |||
// Draw bottom line | // Draw bottom line | ||
spriteBatch.Draw(pixel, new Rectangle(rectangleToDraw.X, | spriteBatch.Draw(pixel, new Rectangle(rectangleToDraw.X, | ||
Line 55: | Line 61: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
− | = | + | =Drawing Other Shapes= |
+ | ==Adding new methods== | ||
+ | You need to have a working MonoGame project, you can use the following methods to create other shapes (add them after your main `Draw()` method): | ||
+ | |||
+ | <syntaxhighlight lang=c#> | ||
+ | |||
+ | 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, 0); | ||
+ | } | ||
+ | |||
+ | 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); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | 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); | ||
+ | } | ||
+ | |||
+ | 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); | ||
+ | } | ||
+ | |||
+ | </syntaxhighlight> | ||
+ | |||
+ | ==Draw Method== | ||
+ | Now in the Draw method you can use the methods to draw a shape, for example: | ||
+ | |||
+ | <syntaxhighlight lang=c#> | ||
+ | spriteBatch.Begin(); | ||
+ | DrawRectangle(new Rectangle(0, 0, 200, 200), Color.White, 5); | ||
+ | spriteBatch.End(); | ||
+ | </syntaxhighlight> | ||
− | + | Remember DrawRectangle, DrawPolygon, DrawCircle, and DrawLineSegment methods can be used to draw the appropriate shapes. |
Latest revision as of 13:53, 19 September 2024
Believe it or not, MonoGame doesn't include any methods for drawing shapes. But you can still use one of many techniques to draw shapes, this will focus on textures and will ignore primitives.
Contents
Using Textures
Much easier than drawing primitives, we can use a texture to draw each point of the shape, the texture is generated using 1 x 1 pixels:
Filled Rectangle
The code below can be placed into the `Draw()` method.
// Make a 1x1 texture named pixel.
Texture2D pixel = new Texture2D(graphicsDeviceReferenceHere, 1, 1);
// Create a 1D array of color data to fill the pixel texture with.
Color[] colorData = {
Color.White,
};
// Set the texture data with our color information.
pixel.SetData<Color>(colorData);
// Draw a fancy purple rectangle.
spriteBatch.Draw(pixel, new Rectangle(0, 0, 300, 300), Color.Purple);
Outline Only
//With your main variables add
Texture2D pixel;
// In LoadContent()
pixel = new Texture2D(GraphicsDevice, 1, 1, false, SurfaceFormat.Color);
pixel.SetData(new[] { Color.White }); // so that we can draw whatever color we want on top of it
// In Draw()
spriteBatch.Begin();
Rectangle titleSafeRectangle = GraphicsDevice.Viewport.TitleSafeArea;
DrawBorder(titleSafeRectangle, 5, Color.Red); // can draw any rectangle here
spriteBatch.End();
// Add this method underneath your main `Draw()` method
private void DrawBorder(Rectangle rectangleToDraw, int thicknessOfBorder, Color borderColor)
{
// Draw top line
spriteBatch.Draw(_pixel, new Rectangle(rectangleToDraw.X, rectangleToDraw.Y, rectangleToDraw.Width, thicknessOfBorder), borderColor);
// Draw left line
spriteBatch.Draw(pixel, new Rectangle(rectangleToDraw.X, rectangleToDraw.Y, thicknessOfBorder, rectangleToDraw.Height), borderColor);
// Draw right line
spriteBatch.Draw(pixel, new Rectangle((rectangleToDraw.X + rectangleToDraw.Width - thicknessOfBorder),
rectangleToDraw.Y,
thicknessOfBorder,
rectangleToDraw.Height), borderColor);
// Draw bottom line
spriteBatch.Draw(pixel, new Rectangle(rectangleToDraw.X,
rectangleToDraw.Y + rectangleToDraw.Height - thicknessOfBorder,
rectangleToDraw.Width,
thicknessOfBorder), borderColor);
}
Drawing Other Shapes
Adding new methods
You need to have a working MonoGame project, you can use the following methods to create other shapes (add them after your main `Draw()` method):
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, 0);
}
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);
}
}
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);
}
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);
}
Draw Method
Now in the Draw method you can use the methods to draw a shape, for example:
spriteBatch.Begin();
DrawRectangle(new Rectangle(0, 0, 200, 200), Color.White, 5);
spriteBatch.End();
Remember DrawRectangle, DrawPolygon, DrawCircle, and DrawLineSegment methods can be used to draw the appropriate shapes.