CSE 203 Closed Lab 7 Instructions
Table of Contents
1. Objectives
To experience how sprites and drawing objects interact on the
screen, and how sprites overlap one another.
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. Remember, trading roles (driver and
non-driver) for each new session is a very good
idea.
3. Method
-
Get your own copy of the new program Drawing_and_Sprites.kpl as
follows:
- Your own programs are stored on the shared network drive
called "Z". Drive "Z" contains a folder called "WINDOWS", and the
"WINDOWS" folder contains a folder called "personal". That folder
will also be known as "My Documents". Open a window into that
folder by double-clicking the icon
labeled "Z (User Data)" located on your
desktop. This window, labeled "personal" in its title bar,
contains
the "target" folder of the copying operation we will be asking you to
perform.
- This copying operation is more difficult if this target
window is
displayed in "Filmstrip" format. To correct this problem, find
the button
on the
"personal" window's toolbar
that looks like a
little window. Click it and select "Tiles".
- Now move this target window "personal" to the lower
right-hand
part of the screen by dragging its title bar there.
- In this same window, please open the following sequence of
folders by double-clicking: My Phrogram Files, OSU, Week3.
- Next, open a different folder window by double-clicking the
icon
labeled "K (Class Data)" located on your
desktop.
- In this "class on 'filer1' (K:)" window, open the following
sequence of folders by double-clicking: CSE203, My Phrogram Files, OSU,
Week3. This window is your source window.
- Make sure you can see both of these windows that you just
brought
up. If not,
then drag the title bar of the visible window to put it in another
position on the screen.
- Now copy one file, Drawing_and_Sprites.kpl, from the source
window to the target window by dragging it.
- Start by launching Phrogram and opening "Drawing_and_Sprites.kpl"
from the Week3 folder under the OSU folder.
- Immediately Save As New Program with name "Twilight.kpl"
in folder "0) My Own".
- Change the author name(s) and the date appropriately.
- Change the program name to "Twilight" (if you haven't
already done so).
- Click the plus sign to unfold Method Main and take a look
inside. Note that this program is a modification of one discussed
recently in class, 1) Step-by-Step Tutorial\010 LOGO Style
Sprites.kpl. Two new sprites, village and ufo, were added to this
program. Now run the program to remind yourself what it did and
what it looked like. The UFO's animation may look somewhat
different than it did in OSU/003 Animated_Sprite.kpl because, in this
program, we're using all 14 frames in the animation rather than just 6
frames as we did (by mistake) in 003 Animated_Sprite.
- Let's justify the name "Twilight" by changing the background
color from (the default) white to midnightBlue. At the top of the
Main method (just below "Method Main ()"), using Intellisense to speed
your typing, type
"Drawing.ClearBackground( Colors.MidnightBlue )". Run the program
to see what happens.
- Hmmm. Those white boxes around the sprites are
disconcerting. Let's deal with the spider first. Every
sprite has, officially, a rectangular shape; however, this problem can
be remedied by allowing one of the colors of a sprite to be
"transparent". The sprite image "Spider.png" has a colored spider
in it, but, surrounding the spider, the rest of its rectangle is
transparent. Change the image name from "SpiderDown.png" to
"Spider.png" and run the program to see what happens.
- Notice now that, when the spider turns around on top of its web,
the web only gets covered by body, antennae, and legs. The web
and the background are "drawing" objects, and drawing objects always
appear behind sprites. Sprites can move in front of drawing
objects without destroying those drawing objects.
- We still have a problem, of course: the spider is now crawling
backwards! However, that's easily fixed. Insert a line
below the "Spider.Load" line and type "Spider.FlipVertical()".
Now we start with a downward-pointing spider, just as intended.
Try it!
- Now let's do the harder work of removing the white border from
around the UFO. The first challenge is that the image file we're
already using, "UFO.gif", isn't going to work for us, and the
alternative image files for UFOs have different numbers of animation
frames. It could get tiresome (and error-prone) to add and remove
various numbers of 100s from our list of 100s in the definition of
UFO_animation_timeline. Let's fix this problem by having the
computer (having Phrogram) calculate how many 100s to put in
UFO_animation_timeline. So, insert a new line after "Define ufo
As Sprite" and type there:
"Define ufo_frames As Integer = 14".
- Now shorten and change the next line so that it is:
Define UFO_animation_timeline As Integer [ufo_frames]
- Now we're going to use iteration to have the computer place a
value of 100 into each of the ufo_frames number of entries in the array
UFO_animation_timeline. On the next several lines, type the
following:
Define i As Integer
For i = 1 To ufo_frames
UFO_animation_timeline[i] = 100
Next
- This iteration means to use each value of i between 1 and
ufo_frames to execute the action "UFO_animation_timeline[i] =
100". That is to say, do each of "UFO_animation_timeline[1] =
100", "UFO_animation_timeline[2] = 100", "UFO_animation_timeline[3] =
100", and so on. This "For" loop is equivalent to the following
"While" loop:
Define i As Integer
i = 1
While i < ufo_frames
UFO_animation_timeline[i] = 100
i = i + 1
End While
- The "For" loop is just slightly shorter. Now, let's try a
trick to get rid of the white border in this image.
Unfortunately, it doesn't work for the image "UFO.gif". But let's
be sure of that. Insert a line after the "ufo.MoveTo" line and
type there:
ufo.MakeTransparent( White )
- Run the program to verify that we haven't yet fixed the
problem. The reason turns out to be that the border color in this
image is not really white, it's a kind of off-white that Phrogram
doesn't seem to have. However, the image "UFO-orig.gif" has a
border color that is white. Also, it has only six animation
frames. So make two changes: change the "14" to "6" and change
"UFO.gif" to "UFO-orig.gif". Run the program. Have we fixed
the problem?
- There's a sprite in this program, village, that we haven't yet
made visible. We'll use this sprite to demonstrate a couple of
things. The first is that there is an alternative to using the
MoveTo method. Instead, we could assign values to the X and Y
properties of the sprite. So, after the village.Load line, insert
the following lines:
village.X = 400
village.Y = 300
village.Visible = True
- Run the program and notice that the spider travels behind both
the village and the UFO. Phrogram shows images that are loaded
later on top of earlier loaded images. However, we can command
Phrogram to modify this ordering using the sprites' ZIndex
property. However, if we give only one of our sprites a positive
ZIndex, Phrogram ignores it. Let's demonstrate that now.
Insert after the "Spider.MoveTo" line the following line:
Spider.ZIndex = 1
- Run the program to verify that there's been no change to the
program. Now, after the "ufo.MoveTo" line, insert the following
line:
ufo.ZIndex = 0
- Run the program to see that the spider is now crossing in front
of both the UFO and the village. The spider is in front because
we have given a ZIndex value to at least two of our sprites and because
the default ZIndex value for any sprite, including "village" is zero
(0). Each sprite with a higher ZIndex value goes in front of
sprites with lower ZIndex values.
- If you want to spider to go behind the UFO, you can change its
(the UFOs) ZIndex value to something higher than 1, say 2. Try it.
- Note that, even when the spider travels in front of the village,
its web, as a drawing object, crosses behind the village. Drawing
objects are always behind.
- If you have extra time, change the UFO's image to
"UFO2.gif". For this image, we do not need to make white transparent;
this image has only 4 animation frames.
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.