Input

Add it

Declare it in prototir.json at the root of your ZIP. Prototir checks the version at upload and adds it to the page's import map.

{
  "modules": [
    "prefab-input@0.2.0"
  ]
}

Then import it by name, from 'prefab-input', as you would from npm.

Smallest example

import { createInput } from 'prefab-input';

const input = createInput({
  actions: [{ id: 'jump', key: 'Space', label: 'A' }]
});

function frame() {
  const { x, y } = input.axes; // -1..1, y = forward
  if (input.pressed('jump')) player.jump();
  requestAnimationFrame(frame);
}
frame();

API

createInput(options)

actions: [{ id, key, label?, position?, size?, shape?, longPressMs? }]

Named actions. key is a KeyboardEvent.code such as 'Space' or 'KeyE'. On touch each action becomes a button; position is { left | right | top | bottom } in px or CSS lengths, shape is 'round' or 'square'.

joystick: true | false | { position?, size?, keys? }

The primary 'move' stick, on by default. WASD and the arrow keys drive it on desktop.

joysticks: [{ id, position?, size?, keys?: { up, down, left, right } }]

Extra sticks, read with axis(id). keys gives each one a desktop mapping.

dpad: false | true | { id?, position?, size?, keys? }

A digital 4-way pad writing -1, 0 or 1 into an axis ('move' by default).

virtual: 'auto' | true | false

Whether to draw on-screen controls. 'auto' shows them on touch devices.

joystickSize: 120, longPressMs: 450, mount: document.body

Default stick size in px, default long-press threshold in ms (actions can override it), and where the overlay is added.

The returned input

input.axes

The 'move' axis: { x, y }, each -1..1.

input.axis(id)

Any stick or d-pad axis by id.

input.pressed(id)

Whether an action is held right now.

input.onPress(id, cb) / onRelease / onShortPress / onLongPress

Edge events, identical for keys and on-screen buttons. A long press fires when the threshold is reached, while still held. Each returns an off() function.

input.virtual

Whether on-screen controls are showing.

input.destroy()

Removes the overlay and every listener.

Good to know

• 0.2.0 only adds to the 0.1.0 API; 0.1.0 stays servable for prototypes that pinned it.

Versions

Every version stays available, so a prototype keeps working exactly as published. Declare the one you tested with.

• prefab-input@0.2.0
• prefab-input@0.1.0