@web-engine-dev/camera

Camera controllers (follow, cinematic, shake) for web-engine.

Features

• Follow Camera: Smooth player following
• Cinematic Camera: Scripted camera movements
• Camera Shake: Screen shake effects
• Zoom Control: Smooth zoom transitions
• Multi-Camera: Camera switching and blending

Installation

npm install @web-engine-dev/camera
# or
pnpm add @web-engine-dev/camera

Quick Start

import { CameraController, FollowCamera, CameraShake } from '@web-engine-dev/camera';

// Create follow camera
const camera = new FollowCamera({
  target: player,
  offset: { x: 0, y: 5, z: -10 },
  smoothing: 0.1,
});

// Update each frame
camera.update(deltaTime);

// Apply shake
camera.shake({
  intensity: 10,
  duration: 0.5,
  frequency: 30,
});

API Overview

Follow Camera

const camera = new FollowCamera({
  target: entity,
  offset: { x: 0, y: 5, z: -10 },
  lookOffset: { x: 0, y: 1, z: 0 },
  smoothing: 0.1,
  deadZone: { x: 2, y: 1 },
});

camera.setTarget(newTarget);
camera.setOffset({ x: 0, y: 10, z: -15 });

Cinematic Camera

const cinematic = new CinematicCamera();

// Define path
cinematic.addKeyframe(0, { position, rotation, fov });
cinematic.addKeyframe(2, { position, rotation, fov });
cinematic.addKeyframe(5, { position, rotation, fov });

// Play
cinematic.play({
  loop: false,
  easing: 'easeInOut',
});

// Seek
cinematic.seek(1.5);

Camera Shake

const shake = new CameraShake();

// Trauma-based shake
shake.addTrauma(0.5);

// Direct shake
shake.shake({
  intensity: 10,
  duration: 0.3,
  frequency: 30,
  decay: 'exponential',
});

// Update
const offset = shake.update(deltaTime);
camera.position.add(offset);

Zoom Control

camera.setZoom(2.0, {
  duration: 0.5,
  easing: 'easeOut',
});

// Or direct
camera.zoom = 1.5;

Camera Blending

const blender = new CameraBlender();

blender.addCamera('gameplay', gameplayCamera, 1.0);
blender.addCamera('cutscene', cutsceneCamera, 0.0);

// Blend to cutscene
blender.setWeight('cutscene', 1.0, {
  duration: 1.0,
});

// Get blended result
const result = blender.getBlended();