は、可視領域にのみキャンバスを描いています

Question

私は簡単なミニゲームの開発の途中です。私はいくつかのパフォーマンス低下に気付き始めました。ゲームは、5000 x 5000サイズの大きい部屋（キャンバス）を持つように作られており、プレーヤーはマウスドラッグで移動できるビューポートカメラを装備しています。今、問題は、部屋全体のために2000オブジェクトを描画している場合、パフォーマンスが大幅に低下することです。現在のカメラエリアに表示されているオブジェクトを描画する方法があるのではなく、プレーヤが表示していない部屋全体で描画する方法はないと私は考えていました。

セクター（地域）で部屋を分割しようとしましたが、それはうまく動作しませんでした。多分、誰かがその問題について考えているかもしれません。

オブジェクトの最大の量のためにこのレンダリングされたコード：

for(var i = 0; i < game.objects.stars.pool.length; i++) { 
    var current = game.objects.stars.pool[i]; 
    game.components.star.apply(i); 
    game.mechanics.draw.circle(current.x, current.y, current.r); 
} 

私が説明した方法で、パフォーマンスを向上させるために、これに何ができるか

？

Answer 1

私はこの種の問題に遭遇していると私はそれをこのように解決：

var in_viewport = function(x, y, margin) { 
    if(
     x >= cam.x - margin && 
     x <= cam.x + cam.w + margin && 
     y >= cam.y - margin && 
     y <= cam.y + cam.h + margin 
    ) { 
     return true; 
    } 

    return false; 
}; 

それはこのようなあなたのロジックに実装することができます説明の

for(var i = 0; i < game.objects.stars.pool.length; i++) { 
    var current = game.objects.stars.pool[i]; 
    if(in_viewport(current.x, current.y, 100) === true) { 
     game.components.star.apply(i); 
     game.mechanics.draw.circle(current.x, current.y, current.r); 
    } 
} 

今、いくつかの単語：

マージンパラメータは、 "物が青くなって見える"という問題をスムーズにするのに役立ちますので、100に設定することをお勧めします。単にカメラの範囲外にある100の範囲内のオブジェクトをレンダリングするだけです。したがって、カメラをすばやく移動しても、既にそこにあるはずですが、パフォーマンスは非常に良い場所にあるはずです。

cam.x、cam.y、cam.w、in_viewport関数の内部cam.hあなたはすでにあなたの権利とカメラオブジェクト内のバインド下を持っている場合、あなたはちょうどいいのパラメータでx + wとy + hを置き換えることができた場合には、お使いのカメラのオブジェクトの命名と一致するように変更する必要があります。

Answer 2

私の推薦は、そう、現在のオブジェクトが境界内にあるかどうかをチェックし、それがある場合にのみ、それを描画するために、次のようになります。

ビューポートがあなたの5000によって5000の領域に関連している

for(var i = 0; i < game.objects.stars.pool.length; i++) { 
    var current = game.objects.stars.pool[i]; 
    if (withinBounds(current)){ 
     game.components.star.apply(i); 
     game.mechanics.draw.circle(current.x, current.y, current.r);  
    } 
} 

function withinBounds(gameObject){ 
    if (gameObject.x + gameObject.r < viewPort.x && viewPort.x - gameObject.r > viewPort.x + viewPort.width) { 
     if (gameObject.y + gameObject.r < viewPort.y && gameObject.y - gameObject.y > viewPort.y + viewPort.height){ 
      return false; 
     } else { 
      return true; 
     } 
    } else { 
     return true; 
    } 
} 

。

これはコードのすべてを見ることがないため、データ型を調整する必要があります。