Animating a Shape

You can stamp a shape and you can move it. The last touch that turns a sliding token into a character is animation — showing a slightly different picture every so often, so the eye reads it as movement: legs that walk, a coin that spins, a flame that flickers. The secret is delightfully ordinary: keep several shapes, and blit a different one every few frames. You already have shapes, the frame loop, and Blit; animation is just those three with a counter.

What you'll see by the end

A ring that swells and shrinks in a steady pulse. There's no clever drawing trick: it's four separate shapes, of growing size, shown one after another on a loop. Flip between frames fast enough and still pictures become motion — the whole basis of every animated sprite there is.

The whole program

; Cycle through four shape frames to make a pulsing animation.
BLITZ
  ; build four frames of a pulsing ring on one work bitmap
  BitMap 2,32,32,3
  For f=0 To 3
    Use BitMap 2
    Cls 0
    Circle 16,16,4+f*4,2+f
    GetaShape f,0,0,32,32
  Next

  BitMap 0,320,256,3
  BitMap 1,320,256,3
  Slice 0,44,3

  frame=0
  tick=0
  db=0
  While Joyb(0)=0
    VWait
    Show db
    db=1-db
    Use BitMap db
    Cls 0
    Blit frame,144,108
    tick=tick+1
    If tick=8
      tick=0
      frame=frame+1
      If frame=4 Then frame=0
    EndIf
  Wend

Two parts: make the frames, then cycle them.

Make the frames

BitMap 2,32,32,3
For f=0 To 3
  Use BitMap 2
  Cls 0
  Circle 16,16,4+f*4,2+f
  GetaShape f,0,0,32,32
Next

This builds four shapes — numbers 0 to 3 — on one work bitmap. Each time round the loop it clears the bitmap, draws a ring a little bigger than the last (4+f*4), and grabs it as shape f. So shape 0 is the smallest ring, shape 3 the largest: four frames of a pulse. (Drawing animation frames in code like this is fine for basic shapes; for real artwork you'd draw them in a paint program and load them — same shapes, different source.)

Cycle them

frame=0
tick=0
While Joyb(0)=0
  VWait
  Show db : db=1-db : Use BitMap db
  Cls 0
  Blit frame,144,108
  tick=tick+1
  If tick=8
    tick=0
    frame=frame+1
    If frame=4 Then frame=0
  EndIf
Wend

Inside the frame loop, Blit frame,144,108 stamps whichever shape frame currently names. The animation is in the counting:

• tick counts frames. Every loop it goes up by one.
• When tick reaches 8, it resets and frame moves on to the next shape.
• When frame passes the last one (If frame=4 Then frame=0), it wraps back to the start.

So the displayed shape changes every 8 screen-frames — about six times a second — cycling 0, 1, 2, 3, 0, 1… That steady swap is the pulse you see.

The timer is the speed

The tick=8 is the animation's speed, and it's worth understanding because it's a knob you'll always be turning. Screen frames come 50 a second; changing shape every 8 of them gives about 6 frames of animation per second — a gentle pulse. Drop it to tick=3 and the animation races; raise it to tick=15 and it ambles. You separate the animation speed (how often the frame changes) from the screen speed (50fps) precisely so a four-frame walk doesn't blur past in a tenth of a second.

Type it and compile it

Type the program into Ted and press right-Amiga + X (recompile if Blitz asks about memory). The ring pulses. Press fire — or reset — to stop.

Try this: change the tempo

Change If tick=8 to If tick=3 for a frantic flicker, or If tick=16 for a slow breath. One number sets how lively the animation feels — the single most useful dial in any animated sprite.

Try this: a real cycle

Make the frames different, not just bigger — a two-frame flap, say. Draw frame 0 as a Boxf wide-and-short and frame 1 as tall-and-thin (change the loop to build two frames), set If frame=2 Then frame=0, and slow the tick. Watch the shape "flap" between the two poses. Two frames is all a surprising amount of classic game animation ever used.

If it doesn't work

• The shape doesn't change. Check the tick/frame counting: tick must climb each loop, reset at your limit, and step frame on. If frame never changes, you'll see one still shape.
• It flickers wildly or shows the wrong shapes. Make sure frame wraps (If frame=4 Then frame=0) — blit a shape number you never grabbed and you'll get garbage.
• Only the last frame looks right. Each frame needs its own Cls before you draw it, or the rings pile up on one bitmap before you grab them.

What you've learnt

Animation is showing a different shape every few frames. You grab several shapes (the frames of the animation), then in the frame loop Blit whichever one a counter currently points to, stepping the counter on a timer and wrapping it at the end. The timer's limit is the animation's speed, kept separate from the screen's 50fps so a short cycle reads smoothly. Walk, spin, flicker, pulse — every animated sprite is this counter and a handful of shapes.

What's next

Your objects move and animate, but they still pass through each other like ghosts. The last mechanic a game needs is consequence. Next — Bumping Into Things — detecting when two shapes collide, the test behind every hit, catch and pickup.