Joystick

<Joystick onSteer> is the stick a thumb drags to steer. It reports where the thumb is on the unit disc: x right and y up the screen, and (0, 0) when released. A thumb that lands just outside the ring still catches it, and the ring grows to show what it caught.

Its props are in JoystickProps.

A stick that steers the hero passes onSteer={steerFromStick} directly, the function useInput’s steer holds: it points the stick, and the hero’s movement reads it off useInput’s intent alongside the keyboard.

import {
    Hud,
    Joystick,
    Panel,
    Slot,
    steerFromStick,
} from "@daniel-zarinski/engine";

export function TouchControls() {
    return (
        <Hud>
            <Panel slot={Slot.BottomLeft}>
                <Joystick onSteer={steerFromStick} />
            </Panel>
        </Hud>
    );
}