Why Does PyGame Trail the Image? [duplicate]

Question

This question already has an answer here:

• Pygame how to fix 'trailing pixels'? 4 answers

I'm trying to develop a simple game in python using pygame and IDLE. I have, since yesterday, looked through a variety of sources in order to learn about the language (and programming in general), even so I have encountered some problems and misunderstandings of how it all works. So, if anyone could please advise me on how to proceed (or point me in the direction of some good learning material) then I would appreciate it greatly.

So far, I've got a small bit of code that forms the basis of my game idea, so I will post it here and list some of my problems.

import pygame

def main():


pygame.init()


logo = pygame.image.load("coolblack.jpg")
pygame.display.set_icon(logo)
pygame.display.set_caption("Battleship")


screenWidth = 800
screenHeight = 600
screen = pygame.display.set_mode((screenWidth, screenHeight))


bgd_image = pygame.image.load("grid.png")
#--------------------------------------------------------------------
#the image named 'image' should be above 'bgd_image' but below 'cv9'
#in fact, everything should be above bgd_image, especially 'cv9'
#--------------------------------------------------------------------
image = pygame.image.load("coolblack.jpg")
cv9 = pygame.image.load("ussessexcv9.gif").convert_alpha()


xposCv9 = 400
yposCv9 = 510


step_xCv9 = 1
step_yCv9 = 1


screen.blit(bgd_image, (0,0))
screen.blit(image, (400,300))
screen.blit(cv9, (xposCv9, yposCv9))


pygame.display.flip()
clock = pygame.time.Clock()
running = True

#---------------------------------------------
#I've got a pretty good idea (sort of) about
#what is happening in the section
#below this point, however it seems that
#the image 'cv9' creates a trail of itself
#every time it moves, so how could I make it 
#so that it doesn't do so?
#---------------------------------------------
while running:

    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False
        if event.type == pygame.KEYDOWN and event.key == pygame.K_ESCAPE:
            running = False
    if xposCv9>screenWidth-64 or xposCv9<0:
        step_xCv9 = -step_xCv9
    if yposCv9>screenHeight-64 or yposCv9<0:
        step_yCv9 = -step_yCv9
    xposCv9 += step_xCv9
    yposCv9 += step_yCv9
    screen.blit(cv9, (xposCv9, yposCv9))
    pygame.display.flip()
    clock.tick(60)


if __name__=="__main__":
    main()

Answer 1

The way that pygame works is that it has internally a representation of the screen which you are updating. So, it starts entirely black, then you do your first "blit". This will update the internal representation. Then when you call "pygame.display.flip" it shows that representation on the screen. However, this will not automatically "clear" the representation for you back to all black for your next frame. So, on the next frame, you blit again (slightly to the left, say), and the first blit remains, creating your "trail".

Therefore, for what you're doing, the best thing would be to in your loop, clear the internal representation of the screen before you start drawing the next frame. You can "clear" the screen by filling it with a single color, like so...

BLACK = (0,0,0)
....
screen.blit(cv9, (xposCv9, yposCv9))
pygame.display.flip()
clock.tick(60)
screen.fill(BLACK) # Add this to "clear" the screen.

Note that if you chose to go this route, this means you will need to redraw ALL of the elements every single frame (not just the ones that changed since the last frame).

BTW, in case you are wondering, there is a good reason for why the frame is not automatically cleared at the end. In some cases, it might be faster to only update the parts of the screen that update. This can cause performance speedups in some applications. However, it's probably best to start with clearing the screen as the example shows above.