@basementuniverse/camera
TypeScript icon, indicating that this package has built-in type declarations

1.1.0 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i @basementuniverse/camera

Weekly Downloads

5

Version

1.1.0

License

MIT

Unpacked Size

79.9 kB

Total Files

6

Last publish

Collaborators

  • basementuniverse