碰撞检测性能差

Question

I am building a game using KineticJs and it is using drag and drop to move elements on screen and I have big performance problems because I check on dragmove event if element that you are dragging is colliding with possible snap positions and then the dragging element gets all laggy. I am using kineticJs built in functions but i have a feeling that they are not optimized well. It actually works pretty decent in chrome(you can see the lag) but it is not good in firefox. Any ideas on how to optimize my code

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

Find the bottleneck. I'm guess it's this line:

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

If so, set up a counter and only update every few ticks of the update. Make sure to do a final update on dragend so you end up with correct final position.

EDIT:

Perhaps something like this may work:

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

As @Aram pointed out, the bottleneck is with the .getIntersections() function.

The .getIntersections() function is very memory/processing intensive, so what you need is a preliminary check which would limit the processing to certain locations. I had a similar problem with a little game I made and the collision detection of .getIntersections() was killing my speed, I also tried .intersects() but it has similar results. What I did was something like this: (don't know if this works ok with rotations)

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

So this is a 'bounding rectangles' collision detection approach, and should minimize the processing you have to do.

Even though you are getting all the children and processing them in a for loop, it's still faster than .getIntersections()