碰撞檢測性能不佳

Question

我正在使用KineticJs構建遊戲，並且它使用拖放操作來移動屏幕上的元素，並且由於拖動的元素與可能的捕捉位置發生碰撞時我檢查了dragmove事件然後拖動元素全部變得遲緩。 我正在使用內置函數的kineticJs，但我有一種感覺，他們沒有得到很好的優化。它實際上在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（）