Tower Blocks: Episode 3 - UI Animations

In Episode 2 we implemented the core gameplay loop: blocks move, you place them, the stack grows and the game ends if you miss. It works! But it still feels raw. In this episode we begin to polish the experience with animated UI elements. We add text effects to our overlays and score, introducing smooth transitions that make the game feel responsive and alive.

What We Covered

• Added scaling animation to the score display (ScoreAnimation)
• Implemented fade-in and fade-out transitions for overlays (OverlayAnimation)
• Introduced vertical movement for overlay text during fade
• Refactored overlay drawing to a generic DrawOverlay() function
• Integrated these animations into the game state transitions (start, game over, restart)

Design Insights

Why Animate the UI?

Games aren’t just about logic. They are about feel. Animating UI text helps:

• Direct the player’s attention
• Provide satisfying feedback
• Smooth out transitions between game states

Keeping It Modular

Instead of hardcoding effects into DrawText(), we created dedicated animation structs:

• ScoreAnimation tracks scaling of the score when a block is placed
• OverlayAnimation handles alpha and vertical movement of overlays

This keeps things clean and reusable for future polish (e.g. easing, spring effects).

Implementation Highlights

Score Pop Animation

When a block is placed, we animate the score like this:

game->animations.score.duration = 0.2f;
game->animations.score.scale = 1.5f;

Each frame:

float t = 1 - duration / maxDuration;
score.scale = Lerp(1.5f, 1.0f, t);

Overlay Fade and Slide

We animate both alpha and offsetY of overlays:

overlay.alpha += dt * speed;
overlay.offsetY = Lerp(-50, 0, overlay.alpha);

This makes overlays slide in from above while fading in, mimicking web-like transitions (transform: translateY(-50px) scale(1.5) in CSS).

Unified Overlay Drawing

Both the start screen and game over screen use the same generic draw function:

void DrawOverlay(const Game *game, const char *title, const char *subtitle, ...);

Cleaner code, fewer branches and easier expansion.

What’s Next?

In Episode 4 we will bring physics into play:

• Add falling chopped blocks when placement isn’t perfect
• Simulate simple gravity and spin
• Introduce cleanup and lifecycle logic

With logic, feedback and animation in place, we are ready to make the game feel truly alive.

Project Code

You will find the complete source code here: tower-blocks