voxolithmakeTouchControls()
Add on-screen joysticks and buttons that feed the input's virtual channel, so a game binds touch:move.x beside key:KeyA and pad:LeftX. The controls are a fixed overlay of their own elements, so fingers on them never reach the canvas gestures. DOM-only.
function makeTouchControls(input: Input, spec: TouchControlsSpec): TouchControls;Defined in: engine/src/input/touch.ts:89
Joysticks take the lower part of their side of the screen and centre on wherever the thumb
lands. Buttons stack bottom-up in two columns from the outer edge. Colours come from the CSS
custom properties --vx-control-bg, --vx-control-fg and --vx-control-active.
Parameters
| Parameter | Type | Description |
|---|---|---|
input | Input | The surface's input. |
spec | TouchControlsSpec | The controls to create and when to show them. |
Returns
A handle to show, hide or remove them.
Example
makeTouchControls(input, {
joysticks: [{ id: "move", side: "left" }],
buttons: [{ id: "jump", label: "A" }],
});
const actions = makeActions(input, {
strafe: axis({ negative: ["key:KeyA"], positive: ["key:KeyD"], analog: ["touch:move.x"] }),
jump: button("key:Space", "touch:jump"),
});makeOrbitController()
An orbit camera over an input: turntable, look-around room or pan-only map, depending on rotate and pan. Desktop: primary drag rotates, right/middle or shift+drag pans (with pan: "secondary"), wheel and ctrl+wheel zoom. Touch: one finger rotates, two pinch to zoom and drag to pan (or to turn,...
prepareSurface()
Make an element behave as an input surface on touch devices: no browser panning or pinch-zooming over it, no text selection, no tap flash, and (optionally) no context menu, so right-drag can be a gesture. Use this instead of per-app touch-action CSS. DOM-only.