Camera

A flexible camera system for 2D games.

Camera provides smooth scrolling, target following, boundary constraints, and various effects for controlling the viewport in your game world.

Features:

• Smooth target following with configurable speed and curves
• Dead zones to reduce camera movement for small target changes
• Content boundary clamping to keep camera within level bounds
• Zoom support
• Friction and braking near boundaries
• Anchor points for different camera behaviors

The camera doesn't render anything itself - instead, you apply its transform to your game visuals to create the scrolling effect.

// Create a camera following the player
var camera = new Camera(screen.width, screen.height);
camera.followTarget = true;
camera.trackSpeedX = 15;
camera.trackSpeedY = 10;

// In update loop
camera.target(player.x, player.y);
camera.update(delta);

// Apply transform to layer
gameLayer.transform = camera.contentTransform;

Instance Members #

Camera x position in world coordinates. This is the left edge of what the camera sees.

Camera y position in world coordinates. This is the top edge of what the camera sees.

When true, the camera smoothly follows the target position. Use target() or targetX/targetY to set what to follow.

If true, camera will try to stay inside content bounds. When the viewport is larger than content, camera will be centered. Useful for keeping the camera within level boundaries.

Percentage of viewport width where camera will "brake" to stay inside content bounds

Percentage of viewport height where camera will "brake" to stay inside content bounds

Target x position

Target y position

Tracking x speed factor

Tracking y speed factor

Affects the smoothness of camera tracking. Lower values (0.1-0.5) create more easing/lag. Higher values (0.8-1.0) create more direct following. Must be between 0 (exclusive) and 1 (inclusive).

Camera zoom level. 1.0 = normal size 2.0 = zoomed in 2x (objects appear larger) 0.5 = zoomed out (objects appear smaller)

Horizontal dead zone as percentage of viewport width (0-1). Camera won't move until target moves outside this zone. Reduces camera jitter from small movements.

Vertical dead zone as percentage of viewport height (0-1). Camera won't move until target moves outside this zone. Reduces camera jitter from small movements.

Horizontal friction. More the value is below 1.0, higher is the friction.

Vertical friction. More the value is below 1.0, higher is the friction.

Content x (top left corner) position

Content y (top left corner) position

Content width

Content height

Viewport width: the visible area width for this camera. Usually set to screen width or render area width.

Viewport height: the visible area height for this camera. Usually set to screen height or render area height.

A threshold value to stop the camera if its movement is lower than this value

Translation X that should be applied to the content so that the camera is pointing to the correct area. This value is computed by the camera when it is updated.

Translation Y that should be applied to the content so that the camera is pointing to the correct area This value is computed by the camera when it is updated.

The transform to apply to the content in order to reflect camera position.

Set camera x & y position

Set brakeNearBoundsX& brakeNearBoundsY

Set targetX & targetY, which define the position the camera may follow if followTarget is true

Private Members #

Metadata #