EaselJS - Beste Weg, um zu erkennen, Kollision

Ich versuche zu finden eine gute Möglichkeit für die Kollisionserkennung für meine easelJS kleine app.

Ich habe gerade 2 Rechteck mit createjs.Form

Aber nach dem erstellen eines Rechteck-Form, die API nicht lassen Sie mich wissen, die Breite und Höhe des Rechtecks (ich weiß nicht, warum).

EaselJS Form hat eine Methode namens "hitTest" aber es kann nur verwendet werden, wenn Sie testen möchten Kollision der Form und eine Punkt.

//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();
}

InformationsquelleAutor Thịnh Phạm | 2013-12-03

  1. 7

    Es ist richtig, dass EaselJS nicht lassen Sie wissen, die Breite und die Höhe von text und Formen.
    Dies ist eine Einschränkung von EaselJS, aber Sie können tatsächlich diese Eigenschaften selbst:

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

    Aus der Dokumentation:
    setBounds können Sie manuell geben Sie die Grenzen eines Objekts, das entweder nicht berechnen kann, Ihre eigenen Grenzen (ex. Form & Text) für die zukünftige Verweisung, so ist das Objekt im Container-Grenzen. Manuell setzen Grenzen werden immer überschreiben berechneten Grenzen.

    Dann können Sie verlangen, die Breite und Höhe, indem er für blueRect.getBounds();

    Prüfen, Kollisionen zwischen zwei Rechtecken können Sie diesen code verwenden, die zwei Rechtecke und gibt true zurück, wenn Sie sich schneiden (ich fand diesen code hier irgendwo auf 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;
}
    Ich danke Ihnen sehr!
    Können Sie erklären, diese Zeile code für mich? Es denke, es macht keinen Sinn und es scheint nicht zu funktionieren für mich.
    Die Funktion gibt true oder false zurück, je nachdem, ob sich die beiden Rechtecke überschneiden oder nicht. Sie vereinfachen könnten, indem die Linie durch Eingabe return (rect1.x >= rect2.x .... etc)

    InformationsquelleAutor Kokodoko

  2. 1

    hier ist eine nette Funktion von fragenwissen.com,
    er steuert zuerst die objs Sichtbarkeit eine dann die objs position.

    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;
    }
}

    InformationsquelleAutor vix

  3. 0

    Dank @Kokodoko für seine Lösung, hier ist eine andere Implementierung mit nominalBounds um Breite und Höhe, und mit den code in eine Funktion aus:

    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;
    }
}

    InformationsquelleAutor jck

Schreibe einen Kommentar