XNA Game-Themed CS1 Examples ( XGC1 )

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

Topic: Topic.2.Input_Output_PrimitiveDataTypes
Example: Ex_8.MultipleRectangles

Basic Graphics: Drawing Multiple Rectangles


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 the first rectangle's center at the top of the screen, and the last rectangle's center at the bottom of the screen, along with three labeled rectangles, 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, as well as the underlying XNA library.  The goal of this tutorial is to show you the basics of drawing shapes on-screen.

In the two previous tutorials, you learned how to work with a rectangle, and a circle.  In this tutorial, you will work with multiple rectangles on the screen at once.  You will do this simply by taking all the code that was needed to work with a single rectangle, and correctly duplicating that code three times (you can't quite copy-and-paste, but the changes that you will need to make are quite small).  In terms of the actual programming, this will be a very simple task.  In fact, it's a deceptively simple task.

Since you already know how to do all the individual parts of this tutorial, you should instead focus on the incredibly power concept of composition , as you work through this tutorial.  Notice that you can create a new, bigger program simply by combining the smaller, individual parts that you already know about in a new way.  This idea that you can compose a program out of a new combination of stuff you already know is one of the most important, core concepts of computer programming.  As someone learning to program, it's much more important that you get a solid understanding of a smaller number of concepts, and get really really good at composing those concepts in new ways, in order to solve increasingly complex problems.

So while the actual code for this tutorial should be very easy, see if you can think about this idea of composing programs from smaller pieces, as you work through this tutorial.


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. Using rectangles on your own: positioning and sizing the rectangles

    Start this exercise using Exercise_ 3 '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 left-most rectangle is the same size it is now, but it's flush with the lower-left corner of the screen. 
    2. The middle rectangle is the same size it is now, and but it's lower corner is at (20, 30)
    3. The right-most rectangle is the same size it is now, but it's flush with the lower-right corner of the screen
    4. The labels should be set to the rectangle's name (A, B, or C), as well as the lower-left corner of the rectangle.
  3. Using rectangles on your own: positioning and sizing the rectangles

    Start this exercise using Exercise_ 4 '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 left-most rectangle is now 10 wide and 10 tall, but it's flush with the lower-left corner of the screen. 
    2. The middle rectangle is now 40 wide and 20 tall, and it's flush with the bottom of the screen and the right edge of the left-most rectangle
    3. The right-most rectangle is now 10 wide and 30 tall, and it's flush with the bottom of the screen and the right edge of the middle rectangle
    4. The messages must be drawn so that they are all visible (except for the left one, which will go off the screen).  The main thing is that the label for rectangles A or C should NOT be covered up by rectangle B.  The labels should be set to the rectangle's name (A, B, or C), as well as the lower-left corner of the rectangle.
    5. Optionally, you can remove the messages from the top & bottom of the screen, but you are not required to.
  4. Using rectangles on your own: positioning and sizing the 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. All rectangles are flush with the right edge of the screen.
    2. The bottom-most rectangle is now 16 wide and 16 tall, and is flush with both the right edge, and the bottom edge of the screen.. 
    3. The middle rectangle is now 8 wide and 8 tall, and it's bottom edge is 4 units higher than the top of the rectangle below it.
    4. The top-most rectangle is now 4 wide and 4 tall, and it's bottom edge is 4 units higher than the top of the rectangle below it.
    5. It's ok for the labels to go off the screen, as pictured above.  The labels should be set to the rectangle's name (A, B, or C), as well as the lower-left corner of the rectangle.
    6. Optionally, you can remove the messages from the top & bottom of the screen, but you are not required to.

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