Question

我正在尝试为我的easelJS小应用程序找到一种很好的碰撞检测方法。

我刚刚使用createjs.Shape

创建了2个矩形

但是在创建一个矩形形状后，API不会让我知道矩形的宽度和高度（我不知道为什么）。

EaselJS Shape有一个名为“hitTest”的方法，但它只能在你想测试形状碰撞和点时使用。

//Here's the code http://jsfiddle.net/ZbZjL/16/.

//Create a stage by getting a reference to the canvas
stage = new createjs.Stage("demoCanvas");
//Create a Shape DisplayObject.
redRect = new createjs.Shape();
redRect.graphics.beginFill("red").drawRect(0, 0, 60, 40);
redRect.regX = 30;
redRect.regY = 20;
redRect.x = 200;
redRect.y = 100;

blueRect = new createjs.Shape();
blueRect.graphics.beginFill("blue").drawRect(0, 0, 60, 40);
blueRect.regX = 30;
blueRect.regY = 20;
blueRect.x = 0;
blueRect.y = 100;
//Add Shape instance to stage display list.
stage.addChild(redRect);
stage.addChild(blueRect);
//Update stage will render next frame
stage.update();

document.addEventListener("mousemove", onMouseMove);
function onMouseMove(event) {
    blueRect.x = event.offsetX;
    stage.update();
}

Answer 1

EaselJS不会让您知道文字和形状的宽度和高度是正确的。这是EaselJS的限制，但您实际上可以自己设置这些属性：

blueRect.setBounds(x,y,width,height);

来自文档： setBounds允许您手动指定对象的边界，该对象无法计算自己的边界（例如Shape＆amp; Text）以供将来参考，或者因此对象可以包含在Container边界中。手动设置边界将始终覆盖计算的边界。

然后你可以通过询问blueRect.getBounds（）;

来请求宽度和高度

要检查两个矩形之间的碰撞，你可以使用这个代码，它接受两个矩形，如果它们相交则返回true（我在stackoverflow上找到了这个代码）

this.checkIntersection = function(rect1,rect2) {
    if ( rect1.x >= rect2.x + rect2.width || rect1.x + rect1.width <= rect2.x || rect1.y >= rect2.y + rect2.height || rect1.y + rect1.height <= rect2.y ) return false;
    return true;
}

Answer 2

here是fragenwissen.com的一个不错的功能，它首先控制objs的可见性然后控制objs的位置。

function detect_object_collision(obj1, obj2) {
    // user noname from FragenWissen.com
    if (obj1.visible && obj2.visible) {
        obj1.setBounds(obj1.nominalBounds.x + obj1.x, obj1.nominalBounds.y + obj1.y, obj1.nominalBounds.width, obj1.nominalBounds.height);
        obj2.setBounds(obj2.nominalBounds.x + obj2.x, obj2.nominalBounds.y + obj2.y, obj2.nominalBounds.width, obj2.nominalBounds.height);
        obj1 = obj1.getBounds();
        obj2 = obj2.getBounds();
        return !(
            ((obj1.y + obj1.height) < (obj2.y)) ||
            (obj1.y > (obj2.y + obj2.height)) ||
            ((obj1.x + obj1.width) < obj2.x) ||
            (obj1.x > (obj2.x + obj2.width))
        );
    } else {
        return false;
    }
}

Answer 3

感谢@Kokodoko的解决方案，这是使用nominalBounds获取宽度和高度的另一个实现，并且代码在一个函数中：

function checkCollision(mc1, mc2) {

    m1x = mc1.x;
    m1y = mc1.y;
    m1w = mc1.nominalBounds.width;
    m1h = mc1.nominalBounds.height;

    m2x = mc2.x;
    m2y = mc2.y;
    m2w = mc2.nominalBounds.width;
    m2h = mc2.nominalBounds.height;

    if (    m1x >= m2x + m2w
        ||  m1x + m1w <= m2x
        ||  m1y >= m2y + m2h
        ||  m1y + m1h <= m2y) {
        return false;
    } else {
        return true;
    }
}

EaselJS - 检测碰撞的最佳方法

3 个答案: