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

  1. Two students should work together at one workstation.
  2. 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

  1. Get your own copy of the new program Drawing_and_Sprites.kpl as follows:

  2. Start by launching Phrogram and opening "Drawing_and_Sprites.kpl" from the Week3 folder under the OSU folder.
  3. Immediately Save As New Program with name "Twilight.kpl" in folder "0) My Own".
  4. Change the author name(s) and the date appropriately.
  5. Change the program name to "Twilight" (if you haven't already done so).
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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!
  11. 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".
  12. Now shorten and change the next line so that it is:
    Define UFO_animation_timeline As Integer [ufo_frames]
  13. 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
  14. 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
  15. 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 )
  16. 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?
  17. 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
  18. 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
  19. 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
  20. 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.
  21. 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.
  22. 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.
  23. 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.