EaselJS - Meilleur moyen de détecter une collision

J'essaie de trouver un bon moyen pour la détection de collision pour mon easelJS petit app.

Je viens de créer 2 rectangle à l'aide de createjs.Forme

Mais après la création d'une forme de rectangle, l'API ne me permet pas de connaître la largeur et la hauteur du rectangle (je ne sais pas pourquoi).

EaselJS Forme a une méthode appelée "méthode hitTest", mais il ne peut être utilisé lorsque vous souhaitez tester la collision de la forme et de point.

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

OriginalL'auteur Thịnh Phạm | 2013-12-03

  1. 7

    Il est exact que EaselJS ne vous permet pas de connaître la largeur et la hauteur de texte et de formes.
    C'est une limitation de EaselJS mais vous pouvez réellement définir ces propriétés vous-même:

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

    À partir de la documentation:
    setBounds vous permet de spécifier manuellement les limites d'un objet qui ne peut pas les calculer leurs propres limites (ex. Forme & Texte) pour référence ultérieure, ou si l'objet peut être inclus dans un Conteneur de limites. Définir manuellement les limites de toujours remplacer calculé limites.

    Alors vous pouvez demander la largeur et la hauteur en demandant blueRect.getBounds();

    Pour vérifier les collisions entre deux rectangles, vous pouvez utiliser ce code, qui prend deux rectangles et renvoie true si elles se croisent (j'ai trouvé ce code quelque part ici sur 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;
}
    Merci beaucoup!
    Pouvez-vous expliquer cette ligne de code pour moi? Il pense qu'il ne fait pas de sens et il semble ne pas fonctionner pour moi.
    La fonction retourne true ou false selon si les deux rectangles se croisent ou pas. Vous pouvez simplifier la ligne en tapant return (rect1.x >= rect2.x .... etc)

    OriginalL'auteur Kokodoko

  2. 1

    ici est une belle fonction de fragenwissen.com,
    il contrôle d'abord la objs visibilité et ensuite de les 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;
    }
}

    OriginalL'auteur vix

  3. 0

    Grâce à @Kokodoko pour sa solution, voici une autre mise en œuvre à l'aide de nominalBounds pour obtenir la largeur et la hauteur, et avec du code dans une fonction:

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

    OriginalL'auteur jck