Crafty.viewport

Viewport is essentially a 2D camera looking at the stage. Can be moved which in turn will react just like a camera moving in that direction.

Back to top

Crafty.viewport.clampToEntities

Decides if the viewport functions should clamp to game entities. When set to true functions such as Crafty.viewport.mouselook() will not allow you to move the viewport over areas of the game that has no entities. For development it can be useful to set this to false.

Back to top

Crafty.viewport.x

Will move the stage and therefore every visible entity along the x axis in the opposite direction.

When this value is set, it will shift the entire stage. This means that entity positions are not exactly where they are on screen. To get the exact position, simply add Crafty.viewport.x onto the entities x position.

Back to top

Crafty.viewport.y

Will move the stage and therefore every visible entity along the y axis in the opposite direction.

When this value is set, it will shift the entire stage. This means that entity positions are not exactly where they are on screen. To get the exact position, simply add Crafty.viewport.y onto the entities y position.

Back to top

Crafty.viewport.bounds

A rectangle which defines the bounds of the viewport. If this variable is null, Crafty uses the bounding box of all the items on the stage.

Back to top

Crafty.viewport.scroll

Crafty.viewport.scroll(String axis, Number v)

axis
'x' or 'y'
v
The new absolute position on the axis

Will move the viewport to the position given on the specified axis

Example

Will move the camera 500 pixels right of its initial position, in effect shifting everything in the viewport 500 pixels to the left.

Crafty.viewport.scroll('_x', 500);
Back to top

Crafty.viewport.pan

public void Crafty.viewport.pan(String axis, Number v, Number time)

String axis
'x' or 'y'. The axis to move the camera on
Number v
the distance to move the camera by
Number time
The duration in frames for the entire camera movement

Pans the camera a given number of pixels over a given number of frames

Back to top

Crafty.viewport.follow

public void Crafty.viewport.follow(Object target, Number offsetx, Number offsety)

Object target
An entity with the 2D component
Number offsetx
Follow target should be offsetx pixels away from center
Number offsety
Positive puts target to the right of center

Follows a given entity with the 2D component. If following target will take a portion of the viewport out of bounds of the world, following will stop until the target moves away.

Example

var ent = Crafty.e('2D, DOM').attr({w: 100, h: 100:});
Crafty.viewport.follow(ent, 0, 0);
Back to top

Crafty.viewport.centerOn

public void Crafty.viewport.centerOn(Object target, Number time)

Object target
An entity with the 2D component
Number time
The number of frames to perform the centering over

Centers the viewport on the given entity

Back to top

Crafty.viewport._zoom

This value keeps an amount of viewport zoom, required for calculating mouse position at entity

Back to top

Crafty.viewport.zoom

public void Crafty.viewport.zoom(Number amt, Number cent_x, Number cent_y, Number time)

Number amt
amount to zoom in on the target by (eg. 2, 4, 0.5)
Number cent_x
the center to zoom on
Number cent_y
the center to zoom on
Number time
the duration in frames of the entire zoom operation

Zooms the camera in on a given point. amt > 1 will bring the camera closer to the subject amt < 1 will bring it farther away. amt = 0 will do nothing. Zooming is multiplicative. To reset the zoom amount, pass 0.

Back to top

Crafty.viewport.scale

public void Crafty.viewport.scale(Number amt)

Number amt
amount to zoom/scale in on the element on the viewport by (eg. 2, 4, 0.5)

Zooms/scale the camera. amt > 1 increase all entities on stage amt < 1 will reduce all entities on stage. amt = 0 will reset the zoom/scale. Zooming/scaling is multiplicative. To reset the zoom/scale amount, pass 0.

Example

Crafty.viewport.scale(2); //to see effect add some entities on stage.
Back to top

Crafty.viewport.mouselook

public void Crafty.viewport.mouselook(Boolean active)

Boolean active
Activate or deactivate mouselook

Toggle mouselook on the current viewport. Simply call this function and the user will be able to drag the viewport around.

Back to top

Crafty.viewport.init

public void Crafty.viewport.init([Number width, Number height])

width
Width of the viewport
height
Height of the viewport

Initialize the viewport. If the arguments 'width' or 'height' are missing, or Crafty.mobile is true, use Crafty.DOM.window.width and Crafty.DOM.window.height (full screen model). Create a div with id cr-stage, if there is not already an HTMLElement with id cr-stage (by Crafty.viewport.init).

See Also