🗒 Cheat Sheet← Lesson
BitWithBite
Pygame Mastery Worksheet

🖱️ User Interface

Module 11 of 20 · Level ★★☆ · Time: 35 min
SCORE___ / 20
NameClassDate
After this worksheet you can
Render text with pygame.fontBuild clickable buttonsImplement a pause screen overlayDraw an HUD health bar
📚 Quick Recap

Text is rendered into a Surface and blitted like an image. Buttons check Rect.collidepoint() against mouse clicks. Pause screens freeze gameplay updates while drawing a translucent overlay, and the HUD (health/score/timer) is drawn in fixed screen coordinates every frame.

🧠 Section A · Concept Check ● INTERMEDIATE 4 × 1 = 4

1How does Pygame put text on screen?
2How do you detect a button click?
3How is a pause screen commonly implemented?
4Does the HUD scroll with the camera?

🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11

5pygame.font.Font(None, 48).render(text, True, color) — the True argument enables .
6A health bar's foreground width scales by current_hp max_hp.
7Write the check for whether the mouse click at event.pos landed inside a button's rect.
8Describe the 3 steps to draw a health bar (background rect, foreground rect, outline).
9Why should text surfaces be cached instead of re-rendered every frame when the text doesn't change?

🚀 Section C · Challenge ● CHALLENGE 5

10Explain why a pause overlay Surface needs pygame.SRCALPHA when created, and what would happen visually if you forgot it.
💭 Reflection — the most useful thing I learned:
A ___/4   B ___/11   C ___/5   Total ___/20 Teacher's Signature Parent's Signature
✂ answer key — fold or cut before handing out

1-B   2-A   3-A   4-B  |  5 anti-aliasing (smooth edges)   6 / (divided by)   7 = if button.rect.collidepoint(event.pos):   8 = draw a full-width background rect in a dark color, draw a foreground rect scaled to width*(current_hp/max_hp) in a bright color on top, then draw a border outline rect around both   9 = re-rendering text every frame is wasted CPU work since the Font.render() call is relatively expensive; cache the Surface and only re-render when the text actually changes  |  10 = pygame.SRCALPHA allows the surface to store per-pixel transparency, which is required for a translucent black overlay; without it, the fill color would render fully opaque, completely blacking out the game screen behind the "Paused" text instead of dimly showing it through

📄 Need offline practice?Download the print-ready PDF or open the one-page cheat sheet.
⬇ Worksheet PDF 🗒 Cheat Sheet