KeyboardInput

The single input-source component that turns raw DOM key events into the canonical keyboard.keydown / keyboard.keyup bus events every gameplay input system listens for.

What it does

KeyboardInputComponent is the marker for a scene's "input source" — pure data holding one field, preventDefaultKeys. Drop it on a world / singleton entity and KeyboardInputSystem attaches window keydown/keyup listeners on init and republishes each key as { code }: a DOM keydown becomes keyboard.keydown, a keyup becomes keyboard.keyup. Keys listed in preventDefaultKeys get event.preventDefault() on keydown (Space + the four arrows by default) so the page never scrolls out from under the controls. This is the emitter half of the keyboard contract — PlayerFlightInput, KeyboardMover and friends are the listeners — so it replaces a game's bespoke DOM input glue with one reusable System. It's window-guarded (inert under SSR / node) and not pauseable, so keys still reach a pause menu while the world is stopped. Zero @babylonjs / three imports; the System constructor takes (eventBus) only.

Use it in a scene

A scene is just data — a list of entities, each with its components. At startup the SceneLoader turns this JSON into a live world; edit the file and reload to rebuild it.

Build it from scratch with the bjs CLI:

1Scaffold a project
```
npm create @babylonjsmarket/arcade@latest my-game
```
World, renderer, and dev server — ready to run.
2Install dependencies
```
cd my-game && npm install
```
3Add KeyboardInput
```
bjs download KeyboardInput
```
Copies its source into src/ so the scene resolves.
First time? Run bjs login once.
4Paste the scene into src/scenes/arcade-room.ts and run
```
npm run dev
```
SceneLoader builds the world from the JSON; reload to rebuild.

JSON

{
  "World": {
    "tags": ["world"],
    "components": {
      "KeyboardInput": {
        "preventDefaultKeys": ["Space", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]
      }
    }
  }
}

Props

preventDefaultKeys (string[], default ["Space", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]) — KeyboardEvent.code values whose browser default (page scroll) is suppressed on keydown. Pass [] to suppress nothing; add codes like "KeyW" to claim other keys away from the page.

Events

Emits keyboard.keydown (KeyboardInputEvents.KEYDOWN) on every DOM keydown — payload { code }, the KeyboardEvent.code string.
Emits keyboard.keyup (KeyboardInputEvents.KEYUP) on every DOM keyup — payload { code }.
Listens for nothing — this is a pure emitter; its only input is the DOM.

Dependencies

None — it needs no other component and no mesh. It is the emitter half of the keyboard contract, so it only does something useful when a listener is present: the gameplay input systems that consume keyboard.keydown / keyboard.keyup — e.g. PlayerFlightInput on the player, which turns those events into a FlightIntent that ShipFlight flies. Without such a listener the events still fire, but nothing moves.

Notes

Place exactly one on a world / singleton entity (tag world). The System matches every KeyboardInput in the scene and OR's their preventDefaultKeys, so a second source only widens the prevent-default set.
The payload is { code } and nothing else — no held-key tracking, no auto-repeat filtering. The browser re-fires keydown while a key is held, so a listener that needs a clean "just pressed" edge keeps its own held-set.
code is the physical-key KeyboardEvent.code ("KeyW", "Space", "ArrowLeft"), not the typed character — layout-independent, which is what you want for WASD / arrow controls.
Not pauseable by design: an input source keeps bridging keys while the world is paused so pause-menu navigation still receives them.
Under SSR / node (no window) the System is inert — it constructs and runs but attaches no listeners and emits nothing, so scenes load server-side without touching the DOM.