Developing Programming Assignments on the XBOX 360 Console

Section I: Introduction and Overview
c. Drawing with XNA

back to workshop main page

• Pre-requisite: this is the example (Section 1b. Simple XNA) we are building off from.
• You can start with this template source file (resulting source code from the above example), and here is the source code we will generate at the end of this tutorial.

Goals:

• To experience with and examine the simplest case of drawing with XNA.

Notice:

• As simple as this example is, if you have not work with graphics before, it actually is quite a bit of work to draw a single triangle.
• We do not draw in pixel units!

1. Instance variables: for graphics drawing support: EffectPool and BasicEffect.
2. Initialize():  allocate and initialize the instance variables.
3. Draw():  use the drawing support to draw a single triangle.

Here are the details, each of the following changes are enclosed by regions with label: __CODE_ADDED__:

1. Declare new instance variables (in the beginning of the file) for drawing support:

   #region __CODE_ADDED__     EffectPool effectPool;     // for transformation and shading     BasicEffect basicEffect;   // traditional pipeline and fixed 3-stage transform #endregion



2. Initialize graphics and application state (in Initialize() function):

   #region __CODE_ADDED__ // Initialize the graphics rendering state     graphics.GraphicsDevice.VertexDeclaration = new VertexDeclaratione(...);              // Create default shading procedure     effectPool = new EffectPool();     basicEffect = new BasicEffect(graphics.GraphicsDevice, effectPool);     basicEffect.VertexColorEnabled = true; #endregion



3. Draw a triangle (in Draw() function):

   #region __CODE_ADDED__     // Begin drawing ...     ...     // Triangle vertex position based on center at (0,0)     Vector3 p = new Vector3(0, 0, 0);     VertexPositionColor[] vertices = new VertexPositionColor[3];     for (int i=0; i<3; i++)             vertices[i].Position = p;   // Center of triangle     ...    // color of the triangle vertices     vertices[0].Position.X -= 0.1f;     // left vertex of triangle      vertices[1].Position.X += 0.1f;     // right vertex of triangle     vertices[2].Position.Y += 0.2f;     // top vertex of triangle     // draw the triangle     graphics...DrawUserPrimitives(PrimitiveType.TriangleList, vertices, 0, 1);     ... #endregion

   Notice that:
   • the three vertices of the triangle are defined to locate at:
   • (-0.1, 0, 0)
   • (0.1, 0, 0), and
   • (0, 0.2, 0)
   • these coordinate values are independent from pixel units! This is true in general, when drawing with XNA, we typically define our own coordinate system and dot not work in pixel units.
   • in this case, the width and height (x and y) of the entire application window ranges from -1 < x/y < 1