188 Chapter 8
Look back at Figure 8-5 for a glimpse of the smiley image before it
slides out of view.
This first version may leave streaks of pixels on the display even
when the smiley image has left the drawing window. We can make
the animation cleaner by clearing the screen between each frame.
The streaking lines we’re seeing behind our smiley are the upper-
left pixels of the smiley image; every time we move down and over
each frame to draw a new version of our image and update the dis-
play, we’re leaving behind a few stray pixels from the last picture.
We can fix this by adding a screen.fill() command to our
drawing loop. The screen.fill() command takes a color as an argu-
ment, so we need to tell it what color we’d like to use to fill the
drawing screen. Let’s add a variable for BLACK (using all uppercase
for BLACK to show that it’s a constant) and set it equal to black’s
RGB color triplet, (0,0,0). We’ll fill the screen surface with black
pixels, effectively clearing it off, before we draw each new, moved
copy of our animated image.
Add this line to your setup right after picy = 0 to create the
black background fill color:BLACK = (0,0,0)And add this line right before the screen.blit() that draws our
pic image on the screen:screen.fill(BLACK)Our smiley face still speeds off the screen, but this time
we’re not leaving a trail of pixels behind our moving image. By
filling the screen with black pixels, we’ve created the effect of
“erasing” the old image from the screen every frame, before we
draw the new image at the new location. This creates the illusion
of smoother animation. On a relatively fast computer, though, our
smiley flies off the screen way too fast. To change this, we need a
new tool: a timer or clock that can keep us at a steady, predictable
rate of frames per second.Animating a Smiley with the Clock Class
The final piece to make our SmileyMove.py app behave like an
animation we might see in a game or movie is to limit the number