Assembly Language Fundamentals

Sprite Animation

Introduction

In the previous lesson, we learned how to move a sprite around the screen by updating its X and Y coordinates. Now that our character can move, the next step is to make that movement look alive. This is where animation comes in.

On the Tatung Einstein, sprite animation is achieved by changing which sprite pattern (or frame) is being displayed. By alternating between different sprite frames as the character moves, we can give the illusion of walking, running, or performing other actions.

In this lesson, we’ll create a simple walking animation using two frames of a stick figure sprite. As the player moves in any direction using the W, A, S, or D keys, the program switches between the two frames, producing a convincing “walking” effect.

This technique is the foundation for smooth, frame-based animation in games.

How It Works

Animation works by flipping between different sprite patterns stored in video memory. Each frame represents a slightly different version of the same sprite — for example, a character with legs apart versus legs together. Switching between these frames quickly makes it appear as if the sprite is moving naturally.

Here’s what happens in the program:

1. Two Frames Are Defined
   The sprite pattern area stores two versions of the walking character — Frame 0 and Frame 1.
2. The Frame Number Is Stored in Memory
   A variable (SpriteFrm) keeps track of which frame is currently being displayed.
3. The FlipFrame Routine Alternates the Frame
   Each time the player moves, the program calls FlipFrame, which toggles the frame number between 0 and 1 using the XOR instruction.
4. UpdateSprite Displays the Correct Frame
   When redrawing the sprite, the program reads SpriteFrm to determine which sprite pattern to show.
5. Delay Controls Animation Speed
   The delay loop slows down the updates, ensuring that the animation looks smooth and visible rather than flickering too quickly.

Together, these elements make it possible to animate sprites efficiently using only a few bytes of Z80 code.

Full Program

The following program animates a small walking man sprite. When you move the sprite using the W, A, S, or D keys, it alternates between two frames, giving the illusion of walking.

      ORG 256

      ; -----------------------
      ; Enable Graphics Mode II
      ; ----------------------

      LD   A,2
      OUT  (9),A
      LD   A,128
      OUT  (9),A

      LD   A,224
      OUT  (9),A
      LD   A,129
      OUT  (9),A

      ; ---------------------------
      ; Set Foreground / Background
      ; ---------------------------

      LD   A, 240
      OUT  (9), A
      LD   A, 135
      OUT  (9), A

      ; -----------------
      ; Clear Screen
      ; -----------------

      LD   A,0
      OUT  (9),A
      LD   A,120
      OUT  (9),A

      LD BC,768
ClearLoop:
      LD A,0
      OUT (8),A
      DEC BC
      LD A,B
      OR C
      JR NZ,ClearLoop

      ; ---------------------
      ; Define Sprite Patterns
      ; ---------------------

      LD A,0
      OUT (9),A
      LD A,88
      OUT (9),A

      ; Frame 0
      LD A,%00011000 : OUT (8),A
      LD A,%00111100 : OUT (8),A
      LD A,%00011000 : OUT (8),A
      LD A,%00011100 : OUT (8),A
      LD A,%00011010 : OUT (8),A
      LD A,%00011000 : OUT (8),A
      LD A,%00100100 : OUT (8),A
      LD A,%01000010 : OUT (8),A

      ; Frame 1
      LD A,8
      OUT (9),A
      LD A,88
      OUT (9),A
      LD A,%00011000 : OUT (8),A
      LD A,%00111100 : OUT (8),A
      LD A,%00011000 : OUT (8),A
      LD A,%00011100 : OUT (8),A
      LD A,%00011010 : OUT (8),A
      LD A,%00011000 : OUT (8),A
      LD A,%00011000 : OUT (8),A
      LD A,%00011000 : OUT (8),A

      ; ------------------------
      ; Sprite Attributes
      ; ------------------------

UpdateSprite:
      LD A,0
      OUT (9),A
      LD A,123
      OUT (9),A

      LD A,(SpriteY)
      OUT (8),A
      LD A,(SpriteX)
      OUT (8),A
      LD A,(SpriteFrm)
      OUT (8),A
      LD A,15
      OUT (8),A

CheckKeys:
      CALL Delay
      RST 8
      DEFB 181

      CP 0
      JR Z,MainLoop

      CP 87 : JR Z,MoveUp
      CP 65 : JR Z,MoveLeft
      CP 83 : JR Z,MoveDown
      CP 68 : JR Z,MoveRight
      RET

MoveUp:
      LD A,(SpriteY)
      DEC A
      LD (SpriteY),A
      CALL FlipFrame
      JR MainLoop

MoveLeft:
      LD A,(SpriteX)
      DEC A
      LD (SpriteX),A
      CALL FlipFrame
      JR MainLoop

MoveDown:
      LD A,(SpriteY)
      INC A
      LD (SpriteY),A
      CALL FlipFrame
      JR MainLoop

MoveRight:
      LD A,(SpriteX)
      INC A
      LD (SpriteX),A
      CALL FlipFrame
      JR MainLoop

FlipFrame:
      LD A,(SpriteFrm)
      XOR 1
      LD (SpriteFrm),A
      RET

Delay:
      LD BC,12000
DLoop:
      DEC BC
      LD A,B
      OR C
      JR NZ,DLoop
      RET

MainLoop:
      CALL UpdateSprite
      CALL CheckKeys
      JR MainLoop

SpriteX:   DEFB 100
SpriteY:   DEFB 120
SpriteFrm: DEFB 1

      JP $


Result

When you run the program, you’ll see a small stick figure on the screen. Use W, A, S, and D to move it around.
Each time you press a movement key, the sprite switches between its two frames — making it appear as though the character is walking.

Try adjusting the delay value (LD BC,12000) to speed up or slow down the animation cycle.

Why This Technique Is Useful

This example demonstrates how to combine movement and animation for lifelike effects. The key idea is that by storing multiple frames and flipping between them, even a simple sprite can appear animated.

In real games, this approach is extended to include:

• Multiple walking frames for smoother motion.
• Different animations for actions like jumping or attacking.
• Timed frame changes independent of user input for continuous motion.

The FlipFrame routine introduces a simple but powerful animation system — one that can easily be expanded to handle more frames or automated animation cycles.

Summary

• Animation is created by switching between multiple sprite frames.
• SpriteFrm stores the current frame number.
• The FlipFrame routine toggles between frames using XOR.
• Combining frame changes with movement produces a walking effect.
• Adjusting the delay loop changes the animation speed.

This lesson introduces the essential principle of frame-based animation, the building block for all dynamic character motion in classic and modern games alike.

‍