Lab 2: Give Your Hero Controls

Make Your Own Game · Step 2 of 5 · Player input

In Lab 1, pixels became a sprite and four frames made our hero appear alive. Now that same hero comes with us. A game becomes interactive when the player can change what happens, so in this lab POOM’s buttons will become messages that tell the hero where to go and which pose to show.

What is an input?

An input is a message from the player. Pressing a button does not move a sprite by itself. Your game reads the button, follows a rule, and draws the result.

PRESS → READ THE BUTTON → CHANGE x OR y → DRAW AGAIN

One button can begin a whole movement

The complete Mystic Balloon game shows that its jump is not one strange action pose. It is a short sequence: frame 4 draws the hero while rising, frame 5 draws the hero while falling or landing, and velocity changes its y position between those drawings. In the original game, B jumps and A creates suction. For this smaller lesson, A starts the jump so we can follow one clear action from button press to landing while B remains our reset button.

FOUR WALK FRAMES + RISE + FALL → PRESS A → UP, DOWN, LAND

Try it: make POOM listen

Focus the playground and use your keyboard arrows, or press the virtual POOM buttons. Every direction changes one variable. Hold a direction to keep sending the same input. Press A once to rise, fall, and land. Press B to return the hero to the center. Below the controls, select any of the six frame cards and redraw its pixels.

The four movement rules

POOM checks the buttons once during every game frame. When a direction is held, its rule changes the hero’s position by one pixel. Then the screen is cleared and drawn again.

if (!Poom.nextFrame()) return;

if (Poom.pressed(PoomButtonLeft)  && heroX > 0)   heroX -= 1;
if (Poom.pressed(PoomButtonRight) && heroX < 116) heroX += 1;
if (Poom.pressed(PoomButtonUp)    && heroY > 0)   heroY -= 1;
if (Poom.pressed(PoomButtonDown)  && heroY < 48)  heroY += 1;

What A adds to the loop

When A begins the jump, a negative velocity moves the hero upward because smaller y numbers are higher on the screen. Each frame, gravity adds one. The velocity reaches zero at the top, becomes positive on the way down, and the hero stops when it reaches the y position where it began.

if (aPressed && !aWasPressed && !jumping) {
  jumping = true;
  jumpVelocity = -4;
}

jumpOffset += jumpVelocity;
jumpVelocity += 1; // gravity

if (jumpOffset >= 0) {
  jumpOffset = 0;
  jumping = false;
}

Why the hero stops before 127 and 63

A single pixel can reach x 127, y 63, but the hero is a 12×16 group of pixels. Its top-left corner must stop early or the rest of its body would leave the screen.

Put the controls on POOM

When all four direction badges are complete, send the input sketch to Web Studio. The generated program includes your four customized 12×16 walk frames, the two original 12×16 jump frames, and the same movement and jump rules you explored above.

Your input challenge

1. Press all four directions and watch which coordinate changes.
2. Move all the way left until x = 0, then try one more left input.
3. Reach the right edge and explain why the hero stops at x = 116.
4. Edit A Rise and A Fall, press A, and identify the moment when the drawing changes.
5. Press B to reset the hero’s position.
6. Send the sketch to Web Studio and find the four Poom.pressed(...) rules.

The button code in this lesson follows the official Poom Arduino library and its ButtonsDemo example. The two jump drawings and the rise/fall logic come from the complete Mystic Balloon source you supplied: its kidSprite frames 4 and 5, input rules, and player update code.