XNA Game-Themed CS1 Examples ( XGC1 )

Release 2.0 (XNA V3.1)
2/8/2010

Topic: Topic.2.Input_Output_PrimitiveDataTypes
Example: Ex_5.Rectangle

Basic Graphics: Drawing A Rectangle


References:

Goals:




1. Obtain the example code

Download and unzip the zip file and you will see an ExampleProgram folder. Open the ExampleProgram folder, the EXE folder contains the compiled program and you can double click on the .sln file to work with the source code.

Once we compile and run this project, the program displays " Rectangle Center at {X:40 Y:30} " at the top of the screen, and " Rectangle Lower-Left Corner at: {X:20 Y:20} " at the bottom of the screen, along with a rectangle near the middle of the window.  The rectangle is labeled with it's width and height, like so:



Other than exiting when the player presses the 'Back' button (or the keyboard equivalent), the program does not respond to user input.


2. Background :  


The tutorials that follow this one will begin to make greater use of the graphical capabilities of XNACS1Lib.  The goal of this tutorial is to show you the basics of drawing a Rectangle on-screen so that in future tutorials you can focus on other topics in computer programming, without having to simultaneously learn about graphics.


3. Examining The Program:

Let's examine the C# source code that produces the behavior we see on-screen


FURTHER EXERCISES::  

  1. Start from a blank starter project (1000.201, if you need it), and re-do the code from memory as much as possible.  On your first try, do what you can, and keep the above code open so that when you get stuck, you can quickly look up what you forgot (and that after you finish a line, so that you can compare your line to the 'correct' line).  On the next try, do the same thing, but try to use the finished code less.  Repeat this until you can type everything, without referring the tutorial's code.
  2. Understanding the program:  Object Creation
    As a starting point, use the project from the above tutorial.   Try removing the line that creates the rectangle object, and see what error message it generates.  One way to do this would be to comment this line out:

        MyRectangle = new XNACS1Rectangle ();


    Make sure that you remember this error message, because it's a very distinctive error message - it (basically) only happens when you've forgotten to create an object.  Also make sure that you remember whether this error occurred at compile-time, or when the program was running.

  3. Understanding the program before you code
    By hand, calculate the location of the center of the rectangle, for each of the following situations.  Note: the center is the point that is halfway up the rectangle, and halfway across the rectangle.
    1. the LowerLeft corner is set to (20, 20), and the width of the rectangle is 20, and the height is 20
    2. the LowerLeft corner is set to (20, 20), and the width of the rectangle is 100, and the height is 17
    3. the LowerLeft corner is set to (-5, -5), and the width of the rectangle is 10, and the height is 10
  4. Understanding the program before you code
    By hand, calculate the location of the LowerLeft corners of each of the following rectangles, given their centers, widths, and heights. 
    1. Center = (20,20), width = 10, height = 10
    2. Center = (50,20), width = 25, height = 7
    3. Center = (-2, 20), width = 20, height = 2
  5. Using rectangles on your own: positioning and sizing a rectangles

    Start this exercise using Exercise_ 5 's starter project , which is a nearly identical copy of the project that was used in the above tutorial.
    Change the program so that your program looks like the following picture (details of where stuff needs to go is listed after the picture)

    1. The rectangle's lower left corner is now at (30,35), the rectangle's width is now 60, and the rectangle's height is now 10
    2. The rectangle's  label should be set to "Rectangle with Width=60 Height=10"
  6. Using rectangles on your own: positioning and sizing a rectangles

    Start this exercise using Exercise_ 6 's starter project , which is a nearly identical copy of the project that was used in the above tutorial.
    Change the program so that your program looks like the following picture (details of where stuff needs to go is listed after the picture)

    1. The rectangle is now flush with the bottom and left edges of the screen.  The rectangle's width is now 55, and the rectangle's height is now 15
    2. The rectangle's  label should be set "Rectangle with Width=55 Height=15"
  7. Using rectangles on your own: positioning and sizing a rectangles

    Start this exercise using Exercise_ 7 's starter project , which is a nearly identical copy of the project that was used in the above tutorial.
    Change the program so that your program looks like the following picture (details of where stuff needs to go is listed after the picture)

    1. The rectangle is now flush with the bottom and right edges of the screen.  The rectangle's width is now 45, and the rectangle's height is now 27
    2. The rectangle's  label should be set "Rectangle with Width=45 Height=27"
  8. Using rectangles on your own: coloring a rectangle

    Start this exercise using Exercise_ 8 's starter project , which is a nearly identical copy of the project that was used in the above tutorial.
    Change the program so that your program looks like the following picture (details of where stuff needs to go is listed after the picture)

    1. The rectangle is in the same place as in the tutorial, and has the same width and height.
    2. The rectangle's  label should be set "Rectangle with Width=40 Height=20"
    3. In order to get the same colors as used in the picture, you can use the following code, in the InitializeWorld method (putting this after the line that assigns the label is good)

      MyRectangle.CenterColor = Color .Black;

      MyRectangle.OutsideColor = Color .Chartreuse;

      MyRectangle.LabelColor = Color .Blue;


      For this exercise, you must choose new colors for the center color of the rectangle, the outside color of the rectangle, and the color of the label.  Choose whatever you want.  You can do this most easily in (at least) two ways:

      1. Go to the line MyRectangle.CenterColor = Color .Black; , and delete the . Black .  Don't forget to delete the period!! Then type in ., and let IntelliSence offer you a lot of choices.
      2. Look online for documentation about what colors are available.  For example, http://msdn.microsoft.com/en-us/library/system.drawing.color_properties.aspx provides an excellent reference.
  9. TODO: Do something with the Texture property?

Project home page : The Game-Themed Introductory Programming Project.
Kelvin Sung
Computing and Software Systems
University of Washington, Bothell
ksung@u.washington.edu
Michael Panitz
Business And Information Technology
Cascadia Community College
mpanitz@cascadia.eduu

Microsoft Logo This work is supported in part by a grant from Microsoft Research under the Computer Gaming Curriculum in Computer Science RFP, Award Number 15871 and 16531.
2/8/2010