Display rectangles in the game window using XNA

Question

I want to split my game grid into an array of rectangles. Each rectangle is 40x40, and each column contains 14 rectangles, a total of 25 columns. This covers the area of ​​the game 560x1000.

This is the code I created to create the first column of rectangles in the game grid:

Rectangle[] gameTiles = new Rectangle[15]; for (int i = 0; i <= 15; i++) { gameTiles[i] = new Rectangle(0, i * 40, 40, 40); } 

I'm sure this works, but of course I cannot confirm this because the rectangles do not display on the screen so that I can physically see them. What I would like to do for debugging is to render the border or fill the rectangle with color so that I can see it in the game itself to make sure that it works.

Is there any way to do this? Or any relatively simple way I can just make sure this works?

Many thanks.

Answer 1

First make a 1x1 pixel white texture for the rectangle:

 var t = new Texture2D(GraphicsDevice, 1, 1); t.SetData(new[] { Color.White }); 

Now you need to display the rectangle - suppose the rectangle is called a rectangle . For rendering a filled block, it is very simple - make sure tint Color is the color you want. Just use this code:

 spriteBatch.Draw(t, rectangle, Color.Black); 

For the border, this is more complicated. You should draw 4 lines that make up the outline (the rectangle here is r ):

 int bw = 2; // Border width spriteBatch.Draw(t, new Rectangle(r.Left, r.Top, bw, r.Height), Color.Black); // Left spriteBatch.Draw(t, new Rectangle(r.Right, r.Top, bw, r.Height), Color.Black); // Right spriteBatch.Draw(t, new Rectangle(r.Left, r.Top, r.Width , bw), Color.Black); // Top spriteBatch.Draw(t, new Rectangle(r.Left, r.Bottom, r.Width, bw), Color.Black); // Bottom 

Hope this helps!

Answer 2

This worked if you want to draw rectangles over existing textures. Great if you want to check / see collisions.

http://bluelinegamestudios.com/blog/posts/drawing-a-hollow-rectangle-border-in-xna-4-0/

----- From the website -----

The main trick for drawing shapes is to make a single-pixel texture that is white, and then you can mix it 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 makes the drawing:

 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); }