移动位图上的 EaselJS hitTest

Question

我正在尝试实现一个有移动对象（位图）的游戏，我需要检测碰撞。我使用以下代码使对象移动（转换）并用鼠标悬停检查 hitTest 。

但是，alpha 不会随着鼠标位置的正确而改变，而是检测 canvas 的左上角。

rock = new createjs.Bitmap(loader.getResult("rock"));
rock.setTransform(800, 270, 0.5, 0.5);
stage.addChild(rock);
// ..... 

createjs.Ticker.timingMode = createjs.Ticker.RAF;
createjs.Ticker.addEventListener("tick", tick);
// .....

function tick(event) {
    rock.alpha = 0.7;
    if (rock.hitTest(stage.mouseX, stage.mouseY)) {//if hit, change alpha
        rock.alpha = 1;
    }
    var deltaS = event.delta / 1000;
    rock.x = (rock.x - deltaS * groundSpeed);//to gradually shift the rock
    if (rock.x + rock.image.width * rock.scaleX <= 0) {//to re-position the rock
        rock.x = w + Math.random() * 1000;
    }
    stage.update(event);
}

Answer 1

我在阅读 this question 的答案时找到了答案。

与其直接获取 stage.mouseX 或 stage.mouseY，不如像 this.

一样使用 globalToLocal 获取正确的位置

  var p = rock.globalToLocal(stage.mouseX, stage.mouseY);
  if (rock.hitTest(p.x, p.y)) {
      rock.alpha = 1;
  }

移动位图上的 EaselJS hitTest

EaselJS hitTest on moving bitmaps

javascript

createjs

easeljs