raea/input

useInput() returns this frame's input: the keys held, the pointer, the wheel and Bevy's gamepads. Live, it comes from the window; in a render, from the input timeline raea render --input reads, so a recorded play renders exactly. keyEdges tells which keys went down or up this frame.

import { useInput } from "raea/input";

function Ship() {
  const { keys } = useInput();
  const dx = (keys.includes("ArrowRight") ? 1 : 0) - (keys.includes("ArrowLeft") ? 1 : 0);
  return <div style={{ transform: `translateX(${dx * 40}px)` }}>▲</div>;
}

import { keyEdges, useInput, wireKeys } from "raea/input"

raea/input exports 1 hook, 2 functions, 2 types. Bevy's counterpart: bevy_input, bevy_input_focus. Source: sdk/raea/src/input.ts.

#Hooks

#useInput

This frame's input ({keys: []} when there was none). Its gamepads are Bevy's (bevy_gilrs's Gamepad entities, read by engine/render's gamepad_keys):

Bevy: bevy_input::gamepad::Gamepad.

function useInput(): FrameInput

#Functions

#keyEdges

The input edges between two frames' keys, as events for a machine's on: "keydown:K" for each key pressed this frame, "keyup:K" for each released (keep last frame's keys in the game state to have prev).

function keyEdges(prev: readonly string[] | undefined, now: readonly string[] | undefined): string[]

#wireKeys

A live host's input beyond keys and the pointer, which reaches the page as marked keys, made fields: "Mouse:Right" a button held; "Wheel:Y DY" (and "Wheel:X DX") the wheel's turn this frame; "Pad0:South" a gamepad's button, "Pad0:LeftStickX=0.42" its axis; "Touch:ID:X:Y" a finger. A scripted entry (render --input) can give the fields themselves.

function wireKeys(input: FrameInput): FrameInput

#Types

#FrameInput

One frame's input for a game.

#InputTimeline

Recorded input by composition frame; frames without an entry had no input.

type InputTimeline = Record<number, Partial<FrameInput> | undefined>