No history yet

Drawing and Blitting

Transcript

Beau

Alright Jo, so we've got our Pygame window open. It's... well, it's a very nice, very empty black rectangle. Now what? How do we get something, anything, to show up on the screen?

Jo

That is the essential question. We have a canvas, now we need to be the artists. And in Pygame, our two main paintbrushes are drawing and... something called blitting.

Beau

Blitting? That sounds like a typo. B-L-I-T-T-I-N-G?

Jo

Exactly. Let's start with drawing, though. It's a bit more straightforward. Pygame has a whole module just for this: `pygame.draw`. You can draw rectangles, circles, lines, you name it.

Beau

Okay, so if I want to draw, say, a red square for a player character, how does that work? Is it just `pygame.draw.square`?

Jo

Almost. You'd use `pygame.draw.rect` for rectangle. The function needs a few pieces of information. First, *where* are you drawing? You tell it to draw on your main screen surface. Second, what color? You'd define red, probably as an RGB tuple like `(255, 0, 0)`.

Beau

Right, we covered colors. So I tell it the screen, I tell it the color... then I just have to tell it the shape's details, I guess?

Jo

Yep. For a rectangle, you give it another tuple that defines its position and size. It's usually something like `(x, y, width, height)`. So `(100, 150, 50, 50)` would mean it starts 100 pixels from the left, 150 pixels from the top, and is 50 pixels wide and 50 pixels tall. A perfect square.

Beau

Okay, that makes sense. It's like giving coordinates and dimensions. So, I run that one line of code inside my game loop, and poof, a red square appears?

Jo

Not... exactly. This is a super common stumbling block. You've drawn the square, but you've drawn it on a hidden canvas, like a scratchpad. Nothing shows up to the player until you tell Pygame to take that hidden canvas and make it visible.

Beau

Oh! So it's a two-step process. Draw everything behind the scenes, then... what's the command to reveal it all?

Jo

The command is `pygame.display.update()` or `pygame.display.flip()`. You typically put this at the very end of your game loop, after you've drawn everything for that frame. Think of it like a theater production. The whole loop is setting the stage, moving actors, arranging props. `display.update()` is the command to raise the curtain so the audience can see the result.

Beau

I like that analogy. Set the scene, then raise the curtain. What's the difference between `update` and `flip`?

Jo

Functionally, for most simple games, they're almost identical. `flip` updates the entire screen. `update` can be more efficient because you can tell it to only update specific parts of the screen that have changed. But for now, just picking one and using it consistently at the end of the loop is the key.

Beau

Okay, so drawing shapes is cool for prototypes, but what about real graphics? Like a spaceship I downloaded or a character I drew. That's not a rectangle.

Jo

And that's where 'blitting' comes in. Blitting is just the technical term for copying the pixels from one image—your spaceship file—onto another, which is our game screen.

Beau

So it's basically pasting an image onto the canvas.

Jo

Exactly. First you have to load the image from your project folder into a variable. You'd do something like `player_image = pygame.image.load('spaceship.png')`. It's a good idea to do this once, before your game loop starts, so you're not loading the file from the disk 60 times a second.

Beau

That... seems like a very bad idea. Okay, so load the image once at the top. Got it. Then inside the loop, how do I paste it?

Jo

Inside the loop, you use the `blit` method. You call it on the surface you're drawing *to*. So it would be `screen.blit()`. It needs two arguments: what you want to blit—your `player_image` variable—and where you want to blit it, as an `(x, y)` coordinate tuple.

Beau

So, `screen.blit(player_image, (100, 150))`. And this would put the top-left corner of my spaceship at that coordinate on the screen?

Jo

Precisely. And just like with drawing, this happens on that hidden canvas. So after you've blitted your spaceship, and maybe drawn some rectangles for stars, you still need that final `pygame.display.update()` to make it all appear.

Beau

So the order inside the loop is crucial. It's always: fill the background color, draw or blit all your stuff, and then, finally, update the display.

Jo

You've got it. If you update the display before you draw, you'll just see a blank screen. If you forget to fill the background each frame, you'll see trails of your old drawings as they move, which... can be a cool effect, but usually isn't what you want.

Beau

Right, like the old snake game. So, drawing for simple things, blitting for complex images, and always update at the end. Seems like we've officially painted our first frame.