dessiner dans la toile seulement dans la zone visible

Question

Je suis au milieu du développement du mini-jeu simple et j'ai commencé à remarquer quelques baisses de performance. Le jeu est fait de la façon dont vous avez une grande pièce (toile) qui a la taille 5000 x 5000 et le joueur est équipé d'une caméra de visualisation qu'il peut déplacer avec la souris. Maintenant, le problème est que si je dessine 2000 objets pour toute la pièce, cela entraîne une baisse significative des performances. Je pensais s'il y avait un moyen de ne dessiner que des objets qui sont visibles dans votre zone de caméra actuelle, pas dans toute la pièce que ce joueur ne voit évidemment pas.

J'ai essayé de diviser la pièce sur les secteurs (régions) mais cela n'a pas fonctionné très bien. Peut-être que quelqu'un a des idées sur le sujet.

Ce code de rendu est pour la plus grande quantité d'objets:

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

Que peut-on faire à ce pour améliorer les performances de la façon dont je décrit?

Answer 1

J'ai rencontré ce genre de problème et je résolus de cette façon:

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

Il pourrait être mis en œuvre dans votre logique comme ceci:

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

Maintenant, quelques mots d'explication:

Il est recommandé de régler le paramètre Margin sur 100, car cela aidera à atténuer le problème de "l'affichage des choses à l'improviste". Il va simplement rendre les objets dans la plage de 100 en dehors des limites de votre caméra, donc même si vous bougez rapidement votre appareil photo, les choses devraient déjà être là, mais les performances devraient être en très bon état.

cam.x, cam.y, cam.w, cam.h intérieur in_viewport fonction doit être modifiée pour correspondre à votre désignation de l'objet de la caméra, en cas si vous avez déjà votre droite et en bas liés à l'intérieur de l'objet de la caméra, vous pouvez simplement remplacer x + w et y + h avec des paramètres à droite .

Answer 2

Ma recommandation serait de vérifier si l'objet courant est dans les limites et d'en tirer seulement si elle est, pour ainsi:

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

où est viewport par rapport à votre 5000 par zone 5000. Ceci est sans voir tout votre code, donc vous devrez peut-être ajuster pour vos types de données.