Skip to content
Game 5 Unit 19 of 128 1 hr learning time

Claim Animation

Add a satisfying flash animation when cells are claimed, improving game feel and feedback.

15% of Ink War

“Game feel” comes from feedback. A cell that flashes when claimed feels more satisfying than one that simply changes colour.

Run It

Assemble and run:

pasmonext --sna inkwar.asm inkwar.sna

Unit 19 Screenshot

Version shows “PHASE 2 V0.3”. Claim a cell to see the flash animation.

Why Animate Claims?

Compare the player experience:

Without AnimationWith Animation
Cell changes colourFlash → colour change
”Did that work?""Yes! I got it!”
FunctionalSatisfying

Brief animations acknowledge player actions.

The Flash Sequence

Our claim animation:

Frame 1: Bright white    (announcement)
Frame 2: Yellow          (transition)
Frame 3: White           (build-up)
Frame 4: Player colour   (resolution)

The whole sequence takes about 150ms—fast enough not to slow gameplay.

Implementation

Update claim_cell to flash before setting the final colour:

claim_cell:
            ; ... update board state ...

            ; Flash animation: white -> player colour
            push    hl                  ; Save attribute address

            ; Flash 1: Bright white
            ld      (hl), %01111111     ; White paper + white ink + BRIGHT
            call    claim_flash_delay

            ; Flash 2: Yellow
            ld      (hl), %01110000     ; Yellow paper + BRIGHT
            call    claim_flash_delay

            ; Flash 3: Back to white
            ld      (hl), %01111111
            call    claim_flash_delay

            pop     hl                  ; Restore attribute address

            ; Set final player colour
            ; ...

Timing the Flash

The delay routine controls flash duration:

claim_flash_delay:
            ld      bc, 6000
.cfd_loop:
            dec     bc
            ld      a, b
            or      c
            jr      nz, .cfd_loop
            ret

At ~3.5MHz, this is roughly 50ms—about 2.5 frames.

Balancing Animation Length

DurationFramesFeel
Under 50ms1-2Too fast, barely visible
50-150ms3-7Snappy, satisfying
150-300ms8-15Noticeable, deliberate
Over 300ms15+Slow, interrupting

Our 150ms animation sits in the sweet spot.

Animation Principles

From game design:

  1. Anticipation - Brief setup before action
  2. Action - The main event (flash)
  3. Follow-through - Settling into final state

Our flash provides all three in miniature.

The Complete Code

What You’ve Learnt

  • Event-triggered animation - Animate on player action
  • Flash sequences - Multi-stage colour changes
  • Timing for feel - Fast enough to be snappy, slow enough to see
  • Game feel - Small touches that make actions satisfying

What’s Next

Unit 20 animates the title screen with colour cycling for a more professional first impression.

What Changed

Unit 18 → Unit 19