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.
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.
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.
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.
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.
Crafty.viewport.scroll(String axis, Number v)
Will move the viewport to the position given on the specified axis
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);
public void Crafty.viewport.pan(String axis, Number v, Number time)
Pans the camera a given number of pixels over a given number of frames
public void Crafty.viewport.follow(Object target, Number offsetx, Number offsety)
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.
var ent = Crafty.e('2D, DOM').attr({w: 100, h: 100:});
Crafty.viewport.follow(ent, 0, 0);
public void Crafty.viewport.centerOn(Object target, Number time)
Centers the viewport on the given entity
This value keeps an amount of viewport zoom, required for calculating mouse position at entity
public void Crafty.viewport.zoom(Number amt, Number cent_x, Number cent_y, Number time)
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.
public void Crafty.viewport.scale(Number amt)
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.
Crafty.viewport.scale(2); //to see effect add some entities on stage.
public void Crafty.viewport.mouselook(Boolean active)
Toggle mouselook on the current viewport. Simply call this function and the user will be able to drag the viewport around.
public void Crafty.viewport.init([Number width, Number height, String stage_elem])
public void Crafty.viewport.init([Number width, Number height, HTMLElement stage_elem])
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).
The argument 'stage_elem' is used to specify a stage element other than the default, and can be either a string or an HTMLElement. If a string is provided, it will look for an element with that id and, if none exists, create a div. If an HTMLElement is provided, that is used directly. Omitting this argument is the same as passing an id of 'cr-stage'.