From 8b298949619bfde6195d6f9aa61edd40e76b861b Mon Sep 17 00:00:00 2001 From: Tim Martin Date: Sun, 17 May 2015 00:58:46 -0400 Subject: [PATCH] Changes to actual api docs on the site --- api/2D.html | 543 ++++++----------------------- api/Canvas.html | 45 +-- api/Collision.html | 328 +++++------------- api/Color.html | 69 ++-- api/Crafty Core.html | 582 ++++++++------------------------ api/Crafty-DOM.html | 81 +---- api/Crafty-DrawManager.html | 173 ++-------- api/Crafty-HashMap.html | 34 +- api/Crafty-addEvent.html | 43 +-- api/Crafty-asset.html | 34 +- api/Crafty-assets.html | 19 +- api/Crafty-assignColor.html | 22 +- api/Crafty-audio.html | 337 ++++-------------- api/Crafty-background.html | 23 +- api/Crafty-bind.html | 22 +- api/Crafty-c.html | 49 +-- api/Crafty-canvas.html | 44 +-- api/Crafty-circle.html | 70 +--- api/Crafty-clone.html | 16 +- api/Crafty-device.html | 110 ++---- api/Crafty-diamondIso.html | 70 +--- api/Crafty-e.html | 36 +- api/Crafty-eventObject.html | 20 +- api/Crafty-extend.html | 12 +- api/Crafty-frame.html | 13 +- api/Crafty-getVersion.html | 19 +- api/Crafty-image_whitelist.html | 58 ++-- api/Crafty-init.html | 26 +- api/Crafty-isPaused.html | 14 +- api/Crafty-isometric.html | 164 ++------- api/Crafty-keydown.html | 23 +- api/Crafty-keys.html | 193 ++++++----- api/Crafty-loader.html | 118 +++---- api/Crafty-map.html | 121 ++----- api/Crafty-math-Matrix2D.html | 132 ++++++++ api/Crafty-math-Vector2D.html | 155 +++++++++ api/Crafty-math.Matrix2D.html | 338 ------------------- api/Crafty-math.Vector2D.html | 469 ------------------------- api/Crafty-math.html | 284 ++++------------ api/Crafty-mouseButtons.html | 19 +- api/Crafty-mouseDispatch.html | 36 +- api/Crafty-one.html | 22 +- api/Crafty-paths.html | 44 +-- api/Crafty-pause.html | 26 +- api/Crafty-pixelart.html | 38 +-- api/Crafty-polygon.html | 74 ++-- api/Crafty-removeAssets.html | 55 ++- api/Crafty-removeEvent.html | 24 +- api/Crafty-scene.html | 80 ++--- api/Crafty-settings.html | 72 +--- api/Crafty-sprite.html | 44 +-- api/Crafty-stage.html | 61 +--- api/Crafty-stop.html | 21 +- api/Crafty-support.html | 117 +------ api/Crafty-timer.html | 93 +---- api/Crafty-touchDispatch.html | 14 +- api/Crafty-trigger.html | 20 +- api/Crafty-unbind.html | 36 +- api/Crafty-uniqueBind.html | 22 +- api/Crafty-viewport.html | 297 ++++------------ api/Crafty.html | 29 +- api/DOM.html | 129 ++----- api/DebugCanvas.html | 63 +--- api/DebugPolygon.html | 29 +- api/DebugRectangle.html | 34 +- api/Delay.html | 105 ++---- api/Draggable.html | 126 ++----- api/Fourway.html | 29 +- api/Gravity.html | 78 +---- api/HTML.html | 88 +---- api/Image.html | 50 +-- api/Keyboard.html | 38 +-- api/KeyboardEvent.html | 43 +-- api/Model.html | 75 ++-- api/Mouse.html | 87 ++--- api/Multiway.html | 90 +---- api/Particles.html | 88 ++--- api/SolidHitBox.html | 14 +- api/Sprite.html | 81 +---- api/SpriteAnimation.html | 315 ++++------------- api/Storage.html | 94 ++---- api/Text.html | 147 ++------ api/Tween.html | 78 +---- api/Twoway.html | 34 +- api/VisibleMBR.html | 14 +- api/WiredHitBox.html | 14 +- api/events.html | 141 +------- api/index.html | 9 +- craftyjs-site.css | 238 ++++++++++--- index.html | 23 +- source/index.html | 29 +- source/less/neo-doc.less | 171 ---------- 92 files changed, 2198 insertions(+), 6509 deletions(-) create mode 100644 api/Crafty-math-Matrix2D.html create mode 100644 api/Crafty-math-Vector2D.html delete mode 100644 api/Crafty-math.Matrix2D.html delete mode 100644 api/Crafty-math.Vector2D.html delete mode 100644 source/less/neo-doc.less diff --git a/api/2D.html b/api/2D.html index 3d72d05..4834440 100644 --- a/api/2D.html +++ b/api/2D.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - 2D @@ -53,99 +53,79 @@
-
- - -

2D

-

Component for any entity that has a position on the stage.

-

Events

-
Move [Old position: { _x:Number, _y:Number, _w:Number, _h:Number }]
when the entity has moved
-
Invalidate
when the entity needs to be redrawn
-
Rotate [Data: { cos:Number, sin:Number, deg:Number, rad:Number, o: {x:Number, y:Number}}]
when the entity is rotated
-

Properties and Methods

- -
- -Back to top

.x

-

The x position on the stage. When modified, will automatically be redrawn. -Is actually a getter/setter so when using this value for calculations and not modifying it, -use the ._x property.

- -

See Also

- - -
- - - -
- -Back to top

.y

-

The y position on the stage. When modified, will automatically be redrawn. -Is actually a getter/setter so when using this value for calculations and not modifying it, -use the ._y property.

- -

See Also

- - -
- - - -
- -Back to top

.w

-

The width of the entity. When modified, will automatically be redrawn. -Is actually a getter/setter so when using this value for calculations and not modifying it, -use the ._w property.

-

Changing this value is not recommended as canvas has terrible resize quality and DOM will just clip the image.

- -

See Also

- - -
- - - -
- -Back to top

.h

-

The height of the entity. When modified, will automatically be redrawn. +

2D

src/2D.js#L69-75

Component for any entity that has a position on the stage.

+

Events

Move [ Old position { { _x:Number, _y:Number, _w:Number, _h:Number } }]
when the entity has moved
Invalidate
when the entity needs to be redrawn
Rotate [ Data { { cos:Number, sin:Number, deg:Number, rad:Number, o: {x:Number, y:Number}} }]
when the entity is rotated

Methods and Properties

Back to top

._attr

src/2D.js#L887-891

Setter method for all 2D properties including +x, y, w, h, alpha, rotation and visible.

+
Back to top

._cascade

src/2D.js#L685-693
public void ._cascade(e)
e

An object describing the motion

+

Move or rotate the entity's children according to a certain motion. +This method is part of a function bound to "Move": It is used +internally for ensuring that when a parent moves, the child also +moves in the same way.

+
Back to top

._globalZ

src/2D.js#L173-177

When two entities overlap, the one with the larger _globalZ will be on top of the other.

+
Back to top

.alpha

src/2D.js#L156-159

Transparency of an entity. Must be a decimal value between 0.0 being fully transparent to 1.0 being fully opaque.

+
Back to top

.area

src/2D.js#L493-497
public Number .area(void)

Calculates the area of the entity

+
Back to top

.attach

src/2D.js#L721-736
public this .attach(Entity obj[, .., Entity objN])
obj

Child entity(s) to attach

+

Sets one or more entities to be children, with the current entity (this) +as the parent. When the parent moves or rotates, its children move or +rotate by the same amount. (But not vice-versa: If you move a child, it +will not move the parent.) When the parent is destroyed, its children are +destroyed.

+

For any entity, this._children is the array of its children entity +objects (if any), and this._parent is its parent entity object (if any).

+

As many objects as wanted can be attached, and a hierarchy of objects is +possible by attaching.

+
Back to top

.contains

src/2D.js#L561-571
public Boolean .contains(Number x, Number y, Number w, Number h)
x

X position of the rect

+
y

Y position of the rect

+
w

Width of the rect

+
h

Height of the rect

+
public Boolean .contains(Object rect)
rect

An object that must have the _x, _y, _w, _h values as properties.

+

Determines if the rectangle is within the current entity. If the entity is rotated, its MBR is used for the test.

+
Back to top

.detach

src/2D.js#L755-761
public this .detach([Entity obj])
obj

The entity to detach. Left blank will remove all attached entities

+

Stop an entity from following the current entity. Passing no arguments will stop +every entity attached.

+
Back to top

.flip

src/2D.js#L829-841

Events

Invalidate
when the entity has flipped
public this .flip(String dir)
dir

Flip direction

+

Flip entity on passed direction

+

Example

this.flip("X")
Back to top

.h

src/2D.js#L107-115

The height of the entity. When modified, will automatically be redrawn. Is actually a getter/setter so when using this value for calculations and not modifying it, use the ._h property.

Changing this value is not recommended as canvas has terrible resize quality and DOM will just clip the image.

- -

See Also

- - -
- - - -
- -Back to top

.z

-

The z index on the stage. When modified, will automatically be redrawn. -Is actually a getter/setter so when using this value for calculations and not modifying it, -use the ._z property.

-

A higher z value will be closer to the front of the stage. A smaller z value will be closer to the back. -A global Z index is produced based on its z value as well as the GID (which entity was created first). -Therefore entities will naturally maintain order depending on when it was created if same z value.

-

z is required to be an integer, e.g. z=11.2 is not allowed.

- -

See Also

- - -
- - - -
- -Back to top

.rotation

-

The rotation state of the entity, in clockwise degrees. +

See Also

Back to top

.intersect

src/2D.js#L503-513
public Boolean .intersect(Number x, Number y, Number w, Number h)
x

X position of the rect

+
y

Y position of the rect

+
w

Width of the rect

+
h

Height of the rect

+
public Boolean .intersect(Object rect)
rect

An object that must have the x, y, w, h values as properties

+

Determines if this entity intersects a rectangle. If the entity is rotated, its MBR is used for the test.

+
Back to top

.isAt

src/2D.js#L626-635
public Boolean .isAt(Number x, Number y)
x

X position of the point

+
y

Y position of the point

+

Determines whether a point is contained by the entity. Unlike other methods, +an object can't be passed. The arguments require the x and y value.

+

The given point is tested against the first of the following that exists: a mapArea associated with "Mouse", the hitarea associated with "Collision", or the object's MBR.

+
Back to top

.mbr

src/2D.js#L609-614
public Object .mbr()

Returns the minimum bounding rectangle. If there is no rotation +on the entity it will return the rect.

+
Back to top

.move

src/2D.js#L648-654
public this .move(String dir, Number by)
dir

Direction to move (n,s,e,w,ne,nw,se,sw)

+
by

Amount to move in the specified direction

+

Quick method to move the entity in a direction (n, s, e, w, ne, nw, se, sw) by an amount of pixels.

+
Back to top

.offsetBoundary

src/2D.js#L361-376

Extends the MBR of the entity by a specified amount.

+

Events

BoundaryOffset
when the MBR offset changes
public this .offsetBoundary(Number dx1, Number dy1, Number dx2, Number dy2)
dx1

Extends the MBR to the left by this amount

+
dy1

Extends the MBR upward by this amount

+
dx2

Extends the MBR to the right by this amount

+
dy2

Extends the MBR downward by this amount

+
public this .offsetBoundary(Number offset)
offset

Extend the MBR in all directions by this amount

+

You would most likely use this function to ensure that custom canvas rendering beyond the extent of the entity's normal bounds is not clipped.

+
Back to top

.origin

src/2D.js#L785-803
public this .origin(Number x, Number y)
x

Pixel value of origin offset on the X axis

+
y

Pixel value of origin offset on the Y axis

+
public this .origin(String offset)
offset

Combination of center, top, bottom, middle, left and right

+

Set the origin point of an entity for it to rotate around.

+

Example

this.origin("top left")
+this.origin("center")
+this.origin("bottom right")
+this.origin("middle right")

See Also

Back to top

.pos

src/2D.js#L590-598
public Object .pos(void)

Returns the x, y, w, h properties as a rect object +(a rect object is just an object with the keys _x, _y, _w, _h).

+

The keys have an underscore prefix. This is due to the x, y, w, h +properties being merely setters and getters that wrap the properties with an underscore (_x, _y, _w, _h).

+
Back to top

.rotation

src/2D.js#L133-153

The rotation state of the entity, in clockwise degrees. this.rotation = 0 sets it to its original orientation; this.rotation = 10 sets it to 10 degrees clockwise from its original orientation; this.rotation = -10 sets it to 10 degrees counterclockwise from its @@ -158,360 +138,41 @@

Events

rotation. (Numerical errors do not occur until you get to millions of degrees.)

The default is to rotate the entity around its (initial) top-left corner; use .origin() to change that.

- -

See Also

- - -
- - - -
- -Back to top

.alpha

-

Transparency of an entity. Must be a decimal value between 0.0 being fully transparent to 1.0 being fully opaque.

- - -
- - - -
- -Back to top

.visible

-

If the entity is visible or not. Accepts a true or false value. +

Back to top

.shift

src/2D.js#L665-674
public this .shift(Number x, Number y, Number w, Number h)
x

Amount to move X

+
y

Amount to move Y

+
w

Amount to widen

+
h

Amount to increase height

+

Shift or move the entity by an amount. Use negative values +for an opposite direction.

+
Back to top

.unflip

src/2D.js#L852-864

Events

Invalidate
when the entity has unflipped
public this .unflip(String dir)
dir

Unflip direction

+

