- param1 {World} | {Entity} object
- param2 {String} pointerType "touch" | "mouse" | "key"
- param3 {String} methodName
- returns {Boolean}
- function getRangeBetweenTwoTouches
- param1 {Touch} touch1
- param2 {Touch} touch2
- return {Number}
- added by topheman
- function DraggingInfos
- param1 {MouseEvent} | {TouchEvent} mouse or touch event at the time of the creation of the DraggingInfos (the one that manage the pan)
- param2 {Object} Viewport
- optional
- added by topheman
- param1 {MouseEvent} | {TouchEvent} e
- param2 {String} mode
- return {Object} ViewportInfos
- param {DraggingInfos} draggingInfos
- function PanDraggingObject
- param {DraggingInfos}
- added by topheman
boxbox
contains a single self-contained physics simulation
.createWorld( canvas, [options] )
- canvas element to render on
-
options
- gravity (default {x:0, y:10}) can be horizontal, negative, etc
- allowSleep (default true) bodies may sleep when they come to rest. a sleeping body is no longer being simulated, which can improve performance.
- scale (default 30) scale for rendering in pixels / meter
- tickFrequency (default 50) onTick events happen every tickFrequency milliseconds
- collisionOutlines (default false) render outlines over everything for debugging collisions
- disableTouchEvents (default false) doesn't add the touch listeners you'll declare if true
- disableMouseEvents (default false) doesn't add the mouse listeners you'll declare if true
- disableKeyEvents (default false) doesn't add the touch listeners you'll declare if true
- preventScroll (default false) prevents scrolling on touch devices if true
-
boundaries
will restrict your world to this boundaries when you pan, pinch, scale, etc (please use the viewport api for those purposes)
- left
- right
- top
- bottom
without options
var canvasElem = document.getElementById("myCanvas");
var world = boxbox.createWorld(canvasElem);
with options
var canvasElem = document.getElementById("myCanvas");
var world = boxbox.createWorld(canvasElem, {
gravity: {x: 0, y: 20},
scale: 60
});
Entity
a single physical object in the physics simulation
.applyImpulse( power, degrees )
- power of impulse
- degrees direction of force. 0 is up, 90 is right, etc.
Apply an instantanious force on this Entity.
With this and all functions that take degrees, you can also provide a vector.
With this and all functions that take degrees, you can also provide a vector.
entity.applyImpulse(10, 45); // 45 degree angle
entity.applyImpulse(10, 1, -1); // the vector x=1 y=-1}
.borderColor( [value] )
- value css color string
- return css color string
get or set entity's border color
.borderWidth( [value] )
- value number
- return number
get or set entity's border width.
Set to 0 to not show a border.
.canvasPosition( )
- return {x,y}
Get the Entity position in pixels. Useful for custom
rendering. Unlike position the result
is relative to the World's scale and camera position.
.checkPosition( x,y )
- returns {Boolean}
- added by topheman
Checks if the entity is at x,y
.clearForce( )
Stop the force with the given name.
.clearVelocity( )
Stop the constant velocity with the given name.
.color( [value] )
- value css color string
- return css color string
get or set entity's color
.destroy( )
destroy this entity and remove it from the world
.draw( [value] )
- value function
- return function
get or set the draw function for this entity
.friction( [value] )
- value number
- return number
get or set entity friction
.image( [value] )
- value string
- return string
get or set entity image
.imageOffsetX( [value] )
- value number
- return number
get or set entity image offset in the x direction
.imageOffsetY( [value] )
- value number
- return number
get or set entity image offset in the y direction
.imageStretchToFit( [value] )
- value boolean
- return boolean
set to true to stretch image to entity size
.isMouseDraggable( )
- return {Boolean}
- added by topheman
Returns true if the mouse draggable event is active on the entity
.isPined( )
- return {Boolean}
- added by topheman
Returns true if the entity is pined to the world
.isTouchDraggable( )
- return {Boolean}
- added by topheman
Returns true if the touch draggable event is active on the entity
.maxVelocityX( [value] )
- value number
- return number
get or set entity max velocity left or right
.maxVelocityY( [value] )
- value number
- return number
get or set entity max velocity up or down
.mouseDraggable( [options] )
-
options
- disabled {Boolean} true/false to disable/enable the draggable state
-
type
{String} "regularDrag" or "eventDrag"
- regularDrag : Moves the entity with the mouse (by default)
- eventDrag : doesn't move the entity, only sends you the data and callbacks
Turns an entity to draggable by the mouse, with multiple callbacks.
The mouseDraggableInfos variable passed within the callback function contains the original position of the mouse when the drag started and its current position.
The mouseDraggableInfos variable passed within the callback function contains the original position of the mouse when the drag started and its current position.
Examples
Without options
entity.mouseDraggable();
With options
entity.mouseDraggable({
start : function(e, mouseDraggableInfos){
console.info('start dragging '+this.name()+' at position',{mouseDraggableInfos.position.x, mouseDraggableInfos.position.y});
},
drag : function(e, mouseDraggableInfos){
console.info('dragging '+this.name()+' at position', {mouseDraggableInfos.position.x, mouseDraggableInfos.position.y});
},
stop : function(e, mouseDraggableInfos){
console.info('just dragged '+this.name(), 'from', {mouseDraggableInfos.originalPosition.x, mouseDraggableInfos.originalPosition.y}, 'to', {mouseDraggableInfos.position.x, mouseDraggableInfos.position.y});
}
});
Enable / disable
entity.mouseDraggable('disable');
.name( [value] )
- return entity name
get or set entity name
.onFinishContact( callback )
-
callback
function( entity )
- entity that contact ended with
- this this Entity
Handle end of contact with another entity.
.onImpact( callback )
-
callback
function( entity, normalForce, tangentialForce )
- entity collided with
- normalForce force of two entities colliding
- tangentialForce force of two entities "rubbing" up against each other
- this this Entity
Handle impact with another entity.
.onKeydown( callback )
-
callback
function( e )
- e keydown event
- this this Entity
Handle keydown event for this entity.
.onKeyup( callback )
-
callback
function( e )
- e keyup event
- this this Entity
Handle keyup event for this entity.
.onMousedown( callback )
-
callback
function(e,mouseInfos)
- e MouseEvent
- mouseInfos {x,y}
- this Entity
Add an onMousedown callback to this entity
.onMousein( callback )
-
callback
function(e,mouseInfos)
- e MouseEvent
- mouseInfos {x,y}
- this Entity
Add an onMousein callback to this entity
.onMousemove( callback )
-
callback
function(e,mouseInfos)
- e MouseEvent
- mouseInfos {x,y}
- this Entity
Add an onMousemove callback to this entity
.onMouseout( callback )
-
callback
function(e,mouseInfos)
- e MouseEvent
- mouseInfos {x,y}
- this Entity
Add an onMouseout callback to this entity
.onMouseup( callback )
-
callback
function(e,mouseInfos)
- e MouseEvent
- mouseInfos {x,y}
- this Entity
Add an onMouseup callback to this entity
.onMousewheel( callback )
-
callback
function(e,mousewheelInfos)
- e MouseEvent
-
mousewheelInfos
- x
- y
- delta : -1 or 1
Add an onMousewheel callback to this entity
.onRender( callback )
-
callback
function( context )
- context canvas context for rendering
- this Entity
Add an onRender callback to this Entity
Multiple onRender callbacks can be added, and they can be removed with world.unbindOnRender.
Multiple onRender callbacks can be added, and they can be removed with world.unbindOnRender.
.onStartContact( callback )
-
callback
function( entity )
- entity that contact started with
- this this Entity
Handle start of contact with another entity.
.onTick( callback )
-
callback
function()
- this Entity
Add an onTick callback to this Entity
Ticks are periodic events that happen independant of rendering. You can use ticks as your "game loop". The default tick frequency is 50 milliseconds, and it can be set as an option when creating the world.
Multiple onTick callbacks can be added, and they can be removed with world.unbindOnTick.
Ticks are periodic events that happen independant of rendering. You can use ticks as your "game loop". The default tick frequency is 50 milliseconds, and it can be set as an option when creating the world.
Multiple onTick callbacks can be added, and they can be removed with world.unbindOnTick.
.onTouchend( callback )
-
callback
function(e,touchInfos)
- e TouchEvent
- touchInfos {touchIdentifier,x,y}
- this Entity
Add an onTouchend callback to this entity
.onTouchmove( callback )
-
callback
function(e,touchInfos)
- e TouchEvent
- touchInfos {touchIdentifier,x,y}
- this Entity
Add an onTouchmove callback to this entity
.onTouchstart( callback )
-
callback
function(e,touchInfos)
- e TouchEvent
- touchInfos {touchIdentifier,x,y}
- this Entity
Add an onTouchstart callback to this entity
.pin( x,y )
- optional x,y
- added by topheman
Pins an entity to the world
.position( [value] )
- value {x,y}
- return {x,y}
get or set entity position
.restitution( [value] )
- value number
- return number
get or set entity restitution (bounciness)
.rotation( [value] )
- value degrees
- return degrees
get or set entity rotation
.setForce( name, power, degrees )
- name of force
- power of force
- degrees direction of force
Apply a constant force on this Entity. Can be removed later
using clearForce.
.setVelocity( name, power, degrees )
- name of velocity
- power of velocity
- degrees direction of velocity
Continuously override velocity of this Entity. Can be removed later
using clearVelocity. Usually you probably want setForce or applyImpulse.
.sprite( x,y )
Set the entity's image to the sprite at x, y on the sprite sheet.
Used only on entities with spriteSheet:true
.spriteHeight( [value] )
- value number
- return number
get or set height of a sprite on the sprite sheet
.spriteSheet( [value] )
- value boolean
- return boolean
get or set if this entity's image is a sprite sheet
.spriteWidth( [value] )
- value number
- return number
get or set width of a sprite on the sprite sheet
.touchDraggable( [options] )
-
options
- disabled {Boolean} true/false to disable/enable the draggable state
- maxTouches {Number}
-
type
{String} "regularDrag" or "eventDrag"
- regularDrag : Moves the entity with the touch (by default)
- eventDrag : doesn't move the entity, only sends you the data and callbacks
Turns an entity to draggable by touch, with multiple callbacks.
The touchDraggableInfos variable passed within the callback function contains the original position of the mouse when the drag started, its current position and the touchIdentifier (to id the touch in the event object).
The touchDraggableInfos variable passed within the callback function contains the original position of the mouse when the drag started, its current position and the touchIdentifier (to id the touch in the event object).
Examples
Without options
entity.touchDraggable();
With options
entity.touchDraggable({
start : function(e, touchDraggableInfos){
console.info('start dragging '+this.name()+' at position',{touchDraggableInfos.position.x, touchDraggableInfos.position.y});
},
drag : function(e, touchDraggableInfos){
console.info('dragging'+this.name(), 'all the touches infos active are available here : ',touchDraggableInfos);
},
stop : function(e, touchDraggableInfos){
console.info('just dragged '+this.name(), 'from', {touchDraggableInfos.originalPosition.x, touchDraggableInfos.originalPosition.y}, 'to', {touchDraggableInfos.position.x, touchDraggableInfos.position.y});
},
touchadd : function(e, touchDraggableInfos, totalTouches){
console.info('a touch has been made while dragging at this position ',{touchDraggableInfos.position.x, touchDraggableInfos.position.y}, 'there are now '+totalTouches+' touche(s)');
},
touchremove : function(e, touchDraggableInfos, totalTouches){
console.info('a touch has been removed while dragging at this position ',{touchDraggableInfos.position.x, touchDraggableInfos.position.y}, 'there are now '+totalTouches+' touche(s) remaining on this entity');
}
});
Enable / disable
entity.touchDraggable('disable');
.unbindOnMousedown( )
- added by topheman
Removes the onMousedown callback from this entity
.unbindOnMousein( )
- added by topheman
Removes the onMousein callback from this entity
.unbindOnMousemove( )
- added by topheman
Removes the onMousemove callback from this entity
.unbindOnMouseout( )
- added by topheman
Removes the onMouseout callback from this entity
.unbindOnMouseup( )
- added by topheman
Removes the onMouseup callback from this entity
.unbindOnMousewheel( )
- added by topheman
Removes the onMousewheel callback from this entity
.unbindOnTouchend( )
- added by topheman
Removes the onTouchend callback from this entity
.unbindOnTouchmove( )
- added by topheman
Removes the onTouchmove callback from this entity
.unbindOnTouchstart( )
- added by topheman
Removes the onTouchstart callback from this entity
.unPin( )
- added by topheman
Unpins an entity from the world
World
contains a single self-contained physics simulation
.calculateWorldPositionFromPointer( [value] )
- value: {MouseEvent}|{Touch}
- return: {x,y}
- added by topheman
Returns the position in the world from the position of the mouse or a touch
.camera( [value] )
- value {x,y}
- return {x,y}
get or set position of camera
.canvasPositionAt( )
- return {x,y}
Get a canvas position for a corresponding world position. Useful
for custom rendering in onRender. Respects world scale and camera position.
.cleanup( options )
- options The same kind of options you passed when you created the world. Warn : disableTouchEvents, disableMouseEvents and preventScroll won't be effective (you can't add/remove this kind of listeners after creating the world)
- added by topheman
Removes all the entities, all the handlers (even the world handlers such as mouse/touch Pan/wheelZoom) while keeping your boundaries (if any) in options
Usefull when you have multiple levels
Usefull when you have multiple levels
.createEntity( options )
-
options
- name of this entity
- x starting x coordinate for the center of the new entity
- y starting y coordinate for the center of the new entity
- type 'dynamic' or 'static'. static objects can't move
- shape 'square' or 'circle' or 'polygon'
- height for box (default 1)
- width for box (default 1)
- radius for circle (default 1)
- points for polygon [{x,y}, {x,y}, {x,y}] must go clockwise must be convex
- density (default 2)
- friction (default 1)
- restitution or bounciness (default .2)
- active (default true) participates in collisions and dynamics
- rotation (default 0) initial rotation in degrees
- fixedRotation (default false) prevent entity from rotating
- bullet (default false) perform expensive continuous collision detection
- maxVelocityX Prevent entity from moving too fast either left or right
- maxVelocityY Prevent entity from moving too fast either up or down
- image file for rendering
- imageOffsetX (default 0) for image
- imageOffsetY (default 0) for image
- imageStretchToFit (default false) for image
- spriteSheet Image is a sprite sheet (default false)
- spriteWidth Used with spriteSheet (default 16)
- spriteHeight Used with spriteSheet (default 16)
- spriteX Used with spriteSheet (default 0)
- spriteY Used with spriteSheet (default 0)
- color CSS color for rendering if no image is given (default 'gray')
- borderColor CSS color for rendering the shape's border (default 'black')
- borderWidth Width of the border. The border does not impact physics. (default 1)
- draw custom draw function, params are context, x, and y
- init a function that is run when the entity is created
- onKeyDown keydown event handler
- onKeyUp keyup event handler
- onMousedown mousedown event handler
- onMouseup mouseup event handler
- onMousemove mousemove event handler
- onMousein mousein event handler
- onMouseout mouseout event handler
- onMousewheel mousewheel event handler
- onTouchstart touchstart event handler
- onTouchend touchend event handler
- onTouchmove touchmove event handler
- onStartContact start contact event handler
- onFinishContact finish contact event handler
- onImpact impact event handler
- onRender event handler on render
- onTick event handler on tick
Example
var player = world.createEntity({
name: "player",
shape: "circle",
radius: 2
});
Templates
You can pass multiple options objects. This allows for "templates" with reusable defaults:var redCircleTemplate = {color: "red", shape: "circle", radius: 3};
world.createEntity(redCircleTemplate, {x: 5, y: 5});
world.createEntity(redCircleTemplate, {x: 10, y: 5});
The options objects on the right take precedence.
Dollar Properties
You can provide options that start with a $ like this:var ball = world.createEntity({color: "red", $customValue: 15});
These are passed onto the resulting entity as they are:
ball.$customValue === 15
This allows you to provide your own custom methods and properties..createJoint( entity1, entity2, [options] )
- entity1 Entity on one side of the joint
- entity2 Entity on the other side of the joint
-
options
- enableMotor (default false)
-
type
one of
- distance these entities will always remain the same distance apart
- revolute
- gear
- friction
- prismatic
- weld
- pulley
- mouse
- line
Experimental joint support.
See box2d documentation for more
info.
.find( x1, y1, x2, y2 )
- x1 upper left of query box
- y1 upper left of query box
- x2 lower right of query box
- y2 lower right of query box
- return array of Entities. may be empty
find Entities in a given query box
.getEntityById( entityId )
- return Entity
- added by topheman
returns the Entity of the id entityId
.getEntityByName( entityName )
- return Entity
- added by topheman
returns the Entity of the name entityName
.getEntityByPosition( x,y )
- x
- y
- return Entity
- added by topheman
returns the Entity at a given point (more accurate than .find())
.gravity( [value] )
- value: {x,y}
- return: {x,y}
get or set the world's gravity
.isMousePanning( )
Returns true if the world is panning
.isMousewheelZoomEnabled( )
- added by topheman
Returns true if mouseWheelZoom is enabled
.isTouchPanEnabled( )
- added by topheman
Returns true if touchPan is enabled
.mousePan( [options] )
-
options
- disabled {Boolean} true/false to disable/enable the draggable state
- multiplier {Number} 1 by default
- excludeEntityIds [Ids ...] Ids of entities (optional)
- start function(e,viewportInfos)
- drag function(e,viewportInfos)
- stop function(e,viewportInfos)
Enables pan with the mouse, on the world
The viewportInfos variable passed within the callback function contains the original viewport parameters when the drag started, and the current viewport parameters at the time of your callback.
Draggable entities are excluded by default (pan will not trigger if you click on it), you exclude other entities in the "excludeEntityIds" array (if you have special behaviours on them that would mess with the pan for example)
The viewportInfos variable passed within the callback function contains the original viewport parameters when the drag started, and the current viewport parameters at the time of your callback.
Draggable entities are excluded by default (pan will not trigger if you click on it), you exclude other entities in the "excludeEntityIds" array (if you have special behaviours on them that would mess with the pan for example)
Examples
Without options
world.mousePan();
With options
world.mousePan({
start:function(e,viewportInfos){
console.info('pan-start',viewportInfos);
},
drag:function(e,viewportInfos){
console.info('pan-drag',e,viewportInfos);
},
stop:function(e,viewportInfos){
console.info('pan-stop',e,viewportInfos);
},
excludeEntityIds:[
2,5
]
});
Enable / disable
world.mousePan('disable');
world.mousePan('enable');
Exclude / include entities by their ids
world.mousePan('exclude',2);
world.mousePan('include',4);
world.mousePan('exclude',[7,8,12]);
.mousewheelZoom( [options] )
-
options
- disabled {Boolean} true/false
- step {Number} 0.1 by default (how much you scale in/out at each wheel event)
Enables zooming with the mouse wheeling
.onMousedown( callback )
-
callback
function(e,mouseInfos)
- e MouseEvent
- mouseInfos {Entity,x,y}
- this World
Add an onMousedown callback to the World
.onMousein( callback )
-
callback
function(e,mouseInfos)
- e MouseEvent
- mouseInfos {Entity,x,y}
- this World
Add an onMousein callback to the World
.onMousemove( callback )
-
callback
function(e,mouseInfos)
- e MouseEvent
- mouseInfos {Entity,x,y}
- this World
Add an onMousemove callback to the World
.onMouseout( callback )
-
callback
function(e,mouseInfos)
- e MouseEvent
- mouseInfos {Entity,x,y}
- this World
Add an onMouseout callback to the World
.onMouseup( callback )
-
callback
function(e,mouseInfos)
- e MouseEvent
- mouseInfos {Entity,x,y}
- this World
Add an onMouseup callback to the World
.onMousewheel( callback )
-
callback
function(e,mousewheelInfos)
- e MouseEvent
-
mousewheelInfos
- x
- y
- delta : -1 or 1
- entity : Entity
Add an onMousewheel callback to the World
.onRender( callback )
-
callback
function( context )
- context canvas context for rendering
- this World
Add an onRender callback to the World
This is useful for custom rendering. For example, to draw text
on every frame:
Multiple onRender callbacks can be added, and they can be removed with unbindOnRender.
world.onRender(function(ctx) {
ctx.fillText("Score: " + score, 10, 10);
});
This callback occurs after all entities have been rendered on the
frame.
Multiple onRender callbacks can be added, and they can be removed with unbindOnRender.
.onTick( callback )
-
callback
function()
- this World
Add an onTick callback to the World
Ticks are periodic events that happen independant of rendering. You can use ticks as your "game loop". The default tick frequency is 50 milliseconds, and it can be set as an option when creating the world.
Multiple onTick callbacks can be added, and they can be removed with unbindOnTick.
Ticks are periodic events that happen independant of rendering. You can use ticks as your "game loop". The default tick frequency is 50 milliseconds, and it can be set as an option when creating the world.
Multiple onTick callbacks can be added, and they can be removed with unbindOnTick.
.onTouchend( callback )
-
callback
function(e,touchInfos)
- e TouchEvent
- touchInfos [{Entity,touchIdentifier,x,y}]
- this World
Add an onTouchend callback to the World
.onTouchmove( callback )
-
callback
function(e,touchInfos)
- e TouchEvent
- touchInfos [{Entity,touchIdentifier,x,y}]
- this World
Add an onTouchmove callback to the World
.onTouchstart( callback )
-
callback
function(e,touchInfos)
- e TouchEvent
- touchInfos [{Entity,touchIdentifier,x,y}]
- this World
Add an onTouchstart callback to the World
.pause( )
- added by topheman
Stops or resumes the box2d engine (the animation loops keeps going on - i.e. your specific renderers on the canvas ctx will keep animate)
.scale( [value] )
- value number
- return number
get or set the scale for rendering in pixels / meter
.touchPan( [options] )
-
options
- disabled {Boolean} true/false to disable/enable the draggable state
- multiplier {Number} 1 by default
- allowPinch {Boolean} true by default
- triggerWorldEvents {Boolean} true by default
- excludeEntityIds [Ids ...] Ids of entities (optional)
- start function(e,viewportInfos)
- drag function(e,viewportInfos)
- stop function(e,viewportInfos)
- startPinching function(e,viewportInfos)
- stopPinching function(e,viewportInfos)
Enables pan and pinch with touch, on the world.
The viewportInfos variable passed within the callback function contains the original viewport parameters when the drag started, and the current viewport parameters at the time of your callback.
Draggable entities are excluded by default (pan will not trigger if you click on it), you exclude other entities in the "excludeEntityIds" array (if you have special behaviours on them that would mess with the pan for example)
You can choose not to trigger the events you added to the world by flagging triggerWorldEvents = false
You can choose to disable the pinching by flagging allowPinch = false
The viewportInfos variable passed within the callback function contains the original viewport parameters when the drag started, and the current viewport parameters at the time of your callback.
Draggable entities are excluded by default (pan will not trigger if you click on it), you exclude other entities in the "excludeEntityIds" array (if you have special behaviours on them that would mess with the pan for example)
You can choose not to trigger the events you added to the world by flagging triggerWorldEvents = false
You can choose to disable the pinching by flagging allowPinch = false
Examples
Without options
world.touchPan();
With options
world.touchPan({
start:function(e,viewportInfos){
console.info('pan-start',viewportInfos);
},
drag:function(e,viewportInfos){
console.info('pan-drag',e,viewportInfos);
},
stop:function(e,viewportInfos){
console.info('pan-stop',e,viewportInfos);
},
startPinching:function(e,viewportInfos){
console.info('pan+pinching started',e,viewportInfos);
},
stopPinching:function(e,viewportInfos){
console.info('pan+pinching stopped',e,viewportInfos);
},
excludeEntityIds:[
2,5
],
multiplier:1.2 //(default = 1)
});
Enable / disable
world.touchPan('disable');
world.touchPan('enable');
Exclude / include entities by their ids
world.touchPan('exclude',2);
world.touchPan('include',4);
world.touchPan('exclude',[7,8,12]);
.unbindOnMousedown( )
- added by topheman
Removes the onMousedown callback from this World
.unbindOnMousein( )
- added by topheman
Removes the onMousein callback from this World
.unbindOnMousemove( )
- added by topheman
Removes the onMousemove callback from this World
.unbindOnMouseout( )
- added by topheman
Removes the onMouseout callback from this World
.unbindOnMouseup( )
- added by topheman
Removes the onMouseup callback from this World
.unbindOnMousewheel( )
- added by topheman
Removes the onMousewheel callback from this World
.unbindOnRender( )
- callback callback
If the provided function is currently an onRender callback for this
World, it is removed.
.unbindOnTick( )
- callback callback
If the provided function is currently an onTick callback for this
World, it is removed.
.unbindOnTouchend( )
- added by topheman
Removes the onTouchend callback from this World
.unbindOnTouchmove( )
- added by topheman
Removes the onTouchmove callback from this World
.unbindOnTouchstart( )
- added by topheman
Removes the onTouchstart callback from this World
.viewport.centerTo( {x,y} or Entity )
- return viewport
-
viewportInfos
- x
- y
- width
- height
- scale
Centers the viewport to {x,y} - and adjust scale if necessary, according to the boundaries of the world
.viewport.centerToStage( )
- return Boolean
- added by topheman
Centers the viewport to the center of the boundaries of the world - and adjust scale if necessary
Does nothing if no boundaries
Called on init if there are boundaries
Does nothing if no boundaries
Called on init if there are boundaries
.viewport.checkBoundaries( viewport )
- return viewportInfos
-
viewportInfos
- x
- y
- width
- height
- scale
- outOfBounds true if the viewport needs any changes (so if it needs to apply world.camera() and world.scale())
Returns a viewport that fits inside the boundaries of the world
.viewport.focusAll( )
- deprecated not sure to rely on
- return viewportInfos
-
viewportInfos
- x
- y
- width
- height
- scale
Adjust the camera to see all the objects present in the world and centers the camera
.viewport.getCurrentWindowInfos( )
- return viewportInfos
-
viewportInfos
- x
- y
- width
- height
- scale
Returns the position/size/scale the of the current viewport
.viewport.getMaxWindowInfos( forceCurrentRatio )
- deprecated not sure to rely on
- forceCurrentRatio true will force with the current ratio of the canvas
- return viewportInfos
-
viewportInfos
- x
- y
- width
- height
- scale
Returns the position/size/scale of the map that would cover all the objects present in the world
.viewport.getScaledWindowInfos( newScale )
- newScale New scale to apply
- overrideCurrentViewport Object typeof viewportInfos, to override the currentViewport (to apply this method to this "overrideCurrentViewport")
- preventLoop Boolean prevent infinite loops
- return viewportInfos
-
viewportInfos
- x
- y
- width
- height
- scale
Returns the position/size/scale the of the rescaled viewport, according to the boundaries (used by scaleTo)
.viewport.getWindowInfosCenterTo( position )
- position {x,y}
- overrideCurrentViewport Object typeof viewportInfos, to override the currentViewport (to apply this method to this "overrideCurrentViewport")
- preventLoop Boolean prevent infinite loops
- return viewportInfos
-
viewportInfos
- x
- y
- width
- height
- scale
Returns a viewport rescaled and repositionned, centered on {x,y}, according to the boundaries (used by centerTo)
.viewport.isRestricted( )
- return Boolean
- added by topheman
Returns true if the world is restricted with boundaries
.viewport.scaleTo( scale )
- return viewport
-
viewportInfos
- x
- y
- width
- height
- scale
Rescales the viewport, according to the boundaries of the world