input-system

Input System

When to Use

Use this skill when:

• Building input handling for ECS games
• Supporting multiple input devices
• Implementing action mapping
• Creating input buffering for combos
• Building cross-platform controls

Core Principles

1. Device Abstraction: Unified API for all input types
2. Action Mapping: Map inputs to game actions
3. Input Buffering: Store recent inputs for combos
4. Frame-Perfect Input: Sample input at consistent rate
5. Priority Handling: Process inputs in correct order

Implementation

1. Input Component

// components/Input.ts
import { Component } from '../core/Component';

export interface InputMapping {
  action: string;
  keys?: string[];
  buttons?: number[];
  touches?: boolean;
  axis?: { positive: string; negative: string };
}

export class Input implements Component {
  // Raw input state
  keys = new Set<string>();
  mouseButtons = new Set<number>();
  mouseX = 0;
  mouseY = 0;
  mouseDeltaX = 0;
  mouseDeltaY = 0;

  touches: Array<{ id: number; x: number; y: number }> = [];

  gamepadButtons = new Map<number, boolean>();
  gamepadAxes = new Map<number, number>();

  // Action states
  actions = new Map<string, boolean>();
  actionJustPressed = new Map<string, boolean>();
  actionJustReleased = new Map<string, boolean>();

  // Input buffer for combos
  buffer: Array<{ action: string; timestamp: number }> = [];
  bufferDuration = 200; // ms

  // Mappings
  mappings: InputMapping[] = [];

  constructor() {}

  registerMapping(mapping: InputMapping): void {
    this.mappings.push(mapping);
  }

  isActionActive(action: string): boolean {
    return this.actions.get(action) || false;
  }

  wasActionJustPressed(action: string): boolean {
    return this.actionJustPressed.get(action) || false;
  }

  wasActionJustReleased(action: string): boolean {
    return this.actionJustReleased.get(action) || false;
  }

  getAxis(action: string): number {
    const mapping = this.mappings.find(m => m.action === action && m.axis);

    if (mapping?.axis) {
      const positive = this.keys.has(mapping.axis.positive) ? 1 : 0;
      const negative = this.keys.has(mapping.axis.negative) ? -1 : 0;
      return positive + negative;
    }

    return 0;
  }

  addToBuffer(action: string, timestamp: number): void {
    this.buffer.push({ action, timestamp });

    // Clean old entries
    this.buffer = this.buffer.filter(
      entry => timestamp - entry.timestamp < this.bufferDuration
    );
  }

  checkCombo(actions: string[], currentTime: number): boolean {
    if (this.buffer.length < actions.length) return false;

    // Check if buffer contains sequence
    let bufferIndex = this.buffer.length - 1;

    for (let i = actions.length - 1; i >= 0; i--) {
      if (bufferIndex < 0) return false;

      while (
        bufferIndex >= 0 &&
        this.buffer[bufferIndex].action !== actions[i]
      ) {
        bufferIndex--;
      }

      if (bufferIndex < 0) return false;
      bufferIndex--;
    }

    return true;
  }
}