BitWithBitePygame Mastery · Quick Reference
User Interface Cheat Sheet
In one line: Fonts, clickable buttons, sliders, menus, pause screens and a full in-game HUD — everything that turns a Pygame prototype into something players can actually navigate.
Key Ideas
1Fonts & Text Rendering. Text isn't drawn directly — a Font renders it into a Surface once, which you then blit() like any image; cache static text instead of re-rendering it every frame.
2Clickable Buttons & Sliders. A button is a pygame.Rect you check .collidepoint(mouse_pos) against on MOUSEBUTTONDOWN. A slider is the same idea, mapping a dragged handle's x-position to a numeric value.
3Menus & Pause Screens. A menu is just a screen full of buttons. A pause screen stops calling gameplay update() but keeps drawing the last frame, with a translucent overlay on top.
4Settings & Inventory UI. Settings menus hold volume sliders and key-rebinds (often saved to JSON). Inventory UI is a grid of Rect "slots", each rendering an item icon when its index isn't empty.
5HUD: Health, Score & Timer. The HUD draws every frame ON TOP of gameplay in fixed screen coordinates — it never scrolls with the camera. A health bar is two overlapping rects, the foreground scaled by current_hp / max_hp.
Core API
pygame.font.Font(None, 48) # default font, size 48
pygame.font.SysFont("arial", 20) # named system font
font.render(text, True, (255,255,255)) # -> Surface
rect.collidepoint(event.pos) # button/click hit test
pygame.draw.rect(screen, color, rect, border_radius=8)
pygame.Surface(size, pygame.SRCALPHA) # translucent overlay
HUD corners: Health bar, Timer and Score drawn every frame over the gameplay, never scrolling with the camera.