Introduction to XNA
Graphics
Programming
Asst. Prof. Rujchai Ung-arunyawee
COE, KKU
Processes in XNA
XNA Project Template

Program Class
 Main()

method
Game1 Class
 Game1()
method(constructor)
 Initialize() method
 LoadGraphicsContent() method
 UnloadGraphicsContent() method
 Update() method
 Draw() method
 GraphicsDeviceManager object
 ContentManager object
GraphicsDeviceManager object
Required by every XNA application.
 Handles the configuration and
management of the graphics device.
 GraphicsDevice class is used for drawing
primitive-based objects.
 Declared as a member of the game class.

 GraphicsDeviceManager

graphics;
Created in the game class constructor.
 graphics
= new GraphicsDeviceManager(this);
ContentManager Object
Used to load, manage, and dispose of binary
media content through the content pipeline.
 Graphics and media content can be loaded
with this object when it is referenced in the
game project.
 Declared as a member of the game class.

 ContentManager

content;
Created in the game class constructor.
 content
= new ContentManager(Services);
Initialize() method
Traps the one-time game startup event.
 Natural place to trigger basic setup activities
such as the following:

 Setting
window properties such as the title or
full screen options
 Setting the perspective and view to define how
a user sees the 3D game
 Initializing image objects for displaying textures
 Initializing vertices for storing color, and image
coordinates to be used throughout the program
Initialize() method (cont.)
 Initializing
vertex shaders to convert your
primitive objects to pixel output
 Initializing audio objects
 Setting up other game objects
LoadGraphicsContent() method

For loading binary image and model
content through the graphics pipeline.
UnloadGraphicsContent() method

For loading binary image and model
content loaded in LoadGraphicsContent
method the program exit.
Draw() method
Handles the drawing (also known as
rendering) for the game program.
 Starts by clearing the screen background,
setting the screen color, and then drawing
the graphics onto the screen.

Update() method

Checks and handles game-time events.
 mouse
clicks, keyboard presses, game-pad
control events, and timers

Also a place for many other activities that
require continuous checks or updates
 advancing
animations, detecting collisions,
and tracking and modifying game scores
XNA Vertex types

A vertex stores information, which could include
X, Y, and Z positions, image coordinates, a
normal vector, and color.
XNA Primitive Objects
XNA Primitive Objects (cont.)
Total triangle list vertices = Ntriangles * 3
vertices
 Total triangle strip vertices = Ntriangles + 2
vertices
 Total line list vertices = Nlines * 2 vertices
 Total line strip vertices = Nlines + 1 vertex

Drawing 3D in XNA
uses shader-based rendering to convert
vertex data into pixel output
 must use a shader to draw 3D graphics
 Shaders can be used to manipulate all
vertex properties (e.g.,color, position, and
texture)
 Built-in shader class name BasicEffect
 you will need to write your own shader to
implement the effect

Using BasicEffect class

Declared as member variable of the Game
class
 BasicEffect

effect;
Created in Initialize() method
 effect
= new BasicEffect(graphics.GraphicDevice,null);
Using BasicEffect class (cont.)
 Initialized
in Initialize() method
// Calculate the effect aspect ratio, world, projection, and view
matrix
GraphicsDevice device = graphics.GraphicsDevice;
float aspectRatio = (float)device.Viewport.Width /
device.Viewport.Height;
// Set the World Matrix
effect.World = Matrix.Identity;
// Set the Viewing Matrix
effect.View = Matrix.CreateLookAt(new Vector3(0.0f, 0.0f, 2.0f),
Vector3.Zero,
Vector3.Up);
// Set the Projection Matrix
effect.Projection = Matrix.CreatePerspectiveFieldOfView(
MathHelper.ToRadians(60.0f),
aspectRatio, 1.0f, 10.0f);
Using BasicEffect class (cont.)

Used in Draw() method
effect.Begin();
foreach (EffectPass CurrentPass in effect.CurrentTechnique.Passes)
{
CurrentPass.Begin();
// draw here
device.DrawPrimitives(PrimitiveType.LineList, 0, 3);
CurrentPass.End();
}
effect.End();
Model construction
1.
2.
Creates an array of vertex and assigns
value to them
Represents a list of 3D vertices to be
streamed (VertexBuffer object)
Create and assign value to Vertex
private void CreateModel() {
// size of 3D Axis
float axisLength = 1f;
// Number of vertices we´ll use
int vertexCount = 6;
VertexPositionColor[] vertices = new VertexPositionColor[vertexCount];
// X axis
vertices[0] = new VertexPositionColor(new Vector3(-axisLength, 0.0f, 0.0f), Color.White);
vertices[1] = new VertexPositionColor(new Vector3(axisLength, 0.0f, 0.0f), Color.White);
// Y axis
vertices[2] = new VertexPositionColor(new Vector3(0.0f, -axisLength, 0.0f), Color.White);
vertices[3] = new VertexPositionColor(new Vector3(0.0f, axisLength, 0.0f), Color.White);
// Z axis
vertices[4] = new VertexPositionColor(new Vector3(0.0f, 0.0f, -axisLength), Color.White);
vertices[5] = new VertexPositionColor(new Vector3(0.0f, 0.0f, axisLength), Color.White);
// fill the vertex buffer with the vertices
vertexBuffer = new VertexBuffer(graphics.GraphicsDevice,
vertexCount * VertexPositionColor.SizeInBytes,
ResourceUsage.WriteOnly);
vertexBuffer.SetData<VertexPositionColor>(vertices);
}
VertexBuffer object

Declared as member variable of the Game
class
VertexBuffer vertexBuffer;

Created and filled with the vertex array
vertexBuffer = new VertexBuffer(graphics.GraphicsDevice,
vertexCount * VertexPositionColor.SizeInBytes,
ResourceUsage.WriteOnly);
vertexBuffer.SetData<VertexPositionColor>(vertices);
GraphicDevice Preparation for
Drawing
Declare a correct vertex type to the graphic
device
 Set the vertex source of the graphic device
to the game vertex buffer

GraphicsDevice device = graphics.GraphicsDevice;
// Create a vertex declaration to be used when drawing the vertices
device.VertexDeclaration = new VertexDeclaration(device,
VertexPositionColor.VertexElements);
// Set the vertex source
device.Vertices[0].SetSource(vertexBuffer,
0,
VertexPositionColor.SizeInBytes);