CSE 203 Closed Lab 2 Instructions

Table of Contents


1. Objectives

To learn about displaying graphic sprites in a window, including the idea of the window coordinate system.


2. Set Up

  1. Two students should work together at one workstation.
  2. In one student's account, follow the instructions given below in section 3, Method.  To help choose which student's account to use, if one student's account was used last time, and the other's wasn't, have the one whose account wasn't used last time log in this time.  The student logging in is the "designated driver", the non-driver should work actively at helping by observing and making suggestions.  Trading roles for each new session is a very good idea.

3. Method

  1. Start by creating a brand new Phrogram program.  Either find and use an appropriate button on the tool bar, or select New Program from the File menu.
  2. Enter your author and date information.  Use both authors' names.  Change the program's name to Sprite_Display.
  3. Phrogram offers a program type called Sprite.  "Sprite" is a fancy name for an image that can be located in different places in the window; it could even be moved around a window, and we'll be doing that pretty soon.  The type Sprite enables us to handle in one program a large number of different sprites.  Let's start by handling just one sprite: we can give it a name, say, first_sprite, by declaring  to Phrogram that we intend to use this name for a sprite.  We do this by entering the following line inside Method Main():
    define first_sprite as sprite
    You can tap the Enter key to automatically capitalize "Sprite".  In fact, you could have finished off the word "Sprite" automatically by tapping the Enter key after you had typed just "spr".  That's Microsoft's Intellisense in action again.  Tapping the Enter key one more time will capitalize "Define" and "As" as well.  That's because they are both Phrogram key words.
  4. We have to tell Phrogram what image first_sprite will show.  We do this using an image's file name.  You can list your current choices for images by choosing Picture Browser from the View menu.  As a Buckeye, I'm going to choose "ohio-flag.gif".  You could do the same, or choose a different image that suits your taste.  We call the Load method with our file name:
    first_sprite.Load( "ohio-flag.gif" )
  5. Run the program.  (Save it in the right spot, in folder "0) My Own".)
  6. Hmm.  Nothing interesting.  Only a program window came up.  Oh well, close this program window.
  7. We need to tell Phrogram to make the sprite visible in the window, to show it.  Typing long names can get tedious, so let's use Intellisense to enhance our typing abilities.  To make the third line of the program, type "first_" and then hold down the Ctrl key and tap "j".  Ctrl-J activates Intellisense.  If the first Ctrl-J doesn't automatically complete the word to "first_sprite", try again a few more times until it works.  Now type the period character, the dot: ".": this activates Intellisense again.  Scroll down the list (you can type an "s" to get closer to the right spot faster) and select "Show".  Then tap Enter or double-click to get "Show" into your program.  Now type a left parenthesis, "(".  The hover caption shows you that all you need now is a right parenthesis, ")", to complete the call to the Show method.
  8. Run the program.
  9. Ah, that sends patriotic chills up my spine!
  10. After admiring this image, close the stopped program's window.
  11. Suppose we wanted to see our chosen image in another place in the window?  Accomplish this by inserting the following call before the call to Show() (what I mean by that is on a line by itself before first_sprite.Show()).  What hints to we get from Intellisense along the way?
    first_sprite.MoveTo( 50, 200 )
  12. Run the program.  Do you notice the ruler-like markings along the left-hand side and top of the window?  Figure out how these markings relate to the number 50 and 200 in the call to MoveTo and where the image appeared in the window, and explain this relationship.  Work together as partners and explain it to each other.
  13. Now declare a second Sprite object, called, say, sp2, connect it to a different image file, say, Brutus.gif, and show it in a different part of the screen so that two different images appear in your window at the same time.
  14. Well done!
  15. By the way, as far as I know, all image files visible in the Picture Browser except one are in the public domain and freely usable, even for commercial purpose.  The exception is Brutus.gif, which I downloaded just for use in this class.  For Brutus.gif, copyright is free for educational purposes here only; a permission from Ohio State University is required for commercial purposes and for use elsewhere.
  16. To see descriptions of all the methods that can be used with sprites, you can use Intellisense.  Scrolling down the list and selecting various names in the list will show you hover captions describing those names.  If some name catches your eye, you can look at its description: for example, Hide().

4. Proctor Check-off

When you are satisfied that you have successfully followed the method, raise your hand and one of the proctors will check your work. Then you are finished with the closed lab.  It's usually better for your education not to leave the classroom very early.  Instead, start in on the homework that's due at the beginning of the next class.  That homework assignment is available to you on Carmen.