Lab 1: Draw Pixels on POOM

Turn pixels into a 12 by 16 sprite and use four frames to animate the Mystic Balloon hero with the Poom Arduino library.

Make Your Own Game · Step 1 of 5 · Pixels and sprites

Making a game seems like the coolest thing and it is. Games can take many forms: a deck of cards, a board, a story, or a world on a screen. In this lab, our game will be a tiny world of pixels on POOM. One pixel becomes a shape, a group of pixels becomes a sprite, and a few sprite frames can make that character move.

1PixelsYou are here
2InputNext
3WorldLater
4GoalLater
5FinishLater
Your mission: meet the 12×16 hero from Mystic Balloon, look at the pixels that make one sprite, then edit four poses and watch them become a walk.
One pixel

The smallest dot the screen can control.

One sprite

The hero is one small 12×16 picture built from pixels.

Four frames

Four poses from the same hero play quickly and become a walk.

How four pictures create animation

We will begin with the little hero from Mystic Balloon. Zoom in and the picture stops looking like a character: it becomes a collection of individual glowing squares. Each square is a pixel. Put those pixels together and they become one sprite.

One sprite drawing is also one frame. In the four-frame animation above, the hero's body stays familiar while the feet and lower half change. POOM plays pose A, pose B, pose A again, and pose C. Your eyes connect those still pictures and the hero appears to walk.

ONE PIXEL → ONE 12×16 SPRITE → FOUR FRAMES → ANIMATION

Animation and movement are different tricks. In this lab, the hero changes poses but stays in one place. In Lab 2, buttons will change where the hero appears on the screen.

Give every pixel an address

POOM uses two numbers to find a pixel. x counts across from the left. y counts down from the top.

↖Top leftx 0, y 0
•Centerx 64, y 32
↘Bottom rightx 127, y 63
!Remembercounting starts at 0
Why does the last x equal 127? The first position is 0, so 128 positions are numbered 0 through 127. The 64 y positions are numbered 0 through 63.

Try it: draw four frames and make them animate

The Mystic Balloon hero uses a 12×16 drawing space: 12 pixels wide and 16 pixels high. That is 192 possible pixel positions, but only some need to glow. The editor enlarges each pixel so you can inspect and change it. The 128×64 screen beside it shows the hero at its real POOM size.

  1. Start with the four real hero poses already loaded. Pause the animation and choose Frame 1.
  2. Click one large square. You changed one pixel, but the whole drawing is still one sprite frame.
  3. Compare Frames 1–4. Notice what stays the same and what changes around the feet.
  4. Play the animation and adjust its speed. Notice that the sprite stays in one screen position while its pose changes.
Loading the pixel screen…

Enable JavaScript and reload this page to explore four 12×16 frames and animate them on the 128×64 screen.

Play a sprite with Poom

In the Arduino Library Manager, search for Poom and install the library. The animator creates the long list of pixel data for you. For now, focus on the one line that asks POOM to draw a 12×16 sprite and choose one of its four frames:

#include <Poom.h>

// Web Studio creates kHeroFrames and the setup code.
// This is the part to notice:
void drawHero(uint8_t frame) {
  Poom.clear();
  Poom.drawSprite(16, 24, kHeroFrames, 12, 16, frame);
  Poom.show();
}
1

Place
16, 24 is the sprite's x and y position.

2

Size
12, 16 is its width and height in pixels.

3

Pose
frame chooses which of the four drawings appears.

THE ONE COMMAND TO REMEMBER

Poom.drawSprite(x, y, frames, 12, 16, frame);

The x and y choose the sprite's place. The last number chooses the drawing to show.

Build it here: POOM Web Studio

Send your four frames from the animator above. Web Studio will load the sprite data and play the frames in order at one position on POOM.

Warning — flashing this drawing will erase and replace the POOM firmware currently installed.

POOM will start directly in this Arduino sketch instead of showing its normal menu and tools. To restore the complete POOM system, use the POOM Web Flasher to install the official firmware again.

Loading POOM Web Studio…

If the editor does not appear, enable JavaScript and reload this page.

Your first sprite challenge

  1. Find one glowing pixel in Frame 1 and turn it off, then turn it on again.
  2. Copy Frame 1 into Frame 2 and change only the feet.
  3. Compare your version with the four Mystic Balloon poses by using Reset four frames.
  4. Play the animation slowly, then make it faster.
  5. Send the sprite to Web Studio, compile it, and watch the four-frame animation on POOM.
Stop here. If you can explain how pixels form a sprite and how four frames create animation, you finished Lab 1. Continue to Lab 2: Give Your Hero Controls to make POOM listen to the player.

The code in this lesson follows the official Poom Arduino library and its screen API.