Skip to main content

Handling User Input


The main input device is the gamepad, consisting of 4 directions and 2 action buttons. On computers, players use the arrow keys and the X and Z keys. On mobile, a virtual gamepad overlay is displayed that players can tap.

The gamepad state is stored by WASM-4 as one byte in memory, with each button stored as a single bit. For example, the right directional button is stored in bit 5. We can mask the gamepad with the BUTTON_RIGHT constant to check if the right button is pressed.

const gamepad = load<u8>(w4.GAMEPAD1);
if (gamepad & w4.BUTTON_RIGHT) {    w4.trace("Right button is down!");}
Gamepad BitButton
0BUTTON_1 (1)
1BUTTON_2 (2)

Checking if a button was pressed this frame#

GAMEPAD1 stores the current state of the gamepad. It's common to want to know if a button was just pressed this frame. Another way of putting it: if a button was not down last frame but is down this frame.

This can be handled by storing the previous gamepad state, and then bitwise XORing (^) it with the current gamepad state. This leaves us with a byte with only the buttons that were pressed this frame.

let previousGamepad: u8;
export function update () {    const gamepad = load<u8>(w4.GAMEPAD1);
    // Only the buttons that were pressed down this frame    const pressedThisFrame = gamepad & (gamepad ^ previousGamepad);    previousGamepad = gamepad;
    if (pressedThisFrame & w4.BUTTON_RIGHT) {        trace("Right button was just pressed!");    }}


Mouse (or touchscreen) input is supported. See the Memory Map reference for more details on MOUSE_X, MOUSE_Y, and MOUSE_BUTTONS.

On the example below, we can make a rectangle follow the mouse position and expand when clicked:

export function update (): void {    const mouse  = load<u8>(w4.MOUSE_BUTTONS);    const mouseX = load<i16>(w4.MOUSE_X);    const mouseY = load<i16>(w4.MOUSE_Y);
    if (mouse & w4.MOUSE_LEFT) {        store<u16>(w4.DRAW_COLORS, 4);        w4.rect(mouseX - 8, mouseY - 8, 16, 16);    } else {        store<u16>(w4.DRAW_COLORS, 2);        w4.rect(mouseX - 4, mouseY - 4, 8, 8);    }}