XNA Game-Themed CS1 Examples ( XGC1 )

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

Topic: Topic.2.Input_Output_PrimitiveDataTypes
Example: Ex_7.RectangleAndCircle

Basic Graphics: Drawing A Rectangle And Circle Together


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 rectangle's center at the top of the screen, and circle's center at the bottom of the screen, along with a rectangle and a circle in the window, 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 how to combine the basics of drawing a circle and drawing a rectangle.

In the two previous tutorials, you learned how to work with a rectangle, and a circle.  In this tutorial, you will simply combine the two.  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 refering the tutorial's code.
  2. Understanding the program:  Statements Are Executed In A Particular Sequence
    As a starting point, use the project from the above tutorial.  As it turns out, the XNACS1Lib will draw objects in the same order as the objects where created.  So if I create a rectangle, and then create a circle (as is done in the provided tutorial, above), and the two shapes are large enough that they overlap, you'll see an image like this:

    Clearly, the rectangle was drawn on the screen, and then the circle was drawn on the screen (over the rectangle). 
     What happens if your program creates the circle first, then the rectangle? In other words, what happens if you:

       // Initialize the circle first

        MyCircle = new XNACS1Circle ();


        MyCircle.Center = new Vector2 (70.0f, 30.0f);

        MyCircle.Radius = 20.0f;
        MyCircle.CenterColor = Color .Black;
    // set the color so it's clear what's overlapping what

        MyCircle.OutsideColor = Color .Black;


        // Initialize the Rectangle second

        MyRectangle = new XNACS1Rectangle ();


        MyRectangle.LowerLeft = new Vector2 (20.0f, 20.0f);

        MyRectangle.Width = 40.0f;

        MyRectangle.Height = 20.0f;

        MyRectangle.Label = "Rectangle: Width=" + MyRectangle.Width + " Height=" + MyRectangle.Height;


    1. What will happen if you create a small red circle centered at (2,2), and then a larger blue circle centered at (2,2)?
  3. Understanding the program:  Statements Are Executed In A Particular Sequence
    As a starting point, use the project from the above tutorial.   Examine the code from the InitializeWorld method, and then examine the following code. Make sure to submit your answers to the questions below via whatever mechanism your instructor has specified.

    protected override void   InitializeWorld()
    {

        // Allocate and initialize Rectangle and Circle

        MyRectangle = new XNACS1Rectangle ();

        MyCircle = new XNACS1Circle ();


        MyRectangle.LowerLeft = new Vector2 (20.0f, 20.0f);

        MyCircle.Center = new Vector2 (70.0f, 30.0f);

        MyRectangle.Width = 40.0f;

        MyRectangle.Height = 20.0f;

        MyCircle.Radius = 10.0f;

        MyRectangle.Label = "Rectangle: Width=" + MyRectangle.Width + " Height=" + MyRectangle.Height;

        MyCircle.Label = "Circle With Radius=" + MyCircle.Radius;

    }


    1. Notice that in the above snippet, the initialization steps for each of the two separate objects are interleaved , meaning that the steps to initialize the circle are placed in-between the steps to initialize the rectangle.  Will interleaving the code in this way still yields the same results as the original version of InitializeWorld?  Why?
    2. Is interleaving the initialization steps a good way to write code, even if it is legal?
  4. 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 rectangle is the same size (40 units wide and 20 tall), but it's lower-left corner is now at (30, 15)
    2. The circle has a radius of 7, and is set up so that it's center is at (70,40).
    3. The shapes should look exactly like the above screenshot, in the sense that the circle should be drawn over the rectangle, not the other way around.
    4. The labels should be set to the name of the shape's type (Rectangle or Circle), as well as the radius (for the circle), and the height and width for the rectangle.
  5. 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. The rectangle is the 20 units wide, and 40 units tall, and it's flush with the lower-left corner of the screen. 
    2. The circle has a radius of 10, and is set up so that it's left edge just barely touches the left edge of the screen, and it's bottom edge just barely touches the top of the rectangle.
    3. The labels should be set to the name of the shape's type (Rectangle or Circle), as well as the radius (for the circle), and the height and width for the rectangle.  It's ok if the labels go off the screen.
  6. Using rectangles on your own: positioning and sizing the 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 the 20 units wide, and 40 units tall, and it's flush with the lower-right corner of the screen. 
    2. The circle has a radius of 10, and is set up so that it's right edge just barely touches the right edge of the screen, and it's bottom edge just barely touches the top of the rectangle.
    3. The labels should be set to the name of the shape's type (Rectangle or Circle), as well as the radius (for the circle), and the height and width for the rectangle.  It's ok if the labels go off the screen.
  7. In the previous exercises, was it ever possible for you to hide the text that's in the top/bottom status bars using the shapes (circle, rectangle) that you draw on the screen?

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