XNA Game-Themed CS1 Examples ( XGC1 )

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

Topic: Topic.2.Input_Output_PrimitiveDataTypes
Example: Ex_6.Circle

Basic Graphics: Drawing A Circle


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 " Circle Center at {X:70 Y:30} " at the top of the screen, and " Circle Center Color: {R:127 G:255 B:212 A:255} " at the bottom of the screen, along with a circle near the middle-right of the window.  The circle is labeled with it's radius, 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.

Please note that since the process of drawing a circle is very similar to the process of drawing a rectangle, this tutorial is very similar to the prior tutorial on drawing a rectangle.  Most of the verbiage has been retained in this tutorial, and you may want to read through this tutorial before reading through the rectangle 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:  Object Creation
    As a starting point, use the project from the above tutorial.   Try removing the line that creates the circle object, and see what error message it generates.  One way to do this would be to comment this line out:

        MyCircle = new XNACS1Circle ();


    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 circle, for each of the following situations.  Make sure to submit your answers via whatever mechanism your instructor has specified. 
    1. the lowest edge of the circle just touches the line Y = 10 (i.e,. the lowest edge is 10 units from the bottom of the screen), the left-most edge just touches the line X = 10 (i.e,. the leftmost edge is 10 units from the left side of the screen), and the radius is  10.
    2. the lowest edge of the circle just touches the line Y = 3 (i.e,. the lowest edge is 3 units from the bottom of the screen), the left-most edge just touches the line X = 33 (i.e,. the leftmost edge is 33 units from the left side of the screen), and the radius is  7.
  4. Understanding the program before you code
    By hand, calculate the location of the top-most, left-most, bottom-most, and right-most point on each of the following of the circles, given their centers and radii.  Make sure to submit your answers via whatever mechanism your instructor has specified. 
    1. Center = (20,20), radius = 10
    2. Center = (50,20), radius = 12
    3. Center = (-2, 20), radius =  17
  5. Using circles on your own: positioning and sizing a circle

    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 circle's size is the same (radius is 10.0f), but the location of the circle's center is now (20.0f, 50.0f). It's ok if the circle goes off the screen.
    2. The circle's label should be set "Circle with radius=10"
  6. Using circles on your own: positioning and sizing a circle

    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 left-most edge of the circle touches the left edge of the screen, and the bottom-most edge of the circle touches the bottom of the screen.  The circle's radius is 15. 
    2. The circle's label should be set "Circle with radius=10"
  7. Using circles on your own: positioning and sizing a circle

    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 right-most edge of the circle touches the right edge of the screen, and the bottom-most edge of the circle touches the bottom of the screen.  The circle's radius is 23. 
    2. The circle's label should be set "Circle with radius=23"
  8. Using circles on your own: coloring a circle

    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 circle is in the same place (70,30) as in the tutorial, and has the same radius.
    2. The circle's label should be set "Circle with radius=10"
    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)

      MyCircle.CenterColor = Color .DarkGreen;

      MyCircle.OutsideColor = Color .FloralWhite;

      MyCircle.LabelColor = Color .Yellow;


      For this exercise, you must choose new colors for the center color of the circle, the outside color of the circle, 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 MyCircle.CenterColor = Color .DarkGreen; , and delete the . DarkGreen .  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