0

KineticJs を使用してゲームを構築しています。ドラッグ アンド ドロップを使用して画面上の要素を移動しています。ドラッグしている要素が可能なスナップ位置と衝突し、ドラッグしている要素がすべてを取得する場合、dragmove イベントをチェックするため、パフォーマンスに大きな問題があります。ラグ。関数に組み込まれている kineticJs を使用していますが、最適化されていないと感じています。実際にはクロムではかなりうまく機能しますが（ラグが見られます）、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]);
}
4

2 に答える 2

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;
    }
}
于 2013-01-25T12:49:17.287 に答える
0

@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() よりも高速です。

于 2013-01-25T14:15:16.053 に答える