Using .blit() and .flip()
In this lesson, you’ll use
.flip() to get your newly created
Surface to display on the screen. The term
blit stands for Block Transfer, and
.blit() is how you copy the contents of one
Surface to another. You can only
.blit() from one
Surface to another, but since the screen is just another
Surface, that’s not a problem.
Here’s how you draw
surf on the screen:
54 # This line says "Draw surf onto the screen at the center" 55 screen.blit(surf, (SCREEN_WIDTH/2, SCREEN_HEIGHT/2)) 56 pygame.display.flip()
The reason why the image looks off-center is that
.blit() puts the top-left corner of
surf at the location given. If you want
surf to be centered, you would update the code like below:
54 # Put the center of surf at the center of the display 55 surf_center = ( 56 (SCREEN_WIDTH-surf.get_width())/2, 57 (SCREEN_HEIGHT-surf.get_height())/2 58 ) 59 60 # Draw surf at the new coordinates 61 screen.blit(surf, surf_center) 62 pygame.display.flip()
For more information about the
.flip(), check out the following resources from the
In this lesson, you’ll start using
.flip(). How do you get your new
Surface that you just created to appear? The method
blit stands for Block Transfer—and it’s going to copy the contents of one
Surface onto another
One is the
Surface that you want to draw, and then the other is the location at which you want to draw it on the source
Surface. And along with block transfer, using
.blit(), how are you going to get it to draw those changes onto the screen itself?
And then, “Where?” Well, you’re going to use
SCREEN_WIDTH, but you’re going to divide it by
2 and then
SCREEN_HEIGHT, and divide it by
2, therefore putting it in the middle of the screen, right? Again, that’s a tuple.
02:09 onto there. Huh, though it’s not quite in the center, is it? Okay, so to quit, you can use the button or Escape. I’m going to press Escape. Let’s fix that. It’s a little off-center. So what you could do—I’m going to add a couple lines—
It starts with the
SCREEN_WIDTH again, but this time you’re going to subtract the
Surface width, and there’s a method called
.get_width(). When you do that and then divide that number by
2, you’ll get the actual center of the screen, as far as the width.
Now, do the same for the height. So again, subtracting the
SCREEN_HEIGHT—so again, it was like,
50, so that’s going to subtract that
50 from that number to give you the more accurate value. Divide that by
So that will be a new tuple that you can then use here on line 61. So, erase this and put
surf_center instead. Go ahead and save, so again, it’s going to
.blit() that on there—
surf_center. And then here, you’re going to
.flip() to update. Okay, running one more time—oh, make sure I’m saved. Make sure you’re saved.
03:34 Cool. There! That looks much more centered. Awesome! Congratulations! You finished Section 2 and you’re ready to move on to Section 3, where you’re going to get a chance to start working with sprites and you’ll start putting lots of things on the screen.
Become a Member to join the conversation.