Frame-Based Animation on the BBC Micro

One of the fun things you can do in BBC BASIC is create frame-based animations using custom characters.

In this tutorial, we will explain how the following program makes a stickman walk from left to right across the screen.

Here is the code for our animation:

10 MODE 2
20 VDU 23,226,24,24,16,58,84,16,40,72
30 YELLOW$=CHR$(17)+CHR$(3)
40 VDU 23,227,24,24,80,60,16,16,40,36
50 FOR I%=0 TO 19
60    CLS
70    SPRITE$=CHR$(226)
80    IF I%MOD2=0 THEN SPRITE$=CHR$(227)
90    PRINT TAB(I%,10) YELLOW$ SPRITE$
100    PRINT TAB(0,11) "--------------------"
110   FOR WAIT%=1 TO 1000:NEXT WAIT%
120 NEXT I%
130 END

You can use an online BBC Basic emulator to complete his challenge:

Let’s break down this code step-by-step.

Step 1: Choosing a Screen Mode

10 MODE 2

MODE 2 sets the screen to:

• 20 columns wide
• 32 rows high
• 8 colours available
• Large blocky pixels (great for custom characters!)

This mode is perfect for simple sprite animation.

Step 2: Creating Custom Characters

Check our blog post on how to create your own ASCII characters to reuse in your animation.

Using this online custom character code generator we will create two stickman characters as follows:

First Stickman Frame
20 VDU 23,226,24,24,16,58,84,16,40,72

This redefines character 226.

The numbers after 226 describe the 8 rows of pixels that make up the character.

Each number represents one row of 8 pixels:

• Each bit in the number turns a pixel ON (1) or OFF (0).
• So you are effectively designing an 8×8 sprite.

This first design is one pose of the stickman.

Second Stickman Frame
40 VDU 23,227,24,24,80,60,16,16,40,36

This defines character 227.

This is a slightly different pose — maybe the legs are swapped.

Now we have two frames:

• Character 226 → Stickman pose A
• Character 227 → Stickman pose B

Switching between them will create the illusion of walking.

Step 3: Setting the Colour

30 YELLOW$=CHR$(17)+CHR$(3)

CHR$(17) tells the BBC Micro we are changing text colour.
CHR$(3) sets the colour to yellow.

So YELLOW$ stores the control codes needed to print yellow text.

Later, when we print the sprite, we include YELLOW$ so the stickman appears yellow.

Remember, in Mode 2, you can choose amongst these 8 colours:

Step 4: Creating the Animation Loop

50 FOR I%=0 TO 19

This loop runs 20 times.
I% controls:

• The horizontal position of the stickman
• Which animation frame to use

Step 5: Clearing the Screen

60 CLS

CLS clears the screen each frame.

This is essential for animation — otherwise, the old stickman positions would remain visible.

Step 6: Choosing the Animation Frame

70 SPRITE$=CHR$(226)
80 IF I%MOD2=0 THEN SPRITE$=CHR$(227)

Here is the clever bit!

By default, we use character 226:

If I% MOD 2 = 0, we switch to character 227.

MOD means remainder after division. So:

• When I% is even → frame 227
• When I% is odd → frame 226

This alternates the stickman pose every loop, an essential part of our frame-based animation!

Step 7: Moving Across the Screen

90 PRINT TAB(I%,10) YELLOW$ SPRITE$

TAB(I%,10) moves the cursor to:

• Column = I%
• Row = 10

Since I% increases each loop, the stickman moves right.

Then we print the colour code and the custom character sprite, so the stickman appears to walk across the screen.

Step 8: Drawing the Ground

100 PRINT TAB(0,11) "--------------------"

This prints a simple floor under the stickman.
It helps give the illusion that the character is walking.

Step 9: Slowing It Down

110 FOR WAIT%=1 TO 1000:NEXT WAIT%

This is a delay loop. Without it, the animation would move too fast to see. The larger the number, the slower the animation.

Step 10: Repeat

120 NEXT I%
130 END

The loop repeats until the stickman reaches the right side of the screen.
Then the program ends.

🎬 How Frame-Based Animation Works

To sum it up, frame-based animation works by:

• Creating multiple versions of a character (frames)
• Rapidly switching between them
• Moving the position slightly each time
• Adding a small delay

Your brain fills in the gaps and sees movement! This is exactly how early video games worked.