如何检测多边形上的碰撞

Question

I'm trying to detect collisions between my player (just a square) and a polygon with CraftyJS :

// Init Crafty:
Crafty.init();
Crafty.canvas.init();

var AttackPoly = new Crafty.polygon([
    [-8, 6],
    [0, -8],
    [8, -14],
    [16, -8],
    [24, 6]
]);

attackEnt = Crafty.e("AttackRange, 2D, Canvas, Collision, SolidHitBox, Color").attr({x:50, y:50}).collision(AttackPoly);

Crafty.e("2D, Canvas, Color, Fourway, Collision, Tester").attr({
    x: 100,
    y: 60,
    w: 4,
    h: 4
}).color("orange");

Crafty.e("2D, Canvas, Color, Fourway, Collision, Tester").attr({
    x: 100,
    y: 50,
    w: 4,
    h: 4
}).color("orange");

Crafty.e("2D, Canvas, Color, Fourway, Collision, Tester").attr({
    x: 100,
    y: 40,
    w: 4,
    h: 4
}).color("orange");

Crafty("Tester").bind("EnterFrame", function () {
    this.x -= .2
    if (this.hit("AttackRange")) this.color("aqua")

});

The squares that hit the polygon doesn't change their color. What am I missing?

Fiddle: http://jsfiddle.net/c3597/32/

Answer 1

I figured it out: the Polygon has to be inside a bounding rect:

Crafty
  .e('AttackRange, 2D, Canvas, Collision, SolidHitBox, Color')
  .attr({x:50, y:50, w: 100, h: 100})
  .collision(new Crafty.polygon([
    [0, 0],
    [100, 50],
    [0, 100]
  ]))
  .color('blue'); 

Fiddle: http://jsfiddle.net/c3597/33/