Build a Keyboard Input Display in Banter

Banter emits key-press from the scene and provides OnKeyDown() and OnKeyUp() on UI elements. A status label makes the received values visible while testing keyboard-driven interactions.

Keyboard Display Workflow

Create a world-space status label, register the scene key-press listener, and add focused UI key handlers when required.

Create a BanterUIPanel and UILabel.
Listen for the scene's key-press event.
Use UI OnKeyDown() and OnKeyUp() for element-level input.

Create the Input Display

const panelObject = new BS.GameObject({
  name: "KeyboardInputDisplay",
  localPosition: new BS.Vector3(0, 1.8, 3)
});

const panel = panelObject.AddComponent(
  new BS.BanterUIPanel({
    resolution: new BS.Vector2(800, 240),
    screenSpace: false,
    enableHaptics: false,
    enableSounds: false
  })
);

const keyLabel = new BS.UILabel();
keyLabel.SetProperty(
  BS.PN.text,
  "Press a key"
);
keyLabel.style.fontSize = "32px";
keyLabel.style.color = "#FFFFFF";
panel.root.AppendChild(keyLabel);

Listen for Scene Key Presses

scene.On("key-press", (event) => {
  console.log(event.detail.key);

  keyLabel.SetProperty(
    BS.PN.text,
    `Key: ${event.detail.key}`
  );
});

The official scene-event reference identifies event.detail.key as a BS.KeyCode value.

Listen on a UI Element

All Banter UI elements inherit keyboard event methods:

keyLabel.OnKeyDown((event) => {
  console.log("Key down:", event.key);
});

keyLabel.OnKeyUp((event) => {
  console.log("Key released");
});

Use the scene event for space-level keyboard handling. Use the UI handlers when input belongs to a specific focused element.

Add Focus Feedback

UI elements also expose focus and blur events:

keyLabel.OnFocus(() => {
  keyLabel.style.color = "#FFD22C";
});

keyLabel.OnBlur(() => {
  keyLabel.style.color = "#FFFFFF";
});

This gives the focused element a visible colour change.

Keep the Two Event Sources Separate

The APIs report their key values in different event locations:

Event source	Documented value
Scene `key-press`	`event.detail.key`
UI `OnKeyDown()`	`event.key`

Read the value from the correct event object instead of treating the two callbacks as identical.

Common Questions

Why is my Banter scene keyboard value undefined?

For the scene's key-press event, read event.detail.key. The UI OnKeyDown() example uses event.key instead.

Should I use key-press or OnKeyDown in Banter?

Use key-press for the documented scene event. Use OnKeyDown() when the handler belongs to a Banter UI element.