Drawing a hollow rectangle border in XNA 4.0

For some reason, there wasn’t much info on this. For the sake of making this faster for others, I’ll post code for a quick way to draw a rectangular outline in XNA 4.0. If you’re planning on doing a ton of 2D drawing, you might be better served by this tutorial on drawing polygons. I’d actually recommend defining some geometry classes if you go that far though.

The basic trick to drawing shapes is to make a single-pixel texture which is White, which you can then mix with other colors and display in solid shapes.

// At the top of your class:
Texture2D pixel;

// Somewhere in your LoadContent() method:
pixel = new Texture2D(GameBase.GraphicsDevice, 1, 1, false, SurfaceFormat.Color);
pixel.SetData(new[] { Color.White }); // so that we can draw whatever color we want on top of it

Then in your Draw() method do something like:

spriteBatch.Begin();

// Create any rectangle you want. Here we'll use the TitleSafeArea for fun.
Rectangle titleSafeRectangle = GraphicsDevice.Viewport.TitleSafeArea;

// Call our method (also defined in this blog-post)
DrawBorder(titleSafeRectangle, 5, Color.Red);

spriteBatch.End();

And the actual method that does the drawing:

        /// <summary>
        /// Will draw a border (hollow rectangle) of the given 'thicknessOfBorder' (in pixels)
        /// of the specified color.
        ///
        /// By Sean Colombo, from http://bluelinegamestudios.com/blog
        /// </summary>
        /// <param name="rectangleToDraw"></param>
        /// <param name="thicknessOfBorder"></param>
        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);
        }

Hope that saves someone some time! 🙂

7 Responses to Drawing a hollow rectangle border in XNA 4.0

  1. I have a 1920 x 1200 LCD and cannot read this code with my browser window maximized, the site design is not very functional as it makes the code box so small that it truncates. I could open it in a code window which is fantastic but it would be better if I could see all the code without having to do that extra step. Other then that the code is fantastic, I am building an extension to the Rectangle class that features a draw method, that will draw the rectangle, and needed an idea how to approach the drawing of borders problem I was facing. Thank You

    • The plugin which does the code highlighting has been updated and now includes a bar to expand it to full width. I hope that solves the readability-issue you were having (it was definitely annoying before).

      Glad that you found the Hollow Rectangle code useful! 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *