Component to detect collision between any two convex polygons.
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');
public this .collision([Crafty.polygon polygon])
public this .collision(Array point1, .., Array pointN)
x
and y
position to generate a polygonConstructor 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.
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]);
public Boolean/Array hit(String component)
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.
public this .onHit(String component, Function hit[, Function noHit])
Creates an EnterFrame event calling .hit() each frame. When a collision is detected the callback will be invoked.
Components to display Crafty.polygon Array for debugging collision detection
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]))
Components to display Crafty.polygon Array for debugging collision detection
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]))