碰撞检测性能差

Question

我正在使用KineticJs构建游戏，并且正在使用拖放操作在屏幕上移动元素，所以我遇到了很大的性能问题，因为我检查了dragmove事件，如果您拖动的元素与可能的捕捉位置发生碰撞，然后拖动元素得到了全部ggy。 我使用的是内置函数的dynamicJ，但是我感觉它们的优化效果不佳。 它实际上在chrome中效果不错（您可以看到滞后），但是在Firefox中效果不好。 关于如何优化我的代码的任何想法

element.on('dragmove',function(evt){
    var position = stage.getUserPosition(evt);
    var snap = snapGroup.getIntersections(position.x,position.y);
    if(snap.length > 0) snapElement(snap[0]);
}

Answer 1

找到瓶颈。 我猜是这行：

var snap = snapGroup.getIntersections(position.x,position.y);

如果是这样，请设置一个计数器，并仅每隔几个更新更新一次。 确保对dragend进行最终更新，以便最终获得正确的最终位置。

编辑：

也许这样的事情可能会起作用：

var dragUpdateCount = 0;
var dragUpdateRate = 5;
element.on('dragmove',function(evt){
    dragUpdateCount++;
    if (dragUpdateCount >= dragUpdateRate) {
        var position = stage.getUserPosition(evt);
        var snap = snapGroup.getIntersections(position.x,position.y);
        if (snap.length > 0) {
            snapElement(snap[0]);
        }
        dragUpdateCount = 0;
    }
}

Answer 2

正如@Aram指出的那样，瓶颈在于.getIntersections（）函数。

.getIntersections（）函数占用大量内存/处理资源，因此您需要进行初步检查，以将处理限制在某些位置。 我制作的一款小游戏也遇到了类似的问题，.getIntersections（）的碰撞检测正在破坏我的速度，我也尝试了.intersects（），但结果相似。 我所做的是这样的：（不知道旋转是否可以正常工作）

 element.on('dragmove',function(){ //dont think you need the 'evt' passed here
     var position = stage.getUserPosition();
     var snapChildren = snapGroup.getChildren();  //get each snapGroup child
     for(var i=0; i<snapChildren.length; i++){
          if(position.x > snapChild[i].getX() && position.x < snapChild[i].getX()+snapChild[i].getWidth()){ // check horizontal bounding rectangle
                if(position.y > snapChild[i].getY() && position.y < snapChild[i].getY()+snapChild[i].getHeight(){ // check vertical bounding rectangle
                    var snap = snapGroup.getIntersections(position.x,position.y);
                    if(snap.length > 0) snapElement(snap[0]);
                }
           }
     }
 }

因此，这是一种“边界矩形”碰撞检测方法，应将您必须执行的处理最小化。

即使您获得所有子代并在for循环中对其进行处理，它仍然比.getIntersections（）更快