Unflip entity on passed direction (if it's flipped)

+

Example

this.unflip("X")
Back to top

.visible

src/2D.js#L162-169

If the entity is visible or not. Accepts a true or false value. Can be used for optimization by setting an entities visibility to false when not needed to be drawn.

The entity will still exist and can be collided with but just won't be drawn.

- -

See Also

- - -
- - - -
- -Back to top

._globalZ

-

When two entities overlap, the one with the larger _globalZ will be on top of the other.

- -

See Also

- - -
- - - -
- -Back to top

.offsetBoundary

-

Extends the MBR of the entity by a specified amount.

-

public this .offsetBoundary(Number dx1, Number dy1, Number dx2, Number dy2)

-
-
dx1
Extends the MBR to the left by this amount
-
dy1
Extends the MBR upward by this amount
-
dx2
Extends the MBR to the right by this amount
-
dy2
Extends the MBR downward by this amount
-
- -

public this .offsetBoundary(Number offset)

-
-
offset
Extend the MBR in all directions by this amount
-
- -

You would most likely use this function to ensure that custom canvas rendering beyond the extent of the entity's normal bounds is not clipped.

- -

Events

-
BoundaryOffset
when the MBR offset changes
-
- -
- - - -
- -Back to top

.area

-

public Number .area(void)

-

Calculates the area of the entity

- - -
- - - -
- -Back to top

.intersect

-

public Boolean .intersect(Number x, Number y, Number w, Number h)

-

-

x
X position of the rect

-

y
Y position of the rect

-

w
Width of the rect

-

h
Height of the rect
-
-public Boolean .intersect(Object rect)

-

-

rect
An object that must have the x, y, w, h values as properties
-
-Determines if this entity intersects a rectangle. If the entity is rotated, its MBR is used for the test.

- - -
- - - -
- -Back to top

.within

-

public Boolean .within(Number x, Number y, Number w, Number h)

-

-

x
X position of the rect

-

y
Y position of the rect

-

w
Width of the rect

-

h
Height of the rect
-
-public Boolean .within(Object rect)

-

-

rect
An object that must have the _x, _y, _w, _h values as properties
-
-Determines if this current entity is within another rectangle.

- - -
- - - -
- -Back to top

.contains

-

public Boolean .contains(Number x, Number y, Number w, Number h)

-

-

x
X position of the rect

-

y
Y position of the rect

-

w
Width of the rect

-

h
Height of the rect
-
-public Boolean .contains(Object rect)

-

-

rect
An object that must have the _x, _y, _w, _h values as properties.
-
-Determines if the rectangle is within the current entity. If the entity is rotated, its MBR is used for the test.

- - -
- - - -
- -Back to top

.pos

-

public Object .pos(void)

-

Returns the x, y, w, h properties as a rect object -(a rect object is just an object with the keys _x, _y, _w, _h).

-

The keys have an underscore prefix. This is due to the x, y, w, h -properties being merely setters and getters that wrap the properties with an underscore (_x, _y, _w, _h).

- - -
- - - -
- -Back to top

.mbr

-

public Object .mbr()

-

Returns the minimum bounding rectangle. If there is no rotation -on the entity it will return the rect.

- - -
- - - -
- -Back to top

.isAt

-

public Boolean .isAt(Number x, Number y)

-

-

x
X position of the point

-

y
Y position of the point
-
-Determines whether a point is contained by the entity. Unlike other methods, -an object can't be passed. The arguments require the x and y value.

-

The given point is tested against the first of the following that exists: a mapArea associated with "Mouse", the hitarea associated with "Collision", or the object's MBR.

- - -
- - - -
- -Back to top

.move

-

public this .move(String dir, Number by)

-

-

dir
Direction to move (n,s,e,w,ne,nw,se,sw)

-

by
Amount to move in the specified direction
-
-Quick method to move the entity in a direction (n, s, e, w, ne, nw, se, sw) by an amount of pixels.

- - -
- - - -
- -Back to top

.shift

-

public this .shift(Number x, Number y, Number w, Number h)

-

-

x
Amount to move X

-

y
Amount to move Y

-

w
Amount to widen

-

h
Amount to increase height
-
-Shift or move the entity by an amount. Use negative values -for an opposite direction.

- - -
- - - -
- -Back to top

._cascade

-

public void ._cascade(e)

-

-

e
An object describing the motion
-
-Move or rotate the entity's children according to a certain motion. -This method is part of a function bound to "Move": It is used -internally for ensuring that when a parent moves, the child also -moves in the same way.

- - -
- - - -
- -Back to top

.attach

-

public this .attach(Entity obj[, .., Entity objN])

-

-

obj
Child entity(s) to attach
-
-Sets one or more entities to be children, with the current entity (this) -as the parent. When the parent moves or rotates, its children move or -rotate by the same amount. (But not vice-versa: If you move a child, it -will not move the parent.) When the parent is destroyed, its children are -destroyed.

-

For any entity, this._children is the array of its children entity -objects (if any), and this._parent is its parent entity object (if any).

-

As many objects as wanted can be attached, and a hierarchy of objects is -possible by attaching.

- - -
- - - -
- -Back to top

.detach

-

public this .detach([Entity obj])

-

-

obj
The entity to detach. Left blank will remove all attached entities
-
-Stop an entity from following the current entity. Passing no arguments will stop -every entity attached.

- - -
- - - -
- -Back to top

.origin

-

public this .origin(Number x, Number y)

-

-

x
Pixel value of origin offset on the X axis

-

y
Pixel value of origin offset on the Y axis
-
-public this .origin(String offset)

-

-

offset
Combination of center, top, bottom, middle, left and right
-
-Set the origin point of an entity for it to rotate around.

-

Example

- -

this.origin("top left")
-this.origin("center")
-this.origin("bottom right")
-this.origin("middle right")
-

-

See Also

- - -
- - - -
- -Back to top

.flip

-

public this .flip(String dir)

-
-
dir
Flip direction
-
- -

Flip entity on passed direction

-

Example

- -

this.flip("X")
-

-

Events

-
Invalidate
when the entity has flipped
-
- -
- - - -
- -Back to top

.unflip

-

public this .unflip(String dir)

-
-
dir
Unflip direction
-
- -

Unflip entity on passed direction (if it's flipped)

-

Example

- -

this.unflip("X")
-

-

Events

-
Invalidate
when the entity has unflipped
-
- -
- - - -
- -Back to top

._attr

-

Setter method for all 2D properties including -x, y, w, h, alpha, rotation and visible.

- - -

-
-
+
Back to top

.w

src/2D.js#L96-104

The width of the entity. When modified, will automatically be redrawn. +Is actually a getter/setter so when using this value for calculations and not modifying it, +use the ._w property.

+

Changing this value is not recommended as canvas has terrible resize quality and DOM will just clip the image.

+

See Also

Back to top

.within

src/2D.js#L532-542
public Boolean .within(Number x, Number y, Number w, Number h)
x

X position of the rect

+
y

Y position of the rect

+
w

Width of the rect

+
h

Height of the rect

+
public Boolean .within(Object rect)
rect

An object that must have the _x, _y, _w, _h values as properties

+

Determines if this current entity is within another rectangle.

+
Back to top

.x

src/2D.js#L78-84

The x position on the stage. When modified, will automatically be redrawn. +Is actually a getter/setter so when using this value for calculations and not modifying it, +use the ._x property.

+

See Also

Back to top

.y

src/2D.js#L87-93

The y position on the stage. When modified, will automatically be redrawn. +Is actually a getter/setter so when using this value for calculations and not modifying it, +use the ._y property.

+

See Also

Back to top

.z

src/2D.js#L118-130

The z index on the stage. When modified, will automatically be redrawn. +Is actually a getter/setter so when using this value for calculations and not modifying it, +use the ._z property.

+

A higher z value will be closer to the front of the stage. A smaller z value will be closer to the back. +A global Z index is produced based on its z value as well as the GID (which entity was created first). +Therefore entities will naturally maintain order depending on when it was created if same z value.

+

z is required to be an integer, e.g. z=11.2 is not allowed.

+

See Also

diff --git a/api/Canvas.html b/api/Canvas.html index ea6dac1..cefac50 100644 --- a/api/Canvas.html +++ b/api/Canvas.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Canvas @@ -53,41 +53,20 @@
-
- - -

Canvas

-

When this component is added to an entity it will be drawn to the global canvas element. The canvas element (and hence all Canvas entities) is always rendered below any DOM entities.

+ +

Canvas

src/canvas.js#L4-19

Events

Draw [ Data { {type: "canvas", pos, co, ctx} }]
when the entity is ready to be drawn to the stage
NoCanvas
if the browser does not support canvas

When this component is added to an entity it will be drawn to the global canvas element. The canvas element (and hence all Canvas entities) is always rendered below any DOM entities.

Crafty.canvas.init() will be automatically called if it is not called already to initialize the canvas element.

Create a canvas entity like this

-
var myEntity = Crafty.e("2D, Canvas, Color")
-     .color("green")
-     .attr({x: 13, y: 37, w: 42, h: 42});
-
-

Events

-
Draw [Data: {type: "canvas", pos, co, ctx}]
when the entity is ready to be drawn to the stage
-
NoCanvas
if the browser does not support canvas
-

Properties and Methods

- -
- -Back to top

.draw

-

public this .draw([[Context ctx, ]Number x, Number y, Number w, Number h])

-
-
ctx
Canvas 2D context if drawing on another canvas is required
-
x
X offset for drawing a segment
-
y
Y offset for drawing a segment
-
w
Width of the segment to draw
-
h
Height of the segment to draw
-
- -

Method to draw the entity on the canvas element. Can pass rect values for redrawing a segment of the entity.

- - -

-
-
+
var myEntity = Crafty.e("2D, Canvas, Color")
+     .color("green")
+     .attr({x: 13, y: 37, w: 42, h: 42});

Methods and Properties

Back to top

.draw

src/canvas.js#L52-62
public this .draw([[Context ctx, ]Number x, Number y, Number w, Number h])
ctx

Canvas 2D context if drawing on another canvas is required

+
x

X offset for drawing a segment

+
y

Y offset for drawing a segment

+
w

Width of the segment to draw

+
h

Height of the segment to draw

+

Method to draw the entity on the canvas element. Can pass rect values for redrawing a segment of the entity.

+
diff --git a/api/Collision.html b/api/Collision.html index d091187..790a690 100644 --- a/api/Collision.html +++ b/api/Collision.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Collision @@ -53,12 +53,9 @@
-
- - -

Collision

-

Component to detect collision between any two convex polygons.

+ +

Collision

src/collision.js#L5-23

Events

HitOn [ Data { { hitData } }]
Triggered when collisions occur. Will not trigger again until collisions of this type cease, or an event is requested once more (using `resetHitChecks(component)`).
HitOff [ Data { { componentName } }]
Triggered when collision with a specific component type ceases

Component to detect collision between any two convex polygons.

If collision checks are registered for multiple component and collisions with multiple types occur simultaniously, each collision will cause an individual event to fire.

@@ -66,261 +63,112 @@ If you wish to preserve the data, make a copy of it.

For a description of collision event data (hitData above), see the documentation for .hit().

- -

Events

-
HitOn [Data: { hitData }]
Triggered when collisions occur. Will not trigger again until collisions of this type cease, or an event is requested once more (using resetHitChecks(component)).
-
HitOff [Data: { componentName }]
Triggered when collision with a specific component type ceases
-
-

See Also

-

Properties and Methods

- -
- -Back to top

.init

-

Set up collision handling.

-

By default, the collision hitbox will match the dimensions (x, y, w, h) and rotation of the object.

-

Note: If the entity this component is applied to does not have its -dimensions set the default hit area will not be set properly.

- - -
- - - -
- -Back to top

.collision

-

public this .collision([Crafty.polygon polygon])

-
-
polygon
Crafty.polygon object that will act as the hit area.
-
- -

public this .collision(Array point1, .., Array pointN)

-
-
point#
Array of [x, y] coordinate pairs to generate a hit area polygon.
-
- -

Constructor that takes a polygon or array of points to use as the hit area, -with points being relative to the object's position in its unrotated state.

-

The hit area must be a convex shape and not concave for collision detection to work properly.

-

If no parameter is passed, the x, y, w, h properties of the entity will be used, and the hitbox will be resized when the entity is.

-

If a hitbox is set that is outside of the bounds of the entity itself, there will be a small performance penalty as it is tracked separately.

-

Example

- -

Crafty.e("2D, Collision").collision(
-    new Crafty.polygon([50,0], [100,100], [0,100])
-);

-
Crafty.e("2D, Collision").collision([50,0], [100,100], [0,100]);
-

-

Events

-

NewHitbox [Data: Crafty.polygon]
when a new hitbox is assigned
-

-

See Also

- - -
- - - -
- -Back to top

.hit

-

public Boolean/Array hit(String component)

-

-

component
Check collision with entities that have this component
-
-applied to them.

-

-

[returns]
false if there is no collision. If a collision is detected,
-
-returns an Array of collision data objects (see below).

-

Tests for collisions with entities that have the specified component -applied to them. -If a collision is detected, data regarding the collision will be present in -the array returned by this method. -If no collisions occur, this method returns false.

-

Following is a description of a collision data object that this method may -return: The returned collision data will be an Array of Objects with the -type of collision used, the object collided and if the type used was SAT (a polygon was used as the hitbox) then an amount of overlap.

-

[{
-   obj: [entity],
-   type: ["MBR" or "SAT"],
-   overlap: [number]
-}]
-

obj: The entity with which the collision occured. -type: Collision detection method used. One of:

-
    -
  • MBR: Standard axis aligned rectangle intersection (.intersect in the 2D component).
    • -
  • SAT: Collision between any two convex polygons. Used when both colliding entities have the Collision component applied to them. -overlap: If SAT collision was used, this will signify the overlap percentage between the colliding entities.
    • -
- -

See Also

- - -
- - - -
- -Back to top

.onHit

-

public this .onHit(String component, Function hit[, Function noHit])

-
-
component
Component to check collisions for.
-
hit
Callback method to execute upon collision with component. Will be passed the results of the collision check in the same format documented for hit().
-
noHit
Callback method executed once as soon as collision stops.
-
- -

Creates an EnterFrame event calling .hit() each frame. When a collision is detected the callback will be invoked. -Note that the hit callback will be invoked every frame the collision is active, not just the first time the collision occurs. -If you want more fine-grained control consider using .checkHits or .hit.

- -

See Also

- - -
- - - -
- -Back to top

._createCollisionHandler

-

public void .checkHits(String component, Object collisionData)

-

-

component
The name of the component for which this handler
-
-checks for collisions.

-

-

collisionData
Collision data object used to track collisions with
-
-the specified component.

+

Methods and Properties

Back to top

._createCollisionHandler

src/collision.js#L343-355
public void .checkHits(String component, Object collisionData)
component

The name of the component for which this handler

+

checks for collisions.

+
collisionData

Collision data object used to track collisions with

+

the specified component.

This is a helper method for creating collisions handlers set up by .checkHits(...). Do not call this directly.

- -

See Also

- - -

-
- -Back to top

.checkHits

-

public this .checkHits(String componentList)

-
-
componentList
A comma seperated list of components to check for collisions with.
-
-public this .checkHits(String component1[, .., String componentN]) - -
-
component#
A component to check for collisions with.
-
- -

Performs collision checks against all entities that have at least one of +

See Also

Back to top

.checkHits

src/collision.js#L377-415
public this .checkHits(String componentList)
componentList

A comma seperated list of components to check for collisions with.

+
public this .checkHits(String component1[, .., String componentN])
component#

A component to check for collisions with.

+

Performs collision checks against all entities that have at least one of the components specified when calling this method. If collisions occur, a "HitOn" event containing the collision information will be fired for the entity on which this method was invoked. See the documentation for .hit() for a description of collision data contained in the event. When a collision that was reported ends, a corresponding "HitOff" event -will be fired.

-

Calling this method more than once for the same component type will not -cause redundant hit checks.

-

Note: Hit checks are performed upon entering each new frame (using +will be fired.

+

Calling this method more than once for the same component type will not +cause redundant hit checks.

+

Note: Hit checks are performed upon entering each new frame (using the EnterFrame event). It is entirely possible for object to move in said frame after the checks were performed (even if the more is the result of EnterFrame, as handlers run in no particular order). In such a case, the hit events will not fire until the next check is performed in -the following frame.

-

Example

- -

Crafty.e("2D, Collision")
-    .checkHits('Solid') // check for collisions with entities that have the Solid component in each frame
-    .bind("HitOn", function(hitData) {
-        console.log("Collision with Solid entity occurred for the first time.");
+the following frame.

+
Example
Crafty.e("2D, Collision")
+    .checkHits('Solid') // check for collisions with entities that have the Solid component in each frame
+    .bind("HitOn", function(hitData) {
+        console.log("Collision with Solid entity occurred for the first time.");
     })
-    .bind("HitOff", function(comp) {
-        console.log("Collision with Solid entity ended.");
-    });
-

-
See Also

-
-
-

-
-
-
-

-
-Back to top
.ignoreHits

-
public this .ignoreHits() 

-
public this .ignoreHits(String componentList) 

-

-
componentList
A comma seperated list of components to stop checking

-

-for collisions with.
-public this .ignoreHits(String component1[, .., String componentN]) 
-
-

-
component#
A component to stop checking for collisions with.

-

-
-
Stops checking for collisions with all, or certain, components. If called
+    .bind("HitOff", function(comp) {
+        console.log("Collision with Solid entity ended.");
+    });

See Also

Back to top

.collision

src/collision.js#L51-81

Events

NewHitbox [ Data { Crafty.polygon }]
when a new hitbox is assigned
public this .collision([Crafty.polygon polygon])
polygon

Crafty.polygon object that will act as the hit area.

+
public this .collision(Array point1, .., Array pointN)
point#

Array of [x, y] coordinate pairs to generate a hit area polygon.

+

Constructor that takes a polygon or array of points to use as the hit area, +with points being relative to the object's position in its unrotated state.

+

The hit area must be a convex shape and not concave for collision detection to work properly.

+

If no parameter is passed, the x, y, w, h properties of the entity will be used, and the hitbox will be resized when the entity is.

+

If a hitbox is set that is outside of the bounds of the entity itself, there will be a small performance penalty as it is tracked separately.

+

Example

Crafty.e("2D, Collision").collision(
+    new Crafty.polygon([50,0], [100,100], [0,100])
+);
+
+Crafty.e("2D, Collision").collision([50,0], [100,100], [0,100]);
Back to top

.hit

src/collision.js#L226-257
public Boolean/Array hit(String component)
component

Check collision with entities that have this component

+

applied to them.

+
[Returns]

false if there is no collision. If a collision is detected,

+

returns an Array of collision data objects (see below).

+

Tests for collisions with entities that have the specified component +applied to them. +If a collision is detected, data regarding the collision will be present in +the array returned by this method. +If no collisions occur, this method returns false.

+

Following is a description of a collision data object that this method may +return: The returned collision data will be an Array of Objects with the +type of collision used, the object collided and if the type used was SAT (a polygon was used as the hitbox) then an amount of overlap.

+
[{
+   obj: [entity],
+   type: ["MBR" or "SAT"],
+   overlap: [number]
+}]

obj: The entity with which the collision occured. +type: Collision detection method used. One of:

+
    +
  • MBR: Standard axis aligned rectangle intersection (.intersect in the 2D component).
    • +
  • SAT: Collision between any two convex polygons. Used when both colliding entities have the Collision component applied to them. +overlap: If SAT collision was used, this will signify the overlap percentage between the colliding entities.
    • +
+

See Also

Back to top

.ignoreHits

src/collision.js#L443-468
public this .ignoreHits()
public this .ignoreHits(String componentList)
componentList

A comma seperated list of components to stop checking

+

for collisions with.

+
public this .ignoreHits(String component1[, .., String componentN])
component#

A component to stop checking for collisions with.

+

Stops checking for collisions with all, or certain, components. If called without arguments, this method will cause all collision checks on the entity to cease. To disable checks for collisions with specific components, specify the components as a comma separated string or as -a set of arguments.

-

Calling this method with component names for which there are no collision -checks has no effect.

-

Example

- -
Crafty.e("2D, Collision")
-    .checkHits('Solid')
+a set of arguments.

+
Calling this method with component names for which there are no collision
+checks has no effect.

+
Example
Crafty.e("2D, Collision")
+    .checkHits('Solid')
     ...
-    .ignoreHits('Solid'); // stop checking for collisions with entities that have the Solid component
-

-
-

-
-
-
-

-
-Back to top
.resetHitChecks

-
public this .resetHitChecks() 

-
public this .resetHitChecks(String componentList) 

-

-
componentList
A comma seperated list of components to re-check

-

-for collisions with.
-public this .resetHitChecks(String component1[, .., String componentN]) 
-
-

-
component#
A component to re-check for collisions with.

-

-
-
Causes collision events to be received for collisions that are already
+    .ignoreHits('Solid'); // stop checking for collisions with entities that have the Solid component
Back to top

.init

src/collision.js#L26-34

Set up collision handling.

+

By default, the collision hitbox will match the dimensions (x, y, w, h) and rotation of the object.

+

Note: If the entity this component is applied to does not have its +dimensions set the default hit area will not be set properly.

+
Back to top

.onHit

src/collision.js#L310-323
public this .onHit(String component, Function hit[, Function noHit])
component

Component to check collisions for.

+
hit

Callback method to execute upon collision with component. Will be passed the results of the collision check in the same format documented for hit().

+
noHit

Callback method executed once as soon as collision stops.

+

Creates an EnterFrame event calling .hit() each frame. When a collision is detected the callback will be invoked. +Note that the hit callback will be invoked every frame the collision is active, not just the first time the collision occurs. +If you want more fine-grained control consider using .checkHits or .hit.

+
Back to top

.resetHitChecks

src/collision.js#L502-532
public this .resetHitChecks()
public this .resetHitChecks(String componentList)
componentList

A comma seperated list of components to re-check

+

for collisions with.

+
public this .resetHitChecks(String component1[, .., String componentN])
component#

A component to re-check for collisions with.

+

Causes collision events to be received for collisions that are already taking place (normally, an additional event would not fire before said collisions cease and happen another time). If called without arguments, this method will cause all collision checks on the entity to fire events once more. To re-check for collisions with specific components, specify the components as a comma separated string or as -a set of arguments.

-

Calling this method with component names for which there are no collision -checks has no effect.

-

Example

- -
// this example fires the HitOn event each frame the collision with the Solid entity is active, instead of just the first time the collision occurs.
-Crafty.e("2D, Collision")
-    .checkHits('Solid')
-    .bind("HitOn", function(hitData) {
-        console.log("Collision with Solid entity was reported in this frame again!");
-        this.resetHitChecks('Solid'); // fire the HitOn event in the next frame also, if the collision is still active.
-    })
-
- -
- -
-
+a set of arguments.

+

Calling this method with component names for which there are no collision +checks has no effect.

+

Example

// this example fires the HitOn event each frame the collision with the Solid entity is active, instead of just the first time the collision occurs.
+Crafty.e("2D, Collision")
+    .checkHits('Solid')
+    .bind("HitOn", function(hitData) {
+        console.log("Collision with Solid entity was reported in this frame again!");
+        this.resetHitChecks('Solid'); // fire the HitOn event in the next frame also, if the collision is still active.
+    })
diff --git a/api/Color.html b/api/Color.html index 8d2e63e..269a150 100644 --- a/api/Color.html +++ b/api/Color.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Color @@ -53,57 +53,26 @@
-
- - -

Color

-

Draw a colored rectangle.

-

Properties and Methods

-
- -Back to top

.color

-

Will assign the color and opacity, either through a string shorthand, or through explicit rgb values. -public this .color(String color[, Float strength])

-
-
color
Color of the rectangle
-
strength
the opacity of the rectangle
-
- -

public this .color(r, g, b[, strength])

-
-
r
value for the red channel
-
g
value for the green channel
-
b
value for the blue channel
-
strength
the opacity of the rectangle
-
- -

public String .color()

-
-
[returns]
A string representing the current color as a CSS property.
-
- -

Example

- -
var c = Crafty.e("2D, DOM, Color");
-c.color("#FF0000");
-c.color("red");
-c.color(255, 0, 0);
-c.color("rgb(255, 0, 0")
-

Three different ways of assign the color red.

-
var c = Crafty.e("2D, DOM, Color");
-c.color("#00FF00", 0.5);
-c.color("rgba(0, 255, 0, 0.5)");
-

Two ways of assigning a transparent green color.

- -

Events

-
Invalidate
when the color changes
-
- -

-
-
+

Color

src/color.js#L137-140

Draw a colored rectangle.

+

Methods and Properties

Back to top

.color

src/color.js#L175-208

Events

Invalidate
when the color changes

Will assign the color and opacity, either through a string shorthand, or through explicit rgb values.

+
public this .color(String color[, Float strength])
color

Color of the rectangle

+
strength

the opacity of the rectangle

+
public this .color(r, g, b[, strength])
r

value for the red channel

+
g

value for the green channel

+
b

value for the blue channel

+
strength

the opacity of the rectangle

+
public String .color()
[Returns]

A string representing the current color as a CSS property.

+

Example

var c = Crafty.e("2D, DOM, Color");
+c.color("#FF0000");
+c.color("red");
+c.color(255, 0, 0);
+c.color("rgb(255, 0, 0")

Three different ways of assign the color red.

+
var c = Crafty.e("2D, DOM, Color");
+c.color("#00FF00", 0.5);
+c.color("rgba(0, 255, 0, 0.5)");

Two ways of assigning a transparent green color.

+
diff --git a/api/Crafty Core.html b/api/Crafty Core.html index 2433f3e..c8ce184 100644 --- a/api/Crafty Core.html +++ b/api/Crafty Core.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty Core @@ -53,466 +53,156 @@
-
- - -

Crafty Core

-

Set of methods added to every single entity.

-

Events

-
NewEntityName [entity name: String]
After setting new name for entity
-
NewComponent [Component: String]
when a new component is added to the entity
-
RemoveComponent [Component: String]
when a component is removed from the entity
-
Remove
when the entity is removed by calling .destroy()
-

Properties and Methods

- -
- -Back to top

.setName

-

public this .setName(String name)

-
-
name
A human readable name for debugging purposes.
-
- -

Example

- -
this.setName("Player");
-
- -

-
- -Back to top

.addComponent

-

public this .addComponent(String componentList)

-

-

componentList
A string of components to add separated by a comma ,
-
-public this .addComponent(String Component1[, .., String ComponentN])

-

-

Component#
Component ID to add.
-
-Adds a component to the selected entities or entity.

-

Components are used to extend the functionality of entities. +

Crafty Core

src/core.js#L64-72

Events

NewEntityName [ entity name { String }]
After setting new name for entity
NewComponent [ Component { String }]
when a new component is added to the entity
RemoveComponent [ Component { String }]
when a component is removed from the entity
Remove
when the entity is removed by calling .destroy()

Set of methods added to every single entity.

+

Methods and Properties

Back to top

.addComponent

src/core.js#L195-220
public this .addComponent(String componentList)
componentList

A string of components to add separated by a comma ,

+
public this .addComponent(String Component1[, .., String ComponentN])
Component#

Component ID to add.

+

Adds a component to the selected entities or entity.

+

Components are used to extend the functionality of entities. This means it will copy properties and assign methods to -augment the functionality of the entity.

-

For adding multiple components, you can either pass a string with +augment the functionality of the entity.

+

For adding multiple components, you can either pass a string with all the component names (separated by commas), or pass each component name as -an argument.

-

If the component has a function named init it will be called.

-

If the entity already has the component, the component is skipped (nothing happens).

-

Example

- -
this.addComponent("2D, Canvas");
-this.addComponent("2D", "Canvas");
-
- -
- - - -
- -Back to top

.toggleComponent

-

public this .toggleComponent(String ComponentList)

-

-

ComponentList
A string of components to add or remove separated by a comma ,
-
-public this .toggleComponent(String Component1[, .., String componentN])

-

-

Component#
Component ID to add or remove.
-
-Add or Remove Components from an entity.

-

Example

- -
var e = Crafty.e("2D,DOM,Test");
-e.toggleComponent("Test,Test2"); //Remove Test, add Test2
-e.toggleComponent("Test,Test2"); //Add Test, remove Test2
-
var e = Crafty.e("2D,DOM,Test");
-e.toggleComponent("Test","Test2"); //Remove Test, add Test2
-e.toggleComponent("Test","Test2"); //Add Test, remove Test2
-e.toggleComponent("Test");         //Remove Test
-
- -
- - - -
- -Back to top

.requires

-

public this .requires(String componentList)

-
-
componentList
List of components that must be added
-
- -

Makes sure the entity has the components listed. If the entity does not +an argument.

+

If the component has a function named init it will be called.

+

If the entity already has the component, the component is skipped (nothing happens).

+

Example

this.addComponent("2D, Canvas");
+this.addComponent("2D", "Canvas");
Back to top

.attr

src/core.js#L406-449

Events

Change [ Data { {key: value} }]
when properties change
public this .attr(String property, Any value[, Boolean silent[, Boolean recursive]])
property

Property of the entity to modify

+
value

Value to set the property to

+
silent

If you would like to supress events

+
recursive

If you would like merge recursively

+

Use this method to set any property of the entity.

+
public this .attr(Object map[, Boolean silent[, Boolean recursive]])
map

Object where each key is the property to modify and the value as the property value

+
silent

If you would like to supress events

+
recursive

If you would like merge recursively

+

Use this method to set multiple properties of the entity.

+

Setter options: +silent: If you want to prevent it from firing events. +recursive: If you pass in an object you could overwrite sibling keys, this recursively merges instead of just merging it. This is false by default, unless you are using dot notation name.first.

+
public Any .attr(String property)
property

Property of the entity to modify

+
[Returns]

Value - the value of the property

+

Use this method to get any property of the entity. You can also retrieve the property using this.property.

+

Example

this.attr({key: "value", prop: 5});
+this.attr("key"); // returns "value"
+this.attr("prop"); // returns 5
+this.key; // "value"
+this.prop; // 5
+
+this.attr("key", "newvalue");
+this.attr("key"); // returns "newvalue"
+this.key; // "newvalue"
+
+this.attr("parent.child", "newvalue");
+this.parent; // {child: "newvalue"};
+this.attr('parent.child'); // "newvalue"
Back to top

.bind

src/core.js#L603-635
public this .bind(String eventName, Function callback)
eventName

Name of the event to bind to

+
callback

Method to execute when the event is triggered

+

Attach the current entity (or entities) to listen for an event.

+

Callback will be invoked when an event with the event name passed +is triggered. Depending on the event, some data may be passed +via an argument to the callback function.

+

The first argument is the event name (can be anything) whilst the +second argument is the callback. If the event has data, the +callback should have an argument.

+

Events are arbitrary and provide communication between components. +You can trigger or bind an event even if it doesn't exist yet.

+

Unlike DOM events, Crafty events are exectued synchronously.

+

Example

this.attr("triggers", 0); //set a trigger count
+this.bind("myevent", function() {
+    this.triggers++; //whenever myevent is triggered, increment
+});
+this.bind("EnterFrame", function() {
+    this.trigger("myevent"); //trigger myevent on every frame
+});
Back to top

.clone

src/core.js#L884-891
public Entity .clone(void)
[Returns]

Cloned entity of the current entity

+

Method will create another entity with the exact same +properties, components and methods as the current entity.

+
Back to top

.destroy

src/core.js#L933-937
public this .destroy(void)

Will remove all event listeners and delete all properties as well as removing from the stage

+
Back to top

.each

src/core.js#L805-824
public this .each(Function method)
method

Method to call on each iteration

+

Iterates over found entities, calling a function for every entity.

+

The function will be called for every entity and will pass the index +in the iteration as an argument. The context (value of this) of the +function will be the current entity in the iteration.

+

Example

Destroy every second 2D entity

+
Crafty("2D").each(function(i) {
+    if(i % 2 === 0) {
+        this.destroy();
+    }
+});
Back to top

.get

src/core.js#L837-862
public Array .get()
[Returns]

An array of entities corresponding to the active selector

+
public Entity .get(Number index)
[Returns]

an entity belonging to the current selection

+
index

The index of the entity to return. If negative, counts back from the end of the array.

+

Example

Get an array containing every "2D" entity

+
var arr = Crafty("2D").get()

Get the first entity matching the selector

+
// equivalent to Crafty("2D").get()[0], but doesn't create a new array
+var e = Crafty("2D").get(0)

Get the last "2D" entity matching the selector

+
var e = Crafty("2D").get(-1)
Back to top

.getId

src/core.js#L371-385
public Number .getId(void)

Returns the ID of this entity.

+

For better performance, simply use the this[0] property.

+

Example

Finding out the ID of an entity can be done by returning the property 0.

+
   var ent = Crafty.e("2D");
+   ent[0]; //ID
+   ent.getId(); //also ID
Back to top

.has

src/core.js#L391-400
public Boolean .has(String component)

Returns true or false depending on if the +entity has the given component.

+

For better performance, simply use the .__c object +which will be true if the entity has the component or +will not exist (or be false).

+
Back to top

.one

src/core.js#L683-693
public Number one(String eventName, Function callback)
eventName

Name of the event to bind to

+
callback

Method to execute upon event triggered

+
[Returns]

ID of the current callback used to unbind

+

Works like Crafty.bind, but will be unbound once the event triggers.

+

See Also

Back to top

.removeComponent

src/core.js#L336-352
public this .removeComponent(String Component[, soft])
component

Component to remove

+
soft

Whether to soft remove it (defaults to true)

+

Removes a component from an entity. A soft remove (the default) will only +refrain .has() from returning true. Hard will remove all +associated properties and methods.

+

Example

var e = Crafty.e("2D,DOM,Test");
+e.removeComponent("Test");        //Soft remove Test component
+e.removeComponent("Test", false); //Hard remove Test component
Back to top

.requires

src/core.js#L315-330
public this .requires(String componentList)
componentList

List of components that must be added

+

Makes sure the entity has the components listed. If the entity does not have the component, it will add it.

(In the current version of Crafty, this function behaves exactly the same as addComponent. By convention, developers have used requires for component dependencies -- i.e. to indicate specifically that one component will only work properly if another component is present -- and used addComponent in all other situations.)

- -

See Also

- - -
- - - -
- -Back to top

.removeComponent

-

public this .removeComponent(String Component[, soft])

-
-
component
Component to remove
-
soft
Whether to soft remove it (defaults to true)
-
- -

Removes a component from an entity. A soft remove (the default) will only -refrain .has() from returning true. Hard will remove all -associated properties and methods.

-

Example

- -
var e = Crafty.e("2D,DOM,Test");
-e.removeComponent("Test");        //Soft remove Test component
-e.removeComponent("Test", false); //Hard remove Test component
-
- -
- - - -
- -Back to top

.getId

-

public Number .getId(void)

-

Returns the ID of this entity.

-

For better performance, simply use the this[0] property.

-

Example

- -

Finding out the ID of an entity can be done by returning the property 0.

-
   var ent = Crafty.e("2D");
-   ent[0]; //ID
-   ent.getId(); //also ID
-
- -
- - - -
- -Back to top

.has

-

public Boolean .has(String component)

-

Returns true or false depending on if the -entity has the given component.

-

For better performance, simply use the .__c object -which will be true if the entity has the component or -will not exist (or be false).

- - -
- - - -
- -Back to top

.attr

-

public this .attr(String property, Any value[, Boolean silent[, Boolean recursive]])

-

-

property
Property of the entity to modify

-

value
Value to set the property to

-

silent
If you would like to supress events

-

recursive
If you would like merge recursively
-
-Use this method to set any property of the entity.

-

public this .attr(Object map[, Boolean silent[, Boolean recursive]])

-

-

map
Object where each key is the property to modify and the value as the property value

-

silent
If you would like to supress events

-

recursive
If you would like merge recursively
-
-Use this method to set multiple properties of the entity.

-

Setter options: -silent: If you want to prevent it from firing events. -recursive: If you pass in an object you could overwrite sibling keys, this recursively merges instead of just merging it. This is false by default, unless you are using dot notation name.first.

-

public Any .attr(String property)

-

-

property
Property of the entity to modify

-

[returns]
Value - the value of the property
-
-Use this method to get any property of the entity. You can also retrieve the property using this.property.

-

Example

- -

this.attr({key: "value", prop: 5});
-this.attr("key"); // returns "value"
-this.attr("prop"); // returns 5
-this.key; // "value"
-this.prop; // 5

-
this.attr("key", "newvalue");
-this.attr("key"); // returns "newvalue"
-this.key; // "newvalue"

-
this.attr("parent.child", "newvalue");
-this.parent; // {child: "newvalue"};
-this.attr('parent.child'); // "newvalue"
-

-

Events

-
Change [Data: {key: value}]
when properties change
-
- -
- - - -
- -Back to top

.toArray

-

public this .toArray(void)

-

This method will simply return the found entities as an array of ids. To get an array of the actual entities, use get().

- -

See Also

- - -
- - - -
- -Back to top

.timeout

-

public this .timeout(Function callback, Number delay)

-
-
callback
Method to execute after given amount of milliseconds
-
delay
Amount of milliseconds to execute the method
-
- -

The delay method will execute a function after a given amount of time in milliseconds.

-

Essentially a wrapper for setTimeout.

-

Example

- -

Destroy itself after 100 milliseconds

-
this.timeout(function() {
-this.destroy();
-}, 100);
-
- -
- - - -
- -Back to top

.bind

-

public this .bind(String eventName, Function callback)

-

-

eventName
Name of the event to bind to

-

callback
Method to execute when the event is triggered
-
-Attach the current entity (or entities) to listen for an event.

-

Callback will be invoked when an event with the event name passed -is triggered. Depending on the event, some data may be passed -via an argument to the callback function.

-

The first argument is the event name (can be anything) whilst the -second argument is the callback. If the event has data, the -callback should have an argument.

-

Events are arbitrary and provide communication between components. -You can trigger or bind an event even if it doesn't exist yet.

-

Unlike DOM events, Crafty events are exectued synchronously.

-

Example

- -

this.attr("triggers", 0); //set a trigger count
-this.bind("myevent", function() {
-    this.triggers++; //whenever myevent is triggered, increment
-});
-this.bind("EnterFrame", function() {
-    this.trigger("myevent"); //trigger myevent on every frame
-});
-

-

See Also

- - -
- - - -
- -Back to top

.uniqueBind

-

public Number .uniqueBind(String eventName, Function callback)

-
-
eventName
Name of the event to bind to
-
callback
Method to execute upon event triggered
-
[returns]
ID of the current callback used to unbind
-
- -

Works like Crafty.bind, but prevents a callback from being bound multiple times.

- -

See Also

- - -
- - - -
- -Back to top

.one

-

public Number one(String eventName, Function callback)

-
-
eventName
Name of the event to bind to
-
callback
Method to execute upon event triggered
-
[returns]
ID of the current callback used to unbind
-
- -

Works like Crafty.bind, but will be unbound once the event triggers.

- -

See Also

- - -
- - - -
- -Back to top

.unbind

-

public this .unbind(String eventName[, Function callback])

-

-

eventName
Name of the event to unbind

-

callback
Function to unbind
-
-Removes binding with an event from current entity.

-

Passing an event name will remove all events bound to -that event. Passing a reference to the callback will -unbind only that callback.

- -

See Also

- - -
- - - -
- -Back to top

.trigger

-

public this .trigger(String eventName[, Object data])

-

-

eventName
Event to trigger

-

data
Arbitrary data that will be passed into every callback as an argument
-
-Trigger an event with arbitrary data. Will invoke all callbacks with +
Back to top

.setName

src/core.js#L175-184
public this .setName(String name)
name

A human readable name for debugging purposes.

+

Example

this.setName("Player");
Back to top

.setter

src/core.js#L911-919
public this .setter(String property, Function callback)
property

Property to watch for modification

+
callback

Method to execute if the property is modified

+

Will watch a property waiting for modification and will then invoke the +given callback when attempting to modify.

+
Back to top

.timeout

src/core.js#L574-591
public this .timeout(Function callback, Number delay)
callback

Method to execute after given amount of milliseconds

+
delay

Amount of milliseconds to execute the method

+

The delay method will execute a function after a given amount of time in milliseconds.

+

Essentially a wrapper for setTimeout.

+

Example

Destroy itself after 100 milliseconds

+
this.timeout(function() {
+this.destroy();
+}, 100);
Back to top

.toArray

src/core.js#L562-568
public this .toArray(void)

This method will simply return the found entities as an array of ids. To get an array of the actual entities, use get().

+

See Also

Back to top

.toggleComponent

src/core.js#L255-276
public this .toggleComponent(String ComponentList)
ComponentList

A string of components to add or remove separated by a comma ,

+
public this .toggleComponent(String Component1[, .., String componentN])
Component#

Component ID to add or remove.

+

Add or Remove Components from an entity.

+

Example

var e = Crafty.e("2D,DOM,Test");
+e.toggleComponent("Test,Test2"); //Remove Test, add Test2
+e.toggleComponent("Test,Test2"); //Add Test, remove Test2
var e = Crafty.e("2D,DOM,Test");
+e.toggleComponent("Test","Test2"); //Remove Test, add Test2
+e.toggleComponent("Test","Test2"); //Add Test, remove Test2
+e.toggleComponent("Test");         //Remove Test
Back to top

.trigger

src/core.js#L745-759
public this .trigger(String eventName[, Object data])
eventName

Event to trigger

+
data

Arbitrary data that will be passed into every callback as an argument

+

Trigger an event with arbitrary data. Will invoke all callbacks with the context (value of this) of the current entity object.

Note: This will only execute callbacks within the current entity, no other entity.

The first argument is the event name to trigger and the optional second argument is the arbitrary event data. This can be absolutely anything.

Unlike DOM events, Crafty events are exectued synchronously.

- - -
- - - -
- -Back to top

.each

-

public this .each(Function method)

-

-

method
Method to call on each iteration
-
-Iterates over found entities, calling a function for every entity.

-

The function will be called for every entity and will pass the index -in the iteration as an argument. The context (value of this) of the -function will be the current entity in the iteration.

-

Example

- -

Destroy every second 2D entity

-
Crafty("2D").each(function(i) {
-    if(i % 2 === 0) {
-        this.destroy();
-    }
-});
-
- -
- - - -
- -Back to top

.get

-

public Array .get()

-
-
[returns]
An array of entities corresponding to the active selector
-
- -

public Entity .get(Number index)

-
-
[returns]
an entity belonging to the current selection
-
index
The index of the entity to return. If negative, counts back from the end of the array.
-
- - -

Example

- -

Get an array containing every "2D" entity

-
var arr = Crafty("2D").get()
-

Get the first entity matching the selector

-
// equivalent to Crafty("2D").get()[0], but doesn't create a new array
-var e = Crafty("2D").get(0)
-

Get the last "2D" entity matching the selector

-
var e = Crafty("2D").get(-1)
-
- -
- - - -
- -Back to top

.clone

-

public Entity .clone(void)

-
-
[returns]
Cloned entity of the current entity
-
- -

Method will create another entity with the exact same -properties, components and methods as the current entity.

- - -
- - - -
- -Back to top

.setter

-

public this .setter(String property, Function callback)

-

-

property
Property to watch for modification

-

callback
Method to execute if the property is modified
-
-Will watch a property waiting for modification and will then invoke the -given callback when attempting to modify.

- - -
- - - -
- -Back to top

.destroy

-

public this .destroy(void)

-

Will remove all event listeners and delete all properties as well as removing from the stage

- - -
- -
-
+
Back to top

.unbind

src/core.js#L705-716
public this .unbind(String eventName[, Function callback])
eventName

Name of the event to unbind

+
callback

Function to unbind

+

Removes binding with an event from current entity.

+

Passing an event name will remove all events bound to +that event. Passing a reference to the callback will +unbind only that callback.

+
Back to top

.uniqueBind

src/core.js#L665-675
public Number .uniqueBind(String eventName, Function callback)
eventName

Name of the event to bind to

+
callback

Method to execute upon event triggered

+
[Returns]

ID of the current callback used to unbind

+

Works like Crafty.bind, but prevents a callback from being bound multiple times.

+

See Also

diff --git a/api/Crafty-DOM.html b/api/Crafty-DOM.html index 031ba1b..1ff7014 100644 --- a/api/Crafty-DOM.html +++ b/api/Crafty-DOM.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.DOM @@ -53,76 +53,27 @@
-
- - -

Crafty.DOM

-

Collection of utilities for using the DOM.

-

Properties and Methods

-
- -Back to top

Crafty.DOM.window

-

Object with width and height values representing the width -and height of the window.

- - -

-
- -Back to top

Crafty.DOM.inner

-

public Object Crafty.DOM.inner(HTMLElement obj)

-
-
obj
HTML element to calculate the position
-
[returns]
Object with x key being the x position, y being the y position
-
- -

Find a DOM elements position including -padding and border.

- - -
- - - -
- -Back to top

Crafty.DOM.getStyle

-

public Object Crafty.DOM.getStyle(HTMLElement obj, String property)

-
-
obj
HTML element to find the style
-
property
Style to return
-
- -

Determine the value of a style on an HTML element. Notation can be +

Crafty.DOM

src/DOM.js#L290-294

Collection of utilities for using the DOM.

+

Methods and Properties

Back to top

Crafty.DOM.getStyle

src/DOM.js#L375-383
public Object Crafty.DOM.getStyle(HTMLElement obj, String property)
obj

HTML element to find the style

+
property

Style to return

+

Determine the value of a style on an HTML element. Notation can be in either CSS or JS.

- - -
- - - -
- -Back to top

Crafty.DOM.translate

-

public Object Crafty.DOM.translate(Number clientX, Number clientY)

-
-
clientX
clientX position in the browser screen
-
clientY
clientY position in the browser screen
-
[returns]
Object {x: ..., y: ...} with Crafty coordinates.
-
- -

The parameters clientX and clientY are pixel coordinates within the visible +

Back to top

Crafty.DOM.inner

src/DOM.js#L347-355
public Object Crafty.DOM.inner(HTMLElement obj)
obj

HTML element to calculate the position

+
[Returns]

Object with x key being the x position, y being the y position

+

Find a DOM elements position including +padding and border.

+
Back to top

Crafty.DOM.translate

src/DOM.js#L414-425
public Object Crafty.DOM.translate(Number clientX, Number clientY)
clientX

clientX position in the browser screen

+
clientY

clientY position in the browser screen

+
[Returns]

Object {x: ..., y: ...} with Crafty coordinates.

+

The parameters clientX and clientY are pixel coordinates within the visible browser window. This function translates those to Crafty coordinates (i.e., the coordinates that you might apply to an entity), by taking into account where the stage is within the screen, what the current viewport is, etc.

- - -
- -
-
+
Back to top

Crafty.DOM.window

src/DOM.js#L297-302

Object with width and height values representing the width +and height of the window.

+
diff --git a/api/Crafty-DrawManager.html b/api/Crafty-DrawManager.html index 906f4c8..2a89dc5 100644 --- a/api/Crafty-DrawManager.html +++ b/api/Crafty-DrawManager.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.DrawManager @@ -53,164 +53,41 @@
-
- - - -

Crafty.DrawManager

-

Crafty.DrawManager

-

An internal object manage objects to be drawn and implement -the best method of drawing in both DOM and canvas

-

Properties and Methods

- -
- -Back to top

Crafty.DrawManager.total2D

-

Total number of the entities that have the 2D component.

- - -

-
- -Back to top

Crafty.DrawManager.onScreen

-

public Crafty.DrawManager.onScreen(Object rect)

-
-
rect
A rectangle with field {_x: x_val, _y: y_val, _w: w_val, _h: h_val}
-
- -

Test if a rectangle is completely in viewport

- - -
- -
- -Back to top

Crafty.DrawManager.mergeSet

-

public Object Crafty.DrawManager.mergeSet(Object set)

-
-
set
an array of rectangular regions
-
- -

Merge any consecutive, overlapping rects into each other. +

Crafty.DrawManager

src/drawing.js#L112-118
Crafty.DrawManager

An internal object manage objects to be drawn and implement +the best method of drawing in both DOM and canvas

+

Methods and Properties

Back to top

Crafty.DrawManager.addCanvas

src/drawing.js#L263-269
public Crafty.DrawManager.addCanvas(ent)
ent

The entity to add

+

Add an entity to the list of Canvas objects to draw

+
Back to top

Crafty.DrawManager.addDom

src/drawing.js#L275-281
public Crafty.DrawManager.addDom(ent)
ent

The entity to add

+

Add an entity to the list of DOM object to draw

+
Back to top

Crafty.DrawManager.boundingRect

src/drawing.js#L326-333
public Crafty.DrawManager.boundingRect(set)
set

Undocumented

+
    +
  • Calculate the common bounding rect of multiple canvas entities.
    • +
  • Returns coords
    • +
+
Back to top

Crafty.DrawManager.debug

src/drawing.js#L287-290
public Crafty.DrawManager.debug()
Back to top

Crafty.DrawManager.drawAll

src/drawing.js#L296-303
public Crafty.DrawManager.drawAll([Object rect])
rect

a rectangular region {_x: x_val, _y: y_val, _w: w_val, _h: h_val}

+
    +
  • If rect is omitted, redraw within the viewport
    • +
  • If rect is provided, redraw within the rect
    • +
+
Back to top

Crafty.DrawManager.mergeSet

src/drawing.js#L233-244
public Object Crafty.DrawManager.mergeSet(Object set)
set

an array of rectangular regions

+

Merge any consecutive, overlapping rects into each other. Its an optimization for the redraw regions.

The order of set isn't strictly meaningful, but overlapping objects will often cause each other to change, and so might be consecutive.

- - -
- - - -
- -Back to top

Crafty.DrawManager.addCanvas

-

public Crafty.DrawManager.addCanvas(ent)

-
-
ent
The entity to add
-
- -

Add an entity to the list of Canvas objects to draw

- - -
- - - -
- -Back to top

Crafty.DrawManager.addDom

-

public Crafty.DrawManager.addDom(ent)

-
-
ent
The entity to add
-
- -

Add an entity to the list of DOM object to draw

- - -
- - - -
- -Back to top

Crafty.DrawManager.debug

-

public Crafty.DrawManager.debug()

- - -
- - - -
- -Back to top

Crafty.DrawManager.drawAll

-

public Crafty.DrawManager.drawAll([Object rect])

-
-
rect
a rectangular region {_x: x_val, _y: y_val, _w: w_val, _h: h_val}
-
- -
    -
  • If rect is omitted, redraw within the viewport
    • -
  • If rect is provided, redraw within the rect
    • -
- - -
- - - -
- -Back to top

Crafty.DrawManager.boundingRect

-

public Crafty.DrawManager.boundingRect(set)

-
-
set
Undocumented
-
- -
    -
  • Calculate the common bounding rect of multiple canvas entities.
    • -
  • Returns coords
    • -
- - -
- - - -
- -Back to top

Crafty.DrawManager.renderCanvas

-

public Crafty.DrawManager.renderCanvas()

-
    +
Back to top

Crafty.DrawManager.onScreen

src/drawing.js#L220-226
public Crafty.DrawManager.onScreen(Object rect)
rect

A rectangle with field {_x: x_val, _y: y_val, _w: w_val, _h: h_val}

+

Test if a rectangle is completely in viewport

+
Back to top

Crafty.DrawManager.renderCanvas

src/drawing.js#L365-375
public Crafty.DrawManager.renderCanvas()
  • Triggered by the "RenderScene" event
  • If the number of rects is over 60% of the total number of objects do the naive method redrawing Crafty.DrawManager.drawAll
  • Otherwise, clear the dirty regions, and redraw entities overlapping the dirty regions.
- -

See Also

- - -
- - - -
- -Back to top

Crafty.DrawManager.renderDOM

-

public Crafty.DrawManager.renderDOM()

-

When "RenderScene" is triggered, draws all DOM entities that have been flagged

- -

See Also

- - -
- -
-
+

See Also

Back to top

Crafty.DrawManager.renderDOM

src/drawing.js#L484-491
public Crafty.DrawManager.renderDOM()

When "RenderScene" is triggered, draws all DOM entities that have been flagged

+

See Also

Back to top

Crafty.DrawManager.total2D

src/drawing.js#L212-216

Total number of the entities that have the 2D component.

+
diff --git a/api/Crafty-HashMap.html b/api/Crafty-HashMap.html index 7bf79b7..1d9637f 100644 --- a/api/Crafty-HashMap.html +++ b/api/Crafty-HashMap.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.HashMap @@ -53,36 +53,20 @@
-
- - -

Crafty.HashMap

-

Broad-phase collision detection engine. See background information at

+ +

Crafty.HashMap

src/HashMap.js#L305-312

Broad-phase collision detection engine. See background information at

- -

See Also

-

Properties and Methods

- -
- -Back to top

Crafty.HashMap.key

-

public Object Crafty.HashMap.key(Object obj)

-

-

obj
an Object that has .mbr() or _x, _y, _w and _h.
-
-Get the rectangular region (in terms of the grid, with grid size cellsize), where the object may fall in. This region is determined by the object's bounding box. +

See Also

Methods and Properties

Back to top

Crafty.HashMap.constructor

src/HashMap.js#L10-17
public void Crafty.HashMap([cellsize])
cellsize

the cell size. If omitted, cellsize is 64.

+

Set cellsize. +And create this.map.

+
Back to top

Crafty.HashMap.key

src/HashMap.js#L315-323
public Object Crafty.HashMap.key(Object obj)
obj

an Object that has .mbr() or _x, _y, _w and _h.

+

Get the rectangular region (in terms of the grid, with grid size cellsize), where the object may fall in. This region is determined by the object's bounding box. The cellsize is 64 by default.

- -

See Also

- - -

-
-
+
diff --git a/api/Crafty-addEvent.html b/api/Crafty-addEvent.html index 98c1cfd..9e5392a 100644 --- a/api/Crafty-addEvent.html +++ b/api/Crafty-addEvent.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.addEvent @@ -53,38 +53,25 @@
-
- - -

Crafty.addEvent

-

public this Crafty.addEvent(Object ctx, HTMLElement obj, String event, Function callback)

-
-
ctx
Context of the callback or the value of this
-
obj
Element to add the DOM event to
-
event
Event name to bind to
-
callback
Method to execute when triggered
-
-

Adds DOM level 3 events to elements. The arguments it accepts are the call +

Crafty.addEvent

src/extensions.js#L134-162
public this Crafty.addEvent(Object ctx, HTMLElement obj, String event, Function callback)
ctx

Context of the callback or the value of this

+
obj

Element to add the DOM event to

+
event

Event name to bind to

+
callback

Method to execute when triggered

+

Adds DOM level 3 events to elements. The arguments it accepts are the call context (the value of this), the DOM element to attach the event to, the event name (without on (click rather than onclick)) and -finally the callback method.

-

If no element is passed, the default element will be window.document.

-

Callbacks are passed with event data.

-

Example

- -

Will add a stage-wide MouseDown event listener to the player. Will log which button was pressed -& the (x,y) coordinates in viewport/world/game space.

-

var player = Crafty.e("2D");
-    player.onMouseDown = function(e) {
-        console.log(e.mouseButton, e.realX, e.realY);
+finally the callback method.

+
If no element is passed, the default element will be window.document.

+
Callbacks are passed with event data.

+
Example
Will add a stage-wide MouseDown event listener to the player. Will log which button was pressed
+& the (x,y) coordinates in viewport/world/game space.

+
var player = Crafty.e("2D");
+    player.onMouseDown = function(e) {
+        console.log(e.mouseButton, e.realX, e.realY);
     };
-Crafty.addEvent(player, Crafty.stage.elem, "mousedown", player.onMouseDown);
-

-
See Also

-

-
+Crafty.addEvent(player, Crafty.stage.elem, "mousedown", player.onMouseDown);
diff --git a/api/Crafty-asset.html b/api/Crafty-asset.html index 598af03..06d3f5a 100644 --- a/api/Crafty-asset.html +++ b/api/Crafty-asset.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.asset @@ -53,33 +53,15 @@
-
- - -

Crafty.asset

-

public void Crafty.asset(String key, Object asset)

-

-

key
asset url.

-

asset
Audio or Image object.
-
-Add new asset to assets object.

-

public void Crafty.asset(String key)

-

-

key
asset url.
-
-Get asset from assets object.

-

Example

-

Crafty.asset(key, value);
-var asset = Crafty.asset(key); //object with key and value fields
-

-

Events

-

NewAsset [key and value of new added asset.: Object]
After setting new asset
-

-

See Also

-
-
+

Crafty.asset

src/loader.js#L65-84

Events

NewAsset [ key and value of new added asset. { Object }]
After setting new asset
public void Crafty.asset(String key, Object asset)
key

asset url.

+
asset

Audio or Image object.

+

Add new asset to assets object.

+
public void Crafty.asset(String key)
key

asset url.

+

Get asset from assets object.

+

Example

Crafty.asset(key, value);
+var asset = Crafty.asset(key); //object with key and value fields
diff --git a/api/Crafty-assets.html b/api/Crafty-assets.html index c5bff6c..4cb4f08 100644 --- a/api/Crafty-assets.html +++ b/api/Crafty-assets.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.assets @@ -53,21 +53,12 @@
-
- - -

Crafty.assets

-

An object containing every asset used in the current Crafty game. -The key is the URL and the value is the Audio or Image object.

-

If loading an asset, check that it is in this object first to avoid loading twice.

-

Example

-

var isLoaded = !!Crafty.assets["images/sprite.png"];
-

-

See Also

-
-
+

Crafty.assets

src/loader.js#L5-17

An object containing every asset used in the current Crafty game. +The key is the URL and the value is the Audio or Image object.

+

If loading an asset, check that it is in this object first to avoid loading twice.

+

Example

var isLoaded = !!Crafty.assets["images/sprite.png"];
diff --git a/api/Crafty-assignColor.html b/api/Crafty-assignColor.html index 8ae970d..f01d4c3 100644 --- a/api/Crafty-assignColor.html +++ b/api/Crafty-assignColor.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.assignColor @@ -53,21 +53,13 @@
-
- - -

Crafty.assignColor

-

Crafty.assignColor(color[, assignee])

-

-

color
a string represenation of the color to assign, in any valid HTML format

-

assignee
an object to use instead of creating one from scratch

-

[returns]
An object with _red, _green, and _blue properties assigned.
-
- Potentially with _strength representing the alpha channel. - If the assignee parameter is passed, that object will be assigned those values and returned.

-
-
+ +

Crafty.assignColor

src/color.js#L7-15
Crafty.assignColor(color[, assignee])
color

a string represenation of the color to assign, in any valid HTML format

+
assignee

an object to use instead of creating one from scratch

+
[Returns]

An object with _red, _green, and _blue properties assigned.

+
      Potentially with `_strength` representing the alpha channel.
+      If the assignee parameter is passed, that object will be assigned those values and returned.
diff --git a/api/Crafty-audio.html b/api/Crafty-audio.html index 4e75e89..3db387d 100644 --- a/api/Crafty-audio.html +++ b/api/Crafty-audio.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.audio @@ -53,292 +53,79 @@
-
- - -

Crafty.audio

-

Add sound files and play them. Chooses best format for browser support. + +

Crafty.audio

src/sound.js#L5-15

Add sound files and play them. Chooses best format for browser support. Due to the nature of HTML5 audio, three types of audio files will be required for cross-browser capabilities. These formats are MP3, Ogg and WAV. When sound was not muted on before pause, sound will be unmuted after unpause. When sound is muted Crafty.pause() does not have any effect on sound

The maximum number of sounds that can be played simultaneously is defined by Crafty.audio.maxChannels. The default value is 7.

-

Properties and Methods

- -
- -Back to top

Crafty.audio.supports

-

public this Crafty.audio.supports(String extension)

-
-
extension
A file extension to check audio support for
-
- -

Return true if the browser thinks it can play the given file type, otherwise false

- - -

-
- -Back to top

Crafty.audio.create

-

public this Crafty.audio.create(String id, String url)

-
-
id
A string to refer to sounds
-
url
A string pointing to the sound file
-
- -

Creates an audio asset with the given id and resource. Crafty.audio.add is a more flexible interface that allows cross-browser compatibility.

-

If the sound file extension is not supported, returns false; otherwise, returns the audio asset.

- - -
- - - -
- -Back to top

Crafty.audio.add

-

public this Crafty.audio.add(String id, String url)

-
-
id
A string to refer to sounds
-
url
A string pointing to the sound file
-
-public this Crafty.audio.add(String id, Array urls) - -
-
urls
Array of urls pointing to different format of the same sound, selecting the first that is playable
-
-public this Crafty.audio.add(Object map) - -
-
map
key-value pairs where the key is the id and the value is either a url or urls
-
- -

Loads a sound to be played. Due to the nature of HTML5 audio, +

Methods and Properties

Back to top

Crafty.audio.add

src/sound.js#L115-155
public this Crafty.audio.add(String id, String url)
id

A string to refer to sounds

+
url

A string pointing to the sound file

+
public this Crafty.audio.add(String id, Array urls)
urls

Array of urls pointing to different format of the same sound, selecting the first that is playable

+
public this Crafty.audio.add(Object map)
map

key-value pairs where the key is the id and the value is either a url or urls

+

Loads a sound to be played. Due to the nature of HTML5 audio, three types of audio files will be required for cross-browser capabilities. -These formats are MP3, Ogg and WAV.

-

Passing an array of URLs will determine which format the browser can play and select it over any other.

-

Accepts an object where the key is the audio name and -either a URL or an Array of URLs (to determine which type to use).

-

The ID you use will be how you refer to that sound when using Crafty.audio.play.

-

Example

- -
//adding audio from an object
+These formats are MP3, Ogg and WAV.

+
Passing an array of URLs will determine which format the browser can play and select it over any other.

+
Accepts an object where the key is the audio name and
+either a URL or an Array of URLs (to determine which type to use).

+
The ID you use will be how you refer to that sound when using Crafty.audio.play.

+
Example
//adding audio from an object
 Crafty.audio.add({
-  shoot: ["sounds/shoot.wav",
-          "sounds/shoot.mp3",
-          "sounds/shoot.ogg"]
+  shoot: ["sounds/shoot.wav",
+          "sounds/shoot.mp3",
+          "sounds/shoot.ogg"]
 });
 
-//adding a single sound
-Crafty.audio.add("walk", [
-"sounds/walk.mp3",
-"sounds/walk.ogg",
-"sounds/walk.wav"
+//adding a single sound
+Crafty.audio.add("walk", [
+"sounds/walk.mp3",
+"sounds/walk.ogg",
+"sounds/walk.wav"
 ]);
 
-//only one format
-Crafty.audio.add("jump", "sounds/jump.mp3");
-

-
-

-
-
-
-

-
-Back to top
Crafty.audio.play

-
public this Crafty.audio.play(String id) 

-
public this Crafty.audio.play(String id, Number repeatCount) 

-
public this Crafty.audio.play(String id, Number repeatCount, Number volume) 

-

-
id
A string to refer to sounds

-
repeatCount
Repeat count for the file, where -1 stands for repeat forever.

-
volume
volume can be a number between 0.0 and 1.0

-
[returns]
The audio element used to play the sound.  Null if the call failed due to a lack of open channels.

-

-
-
Will play a sound previously added by using the ID that was used in Crafty.audio.add.
-Has a default maximum of 5 channels so that the same sound can play simultaneously unless all of the channels are playing.

-
Note that the implementation of HTML5 Audio is buggy at best.

-
 Example 

-
-
Crafty.audio.play("walk");
-
-//play and repeat forever
-Crafty.audio.play("backgroundMusic", -1);
-Crafty.audio.play("explosion",1,0.5); //play sound once with volume of 50%
-

-
-

-
-
-
-

-
-Back to top
Crafty.audio.setChannels

-
public this Crafty.audio.setChannels(Number n) 

-

-
n
The maximum number of channels

-

-
-
-

-
-
-
-

-
-Back to top
Crafty.audio.remove

-
public this Crafty.audio.remove([String id]) 

-

-
id
A string to refer to sounds

-

-
-
Will stop the sound and remove all references to the audio object allowing the browser to free the memory.
-If no id is given, all sounds will be removed.

-
This function uses audio path set in Crafty.path in order to remove sound from the assets object.

-
 Example 

-
-
Crafty.audio.remove("walk");
-

-
-

-
-
-
-

-
-Back to top
Crafty.audio.stop

-
public this Crafty.audio.stop([Number ID]) 

-
Stops any playing sound. if id is not set, stop all sounds which are playing

-
 Example 

-
-
//all sounds stopped playing now
-Crafty.audio.stop();
-

-
-

-
-
-
-

-
-Back to top
Crafty.audio.toggleMute

-
public this Crafty.audio.toggleMute() 

-
Mute or unmute every Audio instance that is playing. Toggles between
-pausing or playing depending on the state.

-
 Example 

-
-
//toggle mute and unmute depending on current state
-Crafty.audio.toggleMute();
-

-
-

-
-
-
-

-
-Back to top
Crafty.audio.mute

-
public this Crafty.audio.mute() 

-
Mute every Audio instance that is playing.

-
 Example 

-
-
Crafty.audio.mute();
-

-
-

-
-
-
-

-
-Back to top
Crafty.audio.unmute

-
public this Crafty.audio.unmute() 

-
Unmute every Audio instance that is playing.

-
 Example 

-
-
Crafty.audio.unmute();
-

-
-

-
-
-
-

-
-Back to top
Crafty.audio.pause

-
public this Crafty.audio.pause(string ID) 

-

-
{string} id
The id of the audio object to pause

-

-
-
Pause the Audio instance specified by id param.

-
 Example 

-
-
Crafty.audio.pause('music');
-

-
-

-
-
-
-

-
-Back to top
Crafty.audio.unpause

-
public this Crafty.audio.unpause(string ID) 

-

-
{string} id
The id of the audio object to unpause

-

-
-
Resume playing the Audio instance specified by id param.

-
 Example 

-
-
Crafty.audio.unpause('music');
-

-
-

-
-
-
-

-
-Back to top
Crafty.audio.togglePause

-
public this Crafty.audio.togglePause(string ID) 

-

-
{string} id
The id of the audio object to pause/

-

-
-
Toggle the pause status of the Audio instance specified by id param.

-
 Example 

-
-
Crafty.audio.togglePause('music');
-

-
-

-
-
-
-

-
-Back to top
Crafty.audio.isPlaying

-
public Boolean Crafty.audio.isPlaying(string ID) 

-

-
{string} id
The id of the audio object

-
[returns]
a Boolean indicating whether the audio is playing or not

-

-
-
Check if audio with the given ID is playing or not (on at least one channel).

-
 Example 

-
-
var isPlaying = Crafty.audio.isPlaying('music');
-

-
-

-
-
-
+//only one format +Crafty.audio.add("jump", "sounds/jump.mp3");
Back to top

Crafty.audio.create

src/sound.js#L80-89
public this Crafty.audio.create(String id, String url)
id

A string to refer to sounds

+
url

A string pointing to the sound file

+

Creates an audio asset with the given id and resource. Crafty.audio.add is a more flexible interface that allows cross-browser compatibility.

+

If the sound file extension is not supported, returns false; otherwise, returns the audio asset.

+
Back to top

Crafty.audio.isPlaying

src/sound.js#L525-538
public Boolean Crafty.audio.isPlaying(string ID)
{string} id

The id of the audio object

+
[Returns]

a Boolean indicating whether the audio is playing or not

+

Check if audio with the given ID is playing or not (on at least one channel).

+

Example

var isPlaying = Crafty.audio.isPlaying('music');
Back to top

Crafty.audio.mute

src/sound.js#L413-423
public this Crafty.audio.mute()

Mute every Audio instance that is playing.

+

Example

Crafty.audio.mute();
Back to top

Crafty.audio.pause

src/sound.js#L444-456
public this Crafty.audio.pause(string ID)
{string} id

The id of the audio object to pause

+

Pause the Audio instance specified by id param.

+

Example

Crafty.audio.pause('music');
Back to top

Crafty.audio.play

src/sound.js#L190-213
public this Crafty.audio.play(String id)
public this Crafty.audio.play(String id, Number repeatCount)
public this Crafty.audio.play(String id, Number repeatCount, Number volume)
id

A string to refer to sounds

+
repeatCount

Repeat count for the file, where -1 stands for repeat forever.

+
volume

volume can be a number between 0.0 and 1.0

+
[Returns]

The audio element used to play the sound. Null if the call failed due to a lack of open channels.

+

Will play a sound previously added by using the ID that was used in Crafty.audio.add. +Has a default maximum of 5 channels so that the same sound can play simultaneously unless all of the channels are playing.

+

Note that the implementation of HTML5 Audio is buggy at best.

+

Example

Crafty.audio.play("walk");
+
+//play and repeat forever
+Crafty.audio.play("backgroundMusic", -1);
+Crafty.audio.play("explosion",1,0.5); //play sound once with volume of 50%
Back to top

Crafty.audio.remove

src/sound.js#L305-319
public this Crafty.audio.remove([String id])
id

A string to refer to sounds

+

Will stop the sound and remove all references to the audio object allowing the browser to free the memory. +If no id is given, all sounds will be removed.

+

This function uses audio path set in Crafty.path in order to remove sound from the assets object.

+

Example

Crafty.audio.remove("walk");
Back to top

Crafty.audio.setChannels

src/sound.js#L260-264
public this Crafty.audio.setChannels(Number n)
n

The maximum number of channels

+
Back to top

Crafty.audio.stop

src/sound.js#L348-360
public this Crafty.audio.stop([Number ID])

Stops any playing sound. if id is not set, stop all sounds which are playing

+

Example

//all sounds stopped playing now
+Crafty.audio.stop();
Back to top

Crafty.audio.supports

src/sound.js#L53-59
public this Crafty.audio.supports(String extension)
extension

A file extension to check audio support for

+

Return true if the browser thinks it can play the given file type, otherwise false

+
Back to top

Crafty.audio.toggleMute

src/sound.js#L391-403
public this Crafty.audio.toggleMute()

Mute or unmute every Audio instance that is playing. Toggles between +pausing or playing depending on the state.

+

Example

//toggle mute and unmute depending on current state
+Crafty.audio.toggleMute();
Back to top

Crafty.audio.togglePause

src/sound.js#L495-507
public this Crafty.audio.togglePause(string ID)
{string} id

The id of the audio object to pause/

+

Toggle the pause status of the Audio instance specified by id param.

+

Example

Crafty.audio.togglePause('music');
Back to top

Crafty.audio.unmute

src/sound.js#L428-438
public this Crafty.audio.unmute()

Unmute every Audio instance that is playing.

+

Example

Crafty.audio.unmute();
Back to top

Crafty.audio.unpause

src/sound.js#L470-482
public this Crafty.audio.unpause(string ID)
{string} id

The id of the audio object to unpause

+

Resume playing the Audio instance specified by id param.

+

Example

Crafty.audio.unpause('music');
diff --git a/api/Crafty-background.html b/api/Crafty-background.html index 75cb273..e0b10db 100644 --- a/api/Crafty-background.html +++ b/api/Crafty-background.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.background @@ -53,24 +53,15 @@
-
- - -

Crafty.background

-

public void Crafty.background(String value)

-
-
style
Modify the background with a color or image
-
-

This method is a shortcut for adding a background +

Crafty.background

src/extensions.js#L225-240
public void Crafty.background(String value)
style

Modify the background with a color or image

+

This method is a shortcut for adding a background style to the stage element, i.e. -Crafty.stage.elem.style.background = ...

-

For example, if you want the background to be white, -with an image in the center, you might use:

-
Crafty.background('#FFFFFF url(landscape.png) no-repeat center center');
-
-
+Crafty.stage.elem.style.background = ...

+

For example, if you want the background to be white, +with an image in the center, you might use:

+
Crafty.background('#FFFFFF url(landscape.png) no-repeat center center');
diff --git a/api/Crafty-bind.html b/api/Crafty-bind.html index 53f7d3c..bd373ee 100644 --- a/api/Crafty-bind.html +++ b/api/Crafty-bind.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.bind @@ -53,24 +53,14 @@
-
- - -

Crafty.bind

-

public Number bind(String eventName, Function callback)

-
-
eventName
Name of the event to bind to
-
callback
Method to execute upon event triggered
-
[returns]
callback function which can be used for unbind
-
-

Binds to a global event. Method will be executed when Crafty.trigger is used +

Crafty.bind

src/core.js#L1503-1514
public Number bind(String eventName, Function callback)
eventName

Name of the event to bind to

+
callback

Method to execute upon event triggered

+
[Returns]

callback function which can be used for unbind

+

Binds to a global event. Method will be executed when Crafty.trigger is used with the event name.

- -

See Also

-
-
+
diff --git a/api/Crafty-c.html b/api/Crafty-c.html index 3ce7d6a..c2a9a40 100644 --- a/api/Crafty-c.html +++ b/api/Crafty-c.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.c @@ -53,19 +53,13 @@
-
- - -

Crafty.c

-

public void Crafty.c(String name, Object component)

-

-

name
Name of the component

-

component
Object with the component's properties and methods
-
-Creates a component where the first argument is the ID and the second -is the object that will be inherited by entities.

-

Specifically, each time a component is added to an entity, the component properties are copied over to the entity.

+ +

Crafty.c

src/core.js#L1395-1448
public void Crafty.c(String name, Object component)
name

Name of the component

+
component

Object with the component's properties and methods

+

Creates a component where the first argument is the ID and the second +is the object that will be inherited by entities.

+

Specifically, each time a component is added to an entity, the component properties are copied over to the entity.

  • In the case of primitive datatypes (booleans, numbers, strings) the property is copied by value.
  • In the case of complex datatypes (objects, arrays, functions) the property is copied by reference and will thus reference the components' original property.
    • @@ -83,29 +77,22 @@
  • A method with the same name as the component is considered to be a constructor and is generally used when you need to pass configuration data to the component on a per entity basis.
-

Example

- -
Crafty.c("Annoying", {
-    _message: "HiHi",
-    init: function() {
-        this.bind("EnterFrame", function() { alert(this.message); });
+
Example
Crafty.c("Annoying", {
+    _message: "HiHi",
+    init: function() {
+        this.bind("EnterFrame", function() { alert(this.message); });
     },
-    annoying: function(message) { this.message = message; }
+    annoying: function(message) { this.message = message; }
 });
 
-Crafty.e("Annoying").annoying("I'm an orange...");
-
WARNING:

+Crafty.e("Annoying").annoying("I'm an orange...");

WARNING:

in the example above the field _message is local to the entity. That is, if you create many entities with the Annoying component they can all have different values for _message. That is because it is a simple value, and simple values are copied by value. If however the field had been an object or array, the value would have been shared by all entities with the component because complex types are copied by reference in javascript. This is probably not what you want and the following example demonstrates how to work around it:

-
Crafty.c("MyComponent", {
-    _iAmShared: { a: 3, b: 4 },
-    init: function() {
-        this._iAmNotShared = { a: 3, b: 4 };
+
Crafty.c("MyComponent", {
+    _iAmShared: { a: 3, b: 4 },
+    init: function() {
+        this._iAmNotShared = { a: 3, b: 4 };
     },
-});
-

-
See Also

-
-
+});

See Also

diff --git a/api/Crafty-canvas.html b/api/Crafty-canvas.html index fdad1ac..4491eb8 100644 --- a/api/Crafty-canvas.html +++ b/api/Crafty-canvas.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.canvas @@ -53,49 +53,17 @@
-
- - -

Crafty.canvas

-

Collection of methods to draw on canvas.

-

Properties and Methods

-
- -Back to top

Crafty.canvas.context

-

This will return the 2D context of the main canvas element. +

Crafty.canvas

src/canvas.js#L148-152

Collection of methods to draw on canvas.

+

Methods and Properties

Back to top

Crafty.canvas._canvas

src/canvas.js#L164-168

Main Canvas element

+
Back to top

Crafty.canvas.context

src/canvas.js#L156-161

This will return the 2D context of the main canvas element. The value returned from Crafty.canvas._canvas.getContext('2d').

- - -

-
- -Back to top

Crafty.canvas._canvas

-

Main Canvas element

- - -
- - - -
- -Back to top

Crafty.canvas.init

-

public void Crafty.canvas.init(void)

-

Creates a canvas element inside Crafty.stage.elem. Must be called +

Back to top

Crafty.canvas.init

src/canvas.js#L171-181
public void Crafty.canvas.init(void)

Events

NoCanvas
triggered if `Crafty.support.canvas` is false

Creates a canvas element inside Crafty.stage.elem. Must be called before any entities with the Canvas component can be drawn.

This method will automatically be called if no Crafty.canvas.context is found.

- -

Events

-
NoCanvas
triggered if Crafty.support.canvas is false
-
- -
- -
-
+
diff --git a/api/Crafty-circle.html b/api/Crafty-circle.html index ee4245b..95f295b 100644 --- a/api/Crafty-circle.html +++ b/api/Crafty-circle.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.circle @@ -53,62 +53,26 @@
-
- - -

Crafty.circle

-

Circle object used for hitboxes and click maps. Must pass a x, a y and a radius value.

-

Example

-
var centerX = 5,
-    centerY = 10,
-    radius = 25;
+
Crafty.circle
src/2D.js#L1192-1207
Circle object used for hitboxes and click maps. Must pass a x, a y and a radius value.

+
Example
var centerX = 5,
+    centerY = 10,
+    radius = 25;
 
-new Crafty.circle(centerX, centerY, radius);
-
When creating a circle for an entity, each point should be offset or relative from the entities x and y
+new Crafty.circle(centerX, centerY, radius);

When creating a circle for an entity, each point should be offset or relative from the entities x and y (don't include the absolute values as it will automatically calculate this).

-

Properties and Methods

- -
- -Back to top

.containsPoint

-

public Boolean .containsPoint(Number x, Number y)

-
-
x
X position of the point
-
y
Y position of the point
-
- -

Method is used to determine if a given point is contained by the circle.

-

Example

- -
var circle = new Crafty.circle(0, 0, 10);
-circle.containsPoint(0, 0); //TRUE
-circle.containsPoint(50, 50); //FALSE
-
- -

-
- -Back to top

.shift

-

public void .shift(Number x, Number y)

-
-
x
Amount to shift the x axis
-
y
Amount to shift the y axis
-
- -

Shifts the circle by the specified amount.

-

Example

- -
var circle = new Crafty.circle(0, 0, 10);
-circle.shift(5,5);
-//{x: 5, y: 5, radius: 10};
-
- -
- -
-
+

Methods and Properties

Back to top

.containsPoint

src/2D.js#L1225-1239
public Boolean .containsPoint(Number x, Number y)
x

X position of the point

+
y

Y position of the point

+

Method is used to determine if a given point is contained by the circle.

+

Example

var circle = new Crafty.circle(0, 0, 10);
+circle.containsPoint(0, 0); //TRUE
+circle.containsPoint(50, 50); //FALSE
Back to top

.shift

src/2D.js#L1250-1264
public void .shift(Number x, Number y)
x

Amount to shift the x axis

+
y

Amount to shift the y axis

+

Shifts the circle by the specified amount.

+

Example

var circle = new Crafty.circle(0, 0, 10);
+circle.shift(5,5);
+//{x: 5, y: 5, radius: 10};
diff --git a/api/Crafty-clone.html b/api/Crafty-clone.html index 3d7aa00..762248e 100644 --- a/api/Crafty-clone.html +++ b/api/Crafty-clone.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.clone @@ -53,19 +53,11 @@
- +
diff --git a/api/Crafty-device.html b/api/Crafty-device.html index 86304d2..508f66a 100644 --- a/api/Crafty-device.html +++ b/api/Crafty-device.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.device @@ -53,88 +53,36 @@
-
- - -

Crafty.device

-

Properties and Methods

-
- -Back to top

Crafty.device.deviceOrientation

-

public Crafty.device.deviceOrientation(Function callback)

-
-
callback
Callback method executed once as soon as device orientation is change
-
- -

Do something with normalized device orientation data:

-
{
-  'tiltLR'    :   'gamma the angle in degrees the device is tilted left-to-right.',
-  'tiltFB'    :   'beta the angle in degrees the device is tilted front-to-back',
-  'dir'       :   'alpha the direction the device is facing according to the compass',
-  'motUD'     :   'The angles values increase as you tilt the device to the right or towards you.'
-}
-

Example

- -
// Get DeviceOrientation event normalized data.
-Crafty.device.deviceOrientation(function(data){
-    console.log('data.tiltLR : '+Math.round(data.tiltLR)+', data.tiltFB : '+Math.round(data.tiltFB)+', data.dir : '+Math.round(data.dir)+', data.motUD : '+data.motUD+'');
-});
-

See browser support at http://caniuse.com/#search=device orientation.

- - -
- - - -
- -Back to top

Crafty.device.deviceMotion

-

public Crafty.device.deviceMotion(Function callback)

-
-
callback
Callback method executed once as soon as device motion is change
-
- -

Do something with normalized device motion data:

-
{
-    'acceleration' : ' Grab the acceleration including gravity from the results',
-    'rawAcceleration' : 'Display the raw acceleration data',
-    'facingUp' : 'Z is the acceleration in the Z axis, and if the device is facing up or down',
-    'tiltLR' : 'Convert the value from acceleration to degrees. acceleration.x is the acceleration according to gravity, we'll assume we're on Earth and divide by 9.81 (earth gravity) to get a percentage value, and then multiply that by 90 to convert to degrees.',
-    'tiltFB' : 'Convert the value from acceleration to degrees.'
-}
-

Example

- -
// Get DeviceMotion event normalized data.
-Crafty.device.deviceMotion(function(data){
-    console.log('data.moAccel : '+data.rawAcceleration+', data.moCalcTiltLR : '+Math.round(data.tiltLR)+', data.moCalcTiltFB : '+Math.round(data.tiltFB)+'');
-});
-

See browser support at http://caniuse.com/#search=motion.

- - -
- - - -
- -Back to top

Crafty.mobile

-

Determines if Crafty is running on mobile device.

-

If Crafty.mobile is equal true Crafty does some things under hood:

-

- set viewport on max device width and height

-
    
-
  • set Crafty.stage.fullscreen on true
    • 
-
  • hide window scrollbars
-
-

See Also

- - - -
- -
-
+

Crafty.device

Methods and Properties

Back to top

Crafty.device.deviceMotion

src/device.js#L120-145
public Crafty.device.deviceMotion(Function callback)
callback

Callback method executed once as soon as device motion is change

+

Do something with normalized device motion data:

+
{
+    'acceleration' : ' Grab the acceleration including gravity from the results',
+    'rawAcceleration' : 'Display the raw acceleration data',
+    'facingUp' : 'Z is the acceleration in the Z axis, and if the device is facing up or down',
+    'tiltLR' : 'Convert the value from acceleration to degrees. acceleration.x is the acceleration according to gravity, we'll assume we're on Earth and divide by 9.81 (earth gravity) to get a percentage value, and then multiply that by 90 to convert to degrees.',
+    'tiltFB' : 'Convert the value from acceleration to degrees.'
+}

Example

// Get DeviceMotion event normalized data.
+Crafty.device.deviceMotion(function(data){
+    console.log('data.moAccel : '+data.rawAcceleration+', data.moCalcTiltLR : '+Math.round(data.tiltLR)+', data.moCalcTiltFB : '+Math.round(data.tiltFB)+'');
+});

See browser support at http://caniuse.com/#search=motion.

+
Back to top

Crafty.device.deviceOrientation

src/device.js#L81-105
public Crafty.device.deviceOrientation(Function callback)
callback

Callback method executed once as soon as device orientation is change

+

Do something with normalized device orientation data:

+
{
+  'tiltLR'    :   'gamma the angle in degrees the device is tilted left-to-right.',
+  'tiltFB'    :   'beta the angle in degrees the device is tilted front-to-back',
+  'dir'       :   'alpha the direction the device is facing according to the compass',
+  'motUD'     :   'The angles values increase as you tilt the device to the right or towards you.'
+}

Example

// Get DeviceOrientation event normalized data.
+Crafty.device.deviceOrientation(function(data){
+    console.log('data.tiltLR : '+Math.round(data.tiltLR)+', data.tiltFB : '+Math.round(data.tiltFB)+', data.dir : '+Math.round(data.dir)+', data.motUD : '+data.motUD+'');
+});

See browser support at http://caniuse.com/#search=device orientation.

+
Back to top

Crafty.mobile

src/extensions.js#L18-31

Determines if Crafty is running on mobile device.

+

If Crafty.mobile is equal true Crafty does some things under hood:

+
- set viewport on max device width and height
+- set Crafty.stage.fullscreen on true
+- hide window scrollbars
diff --git a/api/Crafty-diamondIso.html b/api/Crafty-diamondIso.html index 7847bd7..19794ac 100644 --- a/api/Crafty-diamondIso.html +++ b/api/Crafty-diamondIso.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.diamondIso @@ -53,63 +53,23 @@
-
- - -

Crafty.diamondIso

-

Place entities in a 45deg diamond isometric fashion. It is similar to isometric but has another grid locations

-

Properties and Methods

-
- -Back to top

Crafty.diamondIso.init

-

public this Crafty.diamondIso.init(Number tileWidth,Number tileHeight,Number mapWidth,Number mapHeight)

-
-
tileWidth
The size of base tile width in Pixel
-
tileHeight
The size of base tile height in Pixel
-
mapWidth
The width of whole map in Tiles
-
mapHeight
The height of whole map in Tiles
-
- -

Method used to initialize the size of the isometric placement. +

Crafty.diamondIso

src/diamondiso.js#L5-8

Place entities in a 45deg diamond isometric fashion. It is similar to isometric but has another grid locations

+

Methods and Properties

Back to top

Crafty.diamondIso.init

src/diamondiso.js#L27-45
public this Crafty.diamondIso.init(Number tileWidth,Number tileHeight,Number mapWidth,Number mapHeight)
tileWidth

The size of base tile width in Pixel

+
tileHeight

The size of base tile height in Pixel

+
mapWidth

The width of whole map in Tiles

+
mapHeight

The height of whole map in Tiles

+

Method used to initialize the size of the isometric placement. Recommended to use a size alues in the power of 2 (128, 64 or 32). -This makes it easy to calculate positions and implement zooming.

-

Example

- -

var iso = Crafty.diamondIso.init(64,128,20,20);
-

-

See Also

- - -
- - - -
- -Back to top

Crafty.diamondIso.place

-

public this Crafty.diamondIso.place(Entity tile,Number x, Number y, Number layer)

-
-
x
The x position to place the tile
-
y
The y position to place the tile
-
layer
The z position to place the tile (calculated by y position * layer)
-
tile
The entity that should be position in the isometric fashion
-
- -

Use this method to place an entity in an isometric grid.

-

Example

- -

var iso = Crafty.diamondIso.init(64,128,20,20);
-isos.place(Crafty.e('2D, DOM, Color').color('red').attr({w:128, h:128}),1,1,2);
-

-

See Also

- - -
- -
-
+This makes it easy to calculate positions and implement zooming.

+

Example

var iso = Crafty.diamondIso.init(64,128,20,20);
Back to top

Crafty.diamondIso.place

src/diamondiso.js#L58-75
public this Crafty.diamondIso.place(Entity tile,Number x, Number y, Number layer)
x

The x position to place the tile

+
y

The y position to place the tile

+
layer

The z position to place the tile (calculated by y position * layer)

+
tile

The entity that should be position in the isometric fashion

+

Use this method to place an entity in an isometric grid.

+

Example

var iso = Crafty.diamondIso.init(64,128,20,20);
+isos.place(Crafty.e('2D, DOM, Color').color('red').attr({w:128, h:128}),1,1,2);
diff --git a/api/Crafty-e.html b/api/Crafty-e.html index 568d417..957c3d7 100644 --- a/api/Crafty-e.html +++ b/api/Crafty-e.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.e @@ -53,35 +53,15 @@
-
- - -

Crafty.e

-

public Entity Crafty.e(String componentList)

-
-
componentList
List of components to assign to new entity
-
-public Entity Crafty.e(String component1[, .., String componentN]) -
-
component#
Component to add
-
- -

Creates an entity. Any arguments will be applied in the same -way .addComponent() is applied as a quick way to add components.

-

Any component added will augment the functionality of -the created entity by assigning the properties and methods from the component to the entity.

-

Example

- -

var myEntity = Crafty.e("2D, DOM, Color");
-

-

Events

-

NewEntity [Data: { id:Number }]
When the entity is created and all components are added
-

-

See Also

-
-
+

Crafty.e

src/core.js#L1355-1375

Events

NewEntity [ Data { { id:Number } }]
When the entity is created and all components are added
public Entity Crafty.e(String componentList)
componentList

List of components to assign to new entity

+
public Entity Crafty.e(String component1[, .., String componentN])
component#

Component to add

+

Creates an entity. Any arguments will be applied in the same +way .addComponent() is applied as a quick way to add components.

+

Any component added will augment the functionality of +the created entity by assigning the properties and methods from the component to the entity.

+

Example

var myEntity = Crafty.e("2D, DOM, Color");

See Also

diff --git a/api/Crafty-eventObject.html b/api/Crafty-eventObject.html index cc08b63..c8739dd 100644 --- a/api/Crafty-eventObject.html +++ b/api/Crafty-eventObject.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.eventObject @@ -53,23 +53,11 @@
- +
diff --git a/api/Crafty-extend.html b/api/Crafty-extend.html index 96e3ae5..09ffd6b 100644 --- a/api/Crafty-extend.html +++ b/api/Crafty-extend.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.extend @@ -53,14 +53,10 @@
- + +
diff --git a/api/Crafty-frame.html b/api/Crafty-frame.html index 2011e4b..3edad5d 100644 --- a/api/Crafty-frame.html +++ b/api/Crafty-frame.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.frame @@ -53,15 +53,10 @@
- + +
diff --git a/api/Crafty-getVersion.html b/api/Crafty-getVersion.html index f6601ca..6f62e94 100644 --- a/api/Crafty-getVersion.html +++ b/api/Crafty-getVersion.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.getVersion @@ -53,22 +53,11 @@
- +
diff --git a/api/Crafty-image_whitelist.html b/api/Crafty-image_whitelist.html index d64ffbe..9518104 100644 --- a/api/Crafty-image_whitelist.html +++ b/api/Crafty-image_whitelist.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.image_whitelist @@ -53,43 +53,37 @@
-
- - -

Crafty.image_whitelist

-

A list of file extensions that can be loaded as images by Crafty.load

-

Example

-

// add tif extension to list of supported image files
-Crafty.image_whitelist.push("tif");

-
var assets = {
-    "sprites": {
-        "sprite.tif": {   //set a tif sprite
-           "tile": 64,
-           "tileh": 32,
-           "map": { "sprite_car": [0, 0] }
+
Crafty.image_whitelist
src/loader.js#L100-139
A list of file extensions that can be loaded as images by Crafty.load

+
Example
// add tif extension to list of supported image files
+Crafty.image_whitelist.push("tif");
+
+var assets = {
+    "sprites": {
+        "sprite.tif": {   //set a tif sprite
+           "tile": 64,
+           "tileh": 32,
+           "map": { "sprite_car": [0, 0] }
         }
     },
-    "audio": {
-        "jump": "jump.mp3";
+    "audio": {
+        "jump": "jump.mp3";
     }
-};

-
Crafty.load( assets, // preload the assets
-    function() {     //when loaded
-        Crafty.audio.play("jump"); //Play the audio file
-        Crafty.e('2D, DOM, sprite_car'); // create entity with sprite
-    },

-
function(e) { //progress
-},
+};
 
-function(e) { //uh oh, error loading
-}
-
);
-

-
See Also

-

-

+Crafty.load( assets, // preload the assets
+    function() {     //when loaded
+        Crafty.audio.play("jump"); //Play the audio file
+        Crafty.e('2D, DOM, sprite_car'); // create entity with sprite
+    },
+
+    function(e) { //progress
+    },
+
+    function(e) { //uh oh, error loading
+    }
+);

See Also

diff --git a/api/Crafty-init.html b/api/Crafty-init.html index ea914c3..22f2a10 100644 --- a/api/Crafty-init.html +++ b/api/Crafty-init.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.init @@ -53,31 +53,17 @@
-
- - -

Crafty.init

-

public this Crafty.init([Number width, Number height, String stage_elem])

-

public this Crafty.init([Number width, Number height, HTMLElement stage_elem])

-
-
Number width
Width of the stage
-
Number height
Height of the stage
-
String or HTMLElement stage_elem
the element to use for the stage
-
-

Sets the element to use as the stage, creating it if necessary. By default a div with id 'cr-stage' is used, but if the 'stage_elem' argument is provided that will be used instead. (see Crafty.viewport.init)

+

Crafty.init

src/core.js#L984-1003

Events

Load
Just after the viewport is initialised. Before the EnterFrame loops is started
public this Crafty.init([Number width, Number height, String stage_elem])
public this Crafty.init([Number width, Number height, HTMLElement stage_elem])
Number width

Width of the stage

+
Number height

Height of the stage

+
String or HTMLElement stage_elem

the element to use for the stage

+

Sets the element to use as the stage, creating it if necessary. By default a div with id 'cr-stage' is used, but if the 'stage_elem' argument is provided that will be used instead. (see Crafty.viewport.init)

Starts the EnterFrame interval. This will call the EnterFrame event for every frame.

Can pass width and height values for the stage otherwise will default to window size (see Crafty.DOM.window).

All Load events will be executed.

Uses requestAnimationFrame to sync the drawing with the browser but will default to setInterval if the browser does not support it.

- -

Events

-

Load
Just after the viewport is initialised. Before the EnterFrame loops is started
-

-

See Also

-
-
+
diff --git a/api/Crafty-isPaused.html b/api/Crafty-isPaused.html index 1c91b50..82146f1 100644 --- a/api/Crafty-isPaused.html +++ b/api/Crafty-isPaused.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.isPaused @@ -53,18 +53,10 @@
- +
diff --git a/api/Crafty-isometric.html b/api/Crafty-isometric.html index 5b89464..5e15503 100644 --- a/api/Crafty-isometric.html +++ b/api/Crafty-isometric.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.isometric @@ -53,142 +53,38 @@
-
- - -

Crafty.isometric

-

Place entities in a 45deg isometric fashion.

-

Properties and Methods

-
- -Back to top

Crafty.isometric.size

-

public this Crafty.isometric.size(Number tileSize)

-
-
tileSize
The size of the tiles to place.
-
- -

Method used to initialize the size of the isometric placement. -Recommended to use a size values in the power of 2 (128, 64 or 32). -This makes it easy to calculate positions and implement zooming.

-

Example

- -

var iso = Crafty.isometric.size(128);
-

-

See Also

- - -
- - - -
- -Back to top

Crafty.isometric.place

-

public this Crafty.isometric.place(Number x, Number y, Number z, Entity tile)

-
-
x
The x position to place the tile
-
y
The y position to place the tile
-
z
The z position or height to place the tile
-
tile
The entity that should be position in the isometric fashion
-
- -

Use this method to place an entity in an isometric grid.

-

Example

- -

var iso = Crafty.isometric.size(128);
-iso.place(2, 1, 0, Crafty.e('2D, DOM, Color').color('red').attr({w:128, h:128}));
-

-

See Also

- - -
- - - -
- -Back to top

Crafty.isometric.pos2px

-

public this Crafty.isometric.pos2px(Number x,Number y)

-
-
[returns]
Object {left Number,top Number}
-
- -

This method calculate the X and Y Coordinates to Pixel Positions

-

Example

- -
var iso = Crafty.isometric.size(128,96);
-var position = iso.pos2px(100,100); //Object { left=12800, top=4800}
-
- -
- - - -
- -Back to top

Crafty.isometric.px2pos

-

public this Crafty.isometric.px2pos(Number left,Number top)

-
-
[returns]
Object {x Number,y Number}
-
- -

This method calculate pixel top,left positions to x,y coordinates

-

Example

- -
var iso = Crafty.isometric.size(128,96);
-var px = iso.pos2px(12800,4800);
-console.log(px); //Object { x=100, y=100}
-
- -
- - - -
- -Back to top

Crafty.isometric.centerAt

-

public this Crafty.isometric.centerAt(Number x,Number y)

-
-
- -

This method center the Viewport at x/y location or gives the current centerpoint of the viewport

-

Example

- -
var iso = Crafty.isometric.size(128,96).centerAt(10,10); //Viewport is now moved
-//After moving the viewport by another event you can get the new center point
-console.log(iso.centerAt());
-
- -
- - - -
- -Back to top

Crafty.isometric.area

-

public this Crafty.isometric.area()

-
-
[returns]
Object {x:{start Number,end Number},y:{start Number,end Number}}
-
- -

This method get the Area surrounding by the centerpoint depends on viewport height and width

-

Example

- -
var iso = Crafty.isometric.size(128,96).centerAt(10,10); //Viewport is now moved
-var area = iso.area(); //get the area
-for(var y = area.y.start;y <= area.y.end;y++){
-  for(var x = area.x.start ;x <= area.x.end;x++){
-      iso.place(x,y,0,Crafty.e("2D,DOM,gras")); //Display tiles in the Screen
+
Crafty.isometric
src/isometric.js#L5-8
Place entities in a 45deg isometric fashion.

+
Methods and Properties
Back to top
Crafty.isometric.area
src/isometric.js#L145-162
public this Crafty.isometric.area()
 [Returns] 
Object {x:{start Number,end Number},y:{start Number,end Number}}

+
This method get the Area surrounding by the centerpoint depends on viewport height and width

+
Example
var iso = Crafty.isometric.size(128,96).centerAt(10,10); //Viewport is now moved
+var area = iso.area(); //get the area
+for(var y = area.y.start;y <= area.y.end;y++){
+  for(var x = area.x.start ;x <= area.x.end;x++){
+      iso.place(x,y,0,Crafty.e("2D,DOM,gras")); //Display tiles in the Screen
   }
-}
-

-
-

-
-

-

+}
Back to top

Crafty.isometric.centerAt

src/isometric.js#L116-130
public this Crafty.isometric.centerAt(Number x,Number y)
top
left

This method center the Viewport at x/y location or gives the current centerpoint of the viewport

+

Example

var iso = Crafty.isometric.size(128,96).centerAt(10,10); //Viewport is now moved
+//After moving the viewport by another event you can get the new center point
+console.log(iso.centerAt());
Back to top

Crafty.isometric.place

src/isometric.js#L43-60
public this Crafty.isometric.place(Number x, Number y, Number z, Entity tile)
x

The x position to place the tile

+
y

The y position to place the tile

+
z

The z position or height to place the tile

+
tile

The entity that should be position in the isometric fashion

+

Use this method to place an entity in an isometric grid.

+

Example

var iso = Crafty.isometric.size(128);
+iso.place(2, 1, 0, Crafty.e('2D, DOM, Color').color('red').attr({w:128, h:128}));

See Also

Back to top

Crafty.isometric.pos2px

src/isometric.js#L71-85
public this Crafty.isometric.pos2px(Number x,Number y)
x
y
[Returns]

Object {left Number,top Number}

+

This method calculate the X and Y Coordinates to Pixel Positions

+

Example

var iso = Crafty.isometric.size(128,96);
+var position = iso.pos2px(100,100); //Object { left=12800, top=4800}
Back to top

Crafty.isometric.px2pos

src/isometric.js#L93-108
public this Crafty.isometric.px2pos(Number left,Number top)
top
left
[Returns]

Object {x Number,y Number}

+

This method calculate pixel top,left positions to x,y coordinates

+

Example

var iso = Crafty.isometric.size(128,96);
+var px = iso.pos2px(12800,4800);
+console.log(px); //Object { x=100, y=100}
Back to top

Crafty.isometric.size

src/isometric.js#L21-36
public this Crafty.isometric.size(Number tileSize)
tileSize

The size of the tiles to place.

+

Method used to initialize the size of the isometric placement. +Recommended to use a size values in the power of 2 (128, 64 or 32). +This makes it easy to calculate positions and implement zooming.

+

Example

var iso = Crafty.isometric.size(128);

See Also

diff --git a/api/Crafty-keydown.html b/api/Crafty-keydown.html index fb49675..c19fca7 100644 --- a/api/Crafty-keydown.html +++ b/api/Crafty-keydown.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.keydown @@ -53,26 +53,17 @@
-
- - -

Crafty.keydown

-

Remembering what keys (referred by Unicode) are down.

-

Example

-

Crafty.c("Keyboard", {
-  isDown: function (key) {
-    if (typeof key === "string") {
+
Crafty.keydown
src/controls.js#L12-28
Remembering what keys (referred by Unicode) are down.

+
Example
Crafty.c("Keyboard", {
+  isDown: function (key) {
+    if (typeof key === "string") {
       key = Crafty.keys[key];
     }
-    return !!Crafty.keydown[key];
+    return !!Crafty.keydown[key];
   }
-});
-

-
See Also

-

-

+});

See Also

diff --git a/api/Crafty-keys.html b/api/Crafty-keys.html index 8b0d04f..168f39a 100644 --- a/api/Crafty-keys.html +++ b/api/Crafty-keys.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.keys @@ -53,105 +53,100 @@
-
- - -

Crafty.keys

-

Object of key names and the corresponding key code.

-
BACKSPACE: 8,
-TAB: 9,
-ENTER: 13,
-PAUSE: 19,
-CAPS: 20,
-ESC: 27,
-SPACE: 32,
-PAGE_UP: 33,
-PAGE_DOWN: 34,
-END: 35,
-HOME: 36,
-LEFT_ARROW: 37,
-UP_ARROW: 38,
-RIGHT_ARROW: 39,
-DOWN_ARROW: 40,
-INSERT: 45,
-DELETE: 46,
-0: 48,
-1: 49,
-2: 50,
-3: 51,
-4: 52,
-5: 53,
-6: 54,
-7: 55,
-8: 56,
-9: 57,
-A: 65,
-B: 66,
-C: 67,
-D: 68,
-E: 69,
-F: 70,
-G: 71,
-H: 72,
-I: 73,
-J: 74,
-K: 75,
-L: 76,
-M: 77,
-N: 78,
-O: 79,
-P: 80,
-Q: 81,
-R: 82,
-S: 83,
-T: 84,
-U: 85,
-V: 86,
-W: 87,
-X: 88,
-Y: 89,
-Z: 90,
-NUMPAD_0: 96,
-NUMPAD_1: 97,
-NUMPAD_2: 98,
-NUMPAD_3: 99,
-NUMPAD_4: 100,
-NUMPAD_5: 101,
-NUMPAD_6: 102,
-NUMPAD_7: 103,
-NUMPAD_8: 104,
-NUMPAD_9: 105,
-MULTIPLY: 106,
-ADD: 107,
-SUBSTRACT: 109,
-DECIMAL: 110,
-DIVIDE: 111,
-F1: 112,
-F2: 113,
-F3: 114,
-F4: 115,
-F5: 116,
-F6: 117,
-F7: 118,
-F8: 119,
-F9: 120,
-F10: 121,
-F11: 122,
-F12: 123,
-SHIFT: 16,
-CTRL: 17,
-ALT: 18,
-PLUS: 187,
-COMMA: 188,
-MINUS: 189,
-PERIOD: 190,
-PULT_UP: 29460,
-PULT_DOWN: 29461,
-PULT_LEFT: 4,
-PULT_RIGHT': 5
-
-
+ +

Crafty.keys

src/keycodes.js#L5-102

Object of key names and the corresponding key code.

+
BACKSPACE: 8,
+TAB: 9,
+ENTER: 13,
+PAUSE: 19,
+CAPS: 20,
+ESC: 27,
+SPACE: 32,
+PAGE_UP: 33,
+PAGE_DOWN: 34,
+END: 35,
+HOME: 36,
+LEFT_ARROW: 37,
+UP_ARROW: 38,
+RIGHT_ARROW: 39,
+DOWN_ARROW: 40,
+INSERT: 45,
+DELETE: 46,
+0: 48,
+1: 49,
+2: 50,
+3: 51,
+4: 52,
+5: 53,
+6: 54,
+7: 55,
+8: 56,
+9: 57,
+A: 65,
+B: 66,
+C: 67,
+D: 68,
+E: 69,
+F: 70,
+G: 71,
+H: 72,
+I: 73,
+J: 74,
+K: 75,
+L: 76,
+M: 77,
+N: 78,
+O: 79,
+P: 80,
+Q: 81,
+R: 82,
+S: 83,
+T: 84,
+U: 85,
+V: 86,
+W: 87,
+X: 88,
+Y: 89,
+Z: 90,
+NUMPAD_0: 96,
+NUMPAD_1: 97,
+NUMPAD_2: 98,
+NUMPAD_3: 99,
+NUMPAD_4: 100,
+NUMPAD_5: 101,
+NUMPAD_6: 102,
+NUMPAD_7: 103,
+NUMPAD_8: 104,
+NUMPAD_9: 105,
+MULTIPLY: 106,
+ADD: 107,
+SUBSTRACT: 109,
+DECIMAL: 110,
+DIVIDE: 111,
+F1: 112,
+F2: 113,
+F3: 114,
+F4: 115,
+F5: 116,
+F6: 117,
+F7: 118,
+F8: 119,
+F9: 120,
+F10: 121,
+F11: 122,
+F12: 123,
+SHIFT: 16,
+CTRL: 17,
+ALT: 18,
+PLUS: 187,
+COMMA: 188,
+MINUS: 189,
+PERIOD: 190,
+PULT_UP: 29460,
+PULT_DOWN: 29461,
+PULT_LEFT: 4,
+PULT_RIGHT': 5
diff --git a/api/Crafty-loader.html b/api/Crafty-loader.html index 5333e90..db5bda3 100644 --- a/api/Crafty-loader.html +++ b/api/Crafty-loader.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.loader @@ -53,79 +53,67 @@
-
- - -

Crafty.loader

-

public void Crafty.load(Object assets, Function onLoad[, Function onProgress[, Function onError]])

-
-
assets
Object JSON formatted (or JSON string), with assets to load (accepts sounds, images and sprites)
-
onLoad
Callback when the assets are loaded
-
onProgress
Callback when an asset is loaded. Contains information about assets loaded
-
onError
Callback when an asset fails to load
-
-

Preloader for all assets. Takes a JSON formatted object (or JSON string) of files and adds them to the -Crafty.assets object, as well as setting sprites accordingly.

-

Format must follow the pattern shown in the example below, but it's not required to pass all "audio", +

Crafty.loader

src/loader.js#L142-225
public void Crafty.load(Object assets, Function onLoad[, Function onProgress[, Function onError]])
assets

Object JSON formatted (or JSON string), with assets to load (accepts sounds, images and sprites)

+
onLoad

Callback when the assets are loaded

+
onProgress

Callback when an asset is loaded. Contains information about assets loaded

+
onError

Callback when an asset fails to load

+

Preloader for all assets. Takes a JSON formatted object (or JSON string) of files and adds them to the +Crafty.assets object, as well as setting sprites accordingly.

+

Format must follow the pattern shown in the example below, but it's not required to pass all "audio", "images" and "sprites" properties, only those you'll need. For example, if you don't need to preload -sprites, you can omit that property.

-

By default, Crafty will assume all files are in the current path. For changing these, -use the function Crafty.paths.

-

Files with suffixes in image_whitelist (case insensitive) will be loaded.

-

It's possible to pass the full file path(including protocol), instead of just the filename.ext, in case -you want some asset to be loaded from another domain.

-

If Crafty.support.audio is true, files with the following suffixes mp3, wav, ogg and -mp4 (case insensitive) can be loaded.

-

The onProgress function will be passed on object with information about +sprites, you can omit that property.

+

By default, Crafty will assume all files are in the current path. For changing these, +use the function Crafty.paths.

+

Files with suffixes in image_whitelist (case insensitive) will be loaded.

+

It's possible to pass the full file path(including protocol), instead of just the filename.ext, in case +you want some asset to be loaded from another domain.

+

If Crafty.support.audio is true, files with the following suffixes mp3, wav, ogg and +mp4 (case insensitive) can be loaded.

+

The onProgress function will be passed on object with information about the progress including how many assets loaded, total of all the assets to -load and a percentage of the progress.

-

{ loaded: j, total: total, percent: (j / total * 100), src:src }
-

onError will be passed with the asset that couldn't load.

-

When onError is not provided, the onLoad is loaded even when some assets are not successfully loaded. -Otherwise, onLoad will be called no matter whether there are errors or not.

-

Example

- -

var assetsObj = {
-    "audio": {
-        "beep": ["beep.wav", "beep.mp3", "beep.ogg"],
-        "boop": "boop.wav",
-        "slash": "slash.wav"
+load and a percentage of the progress.

+
{ loaded: j, total: total, percent: (j / total * 100), src:src }
onError will be passed with the asset that couldn't load.

+
When onError is not provided, the onLoad is loaded even when some assets are not successfully loaded.
+Otherwise, onLoad will be called no matter whether there are errors or not.

+
Example
var assetsObj = {
+    "audio": {
+        "beep": ["beep.wav", "beep.mp3", "beep.ogg"],
+        "boop": "boop.wav",
+        "slash": "slash.wav"
     },
-    "images": ["badguy.bmp", "goodguy.png"],
-    "sprites": {
-        "animals.png": {
-            "tile": 50,
-            "tileh": 40,
-            "map": { "ladybug": [0,0], "lazycat": [0,1], "ferociousdog": [0,2] }
-            "paddingX": 5,
-            "paddingY": 5,
-            "paddingAroundBorder": 10
+    "images": ["badguy.bmp", "goodguy.png"],
+    "sprites": {
+        "animals.png": {
+            "tile": 50,
+            "tileh": 40,
+            "map": { "ladybug": [0,0], "lazycat": [0,1], "ferociousdog": [0,2] }
+            "paddingX": 5,
+            "paddingY": 5,
+            "paddingAroundBorder": 10
         },
-        "vehicles.png": {
-            "tile": 150,
-            "tileh": 75,
-            "map": { "car": [0,0], "truck": [0,1] }
+        "vehicles.png": {
+            "tile": 150,
+            "tileh": 75,
+            "map": { "car": [0,0], "truck": [0,1] }
         }
     },
-};

-
Crafty.load(assetsObj, // preload assets
-    function() { //when loaded
-        Crafty.scene("main"); //go to main scene
-        Crafty.audio.play("boop"); //Play the audio file
-        Crafty.e('2D, DOM, lazycat'); // create entity with sprite
-    },

-
function(e) { //progress
-},
+};
 
-function(e) { //uh oh, error loading
-}
-
);
-

-
See Also

-

-
+Crafty.load(assetsObj, // preload assets + function() { //when loaded + Crafty.scene("main"); //go to main scene + Crafty.audio.play("boop"); //Play the audio file + Crafty.e('2D, DOM, lazycat'); // create entity with sprite + }, + + function(e) { //progress + }, + + function(e) { //uh oh, error loading + } +);
diff --git a/api/Crafty-map.html b/api/Crafty-map.html index 9138551..89d7c2f 100644 --- a/api/Crafty-map.html +++ b/api/Crafty-map.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.map @@ -53,97 +53,11 @@
-
- - -

Crafty.map

-

Functions related with querying entities.

-

See Also

-

Properties and Methods

- -
- -Back to top

Crafty.map.insert

-

public Object Crafty.map.insert(Object obj)

-
-
obj
An entity to be inserted.
-
- -

obj is inserted in '.map' of the corresponding broad phase cells. An object of the following fields is returned.

-
- the object that keep track of cells (keys)
-- obj
-- the HashMap object
-
- -
- - - -
- -Back to top

Crafty.map.search

-

public Object Crafty.map.search(Object rect[, Boolean filter])

-
-
rect
the rectangular region to search for entities.
-
filter
Default value is true. Otherwise, must be false.
-
- -
    -
  • If filter is false, just search for all the entries in the give rect region by broad phase collision. Entity may be returned duplicated.
    • -
  • If filter is true, filter the above results by checking that they actually overlap rect. -The easier usage is with filter=true. For performance reason, you may use filter=false, and filter the result yourself. See examples in drawing.js and collision.js
    • -
- - -
- - - -
- -Back to top

Crafty.map.remove

-

public void Crafty.map.remove([Object keys, ]Object obj)

-
-
keys
key region. If omitted, it will be derived from obj by Crafty.HashMap.key.
-
obj
need more document.
-
- -

Remove an entity in a broad phase map.

-

    -

  • The second form is only used in Crafty.HashMap to save time for computing keys again, where keys were computed previously from obj. End users should not call this form directly.
    • -

-

Example

- -
Crafty.map.remove(e);
-
- -

-
- -Back to top

Crafty.map.refresh

-

public void Crafty.map.remove(Entry entry)

-
-
entry
An entry to update
-
- -

Refresh an entry's keys, and its position in the broad phrase map.

-

Example

- -
Crafty.map.refresh(e);
-
- -
- - - -
- -Back to top

Crafty.map.boundaries

-

public Object Crafty.map.boundaries()

-

The return Object is of the following format.

-
{
+
Crafty.map
src/2D.js#L47-51
Functions related with querying entities.

+
Methods and Properties
Back to top
Crafty.map.boundaries
src/HashMap.js#L210-227
public Object Crafty.map.boundaries()
The return Object is of the following format.

+
{
   min: {
     x: val_x,
     y: val_y
@@ -152,13 +66,26 @@ 
 Example 

     x: val_x,
     y: val_y
   }
-}
-

-
-

-
-

-

+}
Back to top

Crafty.map.insert

src/HashMap.js#L30-41
public Object Crafty.map.insert(Object obj)
obj

An entity to be inserted.

+

obj is inserted in '.map' of the corresponding broad phase cells. An object of the following fields is returned.

+
- the object that keep track of cells (keys)
+- `obj`
+- the HashMap object
Back to top

Crafty.map.refresh

src/HashMap.js#L160-171
public void Crafty.map.remove(Entry entry)
entry

An entry to update

+

Refresh an entry's keys, and its position in the broad phrase map.

+

Example

Crafty.map.refresh(e);
Back to top

Crafty.map.remove

src/HashMap.js#L118-131
public void Crafty.map.remove([Object keys, ]Object obj)
keys

key region. If omitted, it will be derived from obj by Crafty.HashMap.key.

+
obj

need more document.

+

Remove an entity in a broad phase map.

+
    +
  • The second form is only used in Crafty.HashMap to save time for computing keys again, where keys were computed previously from obj. End users should not call this form directly.
    • +
+

Example

Crafty.map.remove(e);
Back to top

Crafty.map.search

src/HashMap.js#L63-72
public Object Crafty.map.search(Object rect[, Boolean filter])
rect

the rectangular region to search for entities.

+
filter

Default value is true. Otherwise, must be false.

+
    +
  • If filter is false, just search for all the entries in the give rect region by broad phase collision. Entity may be returned duplicated.
    • +
  • If filter is true, filter the above results by checking that they actually overlap rect. +The easier usage is with filter=true. For performance reason, you may use filter=false, and filter the result yourself. See examples in drawing.js and collision.js
    • +
+
diff --git a/api/Crafty-math-Matrix2D.html b/api/Crafty-math-Matrix2D.html new file mode 100644 index 0000000..7d8d867 --- /dev/null +++ b/api/Crafty-math-Matrix2D.html @@ -0,0 +1,132 @@ + + + + Crafty - Crafty.math.Matrix2D + + + + + + + + + + +
+
+ + + +
+
+ + + + +

Crafty.math.Matrix2D

src/math.js#L682-703

The third row is always assumed to be [0, 0, 1].

+

Matrix2D uses the following form, as per the whatwg.org specifications for canvas.transform(): +[a, c, e] +[b, d, f] +[0, 0, 1]

+
public {Matrix2D} new Matrix2D();
public {Matrix2D} new Matrix2D(Matrix2D);
public {Matrix2D} new Matrix2D(Number, Number, Number, Number, Number, Number);
{Matrix2D|Number=1} a
{Number=0} b
{Number=0} c
{Number=1} d
{Number=0} e
{Number=0} f

Methods and Properties

Back to top

.apply

src/math.js#L731-740

Applies the matrix transformations to the passed object

+
public {Vector2D} apply(Vector2D);
{Vector2D} vecRH

vector to be transformed

+
[Returns]

{Vector2D} the passed vector object after transforming

+
Back to top

.clone

src/math.js#L756-764

Creates an exact, numeric copy of the current matrix

+
public {Matrix2D} clone();
[Returns]

{Matrix2D}

+
Back to top

.combine

src/math.js#L770-780

Multiplies this matrix with another, overriding the values of this matrix. +The passed matrix is assumed to be on the right-hand side.

+
public {Matrix2D} combine(Matrix2D);
{Matrix2D} mtrxRH
[Returns]

{Matrix2D} this matrix after combination

+
Back to top

.determinant

src/math.js#L812-820

Calculates the determinant of this matrix

+
public {Number} determinant();
[Returns]

{Number} det(this matrix)

+
Back to top

.equals

src/math.js#L795-804

Checks for the numeric equality of this matrix versus another.

+
public {Boolean} equals(Matrix2D);
{Matrix2D} mtrxRH
[Returns]

{Boolean} true if the two matrices are numerically equal

+
Back to top

.invert

src/math.js#L826-835

Inverts this matrix if possible

+
public {Matrix2D} invert();
[Returns]

{Matrix2D} this inverted matrix or the original matrix on failure

+
Back to top

.isIdentity

src/math.js#L861-869

Returns true if this matrix is the identity matrix

+
public {Boolean} isIdentity();
[Returns]

{Boolean}

+
Back to top

.isInvertible

src/math.js#L875-884

Determines is this matrix is invertible.

+
public {Boolean} isInvertible();
[Returns]

{Boolean} true if this matrix is invertible

+

See Also

Back to top

.preRotate

src/math.js#L890-899

Applies a counter-clockwise pre-rotation to this matrix

+
public {Matrix2D} preRotate(Number);
{number} rads

angle to rotate in radians

+
[Returns]

{Matrix2D} this matrix after pre-rotation

+
Back to top

.preScale

src/math.js#L915-925

Applies a pre-scaling to this matrix

+
public {Matrix2D} preScale(Number[, Number]);
{Number} scalarX
{Number} [scalarY] scalarX is used if scalarY is undefined
[Returns]

{Matrix2D} this after pre-scaling

+
Back to top

.preTranslate

src/math.js#L939-950

Applies a pre-translation to this matrix

+
public {Matrix2D} preTranslate(Vector2D);
public {Matrix2D} preTranslate(Number, Number);
{Number|Vector2D} dx
{Number} dy
[Returns]

{Matrix2D} this matrix after pre-translation

+
Back to top

.rotate

src/math.js#L964-973

Applies a counter-clockwise post-rotation to this matrix

+
public {Matrix2D} rotate(Number);
{Number} rads

angle to rotate in radians

+
[Returns]

{Matrix2D} this matrix after rotation

+
Back to top

.scale

src/math.js#L992-1002

Applies a post-scaling to this matrix

+
public {Matrix2D} scale(Number[, Number]);
{Number} scalarX
{Number} [scalarY] scalarX is used if scalarY is undefined
[Returns]

{Matrix2D} this after post-scaling

+
Back to top

.setValues

src/math.js#L1018-1033

Sets the values of this matrix

+
public {Matrix2D} setValues(Matrix2D);
public {Matrix2D} setValues(Number, Number, Number, Number, Number, Number);
{Matrix2D|Number} a
{Number} b
{Number} c
{Number} d
{Number} e
{Number} f
[Returns]

{Matrix2D} this matrix containing the new values

+
Back to top

.toString

src/math.js#L1055-1063

Returns the string representation of this matrix.

+
public {String} toString();
[Returns]

{String}

+
Back to top

.translate

src/math.js#L1070-1081

Applies a post-translation to this matrix

+
public {Matrix2D} translate(Vector2D);
public {Matrix2D} translate(Number, Number);
{Number|Vector2D} dx
{Number} dy
[Returns]

{Matrix2D} this matrix after post-translation

+
+ +
+
+
+ +
+ + diff --git a/api/Crafty-math-Vector2D.html b/api/Crafty-math-Vector2D.html new file mode 100644 index 0000000..c102e98 --- /dev/null +++ b/api/Crafty-math-Vector2D.html @@ -0,0 +1,155 @@ + + + + Crafty - Crafty.math.Vector2D + + + + + + + + + + +
+
+ + + +
+
+ + + + +

Crafty.math.Vector2D

src/math.js#L210-223

Vector2D uses the following form:

+ +
public {Vector2D} Vector2D();
public {Vector2D} Vector2D(Vector2D);
public {Vector2D} Vector2D(Number, Number);
{Vector2D|Number=0} x
{Number=0} y

Methods and Properties

Back to top

.add

src/math.js#L240-249

Adds the passed vector to this vector

+
public {Vector2D} add(Vector2D);
{vector2D} vecRH
[Returns]

{Vector2D} this after adding

+
Back to top

.angleBetween

src/math.js#L257-267

Calculates the angle between the passed vector and this vector, using <0,0> as the point of reference. +Angles returned have the range (−π, π].

+
public {Number} angleBetween(Vector2D);
{Vector2D} vecRH
[Returns]

{Number} the angle between the two vectors in radians

+
Back to top

.angleTo

src/math.js#L273-282

Calculates the angle to the passed vector from this vector, using this vector as the point of reference.

+
public {Number} angleTo(Vector2D);
{Vector2D} vecRH
[Returns]

{Number} the angle to the passed vector in radians

+
Back to top

.clone

src/math.js#L288-296

Creates and exact, numeric copy of this vector

+
public {Vector2D} clone();
[Returns]

{Vector2D} the new vector

+
Back to top

.crossProduct

src/math.js#L366-375

Calculates the z component of the cross product of the two vectors augmented to 3D.

+
public {Number} crossProduct(Vector2D);
{Vector2D} vecRH
[Returns]

{Number} the resultant cross product

+
Back to top

.distance

src/math.js#L302-311

Calculates the distance from this vector to the passed vector.

+
public {Number} distance(Vector2D);
{Vector2D} vecRH
[Returns]

{Number} the distance between the two vectors

+
Back to top

.distanceSq

src/math.js#L317-328

Calculates the squared distance from this vector to the passed vector. +This function avoids calculating the square root, thus being slightly faster than .distance( ).

+
public {Number} distanceSq(Vector2D);
{Vector2D} vecRH
[Returns]

{Number} the squared distance between the two vectors

+

See Also

Back to top

.divide

src/math.js#L334-343

Divides this vector by the passed vector.

+
public {Vector2D} divide(Vector2D);
{Vector2D} vecRH
[Returns]

{Vector2D} this vector after dividing

+
Back to top

.dotProduct

src/math.js#L351-360

Calculates the dot product of this and the passed vectors

+
public {Number} dotProduct(Vector2D);
{Vector2D} vecRH
[Returns]

{Number} the resultant dot product

+
Back to top

.equals

src/math.js#L381-390

Determines if this vector is numerically equivalent to the passed vector.

+
public {Boolean} equals(Vector2D);
{Vector2D} vecRH
[Returns]

{Boolean} true if the vectors are equivalent

+
Back to top

.getNormal

src/math.js#L414-424

Calculates a new right-handed unit vector that is perpendicular to the line created by this and the passed vector.

+
public {Vector2D} getNormal(Vector2D[, Vector2D]);
{Vector2D} vecRH
{Vector2D} [result]

An optional parameter to save the result in

+
[Returns]

{Vector2D} the new normal vector

+
Back to top

.isZero

src/math.js#L431-439

Determines if this vector is equal to <0,0>

+
public {Boolean} isZero();
[Returns]

{Boolean} true if this vector is equal to <0,0>

+
Back to top

.magnitude

src/math.js#L445-454

Calculates the magnitude of this vector. +Note: Function objects in JavaScript already have a 'length' member, hence the use of magnitude instead.

+
public {Number} magnitude();
[Returns]

{Number} the magnitude of this vector

+
Back to top

.magnitudeSq

src/math.js#L460-470

Calculates the square of the magnitude of this vector. +This function avoids calculating the square root, thus being slightly faster than .magnitude( ).

+
public {Number} magnitudeSq();
[Returns]

{Number} the square of the magnitude of this vector

+

See Also

Back to top

.multiply

src/math.js#L476-485

Multiplies this vector by the passed vector

+
public {Vector2D} multiply(Vector2D);
{Vector2D} vecRH
[Returns]

{Vector2D} this vector after multiplying

+
Back to top

.negate

src/math.js#L493-501

Negates this vector (ie. <-x,-y>)

+
public {Vector2D} negate();
[Returns]

{Vector2D} this vector after negation

+
Back to top

.normalize

src/math.js#L509-518

Normalizes this vector (scales the vector so that its new magnitude is 1) +For vectors where magnitude is 0, <1,0> is returned.

+
public {Vector2D} normalize();
[Returns]

{Vector2D} this vector after normalization

+
Back to top

.perpendicular

src/math.js#L397-407

Calculates a new vector that is perpendicular to this vector. +The perpendicular vector has the same magnitude as this vector and is obtained by a counter-clockwise rotation of 90° of this vector.

+
public {Vector2D} perpendicular([Vector2D]);
{Vector2D} [result]

An optional parameter to save the result in

+
[Returns]

{Vector2D} the perpendicular vector

+
Back to top

.scale

src/math.js#L535-546

Scales this vector by the passed amount(s) +If scalarY is omitted, scalarX is used for both axes

+
public {Vector2D} scale(Number[, Number]);
{Number} scalarX
{Number} [scalarY]
[Returns]

{Vector2D} this after scaling

+
Back to top

.scaleToMagnitude

src/math.js#L558-567

Scales this vector such that its new magnitude is equal to the passed value.

+
public {Vector2D} scaleToMagnitude(Number);
{Number} mag
[Returns]

{Vector2D} this vector after scaling

+
Back to top

.setValues

src/math.js#L576-587

Sets the values of this vector using a passed vector or pair of numbers.

+
public {Vector2D} setValues(Vector2D);
public {Vector2D} setValues(Number, Number);
{Number|Vector2D} x
{Number} y
[Returns]

{Vector2D} this vector after setting of values

+
Back to top

.subtract

src/math.js#L601-610

Subtracts the passed vector from this vector.

+
public {Vector2D} subtract(Vector2D);
{Vector2D} vecRH
[Returns]

{vector2D} this vector after subtracting

+
Back to top

.toString

src/math.js#L618-626

Returns a string representation of this vector.

+
public {String} toString();
[Returns]

{String}

+
Back to top

.translate

src/math.js#L632-643

Translates (moves) this vector by the passed amounts. +If dy is omitted, dx is used for both axes.

+
public {Vector2D} translate(Number[, Number]);
{Number} dx
{Number} [dy]
[Returns]

{Vector2D} this vector after translating

+
Back to top

.tripleProduct

src/math.js#L655-669

Calculates the triple product of three vectors. +triple vector product = b(a•c) - a(b•c)

+
public {Vector2D} tripleProduct(Vector2D, Vector2D, Vector2D, [Vector2D]);
{Vector2D} a
{Vector2D} b
{Vector2D} c
{Vector2D} [result]

An optional parameter to save the result in

+
[Returns]

{Vector2D} the triple product as a new vector

+
+ +
+
+
+ +
+ + diff --git a/api/Crafty-math.Matrix2D.html b/api/Crafty-math.Matrix2D.html deleted file mode 100644 index 40ab7e1..0000000 --- a/api/Crafty-math.Matrix2D.html +++ /dev/null @@ -1,338 +0,0 @@ - - - - Crafty - - - - - - - - - - - -
-
- - - -
-
- - -
- - - -

Crafty.math.Matrix2D

-

This is a 2D Matrix2D class. It is 3x3 to allow for affine transformations in 2D space. -The third row is always assumed to be [0, 0, 1].

-

Matrix2D uses the following form, as per the whatwg.org specifications for canvas.transform(): -[a, c, e] -[b, d, f] -[0, 0, 1]

-

public {Matrix2D} new Matrix2D();

-

public {Matrix2D} new Matrix2D(Matrix2D);

-

public {Matrix2D} new Matrix2D(Number, Number, Number, Number, Number, Number);

-
-
-

Properties and Methods

- -
- -Back to top

.apply

-

Applies the matrix transformations to the passed object

-

public {Vector2D} apply(Vector2D);

-
-
{Vector2D} vecRH
vector to be transformed
-
[returns]
{Vector2D} the passed vector object after transforming
-
- - -

-
- -Back to top

.clone

-

Creates an exact, numeric copy of the current matrix

-

public {Matrix2D} clone();

-
-
[returns]
{Matrix2D}
-
- - -
- - - -
- -Back to top

.combine

-

Multiplies this matrix with another, overriding the values of this matrix. -The passed matrix is assumed to be on the right-hand side.

-

public {Matrix2D} combine(Matrix2D);

-
-
[returns]
{Matrix2D} this matrix after combination
-
- - -
- - - -
- -Back to top

.equals

-

Checks for the numeric equality of this matrix versus another.

-

public {Boolean} equals(Matrix2D);

-
-
[returns]
{Boolean} true if the two matrices are numerically equal
-
- - -
- - - -
- -Back to top

.determinant

-

Calculates the determinant of this matrix

-

public {Number} determinant();

-
-
[returns]
{Number} det(this matrix)
-
- - -
- - - -
- -Back to top

.invert

-

Inverts this matrix if possible

-

public {Matrix2D} invert();

-
-
[returns]
{Matrix2D} this inverted matrix or the original matrix on failure
-
- -

See Also

- - -
- - - -
- -Back to top

.isIdentity

-

Returns true if this matrix is the identity matrix

-

public {Boolean} isIdentity();

-
-
[returns]
{Boolean}
-
- - -
- - - -
- -Back to top

.isInvertible

-

Determines is this matrix is invertible.

-

public {Boolean} isInvertible();

-
-
[returns]
{Boolean} true if this matrix is invertible
-
- -

See Also

- - -
- - - -
- -Back to top

.preRotate

-

Applies a counter-clockwise pre-rotation to this matrix

-

public {Matrix2D} preRotate(Number);

-
-
{number} rads
angle to rotate in radians
-
[returns]
{Matrix2D} this matrix after pre-rotation
-
- - -
- - - -
- -Back to top

.preScale

-

Applies a pre-scaling to this matrix

-

public {Matrix2D} preScale(Number[, Number]);

-
-
[returns]
{Matrix2D} this after pre-scaling
-
- - -
- - - -
- -Back to top

.preTranslate

-

Applies a pre-translation to this matrix

-

public {Matrix2D} preTranslate(Vector2D);

-

public {Matrix2D} preTranslate(Number, Number);

-
-
[returns]
{Matrix2D} this matrix after pre-translation
-
- - -
- - - -
- -Back to top

.rotate

-

Applies a counter-clockwise post-rotation to this matrix

-

public {Matrix2D} rotate(Number);

-
-
{Number} rads
angle to rotate in radians
-
[returns]
{Matrix2D} this matrix after rotation
-
- - -
- - - -
- -Back to top

.scale

-

Applies a post-scaling to this matrix

-

public {Matrix2D} scale(Number[, Number]);

-
-
[returns]
{Matrix2D} this after post-scaling
-
- - -
- - - -
- -Back to top

.setValues

-

Sets the values of this matrix

-

public {Matrix2D} setValues(Matrix2D);

-

public {Matrix2D} setValues(Number, Number, Number, Number, Number, Number);

-
-
[returns]
{Matrix2D} this matrix containing the new values
-
- - -
- - - -
- -Back to top

.toString

-

Returns the string representation of this matrix.

-

public {String} toString();

-
-
[returns]
{String}
-
- - -
- - - -
- -Back to top

.translate

-

Applies a post-translation to this matrix

-

public {Matrix2D} translate(Vector2D);

-

public {Matrix2D} translate(Number, Number);

-
-
[returns]
{Matrix2D} this matrix after post-translation
-
- - -
- -
-
- -
-
-
- -
- - diff --git a/api/Crafty-math.Vector2D.html b/api/Crafty-math.Vector2D.html deleted file mode 100644 index 8510519..0000000 --- a/api/Crafty-math.Vector2D.html +++ /dev/null @@ -1,469 +0,0 @@ - - - - Crafty - - - - - - - - - - - -
-
- - - -
-
- - -
- - - -

Crafty.math.Vector2D

-

This is a general purpose 2D vector class

-

Vector2D uses the following form:

- - - -

public {Vector2D} Vector2D();

-

public {Vector2D} Vector2D(Vector2D);

-

public {Vector2D} Vector2D(Number, Number);

-
-
-

Properties and Methods

- -
- -Back to top

.add

-

Adds the passed vector to this vector

-

public {Vector2D} add(Vector2D);

-
-
[returns]
{Vector2D} this after adding
-
- - -

-
- -Back to top

.angleBetween

-

Calculates the angle between the passed vector and this vector, using <0,0> as the point of reference. -Angles returned have the range (−π, π].

-

public {Number} angleBetween(Vector2D);

-
-
[returns]
{Number} the angle between the two vectors in radians
-
- - -
- - - -
- -Back to top

.angleTo

-

Calculates the angle to the passed vector from this vector, using this vector as the point of reference.

-

public {Number} angleTo(Vector2D);

-
-
[returns]
{Number} the angle to the passed vector in radians
-
- - -
- - - -
- -Back to top

.clone

-

Creates and exact, numeric copy of this vector

-

public {Vector2D} clone();

-
-
[returns]
{Vector2D} the new vector
-
- - -
- - - -
- -Back to top

.distance

-

Calculates the distance from this vector to the passed vector.

-

public {Number} distance(Vector2D);

-
-
[returns]
{Number} the distance between the two vectors
-
- - -
- - - -
- -Back to top

.distanceSq

-

Calculates the squared distance from this vector to the passed vector. -This function avoids calculating the square root, thus being slightly faster than .distance( ).

-

public {Number} distanceSq(Vector2D);

-
-
[returns]
{Number} the squared distance between the two vectors
-
- -

See Also

- - -
- - - -
- -Back to top

.divide

-

Divides this vector by the passed vector.

-

public {Vector2D} divide(Vector2D);

-
-
[returns]
{Vector2D} this vector after dividing
-
- - -
- - - -
- -Back to top

.dotProduct

-

Calculates the dot product of this and the passed vectors

-

public {Number} dotProduct(Vector2D);

-
-
[returns]
{Number} the resultant dot product
-
- - -
- - - -
- -Back to top

.crossProduct

-

Calculates the z component of the cross product of the two vectors augmented to 3D.

-

public {Number} crossProduct(Vector2D);

-
-
[returns]
{Number} the resultant cross product
-
- - -
- - - -
- -Back to top

.equals

-

Determines if this vector is numerically equivalent to the passed vector.

-

public {Boolean} equals(Vector2D);

-
-
[returns]
{Boolean} true if the vectors are equivalent
-
- - -
- - - -
- -Back to top

.perpendicular

-

Calculates a new vector that is perpendicular to this vector. -The perpendicular vector has the same magnitude as this vector and is obtained by a counter-clockwise rotation of 90° of this vector.

-

public {Vector2D} perpendicular([Vector2D]);

-
-
{Vector2D} [result]
An optional parameter to save the result in
-
[returns]
{Vector2D} the perpendicular vector
-
- - -
- - - -
- -Back to top

.getNormal

-

Calculates a new right-handed unit vector that is perpendicular to the line created by this and the passed vector.

-

public {Vector2D} getNormal(Vector2D[, Vector2D]);

-
-
{Vector2D} [result]
An optional parameter to save the result in
-
[returns]
{Vector2D} the new normal vector
-
- - -
- - - -
- -Back to top

.isZero

-

Determines if this vector is equal to <0,0>

-

public {Boolean} isZero();

-
-
[returns]
{Boolean} true if this vector is equal to <0,0>
-
- - -
- - - -
- -Back to top

.magnitude

-

Calculates the magnitude of this vector. -Note: Function objects in JavaScript already have a 'length' member, hence the use of magnitude instead.

-

public {Number} magnitude();

-
-
[returns]
{Number} the magnitude of this vector
-
- - -
- - - -
- -Back to top

.magnitudeSq

-

Calculates the square of the magnitude of this vector. -This function avoids calculating the square root, thus being slightly faster than .magnitude( ).

-

public {Number} magnitudeSq();

-
-
[returns]
{Number} the square of the magnitude of this vector
-
- -

See Also

- - -
- - - -
- -Back to top

.multiply

-

Multiplies this vector by the passed vector

-

public {Vector2D} multiply(Vector2D);

-
-
[returns]
{Vector2D} this vector after multiplying
-
- - -
- - - -
- -Back to top

.negate

-

Negates this vector (ie. <-x,-y>)

-

public {Vector2D} negate();

-
-
[returns]
{Vector2D} this vector after negation
-
- - -
- - - -
- -Back to top

.normalize

-

Normalizes this vector (scales the vector so that its new magnitude is 1) -For vectors where magnitude is 0, <1,0> is returned.

-

public {Vector2D} normalize();

-
-
[returns]
{Vector2D} this vector after normalization
-
- - -
- - - -
- -Back to top

.scale

-

Scales this vector by the passed amount(s) -If scalarY is omitted, scalarX is used for both axes

-

public {Vector2D} scale(Number[, Number]);

-
-
[returns]
{Vector2D} this after scaling
-
- - -
- - - -
- -Back to top

.scaleToMagnitude

-

Scales this vector such that its new magnitude is equal to the passed value.

-

public {Vector2D} scaleToMagnitude(Number);

-
-
[returns]
{Vector2D} this vector after scaling
-
- - -
- - - -
- -Back to top

.setValues

-

Sets the values of this vector using a passed vector or pair of numbers.

-

public {Vector2D} setValues(Vector2D);

-

public {Vector2D} setValues(Number, Number);

-
-
[returns]
{Vector2D} this vector after setting of values
-
- - -
- - - -
- -Back to top

.subtract

-

Subtracts the passed vector from this vector.

-

public {Vector2D} subtract(Vector2D);

-
-
[returns]
{vector2D} this vector after subtracting
-
- - -
- - - -
- -Back to top

.toString

-

Returns a string representation of this vector.

-

public {String} toString();

-
-
[returns]
{String}
-
- - -
- - - -
- -Back to top

.translate

-

Translates (moves) this vector by the passed amounts. -If dy is omitted, dx is used for both axes.

-

public {Vector2D} translate(Number[, Number]);

-
-
[returns]
{Vector2D} this vector after translating
-
- - -
- - - -
- -Back to top

.tripleProduct

-

Calculates the triple product of three vectors. -triple vector product = b(a•c) - a(b•c)

-

public {Vector2D} tripleProduct(Vector2D, Vector2D, Vector2D, [Vector2D]);

-
-
{Vector2D} [result]
An optional parameter to save the result in
-
[returns]
{Vector2D} the triple product as a new vector
-
- - -
- -
-
- -
-
-
- -
- - diff --git a/api/Crafty-math.html b/api/Crafty-math.html index 865df9e..8419cd4 100644 --- a/api/Crafty-math.html +++ b/api/Crafty-math.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.math @@ -53,235 +53,67 @@
-
- - -

Crafty.math

-

Static functions.

-

Properties and Methods

-
- -Back to top

Crafty.math.abs

-

public this Crafty.math.abs(Number n)

-
-
n
Some value.
-
[returns]
Absolute value.
-
- -

Returns the absolute value.

- - -

-
- -Back to top

Crafty.math.amountOf

-

public Number Crafty.math.amountOf(Number checkValue, Number minValue, Number maxValue)

-
-
checkValue
Value that should checked with minimum and maximum.
-
minValue
Minimum value to check.
-
maxValue
Maximum value to check.
-
[returns]
Amount of checkValue compared to minValue and maxValue.
-
- -

Returns the amount of how much a checkValue is more like minValue (=0) +

Crafty.math

src/math.js#L4-7

Static functions.

+

Methods and Properties

Back to top

Crafty.math.abs

src/math.js#L10-17
public this Crafty.math.abs(Number n)
n

Some value.

+
[Returns]

Absolute value.

+

Returns the absolute value.

+
Back to top

Crafty.math.amountOf

src/math.js#L23-33
public Number Crafty.math.amountOf(Number checkValue, Number minValue, Number maxValue)
checkValue

Value that should checked with minimum and maximum.

+
minValue

Minimum value to check.

+
maxValue

Maximum value to check.

+
[Returns]

Amount of checkValue compared to minValue and maxValue.

+

Returns the amount of how much a checkValue is more like minValue (=0) or more like maxValue (=1)

- - -
- - - -
- -Back to top

Crafty.math.clamp

-

public Number Crafty.math.clamp(Number value, Number min, Number max)

-
-
value
A value.
-
max
Maximum that value can be.
-
min
Minimum that value can be.
-
[returns]
The value between minimum and maximum.
-
- -

Restricts a value to be within a specified range.

- - -
- - - -
- -Back to top

Crafty.math.degToRad

-

Converts angle from degree to radian.

-
-
angleInDeg
The angle in degree.
-
[returns]
The angle in radian.
-
- - -
- - - -
- -Back to top

Crafty.math.distance

-

public Number Crafty.math.distance(Number x1, Number y1, Number x2, Number y2)

-
-
x1
First x coordinate.
-
y1
First y coordinate.
-
x2
Second x coordinate.
-
y2
Second y coordinate.
-
[returns]
The distance between the two points.
-
- -

Distance between two points.

- - -
- - - -
- -Back to top

Crafty.math.lerp

-

public Number Crafty.math.lerp(Number value1, Number value2, Number amount)

-
-
value1
One value.
-
value2
Another value.
-
amount
Amount of value2 to value1.
-
[returns]
Linear interpolated value.
-
- -

Linear interpolation. Passing amount with a value of 0 will cause value1 to be returned, +

Back to top

Crafty.math.clamp

src/math.js#L43-52
public Number Crafty.math.clamp(Number value, Number min, Number max)
value

A value.

+
max

Maximum that value can be.

+
min

Minimum that value can be.

+
[Returns]

The value between minimum and maximum.

+

Restricts a value to be within a specified range.

+
Back to top

Crafty.math.degToRad

src/math.js#L63-68

Converts angle from degree to radian.

+
angleInDeg

The angle in degree.

+
[Returns]

The angle in radian.

+
Back to top

Crafty.math.distance

src/math.js#L74-84
public Number Crafty.math.distance(Number x1, Number y1, Number x2, Number y2)
x1

First x coordinate.

+
y1

First y coordinate.

+
x2

Second x coordinate.

+
y2

Second y coordinate.

+
[Returns]

The distance between the two points.

+

Distance between two points.

+
Back to top

Crafty.math.lerp

src/math.js#L91-101
public Number Crafty.math.lerp(Number value1, Number value2, Number amount)
value1

One value.

+
value2

Another value.

+
amount

Amount of value2 to value1.

+
[Returns]

Linear interpolated value.

+

Linear interpolation. Passing amount with a value of 0 will cause value1 to be returned, a value of 1 will cause value2 to be returned.

- - -
- - - -
- -Back to top

Crafty.math.negate

-

public Number Crafty.math.negate(Number percent)

-
-
percent
If you pass 1 a -1 will be returned. If you pass 0 a 1 will be returned.
-
[returns]
1 or -1.
-
- -

Returnes "randomly" -1.

- - -
- - - -
- -Back to top

Crafty.math.radToDeg

-

public Number Crafty.math.radToDeg(Number angle)

-
-
angleInRad
The angle in radian.
-
[returns]
The angle in degree.
-
- -

Converts angle from radian to degree.

- - -
- - - -
- -Back to top

Crafty.math.randomElementOfArray

-

public Object Crafty.math.randomElementOfArray(Array array)

-
-
array
A specific array.
-
[returns]
A random element of a specific array.
-
- -

Returns a random element of a specific array.

- - -
- - - -
- -Back to top

Crafty.math.randomInt

-

public Number Crafty.math.randomInt(Number start, Number end)

-
-
start
Smallest int value that can be returned.
-
end
Biggest int value that can be returned.
-
[returns]
A random int.
-
- -

Returns a random int in within a specific range.

- - -
- - - -
- -Back to top

Crafty.math.randomNumber

-

public Number Crafty.math.randomInt(Number start, Number end)

-
-
start
Smallest number value that can be returned.
-
end
Biggest number value that can be returned.
-
[returns]
A random number.
-
- -

Returns a random number in within a specific range.

- - -
- - - -
- -Back to top

Crafty.math.squaredDistance

-

public Number Crafty.math.squaredDistance(Number x1, Number y1, Number x2, Number y2)

-
-
x1
First x coordinate.
-
y1
First y coordinate.
-
x2
Second x coordinate.
-
y2
Second y coordinate.
-
[returns]
The squared distance between the two points.
-
- -

Squared distance between two points.

- - -
- - - -
- -Back to top

Crafty.math.withinRange

-

public Boolean Crafty.math.withinRange(Number value, Number min, Number max)

-
-
value
The specific value.
-
min
Minimum value.
-
max
Maximum value.
-
[returns]
Returns true if value is within a specific range.
-
- -

Check if a value is within a specific range.

- - -
- -
-
+
Back to top

Crafty.math.negate

src/math.js#L107-114
public Number Crafty.math.negate(Number percent)
percent

If you pass 1 a -1 will be returned. If you pass 0 a 1 will be returned.

+
[Returns]

1 or -1.

+

Returnes "randomly" -1.

+
Back to top

Crafty.math.radToDeg

src/math.js#L123-130
public Number Crafty.math.radToDeg(Number angle)
angleInRad

The angle in radian.

+
[Returns]

The angle in degree.

+

Converts angle from radian to degree.

+
Back to top

Crafty.math.randomElementOfArray

src/math.js#L136-143
public Object Crafty.math.randomElementOfArray(Array array)
array

A specific array.

+
[Returns]

A random element of a specific array.

+

Returns a random element of a specific array.

+
Back to top

Crafty.math.randomInt

src/math.js#L149-157
public Number Crafty.math.randomInt(Number start, Number end)
start

Smallest int value that can be returned.

+
end

Biggest int value that can be returned.

+
[Returns]

A random int.

+

Returns a random int in within a specific range.

+
Back to top

Crafty.math.randomNumber

src/math.js#L163-171
public Number Crafty.math.randomInt(Number start, Number end)
start

Smallest number value that can be returned.

+
end

Biggest number value that can be returned.

+
[Returns]

A random number.

+

Returns a random number in within a specific range.

+
Back to top

Crafty.math.squaredDistance

src/math.js#L177-187
public Number Crafty.math.squaredDistance(Number x1, Number y1, Number x2, Number y2)
x1

First x coordinate.

+
y1

First y coordinate.

+
x2

Second x coordinate.

+
y2

Second y coordinate.

+
[Returns]

The squared distance between the two points.

+

Squared distance between two points.

+
Back to top

Crafty.math.withinRange

src/math.js#L193-202
public Boolean Crafty.math.withinRange(Number value, Number min, Number max)
value

The specific value.

+
min

Minimum value.

+
max

Maximum value.

+
[Returns]

Returns true if value is within a specific range.

+

Check if a value is within a specific range.

+
diff --git a/api/Crafty-mouseButtons.html b/api/Crafty-mouseButtons.html index d5a0470..9d03e4f 100644 --- a/api/Crafty-mouseButtons.html +++ b/api/Crafty-mouseButtons.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.mouseButtons @@ -53,18 +53,13 @@
- + +

Crafty.mouseButtons

src/keycodes.js#L199-209

An object mapping mouseButton names to the corresponding button ID. +In all mouseEvents, we add the e.mouseButton property with a value normalized to match e.button of modern webkit browsers:

+
LEFT: 0,
+MIDDLE: 1,
+RIGHT: 2
diff --git a/api/Crafty-mouseDispatch.html b/api/Crafty-mouseDispatch.html index 6525aa7..85f9f9b 100644 --- a/api/Crafty-mouseDispatch.html +++ b/api/Crafty-mouseDispatch.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.mouseDispatch @@ -53,30 +53,22 @@
-
- - -

Crafty.mouseDispatch

-

Internal method which dispatches mouse events received by Crafty (crafty.stage.elem). -The mouse events get dispatched to the closest entity to the source of the event (if available).

-

You can read more about the MouseEvent, which is the parameter passed to the callback. -https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent

-

This method also sets a global property Crafty.lastEvent, which holds the most recent event that -occured (useful for determining mouse position in every frame).

-

var newestX = Crafty.lastEvent.realX,
-    newestY = Crafty.lastEvent.realY;
-

Notable properties of a MouseEvent e:

-

//(x,y) coordinates of mouse event in web browser screen space
+
+
Crafty.mouseDispatch
src/controls.js#L58-84
Internal method which dispatches mouse events received by Crafty (crafty.stage.elem).
+The mouse events get dispatched to the closest entity to the source of the event (if available).

+
You can read more about the MouseEvent, which is the parameter passed to the callback.
+https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent

+
This method also sets a global property Crafty.lastEvent, which holds the most recent event that
+occured (useful for determining mouse position in every frame).

+
var newestX = Crafty.lastEvent.realX,
+    newestY = Crafty.lastEvent.realY;
Notable properties of a MouseEvent e:

+
//(x,y) coordinates of mouse event in web browser screen space
 e.clientX, e.clientY
-//(x,y) coordinates of mouse event in world/viewport space
+//(x,y) coordinates of mouse event in world/viewport space
 e.realX, e.realY
-// Normalized mouse button according to Crafty.mouseButtons
-e.mouseButton
-

-
See Also

-

-

+// Normalized mouse button according to Crafty.mouseButtons
+e.mouseButton

See Also

diff --git a/api/Crafty-one.html b/api/Crafty-one.html index 00e611f..2d9e130 100644 --- a/api/Crafty-one.html +++ b/api/Crafty-one.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.one @@ -53,23 +53,13 @@
-
- - -

Crafty.one

-

public Number one(String eventName, Function callback)

-
-
eventName
Name of the event to bind to
-
callback
Method to execute upon event triggered
-
[returns]
callback function which can be used for unbind
-
-

Works like Crafty.bind, but will be unbound once the event triggers.

- -

See Also

-
-
+

Crafty.one

src/core.js#L1565-1575
public Number one(String eventName, Function callback)
eventName

Name of the event to bind to

+
callback

Method to execute upon event triggered

+
[Returns]

callback function which can be used for unbind

+

Works like Crafty.bind, but will be unbound once the event triggers.

+

See Also

diff --git a/api/Crafty-paths.html b/api/Crafty-paths.html index 66bd376..6c2e0be 100644 --- a/api/Crafty-paths.html +++ b/api/Crafty-paths.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.paths @@ -53,39 +53,25 @@
-
- - -

Crafty.paths

-

public void Crafty.paths([Object paths])

-
-
paths
Object containing paths for audio and images folders
-
-

Function to define custom folder for audio and images. You should use +

Crafty.paths

src/loader.js#L21-52
public void Crafty.paths([Object paths])
paths

Object containing paths for audio and images folders

+

Function to define custom folder for audio and images. You should use this function to avoid typing the same paths again and again when -loading assets with the Crafty.load() function.

-

If you do not give a object you get the current paths for both audio -and images back.

-

You do not have to define paths.

-

Example

+loading assets with the Crafty.load() function.

+

If you do not give a object you get the current paths for both audio +and images back.

+

You do not have to define paths.

+

Example

Setting folders:

+
Crafty.paths({ audio: "custom/audio/path/", images: "custom/images/path/" });
 
-
-
-
Setting folders:

-
Crafty.paths({ audio: "custom/audio/path/", images: "custom/images/path/" });

-
Crafty.load({
-  "audio": {
-    "ray": ['ray.mp3'] // This loads ray.mp3 from custom/audio/path/ray.mp3
+Crafty.load({
+  "audio": {
+    "ray": ['ray.mp3'] // This loads ray.mp3 from custom/audio/path/ray.mp3
   }
-}, function() {
-  console.log('loaded');
-});
-

-
See Also

-
-
+}, function() { + console.log('loaded'); +});

See Also

diff --git a/api/Crafty-pause.html b/api/Crafty-pause.html index 1b16411..81307cb 100644 --- a/api/Crafty-pause.html +++ b/api/Crafty-pause.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.pause @@ -53,28 +53,16 @@
-
- - -

Crafty.pause

-

public this Crafty.pause(void)

-

Pauses the game by stopping the EnterFrame event from firing. If the game is already paused it is unpaused. + +

Crafty.pause

src/core.js#L1061-1079

Events

Pause
when the game is paused
Unpause
when the game is unpaused
public this Crafty.pause(void)

Pauses the game by stopping the EnterFrame event from firing. If the game is already paused it is unpaused. You can pass a boolean parameter if you want to pause or unpause no matter what the current state is. Modern browsers pauses the game when the page is not visible to the user. If you want the Pause event -to be triggered when that happens you can enable autoPause in Crafty.settings.

-

Example

- -

Have an entity pause the game when it is clicked.

-

button.bind("click", function() {
+to be triggered when that happens you can enable autoPause in Crafty.settings.

+
Example
Have an entity pause the game when it is clicked.

+
button.bind("click", function() {
     Crafty.pause();
-});
-

-
Events

-
Pause
when the game is paused

-
Unpause
when the game is unpaused

-

-
+});
diff --git a/api/Crafty-pixelart.html b/api/Crafty-pixelart.html index f7b46af..6643405 100644 --- a/api/Crafty-pixelart.html +++ b/api/Crafty-pixelart.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.pixelart @@ -53,36 +53,28 @@
-
- - -

Crafty.pixelart

-

public void Crafty.pixelart(Boolean enabled)

-

Sets the image smoothing for drawing images (for both DOM and Canvas). + +

Crafty.pixelart

src/drawing.js#L525-556
public void Crafty.pixelart(Boolean enabled)

Sets the image smoothing for drawing images (for both DOM and Canvas). Setting this to true disables smoothing for images, which is the preferred -way for drawing pixel art. Defaults to false.

-

This feature is experimental and you should be careful with cross-browser compatibility. -The best way to disable image smoothing is to use the Canvas render method and the Sprite component for drawing your entities.

-

If you want to switch modes in the middle of a scene, +way for drawing pixel art. Defaults to false.

+

This feature is experimental and you should be careful with cross-browser compatibility. +The best way to disable image smoothing is to use the Canvas render method and the Sprite component for drawing your entities.

+

If you want to switch modes in the middle of a scene, be aware that canvas entities won't be drawn in the new style until something else invalidates them. -(You can manually invalidate all canvas entities with Crafty("Canvas").trigger("Invalidate");)

-

Note that Firefox_26 currently has a bug +(You can manually invalidate all canvas entities with Crafty("Canvas").trigger("Invalidate");)

+

Note that Firefox_26 currently has a bug which prevents disabling image smoothing for Canvas entities that use the Image component. Use the Sprite component instead. Note that Webkit (Chrome & Safari) currently has a bug link1 link2 that prevents disabling image smoothing -for DOM entities.

-

Example

- -

This is the preferred way to draw pixel art with the best cross-browser compatibility.

-
Crafty.canvas.init();
-Crafty.pixelart(true);
+for DOM entities.

+
Example
This is the preferred way to draw pixel art with the best cross-browser compatibility.

+
Crafty.canvas.init();
+Crafty.pixelart(true);
 
-Crafty.sprite(imgWidth, imgHeight, "spriteMap.png", {sprite1:[0,0]});
-Crafty.e("2D, Canvas, sprite1");
-

-
+Crafty.sprite(imgWidth, imgHeight, "spriteMap.png", {sprite1:[0,0]}); +Crafty.e("2D, Canvas, sprite1");
diff --git a/api/Crafty-polygon.html b/api/Crafty-polygon.html index 5e22bfa..eea66e7 100644 --- a/api/Crafty-polygon.html +++ b/api/Crafty-polygon.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.polygon @@ -53,62 +53,26 @@
-
- - -

Crafty.polygon

-

Polygon object used for hitboxes and click maps. Must pass an Array for each point as an -argument where index 0 is the x position and index 1 is the y position.

-

For example one point of a polygon will look like this: [0,5] where the x is 0 and the y is 5.

-

Can pass an array of the points or simply put each point as an argument.

-

When creating a polygon for an entity, each point should be offset or relative from the entities x and y -(don't include the absolute values as it will automatically calculate this).

-

Example

-
new Crafty.polygon([50,0],[100,100],[0,100]);
-new Crafty.polygon([[50,0],[100,100],[0,100]]);
-

Properties and Methods

- -
- -Back to top

.containsPoint

-

public Boolean .containsPoint(Number x, Number y)

-
-
x
X position of the point
-
y
Y position of the point
-
- -

Method is used to determine if a given point is contained by the polygon.

-

Example

- -
var poly = new Crafty.polygon([50,0],[100,100],[0,100]);
-poly.containsPoint(50, 50); //TRUE
-poly.containsPoint(0, 0); //FALSE
-
- -

-
- -Back to top

.shift

-

public void .shift(Number x, Number y)

-
-
x
Amount to shift the x axis
-
y
Amount to shift the y axis
-
- -

Shifts every single point in the polygon by the specified amount.

-

Example

- -
var poly = new Crafty.polygon([50,0],[100,100],[0,100]);
-poly.shift(5,5);
-//[[55,5], [105,5], [5,105]];
-
- -
- -
-
+

Crafty.polygon

src/2D.js#L1090-1109

Polygon object used for hitboxes and click maps. Must pass an Array for each point as an +argument where index 0 is the x position and index 1 is the y position.

+

For example one point of a polygon will look like this: [0,5] where the x is 0 and the y is 5.

+

Can pass an array of the points or simply put each point as an argument.

+

When creating a polygon for an entity, each point should be offset or relative from the entities x and y +(don't include the absolute values as it will automatically calculate this).

+

Example

new Crafty.polygon([50,0],[100,100],[0,100]);
+new Crafty.polygon([[50,0],[100,100],[0,100]]);

Methods and Properties

Back to top

.containsPoint

src/2D.js#L1119-1133
public Boolean .containsPoint(Number x, Number y)
x

X position of the point

+
y

Y position of the point

+

Method is used to determine if a given point is contained by the polygon.

+

Example

var poly = new Crafty.polygon([50,0],[100,100],[0,100]);
+poly.containsPoint(50, 50); //TRUE
+poly.containsPoint(0, 0); //FALSE
Back to top

.shift

src/2D.js#L1148-1162
public void .shift(Number x, Number y)
x

Amount to shift the x axis

+
y

Amount to shift the y axis

+

Shifts every single point in the polygon by the specified amount.

+

Example

var poly = new Crafty.polygon([50,0],[100,100],[0,100]);
+poly.shift(5,5);
+//[[55,5], [105,5], [5,105]];
diff --git a/api/Crafty-removeAssets.html b/api/Crafty-removeAssets.html index 4390e42..a921cb6 100644 --- a/api/Crafty-removeAssets.html +++ b/api/Crafty-removeAssets.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.removeAssets @@ -53,52 +53,41 @@
-
- - -

Crafty.removeAssets

-

public void Crafty.removeAssets(Object assets)

-

-

data
Object JSON formatted (or JSON string), with assets to remove (accepts sounds, images and sprites)
-
-Removes assets (audio, images, sprites - and related sprite components) in order to allow the browser -to free memory.

-

Recieves a JSON fomatted object (or JSON string) containing 'audio', 'images' and/or 'sprites' + +

Crafty.removeAssets

src/loader.js#L349-394
public void Crafty.removeAssets(Object assets)
data

Object JSON formatted (or JSON string), with assets to remove (accepts sounds, images and sprites)

+

Removes assets (audio, images, sprites - and related sprite components) in order to allow the browser +to free memory.

+

Recieves a JSON fomatted object (or JSON string) containing 'audio', 'images' and/or 'sprites' properties with assets to be deleted. Follows a similar format as Crafty.load 'data' argument. If you pass the exact same object passed to Crafty.load, that will delete everything loaded that way. For sprites, if you want to keep some specific component, just don't pass that component's name in -the sprite 'map'.

-

Note that in order to remove the sprite components related to a given sprite, it's required to +the sprite 'map'.

+

Note that in order to remove the sprite components related to a given sprite, it's required to pass the 'map' property of that sprite, and although its own properties's values (the properties refer to sprite components) are not used in the removing process, omitting them will cause an error (since 'map' is an object, thus it's properties can NOT omitted - however, they can be null, or undefined). It will work as long as the 'map' objects' properties have any value. Or if you define 'map' itself as an array, like: "map": [ "car", "truck" ] instead of "map": { "car": [0,0], "truck": [0,1] }. -This is examplified below ("animals.png" VS. "vehicles.png" sprites).

-

Example

- -

var assetsToRemoveObj = {
-    "audio": {
-        "beep": ["beep.wav", "beep.mp3", "beep.ogg"],
-        "boop": "boop.wav"
+This is examplified below ("animals.png" VS. "vehicles.png" sprites).

+
Example
var assetsToRemoveObj = {
+    "audio": {
+        "beep": ["beep.wav", "beep.mp3", "beep.ogg"],
+        "boop": "boop.wav"
     },
-    "images": ["badguy.bmp", "goodguy.png"],
-    "sprites": {
-        "animals.png": {
-            "map": { "ladybug": [0,0], "lazycat": [0,1] },
+    "images": ["badguy.bmp", "goodguy.png"],
+    "sprites": {
+        "animals.png": {
+            "map": { "ladybug": [0,0], "lazycat": [0,1] },
         },
-        "vehicles.png": {
-            "map": [ "car", "truck" ]
+        "vehicles.png": {
+            "map": [ "car", "truck" ]
         }
     }
-}

-
Crafty.removeAssets(assetsToRemoveObj);
-

-
See Also

-

-
+} + +Crafty.removeAssets(assetsToRemoveObj);

See Also

diff --git a/api/Crafty-removeEvent.html b/api/Crafty-removeEvent.html index 592752e..2e1cdce 100644 --- a/api/Crafty-removeEvent.html +++ b/api/Crafty-removeEvent.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.removeEvent @@ -53,26 +53,16 @@
-
- - -

Crafty.removeEvent

-

public this Crafty.removeEvent(Object ctx, HTMLElement obj, String event, Function callback)

-
-
ctx
Context of the callback or the value of this
-
obj
Element the event is on
-
event
Name of the event
-
callback
Method executed when triggered
-
-

Removes events attached by Crafty.addEvent(). All parameters must +

Crafty.removeEvent

src/extensions.js#L191-204
public this Crafty.removeEvent(Object ctx, HTMLElement obj, String event, Function callback)
ctx

Context of the callback or the value of this

+
obj

Element the event is on

+
event

Name of the event

+
callback

Method executed when triggered

+

Removes events attached by Crafty.addEvent(). All parameters must be the same that were used to attach the event including a reference to the callback method.

- -

See Also

-
-
+
diff --git a/api/Crafty-scene.html b/api/Crafty-scene.html index c8f8936..f927a6a 100644 --- a/api/Crafty-scene.html +++ b/api/Crafty-scene.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.scene @@ -53,24 +53,15 @@
-
- - -

Crafty.scene

-

public void Crafty.scene(String sceneName, Function init[, Function uninit])

-

-

sceneName
Name of the scene to add

-

init
Function to execute when scene is played

-

uninit
Function to execute before next scene is played, after entities with 2D are destroyed
-
-This is equivalent to calling Crafty.defineScene.

-

public void Crafty.scene(String sceneName[, Data])

-

-

sceneName
Name of scene to play

-

Data
The init function of the scene will be called with this data as its parameter. Can be of any type other than a function.
-
-This is equivalent to calling Crafty.enterScene.

+ +

Crafty.scene

src/scenes.js#L8-80

Events

SceneChange [ Data { { oldScene:String, newScene:String } }]
just before a new scene is initialized
SceneDestroy [ Data { { newScene:String } }]
just before the current scene is destroyed
public void Crafty.scene(String sceneName, Function init[, Function uninit])
sceneName

Name of the scene to add

+
init

Function to execute when scene is played

+
uninit

Function to execute before next scene is played, after entities with 2D are destroyed

+

This is equivalent to calling Crafty.defineScene.

+
public void Crafty.scene(String sceneName[, Data])
sceneName

Name of scene to play

+
Data

The init function of the scene will be called with this data as its parameter. Can be of any type other than a function.

+

This is equivalent to calling Crafty.enterScene.

Method to create scenes on the stage. Pass an ID and function to register a scene.

To play a scene, just pass the ID. When a scene is played, all previously-created entities with the 2D component are destroyed. The @@ -78,49 +69,38 @@

You can optionally specify an arugment that will be passed to the scene's init function.

If you want some entities to persist over scenes (as in, not be destroyed) simply add the component Persist.

-

Example

- -
Crafty.defineScene("loading", function() {
-    Crafty.background("#000");
-    Crafty.e("2D, DOM, Text")
-          .attr({ w: 100, h: 20, x: 150, y: 120 })
-          .text("Loading")
-          .css({ "text-align": "center"})
-          .textColor("#FFFFFF");
+
Example
Crafty.defineScene("loading", function() {
+    Crafty.background("#000");
+    Crafty.e("2D, DOM, Text")
+          .attr({ w: 100, h: 20, x: 150, y: 120 })
+          .text("Loading")
+          .css({ "text-align": "center"})
+          .textColor("#FFFFFF");
 });
 
-Crafty.defineScene("UFO_dance",
-             function() {Crafty.background("#444"); Crafty.e("UFO");},
-             function() {...send message to server...});
+Crafty.defineScene("UFO_dance",
+             function() {Crafty.background("#444"); Crafty.e("UFO");},
+             function() {...send message to server...});
 
-// An example of an init function which accepts arguments, in this case an object.
-Crafty.defineScene("square", function(attributes) {
-    Crafty.background("#000");
-    Crafty.e("2D, DOM, Color")
+// An example of an init function which accepts arguments, in this case an object.
+Crafty.defineScene("square", function(attributes) {
+    Crafty.background("#000");
+    Crafty.e("2D, DOM, Color")
           .attr(attributes)
-          .color("red");
+          .color("red");
 
-});
-
This defines (but does not play) two scenes as discussed below.

-
Crafty.enterScene("loading");
-
This command will clear the stage by destroying all 2D entities (except
+});

This defines (but does not play) two scenes as discussed below.

+
Crafty.enterScene("loading");

This command will clear the stage by destroying all 2D entities (except those with the Persist component). Then it will set the background to black and display the text "Loading".

-
Crafty.enterScene("UFO_dance");
-

This command will clear the stage by destroying all 2D entities (except +

Crafty.enterScene("UFO_dance");

This command will clear the stage by destroying all 2D entities (except those with the Persist component). Then it will set the background to gray and create a UFO entity. Finally, the next time the game encounters another command of the form Crafty.scene(scene_name) (if ever), then the game will send a message to the server.

-
Crafty.enterScene("square", {x:10, y:10, w:20, h:20});
-

This will clear the stage, set the background black, and create a red square with the specified position and dimensions. -~~~

- -

Events

-
SceneChange [Data: { oldScene:String, newScene:String }]
just before a new scene is initialized
-
SceneDestroy [Data: { newScene:String }]
just before the current scene is destroyed
-
-
+
Crafty.enterScene("square", {x:10, y:10, w:20, h:20});

This will clear the stage, set the background black, and create a red square with the specified position and dimensions. +```

+
diff --git a/api/Crafty-settings.html b/api/Crafty-settings.html index ce1c895..14d974c 100644 --- a/api/Crafty-settings.html +++ b/api/Crafty-settings.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.settings @@ -53,67 +53,19 @@
-
- - -

Crafty.settings

-

Modify the inner workings of Crafty through the settings.

-

Properties and Methods

-
- -Back to top

Crafty.settings.register

-

public void Crafty.settings.register(String settingName, Function callback)

-
-
settingName
Name of the setting
-
callback
Function to execute when use modifies setting
-
- -

Use this to register custom settings. Callback will be executed when Crafty.settings.modify is used.

- -

See Also

- - -
- - - -
- -Back to top

Crafty.settings.modify

-

public void Crafty.settings.modify(String settingName, * value)

-
-
settingName
Name of the setting
-
value
Value to set the setting to
-
- -

Modify settings through this method.

- -

See Also

- - -
- - - -
- -Back to top

Crafty.settings.get

-

public * Crafty.settings.get(String settingName)

-
-
settingName
Name of the setting
-
[returns]
Current value of the setting
-
- -

Returns the current value of the setting.

- -

See Also

- - -

-
-
+

Crafty.settings

src/core.js#L1669-1672

Modify the inner workings of Crafty through the settings.

+

Methods and Properties

Back to top

Crafty.settings.get

src/core.js#L1711-1720
public * Crafty.settings.get(String settingName)
settingName

Name of the setting

+
[Returns]

Current value of the setting

+

Returns the current value of the setting.

+
Back to top

Crafty.settings.modify

src/core.js#L1694-1703
public void Crafty.settings.modify(String settingName, * value)
settingName

Name of the setting

+
value

Value to set the setting to

+

Modify settings through this method.

+
Back to top

Crafty.settings.register

src/core.js#L1679-1688
public void Crafty.settings.register(String settingName, Function callback)
settingName

Name of the setting

+
callback

Function to execute when use modifies setting

+

Use this to register custom settings. Callback will be executed when Crafty.settings.modify is used.

+
diff --git a/api/Crafty-sprite.html b/api/Crafty-sprite.html index a7aff6b..9849f1d 100644 --- a/api/Crafty-sprite.html +++ b/api/Crafty-sprite.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.sprite @@ -53,22 +53,16 @@
-
- - -

Crafty.sprite

-

public this Crafty.sprite([Number tile, [Number tileh]], String url, Object map[, Number paddingX[, Number paddingY[, Boolean paddingAroundBorder]]])

-

-

tile
Tile size of the sprite map, defaults to 1

-

tileh
Height of the tile; if provided, tile is interpreted as the width

-

url
URL of the sprite image

-

map
Object where the key is what becomes a new component and the value points to a position on the sprite map

-

paddingX
Horizontal space in between tiles. Defaults to 0.

-

paddingY
Vertical space in between tiles. Defaults to paddingX.

-

paddingAroundBorder
If padding should be applied around the border of the sprite sheet. If enabled the first tile starts at (paddingX,paddingY) instead of (0,0). Defaults to false.
-
-Generates components based on positions in a sprite image to be applied to entities.

+ +

Crafty.sprite

src/sprite.js#L6-55
public this Crafty.sprite([Number tile, [Number tileh]], String url, Object map[, Number paddingX[, Number paddingY[, Boolean paddingAroundBorder]]])
tile

Tile size of the sprite map, defaults to 1

+
tileh

Height of the tile; if provided, tile is interpreted as the width

+
url

URL of the sprite image

+
map

Object where the key is what becomes a new component and the value points to a position on the sprite map

+
paddingX

Horizontal space in between tiles. Defaults to 0.

+
paddingY

Vertical space in between tiles. Defaults to paddingX.

+
paddingAroundBorder

If padding should be applied around the border of the sprite sheet. If enabled the first tile starts at (paddingX,paddingY) instead of (0,0). Defaults to false.

+

Generates components based on positions in a sprite image to be applied to entities.

Accepts a tile size, URL and map for the name of the sprite and its position.

The position must be an array containing the position of the sprite where index 0 is the x position, 1 is the y position and optionally 2 is the width and 3 @@ -78,27 +72,19 @@ passed for tile size.

Entities that add the generated components are also given the 2D component, and a component called Sprite.

-

Example

- -
Crafty.sprite("imgs/spritemap6.png", {flower:[0,0,20,30]});
-var flower_entity = Crafty.e("2D, DOM, flower");
-

The first line creates a component called flower associated with the sub-image of +

Example

Crafty.sprite("imgs/spritemap6.png", {flower:[0,0,20,30]});
+var flower_entity = Crafty.e("2D, DOM, flower");

The first line creates a component called flower associated with the sub-image of spritemap6.png with top-left corner (0,0), width 20 pixels, and height 30 pixels. The second line creates an entity with that image. (Note: The 2D is not really necessary here, because adding the flower component automatically also adds the 2D component.)

-
Crafty.sprite(50, "imgs/spritemap6.png", {flower:[0,0], grass:[0,1,3,1]});
-

In this case, the flower component is pixels 0 <= x < 50, 0 <= y < 50, and the +

Crafty.sprite(50, "imgs/spritemap6.png", {flower:[0,0], grass:[0,1,3,1]});

In this case, the flower component is pixels 0 <= x < 50, 0 <= y < 50, and the grass component is pixels 0 <= x < 150, 50 <= y < 100. (The 3 means grass has a width of 3 tiles, i.e. 150 pixels.)

-
Crafty.sprite(50, 100, "imgs/spritemap6.png", {flower:[0,0], grass:[0,1]}, 10);
-

In this case, each tile is 50x100, and there is a spacing of 10 pixels between +

Crafty.sprite(50, 100, "imgs/spritemap6.png", {flower:[0,0], grass:[0,1]}, 10);

In this case, each tile is 50x100, and there is a spacing of 10 pixels between consecutive tiles. So flower is pixels 0 <= x < 50, 0 <= y < 100, and grass is pixels 0 <= x < 50, 110 <= y < 210.

- -

See Also

-
-
+

See Also

diff --git a/api/Crafty-stage.html b/api/Crafty-stage.html index a70c10d..de6490a 100644 --- a/api/Crafty-stage.html +++ b/api/Crafty-stage.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.stage @@ -53,64 +53,21 @@
-
- - -

Crafty.stage

-

The stage where all the DOM entities will be placed.

-

Properties and Methods

-
- -Back to top

Crafty.stage.elem

-

The #cr-stage div element.

- - -

-
- -Back to top

Crafty.stage.inner

-

Crafty.stage.inner is a div inside the #cr-stage div that holds all DOM entities. +

Crafty.stage

src/viewport.js#L504-507

The stage where all the DOM entities will be placed.

+

Methods and Properties

Back to top

Crafty.stage.elem

src/viewport.js#L510-513

The #cr-stage div element.

+
Back to top

Crafty.stage.inner

src/viewport.js#L516-527

Crafty.stage.inner is a div inside the #cr-stage div that holds all DOM entities. If you use canvas, a canvas element is created at the same level in the dom -as the the Crafty.stage.inner div. So the hierarchy in the DOM is

-
Crafty.stage.elem
+as the the Crafty.stage.inner div. So the hierarchy in the DOM is

+
Crafty.stage.elem
  - Crafty.stage.inner (a div HTMLElement)
- - Crafty.canvas._canvas (a canvas HTMLElement)
-

-
-
- - - -
- -Back to top

Crafty.viewport.reload

-

public Crafty.viewport.reload()

-

Recalculate and reload stage width, height and position. + - Crafty.canvas._canvas (a canvas HTMLElement)

Back to top

Crafty.viewport.reload

src/viewport.js#L678-687
public Crafty.viewport.reload()

Recalculate and reload stage width, height and position. Useful when browser return wrong results on init (like safari on Ipad2). You should also call this method if you insert custom DOM elements that affect Crafty's stage offset.

- - -
- - - -
- -Back to top

Crafty.viewport.reset

-

public Crafty.viewport.reset()

-

Resets the viewport to starting values, and cancels any existing camera animations. +

Back to top

Crafty.viewport.reset

src/viewport.js#L707-715

Events

StopCamera
called to cancel camera animations
public Crafty.viewport.reset()

Resets the viewport to starting values, and cancels any existing camera animations. Called when scene() is run.

- -

Events

-
StopCamera
called to cancel camera animations
-
- -
- -
-
+
diff --git a/api/Crafty-stop.html b/api/Crafty-stop.html index 9a538a7..4ad6bb9 100644 --- a/api/Crafty-stop.html +++ b/api/Crafty-stop.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.stop @@ -53,25 +53,12 @@
-
- - -

Crafty.stop

-

public this Crafty.stop([bool clearState])

-
-
clearState
if true the stage and all game state is cleared.
-
-

Stops the EnterFrame interval and removes the stage element.

+

Crafty.stop

src/core.js#L1032-1042

Events

CraftyStop
when the game is stopped
public this Crafty.stop([bool clearState])
clearState

if true the stage and all game state is cleared.

+

Stops the EnterFrame interval and removes the stage element.

To restart, use Crafty.init().

- -

Events

-

CraftyStop
when the game is stopped
-

-

See Also

-
-
+

See Also

diff --git a/api/Crafty-support.html b/api/Crafty-support.html index 75b8461..2bca37e 100644 --- a/api/Crafty-support.html +++ b/api/Crafty-support.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.support @@ -53,111 +53,20 @@
-
- - -

Crafty.support

-

Determines feature support for what Crafty can do.

-

Properties and Methods

-
- -Back to top

Crafty.support.defineProperty

-

Is Object.defineProperty supported?

- - -

-
- -Back to top

Crafty.support.audio

-

Is HTML5 Audio supported?

- - -
- - - -
- -Back to top

Crafty.support.prefix

-

Returns the browser specific prefix (Moz, O, ms, webkit).

- - -
- - - -
- -Back to top

Crafty.support.versionName

-

Version of the browser

- - -
- - - -
- -Back to top

Crafty.support.version

-

Version number of the browser as an Integer (first number)

- - -
- - - -
- -Back to top

Crafty.support.canvas

-

Is the canvas element supported?

- - -
- - - -
- -Back to top

Crafty.support.webgl

-

Is WebGL supported on the canvas element?

- - -
- - - -
- -Back to top

Crafty.support.css3dtransform

-

Is css3Dtransform supported by browser.

- - -
- - - -
- -Back to top

Crafty.support.deviceorientation

-

Is deviceorientation event supported by browser.

- - -
- - - -
- -Back to top

Crafty.support.devicemotion

-

Is devicemotion event supported by browser.

- - -
- -
-
+

Crafty.support

src/extensions.js#L4-7

Determines feature support for what Crafty can do.

+

Methods and Properties

Back to top

Crafty.support.audio

src/extensions.js#L50-53

Is HTML5 Audio supported?

+
Back to top

Crafty.support.canvas

src/extensions.js#L84-87

Is the canvas element supported?

+
Back to top

Crafty.support.css3dtransform

src/extensions.js#L108-111

Is css3Dtransform supported by browser.

+
Back to top

Crafty.support.defineProperty

src/extensions.js#L35-38

Is Object.defineProperty supported?

+
Back to top

Crafty.support.devicemotion

src/extensions.js#L122-125

Is devicemotion event supported by browser.

+
Back to top

Crafty.support.deviceorientation

src/extensions.js#L115-118

Is deviceorientation event supported by browser.

+
Back to top

Crafty.support.prefix

src/extensions.js#L57-60

Returns the browser specific prefix (Moz, O, ms, webkit).

+
Back to top

Crafty.support.version

src/extensions.js#L76-79

Version number of the browser as an Integer (first number)

+
Back to top

Crafty.support.versionName

src/extensions.js#L69-72

Version of the browser

+
Back to top

Crafty.support.webgl

src/extensions.js#L91-94

Is WebGL supported on the canvas element?

+
diff --git a/api/Crafty-timer.html b/api/Crafty-timer.html index 87ebb51..a006612 100644 --- a/api/Crafty-timer.html +++ b/api/Crafty-timer.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.timer @@ -53,88 +53,27 @@
-
- - -

Crafty.timer

-

Handles game ticks

-

Properties and Methods

-
- -Back to top

Crafty.timer.steptype

-

public void Crafty.timer.steptype(mode [, maxTimeStep])

-

Can be called to set the type of timestep the game loop uses

-
-
mode
the type of time loop. Allowed values are "fixed", "semifixed", and "variable". Crafty defaults to "fixed".
-
mode
For "fixed", sets the max number of frames per step. For "variable" and "semifixed", sets the maximum time step allowed.
-
- -
diff --git a/api/Crafty-touchDispatch.html b/api/Crafty-touchDispatch.html index 64fb553..0bbca24 100644 --- a/api/Crafty-touchDispatch.html +++ b/api/Crafty-touchDispatch.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.touchDispatch @@ -53,18 +53,12 @@
-
- - -

Crafty.touchDispatch

-

TouchEvents have a different structure then MouseEvents. + +

Crafty.touchDispatch

src/controls.js#L200-208

TouchEvents have a different structure then MouseEvents. The relevant data lives in e.changedTouches[0]. To normalize TouchEvents we catch them and dispatch a mock MouseEvent instead.

- -

See Also

-
-
+
diff --git a/api/Crafty-trigger.html b/api/Crafty-trigger.html index d990ac4..157e760 100644 --- a/api/Crafty-trigger.html +++ b/api/Crafty-trigger.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.trigger @@ -53,23 +53,13 @@
-
- - -

Crafty.trigger

-

public void Crafty.trigger(String eventName, * data)

-
-
eventName
Name of the event to trigger
-
data
Arbitrary data to pass into the callback as an argument
-
-

This method will trigger every single callback attached to the event name. This means +

Crafty.trigger

src/core.js#L1454-1464
public void Crafty.trigger(String eventName, * data)
eventName

Name of the event to trigger

+
data

Arbitrary data to pass into the callback as an argument

+

This method will trigger every single callback attached to the event name. This means every global event and every entity that has a callback.

- -

See Also

-
-
+

See Also

diff --git a/api/Crafty-unbind.html b/api/Crafty-unbind.html index 3d96809..51f1265 100644 --- a/api/Crafty-unbind.html +++ b/api/Crafty-unbind.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.unbind @@ -53,37 +53,23 @@
-
- - -

Crafty.unbind

-

public Boolean Crafty.unbind(String eventName, Function callback)

-

-

eventName
Name of the event to unbind

-

callback
Function to unbind
-
-public Boolean Crafty.unbind(String eventName, Number callbackID)

-

-

callbackID
ID of the callback

-

[returns]
True or false depending on if a callback was unbound
-
-Unbind any event from any entity or global event.

-

Example

-
   var play_gameover_sound = function () {...};
-   Crafty.bind('GameOver', play_gameover_sound);
+
Crafty.unbind
src/core.js#L1586-1614
public Boolean Crafty.unbind(String eventName, Function callback)
 eventName 
Name of the event to unbind

+
 callback 
Function to unbind

+
public Boolean Crafty.unbind(String eventName, Number callbackID)
 callbackID 
ID of the callback

+
 [Returns] 
True or false depending on if a callback was unbound

+
Unbind any event from any entity or global event.

+
Example
   var play_gameover_sound = function () {...};
+   Crafty.bind('GameOver', play_gameover_sound);
    ...
-   Crafty.unbind('GameOver', play_gameover_sound);
-
The first line defines a callback function. The second line binds that
+   Crafty.unbind('GameOver', play_gameover_sound);

The first line defines a callback function. The second line binds that function so that Crafty.trigger('GameOver') causes that function to run. The third line unbinds that function.

-
   Crafty.unbind('GameOver');
-

This unbinds ALL global callbacks for the event 'GameOver'. That +

   Crafty.unbind('GameOver');

This unbinds ALL global callbacks for the event 'GameOver'. That includes all callbacks attached by Crafty.bind('GameOver', ...), but none of the callbacks attached by some_entity.bind('GameOver', ...).

-
-
+
diff --git a/api/Crafty-uniqueBind.html b/api/Crafty-uniqueBind.html index 64f6ba3..df89cf1 100644 --- a/api/Crafty-uniqueBind.html +++ b/api/Crafty-uniqueBind.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.uniqueBind @@ -53,23 +53,13 @@
-
- - -

Crafty.uniqueBind

-

public Number uniqueBind(String eventName, Function callback)

-
-
eventName
Name of the event to bind to
-
callback
Method to execute upon event triggered
-
[returns]
callback function which can be used for unbind
-
-

Works like Crafty.bind, but prevents a callback from being bound multiple times.

- -

See Also

-
-
+

Crafty.uniqueBind

src/core.js#L1548-1558
public Number uniqueBind(String eventName, Function callback)
eventName

Name of the event to bind to

+
callback

Method to execute upon event triggered

+
[Returns]

callback function which can be used for unbind

+

Works like Crafty.bind, but prevents a callback from being bound multiple times.

+

See Also

diff --git a/api/Crafty-viewport.html b/api/Crafty-viewport.html index f753754..4643b93 100644 --- a/api/Crafty-viewport.html +++ b/api/Crafty-viewport.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty.viewport @@ -53,260 +53,83 @@
-
- - -

Crafty.viewport

-

Viewport is essentially a 2D camera looking at the stage. Can be moved or zoomed, which + +

Crafty.viewport

src/viewport.js#L5-22

Events

ViewportScroll
when the viewport's x or y coordinates change
ViewportScale
when the viewport's scale changes
ViewportResize
when the viewport's dimension's change
InvalidateViewport
when the viewport changes
StopCamera
when any camera animations should stop, such as at the start of a new animation.
CameraAnimationDone
when a camera animation comes reaches completion

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

Tip: At any given moment, the stuff that you can see is...

x between (-Crafty.viewport._x) and (-Crafty.viewport._x + (Crafty.viewport._width / Crafty.viewport._scale))

y between (-Crafty.viewport._y) and (-Crafty.viewport._y + (Crafty.viewport._height / Crafty.viewport._scale))

- -

Events

-
ViewportScroll
when the viewport's x or y coordinates change
-
ViewportScale
when the viewport's scale changes
-
ViewportResize
when the viewport's dimension's change
-
InvalidateViewport
when the viewport changes
-
StopCamera
when any camera animations should stop, such as at the start of a new animation.
-
CameraAnimationDone
when a camera animation comes reaches completion
-

Properties and Methods

- -
- -Back to top

Crafty.viewport.clampToEntities

-

Decides if the viewport functions should clamp to game entities. +

Methods and Properties

Back to top

Crafty.viewport._scale

src/viewport.js#L62-71

This value is the current scale (zoom) of the viewport. When the value is bigger than 1, everything +looks bigger (zoomed in). When the value is less than 1, everything looks smaller (zoomed out). This +does not alter the size of the stage itself, just the magnification of what it shows.

+

This is a read-only property: Do not set it directly. Instead, use Crafty.viewport.scale(...) +or Crafty.viewport.zoom(...)

+
Back to top

Crafty.viewport.bounds

src/viewport.js#L76-96

A rectangle which defines the bounds of the viewport. +It should be an object with two properties, max and min, +which are each an object with x and y properties.

+

If this property is null, Crafty uses the bounding box of all the items +on the stage. This is the initial value. (To prevent this behavior, set Crafty.viewport.clampToEntities to false)

+

If you wish to bound the viewport along one axis but not the other, you can use -Infinity and +Infinity as bounds.

+

Example

Set the bounds to a 500 by 500 square:

+
Crafty.viewport.bounds = {min:{x:0, y:0}, max:{x:500, y:500}};
Back to top

Crafty.viewport.centerOn

src/viewport.js#L236-243
public void Crafty.viewport.centerOn(Object target, Number time)
Object target

An entity with the 2D component

+
Number time

The duration in ms of the camera motion

+

Centers the viewport on the given entity.

+
Back to top

Crafty.viewport.clampToEntities

src/viewport.js#L25-32

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 +

Back to top

Crafty.viewport.follow

src/viewport.js#L189-204
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.init

src/viewport.js#L467-480
public void Crafty.viewport.init([Number width, Number height, String stage_elem])
public void Crafty.viewport.init([Number width, Number height, HTMLElement stage_elem])
Number width

Width of the viewport

+
Number height

Height of the viewport

+
String or HTMLElement stage_elem

the element to use as the stage (either its id or the actual element).

+

Initialize the viewport. If the arguments 'width' or 'height' are missing, 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'.

+
Back to top

Crafty.viewport.mouselook

src/viewport.js#L377-387
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.

+

If the user starts a drag, "StopCamera" will be triggered, which will cancel any existing camera animations.

+
Back to top

Crafty.viewport.pan

src/viewport.js#L133-142
public void Crafty.viewport.pan(Number dx, Number dy, Number time)
Number dx

The distance along the x axis

+
Number dy

The distance along the y axis

+
Number time

The duration in ms for the entire camera movement

+

Pans the camera a given number of pixels over the specified time

+
Back to top

Crafty.viewport.scale

src/viewport.js#L347-367
public void Crafty.viewport.scale(Number amt)
Number amt

amount to zoom/scale in on the elements

+

Adjusts the scale (zoom). When amt is 1, it is set to the normal scale, +e.g. an entity with this.w == 20 would appear exactly 20 pixels wide. +When amt is 10, that same entity would appear 200 pixels wide (i.e., zoomed in +by a factor of 10), and when amt is 0.1, that same entity would be 2 pixels wide +(i.e., zoomed out by a factor of (1 / 0.1)).

+

If you pass an amt of 0, it is treated the same as passing 1, i.e. the scale is reset.

+

This method sets the absolute scale, while Crafty.viewport.zoom sets the scale relative to the existing value.

+

Example

Crafty.viewport.scale(2); // Zoom in -- all entities will appear twice as large.
Back to top

Crafty.viewport.scroll

src/viewport.js#L100-115
Crafty.viewport.scroll(String axis, Number val)
axis

'x' or 'y'

+
val

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.x

src/viewport.js#L37-46

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 +

Back to top

Crafty.viewport.y

src/viewport.js#L49-58

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._scale

-

This value is the current scale (zoom) of the viewport. When the value is bigger than 1, everything -looks bigger (zoomed in). When the value is less than 1, everything looks smaller (zoomed out). This -does not alter the size of the stage itself, just the magnification of what it shows.

-

This is a read-only property: Do not set it directly. Instead, use Crafty.viewport.scale(...) -or Crafty.viewport.zoom(...)

- - -
- - - -
- -Back to top

Crafty.viewport.bounds

-

A rectangle which defines the bounds of the viewport. -It should be an object with two properties, max and min, -which are each an object with x and y properties.

-

If this property is null, Crafty uses the bounding box of all the items -on the stage. This is the initial value. (To prevent this behavior, set Crafty.viewport.clampToEntities to false)

-

If you wish to bound the viewport along one axis but not the other, you can use -Infinity and +Infinity as bounds.

-

Example

- -

Set the bounds to a 500 by 500 square:

-

Crafty.viewport.bounds = {min:{x:0, y:0}, max:{x:500, y:500}};
-

-

See Also

- - -
- - - -
- -Back to top

Crafty.viewport.scroll

-

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

-
-
axis
'x' or 'y'
-
val
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(Number dx, Number dy, Number time)

-
-
Number dx
The distance along the x axis
-
Number dy
The distance along the y axis
-
Number time
The duration in ms for the entire camera movement
-
- -

Pans the camera a given number of pixels over the specified time

- - -

-
- -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 duration in ms of the camera motion
-
- -

Centers the viewport on the given 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 ms of the entire zoom operation
-
- -

Zooms the camera in on a given point. amt > 1 will bring the camera closer to the subject +

Back to top

Crafty.viewport.zoom

src/viewport.js#L258-269
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 ms 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 reset to the default zoom level 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 elements
-
- -

Adjusts the scale (zoom). When amt is 1, it is set to the normal scale, -e.g. an entity with this.w == 20 would appear exactly 20 pixels wide. -When amt is 10, that same entity would appear 200 pixels wide (i.e., zoomed in -by a factor of 10), and when amt is 0.1, that same entity would be 2 pixels wide -(i.e., zoomed out by a factor of (1 / 0.1)).

-

If you pass an amt of 0, it is treated the same as passing 1, i.e. the scale is reset.

-

This method sets the absolute scale, while Crafty.viewport.zoom sets the scale relative to the existing value.

-

Example

- -

Crafty.viewport.scale(2); // Zoom in -- all entities will appear twice as large.
-

-

See Also

- - -
- - - -
- -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.

-

If the user starts a drag, "StopCamera" will be triggered, which will cancel any existing camera animations.

- - -
- - - -
- -Back to top

Crafty.viewport.init

-

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

-

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

-
-
Number width
Width of the viewport
-
Number height
Height of the viewport
-
String or HTMLElement stage_elem
the element to use as the stage (either its id or the actual element).
-
- -

Initialize the viewport. If the arguments 'width' or 'height' are missing, 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'.

- -

See Also

- - -
- -
-
+
diff --git a/api/Crafty.html b/api/Crafty.html index 5998bc4..8e86fe9 100644 --- a/api/Crafty.html +++ b/api/Crafty.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Crafty @@ -53,31 +53,20 @@
-
- - -

Crafty

-

Select a set of or single entities by components or an entity's ID.

+ +

Crafty

src/core.js#L3-37

Select a set of or single entities by components or an entity's ID.

Crafty uses syntax similar to jQuery by having a selector engine to select entities by their components.

If there is more than one match, the return value is an Array-like object listing the ID numbers of each matching entity. If there is exactly one match, the entity itself is returned. If you're not sure how many matches to expect, check the number of matches via Crafty(...).length. Alternatively, use Crafty(...).each(...), which works in all cases.

-

Example

- -
   Crafty("MyComponent")
-   Crafty("Hello 2D Component")
-   Crafty("Hello, 2D, Component")
-

The first selector will return all entities that have the component MyComponent. The second will return all entities that have Hello and 2D and Component whereas the last will return all entities that have at least one of those components (or).

-
  Crafty("")
-

Passing will select all entities.

-
  Crafty(1)
-

Passing an integer will select the entity with that ID.

+

Example

   Crafty("MyComponent")
+   Crafty("Hello 2D Component")
+   Crafty("Hello, 2D, Component")

The first selector will return all entities that have the component MyComponent. The second will return all entities that have Hello and 2D and Component whereas the last will return all entities that have at least one of those components (or).

+
  Crafty("*")

Passing * will select all entities.

+
  Crafty(1)

Passing an integer will select the entity with that ID.

To work directly with an array of entities, use the get() method on a selection. To call a function in the context of each entity, use the .each() method.

The event related methods such as bind and trigger will work on selections of entities.

- -

See Also

-
-
+

See Also

diff --git a/api/DOM.html b/api/DOM.html index 1349e67..d760f67 100644 --- a/api/DOM.html +++ b/api/DOM.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - DOM @@ -53,114 +53,29 @@
-
- - -

DOM

-

Draws entities as DOM nodes, specifically <DIV>s.

-

Properties and Methods

-
- -Back to top

._element

-

The DOM element used to represent the entity.

- - -

-
- -Back to top

.avoidCss3dTransforms

-

Avoids using of CSS 3D Transform for positioning when true. Default value is false.

- - -
- - - -
- -Back to top

.getDomId

-

public this .getId()

-

Get the Id of the DOM element used to represent the entity.

- - -
- - - -
- -Back to top

.DOM

-

public this .DOM(HTMLElement elem)

-
-
elem
HTML element that will replace the dynamically created one
-
- -

Pass a DOM element to use rather than one created. Will set ._element to this value. Removes the old element.

- -

Events

-
Draw [Data: { style:String, type:"DOM", co}]
when the entity is ready to be drawn to the stage
-
- -
- - - -
- -Back to top

.draw

-

public this .draw(void)

-

Updates the CSS properties of the node to draw on the stage.

- - -
- - - -
- -Back to top

.undraw

-

public this .undraw(void)

-

Removes the element from the stage.

- - -
- - - -
- -Back to top

.css

-

public css(String property, String value)

-
-
property
CSS property to modify
-
value
Value to give the CSS property
-
- -

public css(Object map)

-
-
map
Object where the key is the CSS property and the value is CSS value
-
- -

Apply CSS styles to the element.

-

Can pass an object where the key is the style property and the value is style value.

-

For setting one style, simply pass the style as the first argument and the value as the second.

-

The notation can be CSS or JS (e.g. text-align or textAlign).

-

To return a value, pass the property.

-

Note: For entities with "Text" component, some css properties are controlled by separate functions -.textFont() and .textColor(), and ignore .css() settings. See Text component for details.

-

Example

- -
this.css({'text-align': 'center', 'text-decoration': 'line-through'});
-this.css("textAlign", "center");
-this.css("text-align"); //returns center
-
- -
- -
-
+

DOM

src/DOM.js#L4-7

Draws entities as DOM nodes, specifically <DIV>s.

+

Methods and Properties

Back to top

._element

src/DOM.js#L10-13

The DOM element used to represent the entity.

+
Back to top

.avoidCss3dTransforms

src/DOM.js#L19-22

Avoids using of CSS 3D Transform for positioning when true. Default value is false.

+
Back to top

.css

src/DOM.js#L227-255
public css(String property, String value)
property

CSS property to modify

+
value

Value to give the CSS property

+
public css(Object map)
map

Object where the key is the CSS property and the value is CSS value

+

Apply CSS styles to the element.

+

Can pass an object where the key is the style property and the value is style value.

+

For setting one style, simply pass the style as the first argument and the value as the second.

+

The notation can be CSS or JS (e.g. text-align or textAlign).

+

To return a value, pass the property.

+

Note: For entities with "Text" component, some css properties are controlled by separate functions +.textFont() and .textColor(), and ignore .css() settings. See Text component for details.

+

Example

this.css({'text-align': 'center', 'text-decoration': 'line-through'});
+this.css("textAlign", "center");
+this.css("text-align"); //returns center
Back to top

.DOM

src/DOM.js#L102-109

Events

Draw [ Data { { style:String, type:"DOM", co} }]
when the entity is ready to be drawn to the stage
public this .DOM(HTMLElement elem)
elem

HTML element that will replace the dynamically created one

+

Pass a DOM element to use rather than one created. Will set ._element to this value. Removes the old element.

+
Back to top

.draw

src/DOM.js#L120-125
public this .draw(void)

Updates the CSS properties of the node to draw on the stage.

+
Back to top

.getDomId

src/DOM.js#L58-63
public this .getId()

Get the Id of the DOM element used to represent the entity.

+
Back to top

.undraw

src/DOM.js#L212-217
public this .undraw(void)

Removes the element from the stage.

+
diff --git a/api/DebugCanvas.html b/api/DebugCanvas.html index 8b6c153..7315130 100644 --- a/api/DebugCanvas.html +++ b/api/DebugCanvas.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - DebugCanvas @@ -53,64 +53,15 @@
-
- - -

DebugCanvas

-

When this component is added to an entity it will be drawn by the DebugCanvas layer.

+ +

DebugCanvas

src/DebugLayer.js#L4-15

Events

Draw
when the entity is ready to be drawn to the stage
NoCanvas
if the browser does not support canvas

When this component is added to an entity it will be drawn by the DebugCanvas layer.

Crafty.debugCanvas.init() will be automatically called if it is not called already to initialize the canvas element.

To visualise an object's MBR, use "VisibleMBR". To visualise a "Collision" object's hitbox, use "WiredHitBox" or "SolidHitBox".

- -

Events

-
Draw
when the entity is ready to be drawn to the stage
-
NoCanvas
if the browser does not support canvas
-
-

See Also

-

Properties and Methods

- -
- -Back to top

.debugAlpha

-

public .debugAlpha(Number alpha)

-
-
alpha
The alpha level the component will be drawn with
-
- - -
- - - -
- -Back to top

.debugFill

-

public .debugFill([String fillStyle])

-

-

fillStyle
The color the component will be filled with. Defaults to "red". Pass the boolean false to turn off filling.
-

-

Example

- -
var myEntity = Crafty.e("2D, Collision, SolidHitBox ").debugFill("purple")
-
- -

-
- -Back to top

.debugStroke

-

public .debugStroke([String strokeStyle])

-

-

strokeStyle
The color the component will be outlined with. Defaults to "red". Pass the boolean false to turn this off.
-

-

Example

- -
var myEntity = Crafty.e("2D, Collision, WiredHitBox ").debugStroke("white")
-
- -
- -
-
+

Methods and Properties

Back to top

.debugAlpha

src/DebugLayer.js#L43-47
public .debugAlpha(Number alpha)
alpha

The alpha level the component will be drawn with

+
Back to top

.debugFill

src/DebugLayer.js#L54-62
public .debugFill([String fillStyle])
fillStyle

The color the component will be filled with. Defaults to "red". Pass the boolean false to turn off filling.

+

Example

var myEntity = Crafty.e("2D, Collision, SolidHitBox ").debugFill("purple")
Back to top

.debugStroke

src/DebugLayer.js#L71-79
public .debugStroke([String strokeStyle])
strokeStyle

The color the component will be outlined with. Defaults to "red". Pass the boolean false to turn this off.

+

Example

var myEntity = Crafty.e("2D, Collision, WiredHitBox ").debugStroke("white")
diff --git a/api/DebugPolygon.html b/api/DebugPolygon.html index f19d0da..46ad0d5 100644 --- a/api/DebugPolygon.html +++ b/api/DebugPolygon.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - DebugPolygon @@ -53,31 +53,14 @@
-
- - -

DebugPolygon

-

For drawing a polygon to the debug canvas

+ +

DebugPolygon

src/DebugLayer.js#L201-211

For drawing a polygon to the debug canvas

The methods of DebugCanvas can be used to control this component's appearance -- by default it is neither filled nor outlined

For debugging hitboxes, use WiredHitBox or SolidHitBox. For debugging MBR, use VisibleMBR

- -

See Also

-

Properties and Methods

-
- -Back to top

.debugPolygon

-

public .debugPolygon(Polygon poly)

-

-

poly
a polygon to render
-
-Sets the polygon that this component renders to the debug canvas.

- - -
- -
-
+

See Also

Methods and Properties

Back to top

.debugPolygon

src/DebugLayer.js#L219-225
public .debugPolygon(Polygon poly)
poly

a polygon to render

+

Sets the polygon that this component renders to the debug canvas.

+
diff --git a/api/DebugRectangle.html b/api/DebugRectangle.html index dca79ab..36162de 100644 --- a/api/DebugRectangle.html +++ b/api/DebugRectangle.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - DebugRectangle @@ -53,33 +53,15 @@
-
- - -

DebugRectangle

-

A component for rendering an object with a position and dimensions to the debug canvas.

-
var myEntity = Crafty.e("2D, DebugRectangle")
-                     .attr({x: 13, y: 37, w: 42, h: 42})
-                     .debugStroke("green");
-myEntity.debugRectangle(myEntity)
-
-

See Also

-

Properties and Methods

-
- -Back to top

.debugRectangle

-

public .debugRectangle(Object rect)

-

-

rect
an object with _x, _y, _w, and _h to draw
-
-Sets the rectangle that this component draws to the debug canvas.

- - -

-
-
+

DebugRectangle

src/DebugLayer.js#L115-128

A component for rendering an object with a position and dimensions to the debug canvas.

+
var myEntity = Crafty.e("2D, DebugRectangle")
+                     .attr({x: 13, y: 37, w: 42, h: 42})
+                     .debugStroke("green");
+myEntity.debugRectangle(myEntity)

See Also

Methods and Properties

Back to top

.debugRectangle

src/DebugLayer.js#L135-141
public .debugRectangle(Object rect)
rect

an object with _x, _y, _w, and _h to draw

+

Sets the rectangle that this component draws to the debug canvas.

+
diff --git a/api/Delay.html b/api/Delay.html index c89e4fc..0e04f1d 100644 --- a/api/Delay.html +++ b/api/Delay.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Delay @@ -53,82 +53,41 @@
-
- - -

Delay

-

Properties and Methods

-
- -Back to top

.delay

-

public this.delay(Function callback, Number delay[, Number repeat[, Function callbackOff]])

-

-

callback
Method to execute after given amount of milliseconds. If reference of a
-
-method is passed, there's possibility to cancel the delay.

-

-

delay
Amount of milliseconds to execute the method.

-

repeat
(optional) How often to repeat the delayed function. A value of 0 triggers the delayed
-
-function exactly once. A value n > 0 triggers the delayed function exactly n+1 times. A -value of -1 triggers the delayed function indefinitely. Defaults to one execution.

-

-

callbackOff
(optional) Method to execute after delay ends(after all iterations are executed).
-
-If repeat value equals -1, callbackOff will never be triggered.

-

The delay method will execute a function after a given amount of time in milliseconds.

-

It is not a wrapper for setTimeout.

-

If Crafty is paused, the delay is interrupted with the pause and then resume when unpaused

-

If the entity is destroyed, the delay is also destroyed and will not have effect.

-

Example

- - -

The simplest delay

-
console.log("start");
-Crafty.e("Delay").delay(function() {
-  console.log("100ms later");
-}, 100, 0);
-

Delay with callbackOff to be executed after all delay iterations

-
console.log("start");
-Crafty.e("Delay").delay(function() {
-  console.log("100ms later");
-}, 100, 3, function() {
-  console.log("delay finished");
-});
-
- -
- - - -
- -Back to top

.cancelDelay

-

public this.cancelDelay(Function callback)

-
-
callback
Method reference passed to .delay
-
- -

The cancelDelay method will cancel a delay set previously.

-

Example

- -
var doSomething = function(){
-  console.log("doing something");
+
Delay
Methods and Properties
Back to top
.cancelDelay
src/time.js#L89-108
public this.cancelDelay(Function callback)
 callback 
Method reference passed to .delay

+
The cancelDelay method will cancel a delay set previously.

+
Example
var doSomething = function(){
+  console.log("doing something");
 };
 
-// execute doSomething each 100 miliseconds indefinetely
-var ent = Crafty.e("Delay").delay(doSomething, 100, -1);
-
-// and some time later, cancel further execution of doSomething
-ent.cancelDelay(doSomething);
-

-
-

-
-

-

+// execute doSomething each 100 miliseconds indefinetely
+var ent = Crafty.e("Delay").delay(doSomething, 100, -1);
+
+// and some time later, cancel further execution of doSomething
+ent.cancelDelay(doSomething);
Back to top

.delay

src/time.js#L37-77
public this.delay(Function callback, Number delay[, Number repeat[, Function callbackOff]])
callback

Method to execute after given amount of milliseconds. If reference of a

+

method is passed, there's possibility to cancel the delay.

+
delay

Amount of milliseconds to execute the method.

+
repeat

(optional) How often to repeat the delayed function. A value of 0 triggers the delayed

+

function exactly once. A value n > 0 triggers the delayed function exactly n+1 times. A +value of -1 triggers the delayed function indefinitely. Defaults to one execution.

+
callbackOff

(optional) Method to execute after delay ends(after all iterations are executed).

+

If repeat value equals -1, callbackOff will never be triggered.

+

The delay method will execute a function after a given amount of time in milliseconds.

+

It is not a wrapper for setTimeout.

+

If Crafty is paused, the delay is interrupted with the pause and then resume when unpaused

+

If the entity is destroyed, the delay is also destroyed and will not have effect.

+

Example

The simplest delay

+
console.log("start");
+Crafty.e("Delay").delay(function() {
+  console.log("100ms later");
+}, 100, 0);

Delay with callbackOff to be executed after all delay iterations

+
console.log("start");
+Crafty.e("Delay").delay(function() {
+  console.log("100ms later");
+}, 100, 3, function() {
+  console.log("delay finished");
+});
diff --git a/api/Draggable.html b/api/Draggable.html index b0f2959..eca73fe 100644 --- a/api/Draggable.html +++ b/api/Draggable.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Draggable @@ -53,114 +53,26 @@
-
- - -

Draggable

-

Enable drag and drop of the entity.

-

Events

-
Dragging [Data: MouseEvent]
is triggered each frame the entity is being dragged
-
StartDrag [Data: MouseEvent]
is triggered when dragging begins
-
StopDrag [Data: MouseEvent]
is triggered when dragging ends
-

Properties and Methods

- -
- -Back to top

.dragDirection

-

public this .dragDirection()

-

Remove any previously specified direction.

-

public this .dragDirection(vector)

-
-
vector
Of the form of {x: valx, y: valy}, the vector (valx, valy) denotes the move direction.
-
- -

public this .dragDirection(degree)

-

-

degree
A number, the degree (clockwise) of the move direction with respect to the x axis.
-
-Specify the dragging direction.

-

Example

- -
this.dragDirection()
-this.dragDirection({x:1, y:0}) //Horizontal
-this.dragDirection({x:0, y:1}) //Vertical
-// Note: because of the orientation of x and y axis,
-// this is 45 degree clockwise with respect to the x axis.
-this.dragDirection({x:1, y:1}) //45 degree.
-this.dragDirection(60) //60 degree.
-
- -

-
- -Back to top

._startDrag

-

Internal method for starting a drag of an entity either programatically or via Mouse click

-
-
e
a mouse event
-
- - -
- - - -
- -Back to top

.stopDrag

-

public this .stopDrag(void)

-

Stop the entity from dragging. Essentially reproducing the drop.

- -

Events

-

StopDrag
Called right after the mouse listeners are removed
-

-

See Also

- - -
- - - -
- -Back to top

.startDrag

-

public this .startDrag(void)

-

Make the entity follow the mouse positions.

- -

See Also

- - -
- - - -
- -Back to top

.enableDrag

-

public this .enableDrag(void)

-

Rebind the mouse events. Use if .disableDrag has been called.

- -

See Also

- - -
- - - -
- -Back to top

.disableDrag

-

public this .disableDrag(void)

-

Stops entity from being draggable. Reenable with .enableDrag().

- -

See Also

- - -
- -
-
+

Draggable

src/controls.js#L479-485

Enable drag and drop of the entity.

+

Events

Dragging [ Data { MouseEvent }]
is triggered each frame the entity is being dragged
StartDrag [ Data { MouseEvent }]
is triggered when dragging begins
StopDrag [ Data { MouseEvent }]
is triggered when dragging ends

Methods and Properties

Back to top

._startDrag

src/controls.js#L579-584

Internal method for starting a drag of an entity either programatically or via Mouse click

+
e

a mouse event

+
Back to top

.disableDrag

src/controls.js#L649-656
public this .disableDrag(void)

Stops entity from being draggable. Reenable with .enableDrag().

+

See Also

Back to top

.dragDirection

src/controls.js#L537-559
public this .dragDirection()

Remove any previously specified direction.

+
public this .dragDirection(vector)
vector

Of the form of {x: valx, y: valy}, the vector (valx, valy) denotes the move direction.

+
public this .dragDirection(degree)
degree

A number, the degree (clockwise) of the move direction with respect to the x axis.

+

Specify the dragging direction.

+

Example

this.dragDirection()
+this.dragDirection({x:1, y:0}) //Horizontal
+this.dragDirection({x:0, y:1}) //Vertical
+// Note: because of the orientation of x and y axis,
+// this is 45 degree clockwise with respect to the x axis.
+this.dragDirection({x:1, y:1}) //45 degree.
+this.dragDirection(60) //60 degree.
Back to top

.enableDrag

src/controls.js#L633-640
public this .enableDrag(void)

Rebind the mouse events. Use if .disableDrag has been called.

+

See Also

Back to top

.startDrag

src/controls.js#L616-623
public this .startDrag(void)

Make the entity follow the mouse positions.

+

See Also

Back to top

.stopDrag

src/controls.js#L597-605
public this .stopDrag(void)

Events

StopDrag
Called right after the mouse listeners are removed

Stop the entity from dragging. Essentially reproducing the drop.

+

See Also

diff --git a/api/Fourway.html b/api/Fourway.html index 8793cd8..faf8832 100644 --- a/api/Fourway.html +++ b/api/Fourway.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Fourway @@ -53,34 +53,17 @@
-
- - -

Fourway

-

Move an entity in four directions by using the -arrow keys or W, A, S, D.

-

Properties and Methods

- -
-Back to top

.fourway

-

public this .fourway(Number speed)

-

-

speed
Amount of pixels to move the entity whilst a key is down
-
-Constructor to initialize the speed. Component will listen for key events and move the entity appropriately. +

Fourway

src/controls.js#L871-875

Move an entity in four directions by using the +arrow keys or W, A, S, D.

+

Methods and Properties

Back to top

.fourway

src/controls.js#L883-896
public this .fourway(Number speed)
speed

Amount of pixels to move the entity whilst a key is down

+

Constructor to initialize the speed. Component will listen for key events and move the entity appropriately. This includes Up Arrow, Right Arrow, Down Arrow, Left Arrow as well as W, A, S, D.

When direction changes a NewDirection event is triggered with an object detailing the new direction: {x: x_movement, y: y_movement} When entity has moved on either x- or y-axis a Moved event is triggered with an object specifying the old position {x: old_x, y: old_y}

The key presses will move the entity in that direction by the speed passed in the argument.

- -

See Also

- - -

-
-
+

See Also

diff --git a/api/Gravity.html b/api/Gravity.html index 8b73bfb..75237c6 100644 --- a/api/Gravity.html +++ b/api/Gravity.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Gravity @@ -53,71 +53,25 @@
-
- - -

Gravity

-

Adds gravitational pull to the entity.

-

Events

-
Moved
When entity has moved on y-axis a Moved event is triggered with an object specifying the old position {x: old_x, y: old_y}
-

Properties and Methods

- -
- -Back to top

.gravity

-

public this .gravity([comp])

-
-
comp
The name of a component that will stop this entity from falling
-
- -

Enable gravity for this entity no matter whether comp parameter is not specified, +

Gravity

src/2D.js#L958-963

Events

Moved
When entity has moved on y-axis a Moved event is triggered with an object specifying the old position {x: old_x, y: old_y}

Adds gravitational pull to the entity.

+

Methods and Properties

Back to top

.antigravity

src/2D.js#L1079-1083
public this .antigravity()

Disable gravity for this component. It can be reenabled by calling .gravity()

+
Back to top

.gravity

src/2D.js#L975-992
public this .gravity([comp])
comp

The name of a component that will stop this entity from falling

+

Enable gravity for this entity no matter whether comp parameter is not specified, If comp parameter is specified all entities with that component will stop this entity from falling. For a player entity in a platform game this would be a component that is added to all entities -that the player should be able to walk on.

-

Example

- -
Crafty.e("2D, DOM, Color, Gravity")
-  .color("red")
-  .attr({ w: 100, h: 100 })
-  .gravity("platform");
-
- -

-
- -Back to top

.gravityConst

-

public this .gravityConst(g)

-
-
g
gravitational constant
-
- -

Set the gravitational constant to g. The default is .2. The greater g, the faster the object falls.

-

Example

- -
Crafty.e("2D, DOM, Color, Gravity")
-  .color("red")
-  .attr({ w: 100, h: 100 })
-  .gravity("platform")
-  .gravityConst(2)
-
- -
- - - -
- -Back to top

.antigravity

-

public this .antigravity()

-

Disable gravity for this component. It can be reenabled by calling .gravity()

- - -
- -
-
+that the player should be able to walk on.

+

Example

Crafty.e("2D, DOM, Color, Gravity")
+  .color("red")
+  .attr({ w: 100, h: 100 })
+  .gravity("platform");
Back to top

.gravityConst

src/2D.js#L1003-1018
public this .gravityConst(g)
g

gravitational constant

+

Set the gravitational constant to g. The default is .2. The greater g, the faster the object falls.

+

Example

Crafty.e("2D, DOM, Color, Gravity")
+  .color("red")
+  .attr({ w: 100, h: 100 })
+  .gravity("platform")
+  .gravityConst(2)
diff --git a/api/HTML.html b/api/HTML.html index bad2f6d..ab9f81b 100644 --- a/api/HTML.html +++ b/api/HTML.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - HTML @@ -53,77 +53,25 @@
-
- - -

HTML

-

Component allow for insertion of arbitrary HTML into an entity

-

Properties and Methods

-
- -Back to top

.replace

-

public this .replace(String html)

-
-
html
arbitrary html
-
- -

This method will replace the content of this entity with the supplied html

-

Example

- -

Create a link

-
Crafty.e("HTML")
-   .attr({x:20, y:20, w:100, h:100})
-   .replace("<a href='index.html'>Index</a>");
-
- -
- - - -
- -Back to top

.append

-

public this .append(String html)

-
-
html
arbitrary html
-
- -

This method will add the supplied html in the end of the entity

-

Example

- -

Create a link

-
Crafty.e("HTML")
-   .attr({x:20, y:20, w:100, h:100})
-   .append("<a href='index.html'>Index</a>");
-
- -
- - - -
- -Back to top

.prepend

-

public this .prepend(String html)

-
-
html
arbitrary html
-
- -

This method will add the supplied html in the beginning of the entity

-

Example

- -

Create a link

-
Crafty.e("HTML")
-   .attr({x:20, y:20, w:100, h:100})
-   .prepend("<a href='index.html'>Index</a>");
-
- -
- -
-
+

HTML

src/html.js#L4-7

Component allow for insertion of arbitrary HTML into an entity

+

Methods and Properties

Back to top

.append

src/html.js#L38-52
public this .append(String html)
html

arbitrary html

+

This method will add the supplied html in the end of the entity

+

Example

Create a link

+
Crafty.e("HTML")
+   .attr({x:20, y:20, w:100, h:100})
+   .append("<a href='index.html'>Index</a>");
Back to top

.prepend

src/html.js#L60-74
public this .prepend(String html)
html

arbitrary html

+

This method will add the supplied html in the beginning of the entity

+

Example

Create a link

+
Crafty.e("HTML")
+   .attr({x:20, y:20, w:100, h:100})
+   .prepend("<a href='index.html'>Index</a>");
Back to top

.replace

src/html.js#L16-30
public this .replace(String html)
html

arbitrary html

+

This method will replace the content of this entity with the supplied html

+

Example

Create a link

+
Crafty.e("HTML")
+   .attr({x:20, y:20, w:100, h:100})
+   .replace("<a href='index.html'>Index</a>");
diff --git a/api/Image.html b/api/Image.html index 6fe4808..1e3ccdd 100644 --- a/api/Image.html +++ b/api/Image.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Image @@ -53,47 +53,21 @@
-
- - -

Image

-

Draw an image with or without repeating (tiling).

-

Properties and Methods

-
- -Back to top

.image

-

public this .image(String url[, String repeat])

-
-
url
URL of the image
-
repeat
If the image should be repeated to fill the entity.
-
- -

Draw specified image. Repeat follows CSS syntax ("no-repeat", "repeat", "repeat-x", "repeat-y");

-

Note: Default repeat is no-repeat which is different to standard DOM (which is repeat)

-

If the width and height are 0 and repeat is set to no-repeat the width and +

Image

src/drawing.js#L5-8

Draw an image with or without repeating (tiling).

+

Methods and Properties

Back to top

.image

src/drawing.js#L41-69

Events

Invalidate
when the image is loaded
public this .image(String url[, String repeat])
url

URL of the image

+
repeat

If the image should be repeated to fill the entity.

+

Draw specified image. Repeat follows CSS syntax ("no-repeat", "repeat", "repeat-x", "repeat-y");

+

Note: Default repeat is no-repeat which is different to standard DOM (which is repeat)

+

If the width and height are 0 and repeat is set to no-repeat the width and height will automatically assume that of the image. This is an -easy way to create an image without needing sprites.

-

Example

- -

Will default to no-repeat. Entity width and height will be set to the images width and height

-

var ent = Crafty.e("2D, DOM, Image").image("myimage.png");
-

Create a repeating background.

-

var bg = Crafty.e("2D, DOM, Image")
+easy way to create an image without needing sprites.

+
Example
Will default to no-repeat. Entity width and height will be set to the images width and height

+
var ent = Crafty.e("2D, DOM, Image").image("myimage.png");
Create a repeating background.

+
var bg = Crafty.e("2D, DOM, Image")
              .attr({w: Crafty.viewport.width, h: Crafty.viewport.height})
-             .image("bg.png", "repeat");
-

-
Events

-
Invalidate
when the image is loaded

-

-
See Also

-
-
-

-
-
-
+ .image("bg.png", "repeat");
diff --git a/api/Keyboard.html b/api/Keyboard.html index c6c9d9b..8bf4117 100644 --- a/api/Keyboard.html +++ b/api/Keyboard.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Keyboard @@ -53,39 +53,13 @@
-
- - -

Keyboard

-

Give entities keyboard events (keydown and keyup).

-

Properties and Methods

-
- -Back to top

.isDown

-

public Boolean isDown(String keyName)

-
-
keyName
Name of the key to check. See Crafty.keys.
-
-public Boolean isDown(Number keyCode) - -
-
keyCode
Key code in Crafty.keys.
-
- -

Determine if a certain key is currently down.

-

Example

- -

entity.requires('Keyboard').bind('KeyDown', function () { if (this.isDown('SPACE')) jump(); });
-

-

See Also

- - -
- -
-
+

Keyboard

src/controls.js#L667-670

Give entities keyboard events (keydown and keyup).

+

Methods and Properties

Back to top

.isDown

src/controls.js#L673-688
public Boolean isDown(String keyName)
keyName

Name of the key to check. See Crafty.keys.

+
public Boolean isDown(Number keyCode)
keyCode

Key code in Crafty.keys.

+

Determine if a certain key is currently down.

+

Example

entity.requires('Keyboard').bind('KeyDown', function () { if (this.isDown('SPACE')) jump(); });

See Also

diff --git a/api/KeyboardEvent.html b/api/KeyboardEvent.html index 632ab71..029af0a 100644 --- a/api/KeyboardEvent.html +++ b/api/KeyboardEvent.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - KeyboardEvent @@ -53,36 +53,23 @@
-
- - -

KeyboardEvent

-

Keyboard Event triggered by Crafty Core

-

Example

-

Crafty.e("2D, DOM, Color")
-  .attr({x: 100, y: 100, w: 50, h: 50})
-  .color("red")
-  .bind('KeyDown', function(e) {
-    if(e.key == Crafty.keys.LEFT_ARROW) {
-      this.x = this.x-1;
-    } else if (e.key == Crafty.keys.RIGHT_ARROW) {
-      this.x = this.x+1;
-    } else if (e.key == Crafty.keys.UP_ARROW) {
-      this.y = this.y-1;
-    } else if (e.key == Crafty.keys.DOWN_ARROW) {
-      this.y = this.y+1;
+
KeyboardEvent
src/controls.js#L264-289
Keyboard Event triggered by Crafty Core

+
Events
KeyDown 
is triggered for each entity when the DOM 'keydown' event is triggered.
KeyUp 
is triggered for each entity when the DOM 'keyup' event is triggered.
Example
Crafty.e("2D, DOM, Color")
+  .attr({x: 100, y: 100, w: 50, h: 50})
+  .color("red")
+  .bind('KeyDown', function(e) {
+    if(e.key == Crafty.keys.LEFT_ARROW) {
+      this.x = this.x-1;
+    } else if (e.key == Crafty.keys.RIGHT_ARROW) {
+      this.x = this.x+1;
+    } else if (e.key == Crafty.keys.UP_ARROW) {
+      this.y = this.y-1;
+    } else if (e.key == Crafty.keys.DOWN_ARROW) {
+      this.y = this.y+1;
     }
-  });
-

-
Events

-
KeyDown
is triggered for each entity when the DOM 'keydown' event is triggered.

-
KeyUp
is triggered for each entity when the DOM 'keyup' event is triggered.

-

-
See Also

-

-

+  });

See Also

diff --git a/api/Model.html b/api/Model.html index be27d00..53fd851 100644 --- a/api/Model.html +++ b/api/Model.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Model @@ -53,60 +53,37 @@
-
- - -

Model

-

Model is a component that offers new features for isolating business + +

Model

src/model.js#L4-36

Model is a component that offers new features for isolating business logic in your application. It offers default values, dirty values, -and deep events on your data.

-

All data should be accessed via the appropriate methods .get, .set, +and deep events on your data.

+

All data should be accessed via the appropriate methods .get, .set, and .data for the proper events to be triggered. It is not encouraged -to access them directly.

-

Dirty values make it simple to inspect a model and see what values have changed.

-

Deep events allow you to bind to specific fields, like name or even deep fields -like contact.email and get notified when those specific fields are updated.

-

Example

- -
Crafty.c('Person', {
-  name: 'Fox',
-  init: function() { this.requires('Model'); }
+to access them directly.

+
Dirty values make it simple to inspect a model and see what values have changed.

+
Deep events allow you to bind to specific fields, like name or even deep fields
+like contact.email and get notified when those specific fields are updated.

+
Events
Change 
When any data on the model has changed.
Change[key] 
When the specific key on the model has changed.
Change[key.key] 
The nested key value has changed.
Example
Crafty.c('Person', {
+  name: 'Fox',
+  init: function() { this.requires('Model'); }
 });
-person = Crafty.e('Person').attr({name: 'blaine'});
-person.bind('Change[name]', function() {
-  console.log('name changed!');
+person = Crafty.e('Person').attr({name: 'blaine'});
+person.bind('Change[name]', function() {
+  console.log('name changed!');
 });
-person.attr('name', 'blainesch'); // Triggers event
-person.is_dirty('name'); // true
-person.changed // name
-

-
Events

-
Change
When any data on the model has changed.

-
Change[key]
When the specific key on the model has changed.

-
Change[key.key]
The nested key value has changed.

-
Properties and Methods

-
-

-
-Back to top
.is_dirty

-
Helps determine when data or the entire component is "dirty" or has changed attributes.

-
 Example 

+person.attr('name', 'blainesch'); // Triggers event
+person.is_dirty('name'); // true
+person.changed // name

Methods and Properties

Back to top

.is_dirty

src/model.js#L76-92

Helps determine when data or the entire component is "dirty" or has changed attributes.

+

Example

person = Crafty.e('Person').attr({name: 'Fox', age: 24})
+person.is_dirty() // false
+person.is_dirty('name') // false
 
-
person = Crafty.e('Person').attr({name: 'Fox', age: 24})
-person.is_dirty() // false
-person.is_dirty('name') // false
-
-person.attr('name', 'Lucky');
-person.is_dirty(); // true
-person.is_dirty('name'); // true
-person.is_dirty('age'); // false
-person.changed; // ['name']
-

-
-

-
-
+person.attr('name', 'Lucky'); +person.is_dirty(); // true +person.is_dirty('name'); // true +person.is_dirty('age'); // false +person.changed; // ['name']
diff --git a/api/Mouse.html b/api/Mouse.html index 088abf4..1b923da 100644 --- a/api/Mouse.html +++ b/api/Mouse.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Mouse @@ -53,76 +53,37 @@
-
- - -

Mouse

-

Provides the entity with mouse related events

-

To be able to use the events on a entity, you have to remember to include the Mouse component, else the events will not get triggered.

-

You can read more about the MouseEvent, which is the parameter passed to the callback. -https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent

-

Crafty adds the mouseButton property to MouseEvents that match one of

+ +

Mouse

src/controls.js#L392-430

Provides the entity with mouse related events

+

Events

MouseOver [ Data { MouseEvent }]
when the mouse enters
MouseOut [ Data { MouseEvent }]
when the mouse leaves
MouseDown [ Data { MouseEvent }]
when the mouse button is pressed on
MouseUp [ Data { MouseEvent }]
when the mouse button is released on
Click [ Data { MouseEvent }]
when the user clicks
DoubleClick [ Data { MouseEvent }]
when the user double clicks
MouseMove [ Data { MouseEvent }]
when the mouse is over and moves

To be able to use the events on a entity, you have to remember to include the Mouse component, else the events will not get triggered.

+

You can read more about the MouseEvent, which is the parameter passed to the callback. +https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent

+

Crafty adds the mouseButton property to MouseEvents that match one of

  • Crafty.mouseButtons.LEFT
  • Crafty.mouseButtons.RIGHT
  • Crafty.mouseButtons.MIDDLE
-

Example

- -
var myEntity = Crafty.e('2D, Canvas, Color, Mouse')
-.attr({x: 10, y: 10, w: 40, h: 40})
-.color('red')
-.bind('Click', function(MouseEvent){
-  alert('clicked', MouseEvent);
+
Example
var myEntity = Crafty.e('2D, Canvas, Color, Mouse')
+.attr({x: 10, y: 10, w: 40, h: 40})
+.color('red')
+.bind('Click', function(MouseEvent){
+  alert('clicked', MouseEvent);
 });
 
-myEntity.bind('MouseUp', function(e) {
-   if( e.mouseButton == Crafty.mouseButtons.RIGHT )
-       console.log("Clicked right button");
-})
-

-
Events

-
MouseOver [Data: MouseEvent]
when the mouse enters

-
MouseOut [Data: MouseEvent]
when the mouse leaves

-
MouseDown [Data: MouseEvent]
when the mouse button is pressed on

-
MouseUp [Data: MouseEvent]
when the mouse button is released on

-
Click [Data: MouseEvent]
when the user clicks

-
DoubleClick [Data: MouseEvent]
when the user double clicks

-
MouseMove [Data: MouseEvent]
when the mouse is over and moves

-

-
See Also

-
Properties and Methods

-
-

-
-Back to top
.areaMap

-
public this .areaMap(Crafty.polygon polygon) 

-

-
polygon
Instance of Crafty.polygon used to check if the mouse coordinates are inside this region

-

-public this .areaMap(Array point1, .., Array pointN) 
-
-

-
point#
Array with an x and y position to generate a polygon

-

-
-
Assign a polygon to the entity so that mouse events will only be triggered if
-the coordinates are inside the given polygon.

-
 Example 

-
-
Crafty.e("2D, DOM, Color, Mouse")
-    .color("red")
-    .attr({ w: 100, h: 100 })
-    .bind('MouseOver', function() {console.log("over")})
-    .areaMap([0,0], [50,0], [50,50], [0,50])
-

-
See Also

-
-
-

-

-
+myEntity.bind('MouseUp', function(e) { + if( e.mouseButton == Crafty.mouseButtons.RIGHT ) + console.log("Clicked right button"); +})

Methods and Properties

Back to top

.areaMap

src/controls.js#L440-460
public this .areaMap(Crafty.polygon polygon)
polygon

Instance of Crafty.polygon used to check if the mouse coordinates are inside this region

+
public this .areaMap(Array point1, .., Array pointN)
point#

Array with an x and y position to generate a polygon

+

Assign a polygon to the entity so that mouse events will only be triggered if +the coordinates are inside the given polygon.

+

Example

Crafty.e("2D, DOM, Color, Mouse")
+    .color("red")
+    .attr({ w: 100, h: 100 })
+    .bind('MouseOver', function() {console.log("over")})
+    .areaMap([0,0], [50,0], [50,50], [0,50])
diff --git a/api/Multiway.html b/api/Multiway.html index 23319e2..1cade4d 100644 --- a/api/Multiway.html +++ b/api/Multiway.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Multiway @@ -53,83 +53,21 @@
-
- - -

Multiway

-

Used to bind keys to directions and have the entity move accordingly

-

Events

-
NewDirection [New direction: { x:Number, y:Number }]
triggered when direction changes
-
Moved [Old position: { x:Number, y:Number }]
triggered on movement on either x or y axis. If the entity has moved on both axes for diagonal movement the event is triggered twice
-

Properties and Methods

- -
- -Back to top

.multiway

-

public this .multiway([Number speed,] Object keyBindings )

-

-

speed
Amount of pixels to move the entity whilst a key is down

-

keyBindings
What keys should make the entity go in which direction. Direction is specified in degrees
-
-Constructor to initialize the speed and keyBindings. Component will listen to key events and move the entity appropriately.

-

When direction changes a NewDirection event is triggered with an object detailing the new direction: {x: x_movement, y: y_movement} -When entity has moved on either x- or y-axis a Moved event is triggered with an object specifying the old position {x: old_x, y: old_y}

-

Example

- -
this.multiway(3, {UP_ARROW: -90, DOWN_ARROW: 90, RIGHT_ARROW: 0, LEFT_ARROW: 180});
-this.multiway({x:3,y:1.5}, {UP_ARROW: -90, DOWN_ARROW: 90, RIGHT_ARROW: 0, LEFT_ARROW: 180});
-this.multiway({W: -90, S: 90, D: 0, A: 180});
-
- -

-
- -Back to top

.enableControl

-

public this .enableControl()

-

Enable the component to listen to key events.

-

Example

- -
this.enableControl();
-
- -
- - - -
- -Back to top

.disableControl

-

public this .disableControl()

-

Disable the component to listen to key events.

-

Example

- -
this.disableControl();
-
- -
- - - -
- -Back to top

.speed

-

public this .speed(Number speed)

-
-
speed
The speed the entity has.
-
- -

Change the speed that the entity moves with.

-

Example

- -
this.speed(2);
-
- -
- -
-
+

Multiway

src/controls.js#L698-703

Used to bind keys to directions and have the entity move accordingly

+

Events

NewDirection [ New direction { { x:Number, y:Number } }]
triggered when direction changes
Moved [ Old position { { x:Number, y:Number } }]
triggered on movement on either x or y axis. If the entity has moved on both axes for diagonal movement the event is triggered twice

Methods and Properties

Back to top

.disableControl

src/controls.js#L828-838
public this .disableControl()

Disable the component to listen to key events.

+

Example

this.disableControl();
Back to top

.enableControl

src/controls.js#L811-821
public this .enableControl()

Enable the component to listen to key events.

+

Example

this.enableControl();
Back to top

.multiway

src/controls.js#L752-768
public this .multiway([Number speed,] Object keyBindings )
speed

Amount of pixels to move the entity whilst a key is down

+
keyBindings

What keys should make the entity go in which direction. Direction is specified in degrees

+

Constructor to initialize the speed and keyBindings. Component will listen to key events and move the entity appropriately.

+

When direction changes a NewDirection event is triggered with an object detailing the new direction: {x: x_movement, y: y_movement} +When entity has moved on either x- or y-axis a Moved event is triggered with an object specifying the old position {x: old_x, y: old_y}

+

Example

this.multiway(3, {UP_ARROW: -90, DOWN_ARROW: 90, RIGHT_ARROW: 0, LEFT_ARROW: 180});
+this.multiway({x:3,y:1.5}, {UP_ARROW: -90, DOWN_ARROW: 90, RIGHT_ARROW: 0, LEFT_ARROW: 180});
+this.multiway({W: -90, S: 90, D: 0, A: 180});
Back to top

.speed

src/controls.js#L846-857
public this .speed(Number speed)
speed

The speed the entity has.

+

Change the speed that the entity moves with.

+

Example

this.speed(2);
diff --git a/api/Particles.html b/api/Particles.html index 88208d5..878b743 100644 --- a/api/Particles.html +++ b/api/Particles.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Particles @@ -53,65 +53,43 @@
-
- - -

Particles

-

Based on Parcycle by Mr. Speaker, licensed under the MIT, Ported by Leo Koppelkamm + +

Particles

src/particles.js#L4-10

Events

ParticleEnd
when the particle animation has finished

Based on Parcycle by Mr. Speaker, licensed under the MIT, Ported by Leo Koppelkamm This is canvas only & won't do anything if the browser doesn't support it! To see how this works take a look in https://github.com/craftyjs/Crafty/blob/master/src/particles.js

- -

Events

-
ParticleEnd
when the particle animation has finished
-

Properties and Methods

- -
- -Back to top

.particles

-

public this .particles(Object options)

-
-
options
Map of options that specify the behavior and look of the particles.
-
- -

Example

- -
var options = {
-    maxParticles: 150,
-    size: 18,
-    sizeRandom: 4,
-    speed: 1,
-    speedRandom: 1.2,
-    // Lifespan in frames
-    lifeSpan: 29,
-    lifeSpanRandom: 7,
-    // Angle is calculated clockwise: 12pm is 0deg, 3pm is 90deg etc.
-    angle: 65,
-    angleRandom: 34,
-    startColour: [255, 131, 0, 1],
-    startColourRandom: [48, 50, 45, 0],
-    endColour: [245, 35, 0, 0],
-    endColourRandom: [60, 60, 60, 0],
-    // Only applies when fastMode is off, specifies how sharp the gradients are drawn
-    sharpness: 20,
-    sharpnessRandom: 10,
-    // Random spread from origin
-    spread: 10,
-    // How many frames should this last
-    duration: -1,
-    // Will draw squares instead of circle gradients
-    fastMode: false,
-    gravity: { x: 0, y: 0.1 },
-    // sensible values are 0-3
-    jitter: 0
+

Methods and Properties

Back to top

.particles

src/particles.js#L19-58
public this .particles(Object options)
options

Map of options that specify the behavior and look of the particles.

+

Example

var options = {
+    maxParticles: 150,
+    size: 18,
+    sizeRandom: 4,
+    speed: 1,
+    speedRandom: 1.2,
+    // Lifespan in frames
+    lifeSpan: 29,
+    lifeSpanRandom: 7,
+    // Angle is calculated clockwise: 12pm is 0deg, 3pm is 90deg etc.
+    angle: 65,
+    angleRandom: 34,
+    startColour: [255, 131, 0, 1],
+    startColourRandom: [48, 50, 45, 0],
+    endColour: [245, 35, 0, 0],
+    endColourRandom: [60, 60, 60, 0],
+    // Only applies when fastMode is off, specifies how sharp the gradients are drawn
+    sharpness: 20,
+    sharpnessRandom: 10,
+    // Random spread from origin
+    spread: 10,
+    // How many frames should this last
+    duration: -1,
+    // Will draw squares instead of circle gradients
+    fastMode: false,
+    gravity: { x: 0, y: 0.1 },
+    // sensible values are 0-3
+    jitter: 0
 }
 
-Crafty.e("2D,Canvas,Particles").particles(options);
-
- -

-
-
+Crafty.e("2D,Canvas,Particles").particles(options);
diff --git a/api/SolidHitBox.html b/api/SolidHitBox.html index 98745b8..16022c3 100644 --- a/api/SolidHitBox.html +++ b/api/SolidHitBox.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - SolidHitBox @@ -53,17 +53,11 @@
-
- - -

SolidHitBox

-

Adding this component to an entity with a Collision component will cause its collision polygon to be drawn to the debug canvas, with a default alpha level of 0.7.

-

The methods of DebugCanvas can be used to control this component's appearance.

-

See Also

-
-
+

SolidHitBox

src/DebugLayer.js#L274-281

Adding this component to an entity with a Collision component will cause its collision polygon to be drawn to the debug canvas, with a default alpha level of 0.7.

+

The methods of DebugCanvas can be used to control this component's appearance.

+
diff --git a/api/Sprite.html b/api/Sprite.html index d0b3db7..f6dcc4c 100644 --- a/api/Sprite.html +++ b/api/Sprite.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Sprite @@ -53,70 +53,25 @@
-
- - -

Sprite

-

Component for using tiles in a sprite map.

-

Events

-
Invalidate
when the sprites change
-

Properties and Methods

- -
- -Back to top

.sprite

-

public this .sprite(Number x, Number y[, Number w, Number h])

-
-
x
X cell position
-
y
Y cell position
-
w
Width in cells. Optional.
-
h
Height in cells. Optional.
-
- -

Uses a new location on the sprite map as its sprite. If w or h are ommitted, the width and height are not changed.

-

Values should be in tiles or cells (not pixels).

-

Example

- -
Crafty.e("2D, DOM, Sprite")
-  .sprite(0, 0, 2, 2);
-
- -

-
- -Back to top

.__coord

-

The coordinate of the slide within the sprite in the format of [x, y, w, h].

- - -
- - - -
- -Back to top

.crop

-

public this .crop(Number x, Number y, Number w, Number h)

-
-
x
Offset x position
-
y
Offset y position
-
w
New width
-
h
New height
-
- -

If the entity needs to be smaller than the tile size, use this method to crop it.

-

The values should be in pixels rather than tiles.

-

Example

- -
Crafty.e("2D, DOM, Sprite")
-  .crop(40, 40, 22, 23);
-
- -
- -
-
+

Sprite

src/sprite.js#L143-147

Events

Invalidate
when the sprites change

Component for using tiles in a sprite map.

+

Methods and Properties

Back to top

.__coord

src/sprite.js#L232-236

The coordinate of the slide within the sprite in the format of [x, y, w, h].

+
Back to top

.crop

src/sprite.js#L252-269
public this .crop(Number x, Number y, Number w, Number h)
x

Offset x position

+
y

Offset y position

+
w

New width

+
h

New height

+

If the entity needs to be smaller than the tile size, use this method to crop it.

+

The values should be in pixels rather than tiles.

+

Example

Crafty.e("2D, DOM, Sprite")
+  .crop(40, 40, 22, 23);
Back to top

.sprite

src/sprite.js#L212-229
public this .sprite(Number x, Number y[, Number w, Number h])
x

X cell position

+
y

Y cell position

+
w

Width in cells. Optional.

+
h

Height in cells. Optional.

+

Uses a new location on the sprite map as its sprite. If w or h are ommitted, the width and height are not changed.

+

Values should be in tiles or cells (not pixels).

+

Example

Crafty.e("2D, DOM, Sprite")
+  .sprite(0, 0, 2, 2);
diff --git a/api/SpriteAnimation.html b/api/SpriteAnimation.html index 60f6ee0..5de6706 100644 --- a/api/SpriteAnimation.html +++ b/api/SpriteAnimation.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - SpriteAnimation @@ -53,255 +53,88 @@
-
- - -

SpriteAnimation

-

Used to animate sprites by treating a sprite map as a set of animation frames. + +

SpriteAnimation

src/sprite-animation.js#L5-27

Events

StartAnimation [ Data { {Reel} }]
When an animation starts playing, or is resumed from the paused state
AnimationEnd [ Data { { Reel } }]
When the animation finishes
FrameChange [ Data { { Reel } }]
Each time the frame of the current reel changes
ReelChange [ Data { { Reel } }]
When the reel changes

Used to animate sprites by treating a sprite map as a set of animation frames. Must be applied to an entity that has a sprite-map component.

To define an animation, see the reel method. To play an animation, see the animate method.

A reel is an object that contains the animation frames and current state for an animation. The reel object has the following properties:

-
-
id: (String)
the name of the reel
-
frames: (Array)
A list of frames in the format [xpos, ypos]
-
currentFrame: (Number)
The index of the current frame
-
easing: (Crafty.easing object)
The object that handles the internal progress of the animation.
-
duration: (Number)
The duration in milliseconds.
-
- -

Many animation related events pass a reel object as data. As typical with events, this should be treated as read only data that might be later altered by the entity. If you wish to preserve the data, make a copy of it.

- -

Events

-
StartAnimation [Data: {Reel}]
When an animation starts playing, or is resumed from the paused state
-
AnimationEnd [Data: { Reel }]
When the animation finishes
-
FrameChange [Data: { Reel }]
Each time the frame of the current reel changes
-
ReelChange [Data: { Reel }]
When the reel changes
-
-

See Also

-

Properties and Methods

- -
- -Back to top

.animationSpeed

-

The playback rate of the animation. This property defaults to 1.

- - -
- - - -
- -Back to top

.reel

-

Used to define reels, to change the active reel, and to fetch the id of the active reel.

-

public this .reel(String reelId, Duration duration, Number fromX, Number fromY, Number frameCount)

-

Defines a reel by starting and ending position on the sprite sheet.

-
-
reelId
ID of the animation reel being created
-
duration
The length of the animation in milliseconds.
-
fromX
Starting x position on the sprite map (x's unit is the horizontal size of the sprite in the sprite map).
-
fromY
y position on the sprite map (y's unit is the horizontal size of the sprite in the sprite map). Remains constant through the animation.
-
frameCount
The number of sequential frames in the animation. If negative, the animation will play backwards.
-
- -

public this .reel(String reelId, Duration duration, Array frames)

-

Defines a reel by an explicit list of frames

-
-
reelId
ID of the animation reel being created
-
duration
The length of the animation in milliseconds.
-
frames
An array of arrays containing the x and y values of successive frames: [[x1,y1],[x2,y2],...] (the values are in the unit of the sprite map's width/height respectively).
-
- -

public this .reel(String reelId)

-

Switches to the specified reel. The sprite will be updated to that reel's current frame

-
-
reelID
the ID to switch to
-
- -

public Reel .reel()

-
-
[returns]
The id of the current reel
-
- - -

A method to handle animation reels. Only works for sprites built with the Crafty.sprite methods. -See the Tween component for animation of 2D properties.

-

To setup an animation reel, pass the name of the reel (used to identify the reel later), and either an -array of absolute sprite positions or the start x on the sprite map, the y on the sprite map and then the end x on the sprite map.

-

Example

- -
// Define a sprite-map component
-Crafty.sprite(16, "images/sprite.png", {
-    PlayerSprite: [0,0]
-});
-
-// Define an animation on the second row of the sprite map (fromY = 1)
-// from the left most sprite (fromX = 0) to the fourth sprite
-// on that row (frameCount = 4), with a duration of 1 second
-Crafty.e("2D, DOM, SpriteAnimation, PlayerSprite").reel('PlayerRunning', 1000, 0, 1, 4);
-
-// This is the same animation definition, but using the alternative method
-Crafty.e("2D, DOM, SpriteAnimation, PlayerSprite").reel('PlayerRunning', 1000, [[0, 1], [1, 1], [2, 1], [3, 1]]);
-
- -

-
- -Back to top

.animate

-

public this .animate([String reelId] [, Number loopCount])

-
-
reelId
ID of the animation reel to play. Defaults to the current reel if none is specified.
-
loopCount
Number of times to repeat the animation. Use -1 to repeat indefinitely. Defaults to 1.
-
- -

Play one of the reels previously defined through .reel(...). Simply pass the name of the reel. If you wish the +

id: (String)

the name of the reel

+
frames: (Array)

A list of frames in the format [xpos, ypos]

+
currentFrame: (Number)

The index of the current frame

+
easing: (Crafty.easing object)

The object that handles the internal progress of the animation.

+
duration: (Number)

The duration in milliseconds.

+

Many animation related events pass a reel object as data. As typical with events, this should be treated as read only data that might be later altered by the entity. If you wish to preserve the data, make a copy of it.

+

Methods and Properties

Back to top

.animate

src/sprite-animation.js#L181-210
public this .animate([String reelId] [, Number loopCount])
reelId

ID of the animation reel to play. Defaults to the current reel if none is specified.

+
loopCount

Number of times to repeat the animation. Use -1 to repeat indefinitely. Defaults to 1.

+

Play one of the reels previously defined through .reel(...). Simply pass the name of the reel. If you wish the animation to play multiple times in succession, pass in the amount of times as an additional parameter. -To have the animation repeat indefinitely, pass in -1.

-

If another animation is currently playing, it will be paused.

-

This will always play an animation from the beginning. If you wish to resume from the current state of a reel, use resumeAnimation().

-

Once an animation ends, it will remain at its last frame.

-

Example

- -
// Define a sprite-map component
-Crafty.sprite(16, "images/sprite.png", {
-    PlayerSprite: [0,0]
+To have the animation repeat indefinitely, pass in -1.

+
If another animation is currently playing, it will be paused.

+
This will always play an animation from the beginning.  If you wish to resume from the current state of a reel, use resumeAnimation().

+
Once an animation ends, it will remain at its last frame.

+
Example
// Define a sprite-map component
+Crafty.sprite(16, "images/sprite.png", {
+    PlayerSprite: [0,0]
 });
 
-// Play the animation across 20 frames (so each sprite in the 4 sprite animation should be seen for 5 frames) and repeat indefinitely
-Crafty.e("2D, DOM, SpriteAnimation, PlayerSprite")
-    .reel('PlayerRunning', 20, 0, 0, 3) // setup animation
-    .animate('PlayerRunning', -1); // start animation
-

-
-

-
-
-
-

-
-Back to top
.resumeAnimation

-
public this .resumeAnimation() 

-
This will resume animation of the current reel from its current state.
-If a reel is already playing, or there is no current reel, there will be no effect.

-
-
-

-
-
-
-

-
-Back to top
.pauseAnimation

-
public this .pauseAnimation(void) 

-
Pauses the currently playing animation, or does nothing if no animation is playing.

-
-
-

-
-
-
-

+// Play the animation across 20 frames (so each sprite in the 4 sprite animation should be seen for 5 frames) and repeat indefinitely
+Crafty.e("2D, DOM, SpriteAnimation, PlayerSprite")
+    .reel('PlayerRunning', 20, 0, 0, 3) // setup animation
+    .animate('PlayerRunning', -1); // start animation
Back to top

.animationSpeed

src/sprite-animation.js#L56-60

The playback rate of the animation. This property defaults to 1.

+
Back to top

.getReel

src/sprite-animation.js#L458-467
public Reel .getReel()
[Returns]

The current reel, or null if there is no active reel

+
public Reel .getReel(reelId)
reelId

The id of the reel to fetch.

+
[Returns]

The specified reel, or undefined if no such reel exists.

+
Back to top

.isPlaying

src/sprite-animation.js#L435-449
public Boolean .isPlaying([String reelId])
reelId

The reelId of the reel we wish to examine

+
[Returns]

The current animation state

+

Determines if the specified animation is currently playing. If no reelId is specified, +checks if any animation is playing.

+

Example

myEntity.isPlaying() // is any animation playing
+myEntity.isPlaying('PlayerRunning') // is the PlayerRunning animation playing
Back to top

.loops

src/sprite-animation.js#L306-316
public this .loops(Number loopCount)
loopCount

The number of times to play the animation

+

Sets the number of times the animation will loop for. +If called while an animation is in progress, the current state will be considered the first loop.

+
public Number .loops()
[Returns]

The number of loops left. Returns 0 if no reel is active.

+
Back to top

.pauseAnimation

src/sprite-animation.js#L271-276
public this .pauseAnimation(void)

Pauses the currently playing animation, or does nothing if no animation is playing.

+
Back to top

.reel

src/sprite-animation.js#L69-117

Used to define reels, to change the active reel, and to fetch the id of the active reel.

+
public this .reel(String reelId, Duration duration, Number fromX, Number fromY, Number frameCount)

Defines a reel by starting and ending position on the sprite sheet.

+
reelId

ID of the animation reel being created

+
duration

The length of the animation in milliseconds.

+
fromX

Starting x position on the sprite map (x's unit is the horizontal size of the sprite in the sprite map).

+
fromY

y position on the sprite map (y's unit is the horizontal size of the sprite in the sprite map). Remains constant through the animation.

+
frameCount

The number of sequential frames in the animation. If negative, the animation will play backwards.

+
public this .reel(String reelId, Duration duration, Array frames)

Defines a reel by an explicit list of frames

+
reelId

ID of the animation reel being created

+
duration

The length of the animation in milliseconds.

+
frames

An array of arrays containing the x and y values of successive frames: [[x1,y1],[x2,y2],...] (the values are in the unit of the sprite map's width/height respectively).

+
public this .reel(String reelId)

Switches to the specified reel. The sprite will be updated to that reel's current frame

+
reelID

the ID to switch to

+
public Reel .reel()
[Returns]

The id of the current reel

+

A method to handle animation reels. Only works for sprites built with the Crafty.sprite methods. +See the Tween component for animation of 2D properties.

+

To setup an animation reel, pass the name of the reel (used to identify the reel later), and either an +array of absolute sprite positions or the start x on the sprite map, the y on the sprite map and then the end x on the sprite map.

+

Example

// Define a sprite-map component
+Crafty.sprite(16, "images/sprite.png", {
+    PlayerSprite: [0,0]
+});
 
-Back to top
.resetAnimation

-
public this .resetAnimation() 

-
Resets the current animation to its initial state.  Resets the number of loops to the last specified value, which defaults to 1.

+// Define an animation on the second row of the sprite map (fromY = 1)
+// from the left most sprite (fromX = 0) to the fourth sprite
+// on that row (frameCount = 4), with a duration of 1 second
+Crafty.e("2D, DOM, SpriteAnimation, PlayerSprite").reel('PlayerRunning', 1000, 0, 1, 4);
+
+// This is the same animation definition, but using the alternative method
+Crafty.e("2D, DOM, SpriteAnimation, PlayerSprite").reel('PlayerRunning', 1000, [[0, 1], [1, 1], [2, 1], [3, 1]]);
Back to top

.reelPosition

src/sprite-animation.js#L336-353
public this .reelPosition(Integer position)

Sets the position of the current reel by frame number.

+
position

the frame to jump to. This is zero-indexed. A negative values counts back from the last frame.

+
public this .reelPosition(Number position)

Sets the position of the current reel by percent progress.

+
position

a non-integer number between 0 and 1

+
public this .reelPosition(String position)

Jumps to the specified position. The only currently accepted value is "end", which will jump to the end of the reel.

+
public Number .reelPosition()
[Returns]

The current frame number

+
Back to top

.resetAnimation

src/sprite-animation.js#L287-294
public this .resetAnimation()

Resets the current animation to its initial state. Resets the number of loops to the last specified value, which defaults to 1.

Neither pauses nor resumes the current animation.

- - -
- - - -
- -Back to top

.loops

-

public this .loops(Number loopCount)

-
-
loopCount
The number of times to play the animation
-
- -

Sets the number of times the animation will loop for. -If called while an animation is in progress, the current state will be considered the first loop.

-

public Number .loops()

-
-
[returns]
The number of loops left. Returns 0 if no reel is active.
-
- - -
- - - -
- -Back to top

.reelPosition

-

public this .reelPosition(Integer position)

-

Sets the position of the current reel by frame number.

-
-
position
the frame to jump to. This is zero-indexed. A negative values counts back from the last frame.
-
- -

public this .reelPosition(Number position)

-

Sets the position of the current reel by percent progress.

-
-
position
a non-integer number between 0 and 1
-
- -

public this .reelPosition(String position)

-

Jumps to the specified position. The only currently accepted value is "end", which will jump to the end of the reel.

-

public Number .reelPosition()

-
-
[returns]
The current frame number
-
- - - -
- - - -
- -Back to top

.isPlaying

-

public Boolean .isPlaying([String reelId])

-
-
reelId
The reelId of the reel we wish to examine
-
[returns]
The current animation state
-
- -

Determines if the specified animation is currently playing. If no reelId is specified, -checks if any animation is playing.

-

Example

- -
myEntity.isPlaying() // is any animation playing
-myEntity.isPlaying('PlayerRunning') // is the PlayerRunning animation playing
-
- -
- - - -
- -Back to top

.getReel

-

public Reel .getReel()

-
-
[returns]
The current reel, or null if there is no active reel
-
- -

public Reel .getReel(reelId)

-
-
reelId
The id of the reel to fetch.
-
[returns]
The specified reel, or undefined if no such reel exists.
-
- - - -
- -
-
+
Back to top

.resumeAnimation

src/sprite-animation.js#L253-259
public this .resumeAnimation()

This will resume animation of the current reel from its current state. +If a reel is already playing, or there is no current reel, there will be no effect.

+
diff --git a/api/Storage.html b/api/Storage.html index 3033433..42fbe2b 100644 --- a/api/Storage.html +++ b/api/Storage.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Storage @@ -53,81 +53,31 @@
-
- - -

Storage

-

Very simple way to get and set values, which will persist when the browser is closed also. Storage wraps around HTML5 Web Storage, which is well-supported across browsers and platforms, but limited to 5MB total storage per domain.

-

Properties and Methods

-
- -Back to top

.storage

-

.storage(String key)

-
-
key
a key you would like to get from the storage. It will return null if the key does not exists.
-
-.storage(String key, String value) - -
-
key
the key you would like to save the data under.
-
value
the value you would like to save.
-
-.storage(String key, [Object value, Array value, Boolean value]) - -
-
key
the key you would like to save the data under.
-
value
the value you would like to save, can be an Object or an Array.
-
- -

Storage function is very simple and can be used to either get or set values. -You can store both booleans, strings, objects and arrays.

-

Please note: You should not store data, while the game is playing, as it can cause the game to slow down. You should load data when you start the game, or when the user for an example click a "Save gameprocess" button.

-

Example

- -

Get an already stored value

-
var playername = Crafty.storage('playername');
-

Example

- -

Save a value

-
Crafty.storage('playername', 'Hero');
-

Example

- -

Test to see if a value is already there.

-
var heroname = Crafty.storage('name');
-if(!heroname){
-  // Maybe ask the player what their name is here
-  heroname = 'Guest';
+
Storage
src/storage.js#L4-7
Very simple way to get and set values, which will persist when the browser is closed also. Storage wraps around HTML5 Web Storage, which is well-supported across browsers and platforms, but limited to 5MB total storage per domain.

+
Methods and Properties
Back to top
.storage
src/storage.js#L9-47
.storage(String key)
 key 
a key you would like to get from the storage. It will return null if the key does not exists.

+
.storage(String key, String value)
 key 
the key you would like to save the data under.

+
 value 
the value you would like to save.

+
.storage(String key, [Object value, Array value, Boolean value])
 key 
the key you would like to save the data under.

+
 value 
the value you would like to save, can be an Object or an Array.

+
Storage function is very simple and can be used to either get or set values.
+You can store both booleans, strings, objects and arrays.

+
Please note: You should not store data, while the game is playing, as it can cause the game to slow down. You should load data when you start the game, or when the user for an example click a "Save gameprocess" button.

+
Example
Get an already stored value

+
var playername = Crafty.storage('playername');
Example
Save a value

+
Crafty.storage('playername', 'Hero');
Example
Test to see if a value is already there.

+
var heroname = Crafty.storage('name');
+if(!heroname){
+  // Maybe ask the player what their name is here
+  heroname = 'Guest';
 }
-// Do something with heroname
-

-
-

-
-
-
-

-
-Back to top
.storage.remove

-
.storage.remove(String key) 

-

-
key
a key where you will like to delete the value of.

-

-
-
Generally you do not need to remove values from localStorage, but if you do
+// Do something with heroname
Back to top

.storage.remove

src/storage.js#L75-90
.storage.remove(String key)
key

a key where you will like to delete the value of.

+

Generally you do not need to remove values from localStorage, but if you do store large amount of text, or want to unset something you can do that with -this function.

-

Example

- -

Get an already stored value

-
Crafty.storage.remove('playername');
-
- -
- -
-
+this function.

+

Example

Get an already stored value

+
Crafty.storage.remove('playername');
diff --git a/api/Text.html b/api/Text.html index e0effac..b975cc0 100644 --- a/api/Text.html +++ b/api/Text.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Text @@ -53,13 +53,9 @@
-
- - -

Text

-

Canvas or DOM -Component to make a text entity.

+ +

Text

src/text.js#L4-25

Events

Invalidate
when the text is changed

Component to make a text entity.

By default, text will have the style "10px sans-serif".

Note 1: An entity with the text component is just text! If you want to write text inside an image, you need one entity for the text and another entity for the image. @@ -72,110 +68,41 @@ you cannot use .css() to set the properties which are controlled by .textFont() or .textColor() -- the settings will be ignored.

Note 3: If you use canvas text with glyphs that are taller than standard letters, portions of the glyphs might be cut off.

- -

Events

-
Invalidate
when the text is changed
-

Properties and Methods

- -
- -Back to top

.text

-

public this .text(String text)

-

public this .text(Function textgenerator)

-
-
text
String of text that will be inserted into the DOM or Canvas element.
-
- -

This method will update the text inside the entity.

-

If you need to reference attributes on the entity itself you can pass a function instead of a string.

-

Example

- -
Crafty.e("2D, DOM, Text").attr({ x: 100, y: 100 }).text("Look at me!!");
-
-Crafty.e("2D, DOM, Text").attr({ x: 100, y: 100 })
-    .text(function () { return "My position is " + this._x });
-
-Crafty.e("2D, Canvas, Text").attr({ x: 100, y: 100 }).text("Look at me!!");
-
-Crafty.e("2D, Canvas, Text").attr({ x: 100, y: 100 })
-    .text(function () { return "My position is " + this._x });
-
- -

-
- -Back to top

.textColor

-

public this .textColor(String color)

-
-
color
The color in name, hex, rgb or rgba
-
- -

Change the color of the text. You can use HEX, rgb and rgba colors.

-

If you want the text to be transparent, you should use rgba where you can define alphaChannel.

-

Example

- -

Crafty.e("2D, DOM, Text").attr({ x: 100, y: 100 }).text("Look at me!!")
-  .textColor('#FF0000');

-
Crafty.e("2D, Canvas, Text").attr({ x: 100, y: 100 }).text('Look at me!!')
-  .textColor('rgba(0, 255, 0, 0.5)');

-
Crafty.e("2D, Canvas, Text").attr({ x: 100, y: 100 }).text('Look at me!!')
-  .textColor('white');
-

-

See Also

- - -
- - - -
- -Back to top

.textFont

-

Invalidate -public this .textFont(String key, * value)

-
-
key
Property of the entity to modify
-
value
Value to set the property to
-
- -

public this .textFont(Object map)

-
-
map
Object where the key is the property to modify and the value as the property value
-
- -

Use this method to set font property of the text entity. Possible values are: type, weight, size, family, lineHeight, and variant.

-

When rendered by the canvas, lineHeight and variant will be ignored.

-

Example

- -
Crafty.e("2D, DOM, Text").textFont({ type: 'italic', family: 'Arial' });
-Crafty.e("2D, Canvas, Text").textFont({ size: '20px', weight: 'bold' });
-
-Crafty.e("2D, Canvas, Text").textFont("type", "italic");
-Crafty.e("2D, Canvas, Text").textFont("type"); // italic
-
- -
- - - -
- -Back to top

.unselectable

-

Invalidate -public this .unselectable()

-

This method sets the text so that it cannot be selected (highlighted) by dragging. +

Methods and Properties

Back to top

.text

src/text.js#L98-120
public this .text(String text)
public this .text(Function textgenerator)
text

String of text that will be inserted into the DOM or Canvas element.

+

This method will update the text inside the entity.

+

If you need to reference attributes on the entity itself you can pass a function instead of a string.

+

Example

Crafty.e("2D, DOM, Text").attr({ x: 100, y: 100 }).text("Look at me!!");
+
+Crafty.e("2D, DOM, Text").attr({ x: 100, y: 100 })
+    .text(function () { return "My position is " + this._x });
+
+Crafty.e("2D, Canvas, Text").attr({ x: 100, y: 100 }).text("Look at me!!");
+
+Crafty.e("2D, Canvas, Text").attr({ x: 100, y: 100 })
+    .text(function () { return "My position is " + this._x });
Back to top

.textColor

src/text.js#L152-173
public this .textColor(String color)
color

The color in name, hex, rgb or rgba

+

Change the color of the text. You can use HEX, rgb and rgba colors.

+

If you want the text to be transparent, you should use rgba where you can define alphaChannel.

+

Example

Crafty.e("2D, DOM, Text").attr({ x: 100, y: 100 }).text("Look at me!!")
+  .textColor('#FF0000');
+
+Crafty.e("2D, Canvas, Text").attr({ x: 100, y: 100 }).text('Look at me!!')
+  .textColor('rgba(0, 255, 0, 0.5)');
+
+Crafty.e("2D, Canvas, Text").attr({ x: 100, y: 100 }).text('Look at me!!')
+  .textColor('white');
Back to top

.textFont

src/text.js#L182-204

Events

Invalidate
public this .textFont(String key, * value)
key

Property of the entity to modify

+
value

Value to set the property to

+
public this .textFont(Object map)
map

Object where the key is the property to modify and the value as the property value

+

Use this method to set font property of the text entity. Possible values are: type, weight, size, family, lineHeight, and variant.

+

When rendered by the canvas, lineHeight and variant will be ignored.

+

Example

Crafty.e("2D, DOM, Text").textFont({ type: 'italic', family: 'Arial' });
+Crafty.e("2D, Canvas, Text").textFont({ size: '20px', weight: 'bold' });
+
+Crafty.e("2D, Canvas, Text").textFont("type", "italic");
+Crafty.e("2D, Canvas, Text").textFont("type"); // italic
Back to top

.unselectable

src/text.js#L232-247

Events

Invalidate
public this .unselectable()

This method sets the text so that it cannot be selected (highlighted) by dragging. (Canvas text can never be highlighted, so this only matters for DOM text.) -Works by changing the css property "user-select" and its variants.

-

Likewise, this sets the mouseover cursor to be "default" (arrow), not "text" (I-beam)

-

Example

- -
Crafty.e("2D, DOM, Text").text('This text cannot be highlighted!').unselectable();
-
- -
- -
-
+Works by changing the css property "user-select" and its variants.

+

Likewise, this sets the mouseover cursor to be "default" (arrow), not "text" (I-beam)

+

Example

Crafty.e("2D, DOM, Text").text('This text cannot be highlighted!').unselectable();
diff --git a/api/Tween.html b/api/Tween.html index e5abbee..3740940 100644 --- a/api/Tween.html +++ b/api/Tween.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Tween @@ -53,68 +53,26 @@
-
- - -

Tween

-

Component to animate the change in 2D properties over time.

-

Events

-
TweenEnd [property: String]
when a tween finishes
-

Properties and Methods

- -
- -Back to top

.tween

-

public this .tween(Object properties, Number|String duration)

-
-
properties
Object of numeric properties and what they should animate to
-
duration
Duration to animate the properties over, in milliseconds.
-
- -

This method will animate numeric properties over the specified duration. -These include x, y, w, h, alpha and rotation.

-

The object passed should have the properties as keys and the value should be the resulting -values of the properties. The passed object might be modified if later calls to tween animate the same properties.

-

Example

- -

Move an object to 100,100 and fade out over 200 ms.

-
Crafty.e("2D, Tween")
-   .attr({alpha: 1.0, x: 0, y: 0})
-   .tween({alpha: 0.0, x: 100, y: 100}, 200)
-

Example

- -

Rotate an object over 2 seconds

-
Crafty.e("2D, Tween")
-   .attr({rotation:0})
-   .tween({rotation:180}, 2000)
-
- -
- - - -
- -Back to top

.cancelTween

-

public this .cancelTween(String target)

-
-
target
The property to cancel
-
- -

public this .cancelTween(Object target)

-
-
target
An object containing the properties to cancel.
-
- -

Stops tweening the specified property or properties. +

Tween

src/animation.js#L81-86

Events

TweenEnd [ property { String }]
when a tween finishes

Component to animate the change in 2D properties over time.

+

Methods and Properties

Back to top

.cancelTween

src/animation.js#L172-182
public this .cancelTween(String target)
target

The property to cancel

+
public this .cancelTween(Object target)
target

An object containing the properties to cancel.

+

Stops tweening the specified property or properties. Passing the object used to start the tween might be a typical use of the second signature.

- - -

-
-
+
Back to top

.tween

src/animation.js#L120-147
public this .tween(Object properties, Number|String duration)
properties

Object of numeric properties and what they should animate to

+
duration

Duration to animate the properties over, in milliseconds.

+

This method will animate numeric properties over the specified duration. +These include x, y, w, h, alpha and rotation.

+

The object passed should have the properties as keys and the value should be the resulting +values of the properties. The passed object might be modified if later calls to tween animate the same properties.

+

Example

Move an object to 100,100 and fade out over 200 ms.

+
Crafty.e("2D, Tween")
+   .attr({alpha: 1.0, x: 0, y: 0})
+   .tween({alpha: 0.0, x: 100, y: 100}, 200)

Example

Rotate an object over 2 seconds

+
Crafty.e("2D, Tween")
+   .attr({rotation:0})
+   .tween({rotation:180}, 2000)
diff --git a/api/Twoway.html b/api/Twoway.html index 9f4f390..6c6b8dc 100644 --- a/api/Twoway.html +++ b/api/Twoway.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - Twoway @@ -53,40 +53,18 @@
-
- - -

Twoway

-

Move an entity left or right using the arrow keys or D and A and jump using up arrow or W.

-

Events

-
NewDirection
When direction changes a NewDirection event is triggered with an object detailing the new direction: {x: x_movement, y: y_movement}. This is consistent with Fourway and Multiway components.
-
Moved
When entity has moved on x-axis a Moved event is triggered with an object specifying the old position {x: old_x, y: old_y}
-

Properties and Methods

- -
- -Back to top

.twoway

-

public this .twoway(Number speed[, Number jump])

-
-
speed
Amount of pixels to move left or right
-
jump
Vertical jump speed
-
- -

Constructor to initialize the speed and power of jump. Component will +

Twoway

src/controls.js#L916-922

Events

NewDirection
When direction changes a NewDirection event is triggered with an object detailing the new direction: {x: x_movement, y: y_movement}. This is consistent with Fourway and Multiway components.
Moved
When entity has moved on x-axis a Moved event is triggered with an object specifying the old position {x: old_x, y: old_y}

Move an entity left or right using the arrow keys or D and A and jump using up arrow or W.

+

Methods and Properties

Back to top

.twoway

src/controls.js#L932-947
public this .twoway(Number speed[, Number jump])
speed

Amount of pixels to move left or right

+
jump

Vertical jump speed

+

Constructor to initialize the speed and power of jump. Component will listen for key events and move the entity appropriately. This includes Up Arrow, Right Arrow, Left Arrow as well as W, A, D. Used with the gravity component to simulate jumping.

The key presses will move the entity in that direction by the speed passed in the argument. Pressing the Up Arrow or W will cause the entity to jump.

- -

See Also

- - -

-
-
+
diff --git a/api/VisibleMBR.html b/api/VisibleMBR.html index aeac17b..07b8b8f 100644 --- a/api/VisibleMBR.html +++ b/api/VisibleMBR.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - VisibleMBR @@ -53,17 +53,11 @@
- +
diff --git a/api/WiredHitBox.html b/api/WiredHitBox.html index 22732b9..c18339a 100644 --- a/api/WiredHitBox.html +++ b/api/WiredHitBox.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - WiredHitBox @@ -53,17 +53,11 @@
-
- - -

WiredHitBox

-

Adding this component to an entity with a Collision component will cause its collision polygon to be drawn to the debug canvas as an outline

-

The methods of DebugCanvas can be used to control this component's appearance.

-

See Also

-
-
+

WiredHitBox

src/DebugLayer.js#L253-260

Adding this component to an entity with a Collision component will cause its collision polygon to be drawn to the debug canvas as an outline

+

The methods of DebugCanvas can be used to control this component's appearance.

+
diff --git a/api/events.html b/api/events.html index cc82531..7638dba 100644 --- a/api/events.html +++ b/api/events.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - events @@ -53,146 +53,9 @@
-
- - -

2D

-
Move [Old position: { _x:Number, _y:Number, _w:Number, _h:Number }]
when the entity has moved
-
Invalidate
when the entity needs to be redrawn
-
Rotate [Data: { cos:Number, sin:Number, deg:Number, rad:Number, o: {x:Number, y:Number}}]
when the entity is rotated
-
-

.offsetBoundary

-
BoundaryOffset
when the MBR offset changes
-
-

.flip

-
Invalidate
when the entity has flipped
-
-

.unflip

-
Invalidate
when the entity has unflipped
-

Gravity

-
Moved
When entity has moved on y-axis a Moved event is triggered with an object specifying the old position {x: old_x, y: old_y}
-

Collision

-
HitOn [Data: { hitData }]
Triggered when collisions occur. Will not trigger again until collisions of this type cease, or an event is requested once more (using resetHitChecks(component)).
-
HitOff [Data: { componentName }]
Triggered when collision with a specific component type ceases
-
-

.collision

-
NewHitbox [Data: Crafty.polygon]
when a new hitbox is assigned
-

DOM

-
-

.DOM

-
Draw [Data: { style:String, type:"DOM", co}]
when the entity is ready to be drawn to the stage
-

Canvas

-
Draw [Data: {type: "canvas", pos, co, ctx}]
when the entity is ready to be drawn to the stage
-
NoCanvas
if the browser does not support canvas
-

Crafty.canvas

-
- -

Crafty.canvas.init

-
NoCanvas
triggered if Crafty.support.canvas is false
-

Color

-
- -

.color

-
Invalidate
when the color changes
-

Image

-
- -

.image

-
Invalidate
when the image is loaded
-

Particles

-
ParticleEnd
when the particle animation has finished
-

Sprite

-
Invalidate
when the sprites change
-

Text

-
Invalidate
when the text is changed
-

DebugCanvas

-
Draw
when the entity is ready to be drawn to the stage
-
NoCanvas
if the browser does not support canvas
-

Tween

-
TweenEnd [property: String]
when a tween finishes
-

SpriteAnimation

-
StartAnimation [Data: {Reel}]
When an animation starts playing, or is resumed from the paused state
-
AnimationEnd [Data: { Reel }]
When the animation finishes
-
FrameChange [Data: { Reel }]
Each time the frame of the current reel changes
-
ReelChange [Data: { Reel }]
When the reel changes
-

KeyboardEvent

-
KeyDown
is triggered for each entity when the DOM 'keydown' event is triggered.
-
KeyUp
is triggered for each entity when the DOM 'keyup' event is triggered.
-

Mouse

-
MouseOver [Data: MouseEvent]
when the mouse enters
-
MouseOut [Data: MouseEvent]
when the mouse leaves
-
MouseDown [Data: MouseEvent]
when the mouse button is pressed on
-
MouseUp [Data: MouseEvent]
when the mouse button is released on
-
Click [Data: MouseEvent]
when the user clicks
-
DoubleClick [Data: MouseEvent]
when the user double clicks
-
MouseMove [Data: MouseEvent]
when the mouse is over and moves
-

Draggable

-
Dragging [Data: MouseEvent]
is triggered each frame the entity is being dragged
-
StartDrag [Data: MouseEvent]
is triggered when dragging begins
-
StopDrag [Data: MouseEvent]
is triggered when dragging ends
-
-

.stopDrag

-
StopDrag
Called right after the mouse listeners are removed
-

Multiway

-
NewDirection [New direction: { x:Number, y:Number }]
triggered when direction changes
-
Moved [Old position: { x:Number, y:Number }]
triggered on movement on either x or y axis. If the entity has moved on both axes for diagonal movement the event is triggered twice
-

Twoway

-
NewDirection
When direction changes a NewDirection event is triggered with an object detailing the new direction: {x: x_movement, y: y_movement}. This is consistent with Fourway and Multiway components.
-
Moved
When entity has moved on x-axis a Moved event is triggered with an object specifying the old position {x: old_x, y: old_y}
-

Crafty Core

-
NewEntityName [entity name: String]
After setting new name for entity
-
NewComponent [Component: String]
when a new component is added to the entity
-
RemoveComponent [Component: String]
when a component is removed from the entity
-
Remove
when the entity is removed by calling .destroy()
-
-

.attr

-
Change [Data: {key: value}]
when properties change
-

Crafty.init

-
Load
Just after the viewport is initialised. Before the EnterFrame loops is started
-

Crafty.stop

-
CraftyStop
when the game is stopped
-

Crafty.pause

-
Pause
when the game is paused
-
Unpause
when the game is unpaused
-

Crafty.e

-
NewEntity [Data: { id:Number }]
When the entity is created and all components are added
-

Crafty.stage

-
- -

Crafty.viewport.reset

-
StopCamera
called to cancel camera animations
-

Crafty.timer

-
- -

Crafty.timer.step

-
EnterFrame [Data: { frame: Number, dt:Number }]
Triggered on each frame. Passes the frame number, and the amount of time since the last frame. If the time is greater than maxTimestep, that will be used instead. (The default value of maxTimestep is 50 ms.)
-
ExitFrame [Data: { frame: Number, dt:Number }]
Triggered after each frame. Passes the frame number, and the amount of time since the last frame. If the time is greater than maxTimestep, that will be used instead. (The default value of maxTimestep is 50 ms.)
-
PreRender
Triggered every time immediately before a scene should be rendered
-
RenderScene
Triggered every time a scene should be rendered
-
PostRender
Triggered every time immediately after a scene should be rendered
-
MeasureWaitTime [Data: Number]
Triggered at the beginning of each step after the first. Passes the time the game loop waited between steps.
-
MeasureFrameTime [Data: Number]
Triggered after each frame. Passes the time it took to advance one frame.
-
MeasureRenderTime [Data: Number]
Triggered after each render. Passes the time it took to render the scene
-

Crafty.scene

-
SceneChange [Data: { oldScene:String, newScene:String }]
just before a new scene is initialized
-
SceneDestroy [Data: { newScene:String }]
just before the current scene is destroyed
-

Crafty.viewport

-
ViewportScroll
when the viewport's x or y coordinates change
-
ViewportScale
when the viewport's scale changes
-
ViewportResize
when the viewport's dimension's change
-
InvalidateViewport
when the viewport changes
-
StopCamera
when any camera animations should stop, such as at the start of a new animation.
-
CameraAnimationDone
when a camera animation comes reaches completion
-

Crafty.asset

-
NewAsset [key and value of new added asset.: Object]
After setting new asset
-

Model

-
Change
When any data on the model has changed.
-
Change[key]
When the specific key on the model has changed.
-
Change[key.key]
The nested key value has changed.
-
-
+

2D

Move [ Old position { { _x:Number, _y:Number, _w:Number, _h:Number } }]
when the entity has moved
Invalidate
when the entity needs to be redrawn
Rotate [ Data { { cos:Number, sin:Number, deg:Number, rad:Number, o: {x:Number, y:Number}} }]
when the entity is rotated

.offsetBoundary

BoundaryOffset
when the MBR offset changes

.flip

Invalidate
when the entity has flipped

.unflip

Invalidate
when the entity has unflipped

Gravity

Moved
When entity has moved on y-axis a Moved event is triggered with an object specifying the old position {x: old_x, y: old_y}

.DOM

Draw [ Data { { style:String, type:"DOM", co} }]
when the entity is ready to be drawn to the stage

DebugCanvas

Draw
when the entity is ready to be drawn to the stage
NoCanvas
if the browser does not support canvas

Tween

TweenEnd [ property { String }]
when a tween finishes

Canvas

Draw [ Data { {type: "canvas", pos, co, ctx} }]
when the entity is ready to be drawn to the stage
NoCanvas
if the browser does not support canvas

Crafty.canvas.init

NoCanvas
triggered if `Crafty.support.canvas` is false

Collision

HitOn [ Data { { hitData } }]
Triggered when collisions occur. Will not trigger again until collisions of this type cease, or an event is requested once more (using `resetHitChecks(component)`).
HitOff [ Data { { componentName } }]
Triggered when collision with a specific component type ceases

.collision

NewHitbox [ Data { Crafty.polygon }]
when a new hitbox is assigned

.color

Invalidate
when the color changes

KeyboardEvent

KeyDown
is triggered for each entity when the DOM 'keydown' event is triggered.
KeyUp
is triggered for each entity when the DOM 'keyup' event is triggered.

Mouse

MouseOver [ Data { MouseEvent }]
when the mouse enters
MouseOut [ Data { MouseEvent }]
when the mouse leaves
MouseDown [ Data { MouseEvent }]
when the mouse button is pressed on
MouseUp [ Data { MouseEvent }]
when the mouse button is released on
Click [ Data { MouseEvent }]
when the user clicks
DoubleClick [ Data { MouseEvent }]
when the user double clicks
MouseMove [ Data { MouseEvent }]
when the mouse is over and moves

Draggable

Dragging [ Data { MouseEvent }]
is triggered each frame the entity is being dragged
StartDrag [ Data { MouseEvent }]
is triggered when dragging begins
StopDrag [ Data { MouseEvent }]
is triggered when dragging ends

.stopDrag

StopDrag
Called right after the mouse listeners are removed

Multiway

NewDirection [ New direction { { x:Number, y:Number } }]
triggered when direction changes
Moved [ Old position { { x:Number, y:Number } }]
triggered on movement on either x or y axis. If the entity has moved on both axes for diagonal movement the event is triggered twice

Twoway

NewDirection
When direction changes a NewDirection event is triggered with an object detailing the new direction: {x: x_movement, y: y_movement}. This is consistent with Fourway and Multiway components.
Moved
When entity has moved on x-axis a Moved event is triggered with an object specifying the old position {x: old_x, y: old_y}

Crafty Core

NewEntityName [ entity name { String }]
After setting new name for entity
NewComponent [ Component { String }]
when a new component is added to the entity
RemoveComponent [ Component { String }]
when a component is removed from the entity
Remove
when the entity is removed by calling .destroy()

.attr

Change [ Data { {key: value} }]
when properties change

Crafty.init

Load
Just after the viewport is initialised. Before the EnterFrame loops is started

Crafty.stop

CraftyStop
when the game is stopped

Crafty.pause

Pause
when the game is paused
Unpause
when the game is unpaused

Crafty.timer.step

EnterFrame [ Data { { frame: Number, dt:Number } }]
Triggered on each frame. Passes the frame number, and the amount of time since the last frame. If the time is greater than maxTimestep, that will be used instead. (The default value of maxTimestep is 50 ms.)
ExitFrame [ Data { { frame: Number, dt:Number } }]
Triggered after each frame. Passes the frame number, and the amount of time since the last frame. If the time is greater than maxTimestep, that will be used instead. (The default value of maxTimestep is 50 ms.)
PreRender
Triggered every time immediately before a scene should be rendered
RenderScene
Triggered every time a scene should be rendered
PostRender
Triggered every time immediately after a scene should be rendered
MeasureWaitTime [ Data { Number }]
Triggered at the beginning of each step after the first. Passes the time the game loop waited between steps.
MeasureFrameTime [ Data { Number }]
Triggered after each frame. Passes the time it took to advance one frame.
MeasureRenderTime [ Data { Number }]
Triggered after each render. Passes the time it took to render the scene

Crafty.e

NewEntity [ Data { { id:Number } }]
When the entity is created and all components are added

.image

Invalidate
when the image is loaded

Crafty.asset

NewAsset [ key and value of new added asset. { Object }]
After setting new asset

Model

Change
When any data on the model has changed.
Change[key]
When the specific key on the model has changed.
Change[key.key]
The nested key value has changed.

Particles

ParticleEnd
when the particle animation has finished

Crafty.scene

SceneChange [ Data { { oldScene:String, newScene:String } }]
just before a new scene is initialized
SceneDestroy [ Data { { newScene:String } }]
just before the current scene is destroyed

SpriteAnimation

StartAnimation [ Data { {Reel} }]
When an animation starts playing, or is resumed from the paused state
AnimationEnd [ Data { { Reel } }]
When the animation finishes
FrameChange [ Data { { Reel } }]
Each time the frame of the current reel changes
ReelChange [ Data { { Reel } }]
When the reel changes

Sprite

Invalidate
when the sprites change

Text

Invalidate
when the text is changed

.textFont

Invalidate

.unselectable

Invalidate

Crafty.viewport

ViewportScroll
when the viewport's x or y coordinates change
ViewportScale
when the viewport's scale changes
ViewportResize
when the viewport's dimension's change
InvalidateViewport
when the viewport changes
StopCamera
when any camera animations should stop, such as at the start of a new animation.
CameraAnimationDone
when a camera animation comes reaches completion

Crafty.viewport.reset

StopCamera
called to cancel camera animations
diff --git a/api/index.html b/api/index.html index 019f88a..6660286 100644 --- a/api/index.html +++ b/api/index.html @@ -1,7 +1,7 @@ - Crafty - + Crafty - index.html @@ -53,12 +53,9 @@
- + +
diff --git a/craftyjs-site.css b/craftyjs-site.css index 6b5bb0a..dbe9bd9 100644 --- a/craftyjs-site.css +++ b/craftyjs-site.css @@ -1389,7 +1389,8 @@ ul ol, ol ol { margin-bottom: 0; } -.list-unstyled { +.list-unstyled, +.category-list { padding-left: 0; list-style: none; } @@ -6278,7 +6279,9 @@ button.close { #components-div:before, #components-div:after, #api-container:before, -#api-container:after { +#api-container:after, +.page-toc:before, +.page-toc:after { content: " "; display: table; } @@ -6303,7 +6306,8 @@ button.close { #docs:after, #quickstart:after, #components-div:after, -#api-container:after { +#api-container:after, +.page-toc:after { clear: both; } .center-block { @@ -6556,6 +6560,11 @@ button.close { .clearer { clear: both; } +.underlined-heading { + border-bottom: 2px solid #cccccc; + margin-top: 20px; + margin-bottom: 10px; +} h2 { font-family: 'Open Sans', Helvetica, Arial; font-weight: 300; @@ -6585,7 +6594,134 @@ a img { padding-left: 1em; } /*Documentation styles*/ -/* color that matches bootstraps code background */ +/* Blocks offset by a large colored margin */ +/* Links to the source code */ +.doc-source { + color: grey; + font-size: 10px; + font-family: 'Menlo', 'Monaco', 'Consolas', 'Courier New', monospace; + margin-top: -10px; +} +.crafty-method, +.triggered-events { + margin-bottom: 3px; +} +.code-font { + font-family: 'Menlo', 'Monaco', 'Consolas', 'Courier New', monospace; +} +/*Headers */ +h1, +h2, +h3 { + font-weight: 300; +} +.doclet-header { + border-bottom: 2px solid #CCC; + margin-top: 2em; +} +/* The "back to top" links */ +.doc-top { + float: right; + font-size: 12px; + margin-top: 18px; +} +.usage-header { + padding-left: 1em; + font-weight: bold; +} +/* Event blocks */ +.trigger dt { + white-space: pre; +} +.trigger-data { + white-space: pre; + font-family: monospace; +} +.triggered-events { + padding-left: 1em; + border-left: 20px solid #90ee90 !important; + /*box-shadow: 3px 2px 3px #555555;*/ + margin-top: 1em; + background-color: #e8fce8; + padding-top: 1px; + padding-bottom: 1px; +} +dl.trigger { + padding-left: 0em; + margin-top: 10px; + margin-bottom: 10px; +} +/* Method signature blocks*/ +.crafty-method p { + padding-left: 1em; +} +.crafty-method { + border-left: 20px solid #add8e6 !important; + /*box-shadow: 3px 2px 3px #555555;*/ + margin-top: 1em; + background-color: #d4ebf2; +} +.crafty-method > .markdown { + padding-left: 1em; +} +code.signature { + border-radius: 0; + background-color: #F2F2F2; + border: 0; + color: black; + font-weight: bold; + padding: 3px; + padding-left: 1em; + margin: 0; + min-width: 100%; + display: block; + font-family: 'Menlo', 'Monaco', 'Consolas', 'Courier New', monospace; +} +.parameter dt { + font-weight: bold; +} +.parameter dd { + padding-left: 0.33em; + padding-bottom: 3px; +} +dl.parameter { + padding-left: 1em; + padding-top: 0; + padding-bottom: 0; + margin: 0; +} +dl.parameter p { + margin: 0; +} +/*General code blocks*/ +code { + color: #640000; + background-color: rgba(150, 150, 150, 0.2); + border: 0px; +} +.markdown { + display: block; +} +.markdown pre, +#quickstart pre, +#docs pre, +.splash pre { + border-radius: 0; + border: 0px; + padding: 0; + border-left: 20px solid #808080 !important; + /*box-shadow: 3px 2px 3px #555555;*/ + margin-top: 1em; +} +pre code { + margin: 0; + display: block; + line-height: 1.5; + padding: 10px; + border: 0 ! important; + border-radius: 0; + font-family: 'Menlo', 'Monaco', 'Consolas', 'Courier New', monospace; +} /* Sidebar navigation styles */ #doc-nav { padding-top: 1em; @@ -6610,55 +6746,17 @@ a img { margin-top: 50px; } /* Heading styles for api docs, overriding the global ones */ -#api-container h1 { +#api-container h1, +.doc-page-holder h1 { font-weight: 300; font-size: 30px; + border-bottom: 2px solid #cccccc; + margin-top: 20px; + margin-bottom: 10px; } #api-container h2 { font-size: 24px; } -/* The "back to top" links */ -.doc-top { - float: right; - font-size: 12px; - margin-top: 10px; -} -/* Code styles */ -#doc-content code { - color: #4d90b3; - background-color: transparent; -} -#doc-content pre code { - background-color: #f5f5f5; - color: black; -} -/* Dictionary styles */ -#doc-content dl { - background: #f5f5f5; - padding: 10px; - font-size: 13px; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; -} -#doc-content dt { - font-weight: bold; - font-family: 'Menlo', 'Monaco', 'Consolas', 'Courier New', monospace; -} -#doc-content dd { - margin: 0 0 5px 25px; -} -/* List styles */ -#doc-content ul { - padding: 0; - padding-left: 15px; -} -#doc-content ul li { - min-width: 220px; -} -.doc-contents ul li { - display: inline-block; -} /* Body and page background */ body, html { @@ -7091,3 +7189,49 @@ a.download .version { display: none !important; } } +.page-toc { + padding-left: 0; + list-style: none; + margin-left: -15px; + margin-right: -15px; + width: 50%; + padding-left: 1em; +} +.page-toc li { + position: relative; + min-height: 1px; + padding-left: 15px; + padding-right: 15px; +} +@media (min-width: 768px) { + .page-toc li { + float: left; + width: 50%; + } +} +.toc-holder { + position: relative; + min-height: 1px; + padding-left: 15px; + padding-right: 15px; + /*.make-md-column-offset(1);*/ +} +@media (min-width: 992px) { + .toc-holder { + float: left; + width: 25%; + } +} +.doc-page-holder { + /*.make-md-column-offset(1);*/ + position: relative; + min-height: 1px; + padding-left: 15px; + padding-right: 15px; +} +@media (min-width: 992px) { + .doc-page-holder { + float: left; + width: 75%; + } +} diff --git a/index.html b/index.html index faeedab..191a25a 100644 --- a/index.html +++ b/index.html @@ -57,6 +57,18 @@
+ +
+ 
window.onload = function() {
+    Crafty.init();
+    // A blue block, controlled by arrow keys
+    var player = Crafty.e("2D, Canvas, Color, Fourway")
+        .attr({x:100, y:100, w:50, h:50})
+        .color("blue")
+        .fourway();
+};
+ +
@@ -80,17 +92,6 @@
-
- 
window.onload = function() {
-    Crafty.init();
-    // A blue block, controlled by arrow keys
-    var player = Crafty.e("2D, Canvas, Color, Fourway")
-        .attr({x:100, y:100, w:50, h:50})
-        .color("blue")
-        .fourway();
-};
- -
diff --git a/source/index.html b/source/index.html index c8e2ed9..dc26b0a 100644 --- a/source/index.html +++ b/source/index.html @@ -7,6 +7,21 @@
+ +
+ {{#markdown}} +``` javascript +window.onload = function() { + Crafty.init(); + // A blue block, controlled by arrow keys + var player = Crafty.e("2D, Canvas, Color, Fourway") + .attr({x:100, y:100, w:50, h:50}) + .color("blue") + .fourway(); +}; +``` + {{/markdown}} +
@@ -30,20 +45,6 @@
-
- {{#markdown}} -``` javascript -window.onload = function() { - Crafty.init(); - // A blue block, controlled by arrow keys - var player = Crafty.e("2D, Canvas, Color, Fourway") - .attr({x:100, y:100, w:50, h:50}) - .color("blue") - .fourway(); -}; -``` - {{/markdown}} -
diff --git a/source/less/neo-doc.less b/source/less/neo-doc.less deleted file mode 100644 index 16ae060..0000000 --- a/source/less/neo-doc.less +++ /dev/null @@ -1,171 +0,0 @@ - -@event: color("lightgreen"); -@event-light: lighten(@event, 20%); -@method: color("lightblue"); -@method-light: lighten(@method, 10%); -@example: lighten(color("black"), 50%); -@example-light: lighten(@example, 20%); - -.big-indent(@color) { - border-left: 20px solid @color !important; - /*box-shadow: 3px 2px 3px #555555;*/ - margin-top: 1em; -} - -ul { - list-style-type: square; - -} - - -.category-list { - font-size: 12px; -} - -.category-list h4 { - font-size: 12px; - margin-bottom: 6px; -} - -.doc-source { - color: grey; - font-size: smaller; - .code-font; - margin-top: -10px; -} - -.crafty-method, .triggered-events { - margin-bottom: 3px; -} - -.code-font { - font-family: Menlo, Monaco, Consolas, monospace; -} - -body { - font-family:'Open Sans', Helvetica, Arial; -} - -h1, h2, h3 { - font-weight: 300; -} - -.doclet-header { - border-bottom: 2px solid #CCC; - margin-top: 2em; -} -.doc-top { - float:right; - font-size:12px; - margin-top: 20px; -} - -.category-list { - margin-left: 1em; -} - -dl.parameter { - -} -.parameter dt { - font-weight: bold; -} - -.parameter dd { - padding-left: 0.33em; - padding-bottom: 3px; -} - -.triggered-events { - padding-left: 1em; - .big-indent(@event); - background-color: @event-light; - padding-top: 1px; - padding-bottom: 1px; -} - -dl.trigger { - padding-left: 0em; -} - -dl.parameter { - padding-left: 1em; - padding-top: 0; - padding-bottom: 0; - margin: 0; -} - -dl.parameter p { - margin: 0; -} - -.crafty-method p { - padding-left: 1em; -} - -.usage-header { - padding-left: 1em; - font-weight: bold; -} - -.trigger dt { - white-space: pre; -} - -.trigger-data { - white-space: pre; - font-family: monospace; -} -.crafty-method { - .big-indent(@method); - background-color: @method-light; -} - -.crafty-method > .markdown { - padding-left: 1em; -} - -code.signature { - border-radius: 0; - background-color: #F2F2F2; - border: 0; - color: black; - font-weight: bold; - padding: 3px; - padding-left: 1em; - margin: 0; - min-width: 100%; - display: block; - .code-font; -} - -code { - color: rgb(100, 0, 0); - background-color: rgba(150,150,150,0.2); - border: 0px; -} - -.markdown { - display: block; -} - - -.markdown pre, #quickstart pre, #docs pre, .splash pre{ - border-radius: 0; - border: 0px; - padding: 0; - .big-indent(@example); -} - -pre code { - margin: 0; - display: block; - /*background: #2d2d2d; - color: #cccccc;*/ - line-height: 1.5; - padding: 10px; - border: 0 ! important; - border-radius: 0; - - .code-font; -} \ No newline at end of file