craftyjs.github.com

Collision

Component to detect collision between any two convex polygons.

Back to top

.init

Create a rectangle polygon based on the x, y, w, h dimensions.

You must ensure that the x, y, w, h properties are set before the init function is called. If you have a Car component that sets these properties you should create your entity like this

Crafty.e('2D, DOM, Car, Collision');

And not like

Crafty.e('2D, DOM, Collision, Car');
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 with an x and y position to generate a polygon

Constructor takes a polygon or array of points to use as the hit area.

The hit area (polygon) must be a convex shape and not concave for the collision detection to work.

If no hit area is specified x, y, w, h properties of the entity will be used.

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]);

See Also

Back to top

.hit

public Boolean/Array hit(String component)

component
Check collision with entities that has this component

Returns

false if no collision. If a collision is detected, returns an Array of objects that are colliding.

Takes an argument for a component to test collision for. If a collision is found, an array of every object in collision along with the amount of overlap is passed.

If no collision, will return false. The return 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]
}]

MBR is your standard axis aligned rectangle intersection (.intersect in the 2D component). SAT is collision between any convex polygon.

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.

See Also

Back to top

.WiredHitBox

Components to display Crafty.polygon Array for debugging collision detection

Example

This will display a wired square over your original Canvas screen

Crafty.e("2D,DOM,Player,Collision,WiredHitBox").collision(new Crafty.polygon([0,0],[0,300],[300,300],[300,0]))
Back to top

.SolidHitBox

Components to display Crafty.polygon Array for debugging collision detection

Example

This will display a solid triangle over your original Canvas screen

Crafty.e("2D,DOM,Player,Collision,SolidHitBox").collision(new Crafty.polygon([0,0],[0,300],[300,300]))