Drawing in Wireframe Mode

Introduction

One common method for drawing objects is to use a wireframe. This means that the graphics device will only draw the lines that make up an object, rather than all of the faces. This gives sort of an outline look to the drawing, and in addition to just being cool, has several uses. Below is an image which shows wire frames being used in a space shooter game. In this case, a wire frame is being used as a way to allow the user to see through their ship to the objects in front of them.

wireframe-demo.png

Changing Modes

Performing this in XNA is actually very simple. It is a simple matter of changing one variable. While you are drawing objects (for example in the Draw() method, we need to create a new RasterizerState object, set its FillMode property to the desired mode, and assign it to the graphics device. This setting in the RasterizerState take on any of the following values:

  • FillMode.Solid
  • FillMode.WireFrame

So for example, in your main game class you can use code like below to change your game state:

RasterizerState rasterizerState = new RasterizerState();
rasterizerState.FillMode = FillMode.WireFrame;
GraphicsDevice.RasterizerState = rasterizerState;

From here on, it will draw wireframes instead of the whole objects.

As you can see from the screenshot above, you can mix-and-match. You can draw some images as a wire frame, while others are drawn solid in whatever order you want.

It may also be worth hanging on to the original RasterizerState so that when you are done with wireframe mode, you can simply switch back. This can be done with just a couple of simple extra lines of code, like this:

RasterizerState originalState = GraphicsDevice.RasterizerState;
 
RasterizerState rasterizerState = new RasterizerState();
rasterizerState.FillMode = FillMode.WireFrame;
GraphicsDevice.RasterizerState = rasterizerState;
 
// Do your wireframe drawing here...
 
GraphicsDevice.RasterizerState = originalState;

Conclusion

Wire frame mode is kind of a neat trick that you can do that you may find very useful in a game. And on top of that, it's extremely easy to do! There are several other similar tutorials here that you might find interesting. Take a look at the tutorials on Changing the Window Size and running in Full Screen Mode.


Troubleshooting.png Having problems with this tutorial? Try the troubleshooting page!