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
- Two students should work together at one workstation.
- 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
- 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.
- Enter your author and date information. Use both authors'
names. Change the program's name to Sprite_Display.
- 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.
- 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" )
- Run the program. (Save it in the right spot, in folder "0)
My Own".)
- Hmm. Nothing interesting. Only a program window came
up. Oh well, close this program window.
- 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.
- Run the program.
- Ah, that sends patriotic chills up my spine!
- After admiring this image, close the stopped program's window.
- 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 )
- 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.
- 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.
- Well done!
- 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.
- 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.