Skip to content

robashton/camera

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Camera

This is a very small library for doing viewport/camera management in a HTML5 Canvas based game in a pixel and aspect-ratio independent manner.

That is, you can use the canvas context however you like, with any sized canvas and the output will be the same (consider the case of stretching the canvas to fit various screen resolutions and devices).

Table of contents

Usage

const canvas = document.createElement("canvas")
const context = this.canvas.getContext("2d")
const camera = new Camera(context)

Very exciting, there are a few methods to manipulate the camera with once it is created


Moving the camera

Move the centre of the viewport to the location specified by x and y

camera.moveTo(x, y)

Controlling camera zoom

Zoom out/in to the specified distance from the 2D plane

camera.zoomTo(z)

Interacting with the scene

Transform a coordinate pair from screen coordinates (relative to the canvas) into world coordinates (useful for intersection between mouse and entities)

Optional: obj can supply an object to be populated with the x/y (for object-reuse in garbage collection efficient code)

const coords = camera.screenToWorld(x, y, [obj])
console.log(coords.x, coords.y)

Overlaying the scene

Transform a coordinate pair from world coordinates into screen coordinates (relative to the canvas) - useful for placing DOM elements over the scene.

Optional: obj can supply an object to be populated with the x/y (for object-reuse in garbage collection efficient code).

const coords = camera.worldToScreen(x, y, [obj])
console.log(coords.x, coords.y)

Rendering

Each render pass, rendering to the context should be applied with.

camera.begin()
// Draw stuff
camera.end()

Appropriate transformations will be applied to the context, and world coordinates can be used directly with all canvas context calls.


Properties

Property Description Default Value
aspectRatio Canvas Aspect Ratio context.canvas.width / context.canvas.height
context drawing context on the canvas canvas.getContext('2d')
distance Used for the zoom 1000
fieldOfView The extent of the observable canvas 0.7853981633974483
lookAt Refers to the camera position in the x and y axis [0, 0]
viewport Holds: camera's - width, height, left, top, right, bottom, scale specified in the next table

viewport

Property Definition
width distance * Math.tan(fieldOfView)
height width / aspectRatio
left lookAtX - (width / 2.0)
top lookAtY - (height / 2.0)
right left + width
bottom top + height
scale [canvas.width / width, canvas.height / height]

Methods

Method Description
begin() Applies Scale and Translation Rendering
end() 2d Context restore() method Rendering
applyScale() 2d Context scale(Camera.viewport.scale[0], Camera.viewport.scale[0]) method
applyTranslation() 2d Context translate(-Camera.viewport.left, -Camera.viewport.top) method
updateViewport() Camera.viewport data update
zoomTo(z) Moving the camera
moveTo(x, y) Controlling camera zoom
screenToWorld(x, y, obj) Interacting with the scene
worldToScreen(x, y, obj) Overlaying the scene
addListeners() Event Listeners for Zoom and scroll around world and Center camera on "R" key

Settings

Example of default settings:

settings = {
	distange: 1000,
	initialPosition: [0, 0],
	fieldOfView: Math.PI / 4.0,
	scaleX: 1.0,
	scaleY: 1.0
}

About

Just a camera implementation over the top of HTML5 canvas

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published