2

I'm making a game in javascript using EaselJS. I've run into problems with collision detection.

I'm using this for hit detection (as I'm checking if shapes hit, not just points) https://github.com/olsn/Collision-Detection-for-EaselJS

Which seems to work great, but for some reason the coordinates of different shapes always seem 'off'. I had the exact same problem without olsns collision detection. I think this is because they are in different coordinate spaces but I've no idea how to get uniform coordinates. Ideally I want everything using the same coordinate system, there is only keyboard interaction so mouse coordinates do not really matter.

I've messed around with localtoglobal, globaltolocal and localtolocal but nothing seems to work as needed.

I feel like I'm missing something important in how easelJS handles coordinates.

Here's some (relevant) code:

  window.stage = new createjs.Stage("CanvasGeo");
     function drawShip() {
    // Initializes ship graphics
    shipG = new createjs.Shape();
    shipG.graphics.beginFill("DeepSkyBlue").drawCircle(x, y, circlesize);
    stage.addChild(shipG);
}

function drawShape() {
    shapeG = new createjs.Shape();
    if (type == "Rect") {
        shapeG.graphics.beginFill(colour).drawRect(x, y, shapesize, shapesize);
    } else if (type == "Triangle") {
        shapeG.graphics.beginFill(colour).drawPolyStar(x, y, shapesize, 3, 0.5, getRandomInt(1, 359));
    } else if (type == "Star") {
        shapeG.graphics.beginFill(colour).drawPolyStar(x, y, shapesize, 5, 0.7, getRandomInt(1, 359));
    }
    stage.addChild(shapeG);
}

function findSpawnPoint() {
    var direction = getRandomInt(1, 5);

    switch (direction) {
        // TOP
        case 1:
            console.log("Spawn shape on top");
            x = getRandomInt((shapesize * 2), canvasWidth - (shapesize * 2));
            y = -1 * shapesize;
            xVel = getRandomSpeed();
            yVel = Math.abs(getRandomSpeed());
            break;

            // LEFT
        case 2:
            console.log("Spawn shape on left");
            x = -1 * shapesize;
            y = getRandomInt((shapesize * 2), canvasHeight - (shapesize * 2));
            xVel = Math.abs(getRandomSpeed());
            yVel = getRandomSpeed();
            break;

            // RIGHT
        case 3:
            console.log("Spawn shape on right");
            x = shapesize + canvasWidth;
            y = getRandomInt((shapesize * 2), canvasHeight - (shapesize * 2));
            xVel = -1 * Math.abs(getRandomSpeed());
            yVel = getRandomSpeed();
            break;

            // BOTTOM
        case 4:
            console.log("Spawn shape on bottom");
            x = getRandomInt((shapesize * 2), canvasWidth - (shapesize * 2));
            y = shapesize + canvasHeight;
            xVel = getRandomSpeed();
            yVel = -1 * Math.abs(getRandomSpeed());
            break;
    }
}

this.hitCheck = function(ship) {
    if (!null == ndgmr.checkRectCollision(shapeG, ship)) {
        this.hitAction();
    }
}

Thanks for any help :)

Jef Broedkas
  • 21
  • 2
  • Point hit collision works using stage (global) coordinates. Is your stage or any container transformed (scaled, translated)? You might need to use localToGlobal, or globalToLocal. Addionally, shapes in EaselJS don't have any bounds (you can set them manually, but they don't have any by default). Can you show the checkCollision code? Its hard to tell what is going on. – Lanny May 26 '17 at 15:30
  • Thanks for answering! Nothing is transformed (unless moving counts as a transformation). The only collision code I use is in here https://github.com/olsn/Collision-Detection-for-EaselJS (The checkRectCollision and caclulateIntersection code) – Jef Broedkas May 27 '17 at 09:50
  • To add to my last comment; I found an answer you did a while ago about how coordinates in EaselJS work and I understand it better now! I think the problem I have is actually more about how to get coordinates for shapes that are constantly moving and compare them (for hit detection) – Jef Broedkas May 27 '17 at 11:35

0 Answers0