Teil 5: Rennen und Springen

/**
 * Which keys do what. `event.code` names the physical key, so WASD stays where it is on
 * any keyboard layout.
 */
const BINDINGS = {
  forward: ['KeyW', 'ArrowUp'],
  back: ['KeyS', 'ArrowDown'],
  left: ['KeyA', 'ArrowLeft'],
  right: ['KeyD', 'ArrowRight'],
  run: ['ShiftLeft', 'ShiftRight'],
  jump: ['Space'],
};

export type Action = keyof typeof BINDINGS;

const BOUND = new Set(Object.values(BINDINGS).flat());

export class Input {
  /** True while the mouse is captured. Keys and mouse only count then. */
  locked = false;
  onLockChange: (locked: boolean) => void = () => {};

  private readonly canvas: HTMLCanvasElement;
  private readonly held = new Set<string>();
  private readonly pressed = new Set<string>();
  private mouseX = 0;
  private mouseY = 0;

  constructor(canvas: HTMLCanvasElement) {
    this.canvas = canvas;

    window.addEventListener('keydown', (event) => {
      if (!this.locked || !BOUND.has(event.code)) return;
      event.preventDefault();
      if (!event.repeat) this.pressed.add(event.code);
      this.held.add(event.code);
    });
    window.addEventListener('keyup', (event) => this.held.delete(event.code));
    // A key let go while another window has the focus never sends its keyup.
    window.addEventListener('blur', () => this.held.clear());

    document.addEventListener('pointerlockchange', () => {
      this.locked = document.pointerLockElement === canvas;
      if (!this.locked) this.held.clear();
      this.onLockChange(this.locked);
    });
    document.addEventListener('mousemove', (event) => {
      if (!this.locked) return;
      this.mouseX += event.movementX;
      this.mouseY += event.movementY;
    });
  }

  /** Captures the mouse. Browsers only allow it in answer to a click or a key press. */
  async lock(): Promise<void> {
    try {
      // Raw mouse movement, without the acceleration of the operating system.
      await this.canvas.requestPointerLock({ unadjustedMovement: true });
    } catch {
      // Not every platform has raw movement (Linux does not), so ask again without it.
      await this.canvas.requestPointerLock().catch(() => {});
    }
  }

  /** Whether one of the action's keys is held down. */
  down(action: Action): boolean {
    return BINDINGS[action].some((code) => this.held.has(code));
  }

  /** Whether one of the action's keys went down since the last frame. */
  pressedNow(action: Action): boolean {
    return BINDINGS[action].some((code) => this.pressed.has(code));
  }

  /** -1, 0 or 1, from a pair of opposite actions. */
  axis(negative: Action, positive: Action): number {
    return Number(this.down(positive)) - Number(this.down(negative));
  }

  /** The mouse movement since the last call, in pixels. */
  takeMouse(): { x: number; y: number } {
    const movement = { x: this.mouseX, y: this.mouseY };
    this.mouseX = 0;
    this.mouseY = 0;
    return movement;
  }

  /** Call at the end of every frame. */
  endFrame(): void {
    this.pressed.clear();
  }
}

scene.onBeforeRenderObservable.add(() => {
  // After a stall, such as a tab in the background, one huge step would tunnel through walls.
  const dt = Math.min(engine.getDeltaTime() / 1000, 0.05);
  if (dt <= 0) return;
  look.update(input);
  player.update(dt);
  view.update(player, look);
  hud.update(player);
  input.endFrame();
});

/** Every number that decides how the player feels. Meters, seconds and radians. */
export const PLAYER = {
  radius: 0.35,
  standHeight: 1.8,
  /** Eye height above the feet. */
  standEye: 1.65,

  walkSpeed: 4,
  runSpeed: 7,
  /** How fast the velocity may change on the ground and in the air, in m/s². */
  groundAcceleration: 40,
  airAcceleration: 10,

  gravity: 20,
  jumpHeight: 1.2,
  /** A jump still works this long after walking off an edge. */
  coyoteTime: 0.12,
  /** A jump pressed this long before landing happens on landing. */
  jumpBuffer: 0.12,

  /**
   * The steepest ground to walk on. It also decides how high an edge the rounded bottom of
   * the capsule rolls over: about radius * (1 - cos(angle)) above its bottom, which floats a
   * few centimeters over the ground. The 20 cm steps in the level work.
   */
  maxSlopeDegrees: 60,
  /** Ground this close under the feet still counts as walking. */
  snapDistance: 0.3,
};

