Question

我在Flash CC中制作HTML5 Canvas游戏。但是，我似乎无法弄清楚如何在两个movieClip之间创建一个hitTest。我在EaselJS网站上找到了一些代码，但它没有用，或者我不了解它是如何工作的。

这是我在“操作”面板中的代码：

this.addEventListener("tick",move.bind(this));
function move(){
  if (collision(this.bird, this.bar)){
    this.bird.play(5);
  }
}
function collision(a,b) {
  var locA  = a.globalToLocal(100,0);
  if (b.hitTest(locA.x, locA.y)) { 
    return true; 
  }
}

Answer 1

好的，所以我猜在Flash或EaselJS中没有内置的功能，所以我想出了这个并且它运行正常。但它只检查hitBox，矩形MovieClip边界，而不是形状中的实际可见像素。令人沮丧的是，甚至宽度和高度都不支持Flash5 for HTML5画布中的movieclip实例的属性，因此您只需在属性面板中查看这些属性即可。无论如何，这就是我想出的：

var objA = this.bullet ; // The selected MovieClip
var objA_width = 20; // enter selected Movieclip's width (you can't find out with script, duh!)
var objA_height = 10; // enter selected Movieclip's height

var objB = this.target; // The MovieClip to test collision with
var objB_width = 100; // enter it's width
var objB_height = 100; // ...and it's height


this.addEventListener("tick",hitTest.bind(this));

function hitTest(){
    if (collision(objA, objB, objA_width,objA_height,objB_width,objB_height)){
    //  code to run on collision;
    }
}

var mca = new Object();
var mcb = new Object();

function collision(a,b,aWidth,aHeight,bWidth,bHeight) {
    mca.xr = a.x + (aWidth/2); //the right edge of movieclip A
    mca.xl = a.x - (aWidth/2); //the left edge of movieclip A
    mca.yt = a.y - (aHeight/2); //the top edge of movieclip A
    mca.yb = a.y + (aHeight/2); //the bottom edge of movieclip A

    mcb.xr = b.x + (bWidth/2);
    mcb.xl = b.x - (bWidth/2);
    mcb.yt = b.y - (bHeight/2);
    mcb.yb = b.y + (bHeight/2);

    xHit = mca.xr > mcb.xl && mca.xl < mcb.xr; // returns true if the is any horisontal  overlappnig
    yHit = mca.yt < mcb.yb && mca.yb > mcb.yt; // returns true if the is any vertical overlapping

    if (xHit && yHit){return true;}
}

使用Flash CC的HTML5 Canvas游戏中的HotTest

1 个答案: