Game Component: Camera

A camera component for use in 2d browser games.

How to use

Create a camera:

import Camera from '@basementuniverse/camera';

const camera = new Camera();

Update the camera transforms:

class Game {
  // ...

  public draw(context: CanvasRenderingContext2D) {
    context.save();

    // This updates context transforms based on the camera's position and scale
    this.camera.draw(context);

    // Draw everything else...

    context.restore();
  }
}

Move the camera by setting camera.position.

Snap the camera to a new position (without easing) by setting camera.positionImmediate.

Zoom the camera by setting camera.scale.

Snap the camera to a new zoom level (without easing) by setting camera.scaleImmediate.

Fetch the camera's world-space bounds:

const bounds: {
  top: number;
  bottom: number;
  left: number;
  right: number;
} = camera.bounds;

Convert a screen-space position to world-space:

const worldPosition: {
  x: number;
  y: number;
} = camera.positionToWorld(screenPosition);

Options

const options = { ... };
const camera = new Camera(options);

| Option | Type | Default | Description | | --- | --- | --- | --- | | allowScale | boolean | true | Allow the camera to zoom | | minScale | number | 0.5 | Minimum zoom level | | maxScale | number | 4 | Maximum zoom level | | moveEaseAmount | number | 0.1 | Position easing amount, set to 0 for no easing | | scaleEaseAmount | number | 0.1 | Scale easing amount, set to 0 for no easing |

Other components

• Camera
• Content Manager
• Debug
• Input Manager
• Scene Manager