Skip to main content

Handling User Input

Gamepad#

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 = w4.GAMEPAD1.*;
if (gamepad & w4.BUTTON_RIGHT != 0) {    w4.trace("Right button is down!");}
Gamepad BitButton
0BUTTON_1 (1)
1BUTTON_2 (2)
2Unused
3Unused
4BUTTON_LEFT (16)
5BUTTON_RIGHT (32)
6BUTTON_UP (64)
7BUTTON_DOWN (128)

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.

var previous_gamepad: u8 = 0;
export fn update() void {    const gamepad = w4.GAMEPAD1.*;
    const pressed_this_frame = gamepad & (gamepad ^ previous_gamepad);    previous_gamepad = gamepad;
    if (pressed_this_frame & w4.BUTTON_RIGHT != 0) {        w4.trace("Right button was just pressed!");    }}

Mouse#

Mouse (or touchscreen) input is supported and will work for positions even outside of the game window on supported platforms. 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 fn update() void {    const mouse = w4.MOUSE_BUTTONS.*;    const mouseX = w4.MOUSE_X.*;    const mouseY = w4.MOUSE_Y.*;
    if (mouse & w4.MOUSE_LEFT) {        w4.DRAW_COLORS.* = 4;        w4.rect(@as(i32, mouseX) - 8, @as(i32, mouseY) - 8, 16, 16);    } else {        w4.DRAW_COLORS.* = 2;        w4.rect(@as(i32, mouseX) - 4, @as(i32, mouseY) - 4, 8, 8);    }}