pancameraplugin

A spectator's camera over render2d's world: edge pan, held keys, wheel zoom, inside bounds.

#Putting it in a scene

List it after player and render2d, and give the scene a world.pancamera.

"world": {
  "pancamera": {
    "speed": 600,
    "edge": 16,
    "keys": { "left": ["ArrowLeft"], "right": ["ArrowRight"], "up": ["ArrowUp"], "down": ["ArrowDown"] },
    "zooms": [0.5, 1, 2],
    "notch": 100,
    "bounds": [[0, 0], [4000, 3000]],
    "look": [2000, 1500]
  }
},
"plugins": ["loader", "scenemanager", "player", "render2d", "pancamera"]

The seat's actor adds the camera's keys and wheel to the player's controls in its setup:

const cam = plugins.pancamera.binds(plugins)
plugins.player.bind({ ...cam, press: { ...cam.press } })

#Properties

Read from world.pancamera.

.speed : number

World units per second the camera moves while panning. The distance each frame is scaled by the time since the last frame, so it moves the same at any frame rate.

.edge : number

Canvas pixels. A pointer within this distance of a side of the canvas pans toward that side, and in a corner it pans toward both. There is no edge pan while a UI modal is open, while the pointer is locked, or before the pointer has moved.

.keys : { left, right, up, down }

Each is a key name or a list of key names, in the names player uses. Holding any of them pans that way on the screen. The camera cancels the browser's default for these keys, so an arrow key does not scroll the page.

.zooms : number[]

The zoom levels the mouse wheel steps through, any positive numbers. Turning the wheel down steps to the next smaller level and turning it up steps to the next larger one. It stops at the ends of the list. If the current zoom is not in the list, the wheel steps to the nearest level in the direction it turned.

.notch : number

Pixels of wheel movement that make one zoom step. Movement short of a notch carries over to the next.

.bounds : [[x0, y0], [x1, y1]]

World units. The point the camera looks at is kept inside this rectangle.

.look : [x, y]

The world point the camera looks at to start with. If left out, it starts at the point world.render2d.look gives.

#Methods

On the page, through plugins.pancamera.

look( plugins, point )

Moves the camera to look at a world point, kept inside bounds. Use it for a minimap click. Panning carries on from there.

binds( plugins ) : { press, every, wheel }

The camera's part of player's control table, built from keys. Pass it to plugins.player.bind, alone or merged with the actor's own controls. An actor that has its own every or wheel calls the camera's from inside it.

#In the guide