How To: Draw a Textured Quad

XNA Game Studio 2.0
This example demonstrates how to create and draw a simple quad using DrawUserIndexedPrimitives.

A quad is two triangles that form a rectangle or square. This sample introduces the Quad class, which constructs a quad with a list of vertices and indices suitable for drawing with DrawUserIndexedPrimitives. This sample also demonstrates how to use BasicEffect to apply a texture to the primitive.

Note
To render the quad, this sample uses the BasicEffect class. For a discussion of BasicEffect see How To: Use BasicEffect.

The Complete Sample

The code in this tutorial illustrates the technique described in the text. A complete code sample for this tutorial is available for you to download, including full source code and any additional supporting files required by the sample.

1. Determine the location of each of the four vertices in the quad. The Quad constructor calculates the four corners given the origin, width, height, and facing information supplied by the caller.

```public Quad( Vector3 origin, Vector3 normal, Vector3 up, float width, float height )
{
Vertices = new VertexPositionNormalTexture[4];
Indexes = new int[6];
Origin = origin;
Normal = normal;
Up = up;

Left = Vector3.Cross( normal, Up );
Vector3 uppercenter = (Up * height / 2) + origin;
UpperLeft = uppercenter + (Left * width / 2);
UpperRight = uppercenter - (Left * width / 2);
LowerLeft = UpperLeft - (Up * height);
LowerRight = UpperRight - (Up * height);

FillVertices();
}
```
2. Determine the UV coordinates for the texture you want to apply to the quad. The Quad constructor calls FillVertices, which assigns UV coordinates ranging from (0,0) to (1,1). This will make the entire texture appear on the quad.

```private void FillVertices()
{
// Fill in texture coordinates to display full texture
Vector2 textureUpperLeft = new Vector2( 0.0f, 0.0f );
Vector2 textureUpperRight = new Vector2( 1.0f, 0.0f );
Vector2 textureLowerLeft = new Vector2( 0.0f, 1.0f );
Vector2 textureLowerRight = new Vector2( 1.0f, 1.0f );
```
3. Determine the normals for your vertices. FillVertices copies the normal vector you provide to each vertex.

```// Provide a normal for each vertex
for (int i = 0; i < Vertices.Length; i++)
{
Vertices[i].Normal = Normal;
}
```
4. Copy the position and texture coordinate data to your vertex array.

```// Set the position and texture coordinate for each
// vertex
Vertices[0].Position = LowerLeft;
Vertices[0].TextureCoordinate = textureLowerLeft;
Vertices[1].Position = UpperLeft;
Vertices[1].TextureCoordinate = textureUpperLeft;
Vertices[2].Position = LowerRight;
Vertices[2].TextureCoordinate = textureLowerRight;
Vertices[3].Position = UpperRight;
Vertices[3].TextureCoordinate = textureUpperRight;
```
5. Fill out the index buffer to determine what order your vertices are drawn by the graphics hardware. Drawing two triangles requires four vertices, but six index entries if you are using PrimitiveType.TriangleList. The indices are specified in clockwise order. Because XNA is a right-handed system, triangles drawn in counter-clockwise order are assumed to be facing away from the camera, and are automatically culled by default.

```    // Set the index buffer for each vertex, using
// clockwise winding
Indexes[0] = 0;
Indexes[1] = 1;
Indexes[2] = 2;
Indexes[3] = 2;
Indexes[4] = 1;
Indexes[5] = 3;
}
```

1. In your game's Initialize method, create a new Quad object specifying the location, the normal (the direction the Quad faces), the Up vector, and the width and height of the quad. You can also create a View and Projection matrix to use when rendering.

```Quad quad;
Matrix View, Projection;
protected override void Initialize()
{
View = Matrix.CreateLookAt(new Vector3(0, 0, 2), Vector3.Zero, Vector3.Up);
Projection = Matrix.CreatePerspectiveFieldOfView(MathHelper.PiOver4, 4.0f / 3.0f, 1, 500);

base.Initialize();
}
```
2. In your game's LoadContent method, load the texture you want to apply to the quad using the ContentManager, and create and initialize a new BasicEffect object. Set TextureEnabled to true and assign the texture to draw to the Texture property.

```Texture2D texture;
{
// Create a new SpriteBatch, which can be used to draw textures.
spriteBatch = new SpriteBatch(GraphicsDevice);

```
3. Also in LoadContent, create a VertexDeclaration for the vertex type used to define the quad, in this case, VertexPositionNormalTexture.

```    quadVertexDecl = new VertexDeclaration(graphics.GraphicsDevice,
VertexPositionNormalTexture.VertexElements);
}
```
4. In your game's Draw method, set the VertexDeclaration on the GraphicsDevice to the VertexDeclaration object you created in LoadContent.

```protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.CornflowerBlue);
```
5. Call Begin on the effect, then in each EffectPass use DrawUserIndexedPrimitives to draw the quad. Use the Vertices and Indices properties on the Quad structure to supply the primitive data, and specify two triangles to draw. Then End the effect.

```    quadEffect.Begin();
{
pass.Begin();

GraphicsDevice.DrawUserIndexedPrimitives<VertexPositionNormalTexture>(

pass.End();
}

base.Draw(gameTime);
}
```