Teil 3: Gehen mit einem Character-Controller

/**
 * 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'],
};

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 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();
      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));
  }

  /** -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;
  }
}

/** The way the player faces, flat on the ground. */
  forward(result = new Vector3()): Vector3 {
    return result.set(Math.sin(this.yaw), 0, Math.cos(this.yaw));
  }

  /** Ninety degrees to the right of forward. */
  right(result = new Vector3()): Vector3 {
    return result.set(Math.cos(this.yaw), 0, -Math.sin(this.yaw));
  }

/** 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,
  /** How fast the velocity may change on the ground, in m/s². */
  groundAcceleration: 40,

  gravity: 20,
};

import {
  CharacterSupportedState,
  PhysicsCharacterController,
  Vector3,
  type CharacterSurfaceInfo,
  type Scene,
} from '@babylonjs/core/pure';
import type { Input } from './input.ts';
import type { Level } from './level.ts';
import type { Look } from './look.ts';
import { PLAYER } from './settings.ts';

export type Mode = 'walk' | 'air';

const DOWN = Vector3.Down();
const GRAVITY = new Vector3(0, -PLAYER.gravity, 0);

export class Player {
  mode: Mode = 'air';

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

  constructor(scene: Scene, level: Level, input: Input, look: Look) {
    this.level = level;
    this.input = input;
    this.look = look;
    this.controller = new PhysicsCharacterController(
      level.spawn.add(new Vector3(0, PLAYER.standHeight / 2, 0)),
      { capsuleHeight: PLAYER.standHeight, capsuleRadius: PLAYER.radius },
      scene,
    );
  }

  /** Back to the start, for when the player falls off the world. */
  respawn(): void {
    this.controller.setPosition(this.level.spawn.add(new Vector3(0, this.controller.footOffset, 0)));
    this.controller.setVelocity(Vector3.Zero());
    this.mode = 'air';
  }

  /** The point between the eyes, in world space. */
  eyePosition(result = new Vector3()): Vector3 {
    return result.copyFrom(this.controller.getPosition()).addInPlaceFromFloats(0, PLAYER.standEye - this.controller.footOffset, 0);
  }

  /** How fast the player moves across the ground, in m/s. */
  horizontalSpeed(): number {
    const velocity = this.controller.getVelocity();
    return Math.hypot(velocity.x, velocity.z);
  }

  /** Where the feet are. */
  feet(): Vector3 {
    return this.controller.getPosition().subtract(new Vector3(0, this.controller.footOffset, 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());

    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 walk(dt: number, support: CharacterSurfaceInfo): void {
    if (support.supportedState !== CharacterSupportedState.SUPPORTED) {
      this.mode = 'air';
      this.air(dt, support);
      return;
    }
    const target = this.wish(PLAYER.walkSpeed);
    approach(this.velocity, target, PLAYER.groundAcceleration * dt);
  }

  private air(dt: number, support: CharacterSurfaceInfo): void {
    if (support.supportedState === CharacterSupportedState.SUPPORTED) {
      this.mode = 'walk';
      this.walk(dt, support);
      return;
    }
    this.velocity.y -= PLAYER.gravity * dt;
  }

  /** The velocity the keys ask for, flat on the ground, at the given speed. */
  private wish(speed: number): Vector3 {
    const direction = this.look.forward().scaleInPlace(this.input.axis('back', 'forward'));
    direction.addInPlace(this.look.right().scaleInPlace(this.input.axis('left', 'right')));
    // Forward and sideways together would be faster than either alone.
    const length = direction.length();
    if (length > 1) direction.scaleInPlace(1 / length);
    return direction.scaleInPlace(speed);
  }
}

/** Moves `current` towards `target` by at most `maxDelta`. */
function approach(current: Vector3, target: Vector3, maxDelta: number): void {
  const distance = Vector3.Distance(current, target);
  if (distance <= maxDelta) current.copyFrom(target);
  else current.addInPlace(target.subtract(current).scaleInPlace(maxDelta / distance));
}

import type { Player } from './player.ts';

/** A few lines of text in the corner that say what the player is doing. */
export class Hud {
  private readonly element: HTMLElement;
  private text = '';

  constructor(element: HTMLElement) {
    this.element = element;
  }

  update(player: Player): void {
    const feet = player.feet();
    const text = [
      player.mode,
      `${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;
  }
}

<canvas id="game"></canvas>
    <div id="crosshair"></div>
    <div id="hud"></div>
    <div id="overlay">
      <strong>Click to play</strong>
      <span>WASD walk · mouse look · Esc pause</span>
    </div>
    <script type="module" src="/src/main.ts"></script>

#hud {
  position: fixed;
  left: 12px;
  top: 12px;
  font: 13px/1.5 ui-monospace, monospace;
  white-space: pre;
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
}

import { FreeCamera, Vector3, type Scene } from '@babylonjs/core/pure';
import type { Look } from './look.ts';
import type { Player } from './player.ts';
import { CAMERA } from './settings.ts';

/** The player's eyes: the camera, put where the player is and turned where they look. */
export class PlayerCamera {
  readonly camera: FreeCamera;

  constructor(scene: Scene) {
    this.camera = new FreeCamera('eyes', Vector3.Zero(), scene);
    // A near plane close to the eye lets the player hug a wall without seeing through it.
    this.camera.minZ = 0.05;
    this.camera.fov = CAMERA.fov;
  }

  update(player: Player, look: Look): void {
    player.eyePosition(this.camera.position);
    this.camera.rotation.set(look.pitch, look.yaw, 0);
  }
}

await enablePhysics(scene);
const level = buildLevel(scene);

const input = new Input(canvas);
const look = new Look();
const player = new Player(scene, level, input, look);
const view = new PlayerCamera(scene);
const hud = new Hud(document.querySelector<HTMLElement>('#hud')!);

overlay.addEventListener('click', () => input.lock());
input.onLockChange = (locked) => overlay.classList.toggle('hidden', locked);

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);
});

engine.runRenderLoop(() => scene.render());