running = false;

  private readonly controller: PhysicsCharacterController;
  private readonly level: Level;
  private readonly input: Input;
  private readonly look: Look;
  private readonly velocity = new Vector3();

  /** True from a jump until the player starts to come down. */
  private rising = false;
  private coyoteTimer = 0;
  private jumpTimer = 0;

update(dt: number): void {
    if (this.controller.getPosition().y < -20) this.respawn();
    const support = this.controller.checkSupport(dt, DOWN);
    this.velocity.copyFrom(this.controller.getVelocity());

    this.coyoteTimer = Math.max(this.coyoteTimer - dt, 0);
    this.jumpTimer = Math.max(this.jumpTimer - dt, 0);
    if (this.input.pressedNow('jump')) this.jumpTimer = PLAYER.jumpBuffer;
    this.running = this.input.down('run') && this.input.axis('back', 'forward') > 0;

    switch (this.mode) {
      case 'walk':
        this.walk(dt, support);
        break;
      case 'air':
        this.air(dt, support);
        break;
    }

    this.controller.setVelocity(this.velocity);
    this.controller.integrate(dt, support, GRAVITY);
  }

private groundSpeed(): number {
    return this.running ? PLAYER.runSpeed : PLAYER.walkSpeed;
  }

private walk(dt: number, support: CharacterSurfaceInfo): void {
    const grounded = support.supportedState === CharacterSupportedState.SUPPORTED;
    const drop = grounded ? 0 : this.groundBelow();
    if (drop === null) {
      this.mode = 'air';
      this.coyoteTimer = PLAYER.coyoteTime;
      this.air(dt, support);
      return;
    }
    if (this.jumpTimer > 0) {
      this.jump();
      return;
    }

    const target = this.wish(this.groundSpeed());
    if (grounded) alongGround(target, support.averageSurfaceNormal);
    approach(this.velocity, target, PLAYER.groundAcceleration * dt);
    // Just off the ground, such as over the top of a slope: move down onto it this frame.
    if (!grounded) this.velocity.y = -drop / dt;
  }

private air(dt: number, support: CharacterSurfaceInfo): void {
    if (this.jumpTimer > 0 && this.coyoteTimer > 0) {
      this.jump();
      return;
    }
    if (this.velocity.y <= 0) this.rising = false;
    if (support.supportedState === CharacterSupportedState.SUPPORTED && !this.rising) {
      this.mode = 'walk';
      this.walk(dt, support);
      return;
    }
    // Without input the player keeps their momentum. With it, they steer, but slowly.
    if (this.input.axis('back', 'forward') || this.input.axis('left', 'right')) {
      const target = this.wish(this.groundSpeed());
      target.y = this.velocity.y;
      approach(this.velocity, target, PLAYER.airAcceleration * dt);
    }
    this.velocity.y -= PLAYER.gravity * dt;
  }

  private jump(): void {
    this.velocity.y = Math.sqrt(2 * PLAYER.gravity * PLAYER.jumpHeight);
    this.rising = true;
    this.mode = 'air';
    this.jumpTimer = 0;
    this.coyoteTimer = 0;
  }

update(player: Player): void {
    const feet = player.feet();
    const stance = player.running ? 'running' : 'standing';
    const text = [
      `${player.mode} · ${stance}`,
      `${player.horizontalSpeed().toFixed(1)} m/s`,
      `x ${feet.x.toFixed(1)}  y ${feet.y.toFixed(2)}  z ${feet.z.toFixed(1)}`,
    ].join('\n');
    // Only touch the page when something changed.
    if (text !== this.text) this.element.textContent = this.text = text;
  }

<div id="overlay">
      <strong>Click to play</strong>
      <span>WASD move · mouse look · Shift run · Space jump · Esc pause</span>
    </div>