Je travaille sur un jeu et j'ai des problèmes de performance en dessinant une toile sur une autre avec drawImage. Selon le profileur de Chrome, je passe 60% de mon temps en seulement un appel drawImage et 10% dans le clearRect au-dessus ...HTML/Canvas - drawImage performance avec une autre toile
La toile source est d'environ 3000x3000 pour l'instant (ce qui est assez petit, je disons) et la toile de destination est 1024x768.
J'ai pensé qu'au lieu de dessiner toutes les tuiles; murs et ainsi de suite chaque boucle (ce qui me donne environ 15fps), qu'il serait probablement plus rapide de tous les dessiner sur une toile hors écran, puis dessiner sur ma toile principale, puis dessiner des entités, etc. . Cela me donne ~ 30fps mais ... est-ce le meilleur que je vais obtenir avec le rendu logiciel?
Mon rendre boucle est essentiellement:
ctx.clearRect(0, 0, 1024, 768);
ctx.beginPath();
ctx.drawImage(map, cam.position.i, cam.position.j, 1024, 768, 0, 0, 1024, 768);
ctx.closePath();
ctx.save();
ctx.translate(-cam.position.i, -cam.position.j);
// draw entities, etc.
ctx.restore();
Je ne peux pas vraiment penser quoi faire, autre que commencer à utiliser WebGL (pour tirer profit de son accélération matérielle) ou attendre les fournisseurs pour mettre en œuvre l'accélération matérielle pour le contexte 2d. Je préférerais ne pas faire l'un ou l'autre, cependant, toute contribution serait appréciée.
Je ne suis pas sûr beginPath et closePath applique à drawImage. – kanaka
Ah, je les ai utilisé pour les chemins avec lineTo/moveTo et avec drawImage. Je les ai juste enlevés et le framerate est à peu près le même mais merci quand même. – Xavura
3000x3000 est gargantuesque, même 1024x768 est déjà lent avec le rendu logiciel, ou il utilise tout le processeur qu'il peut obtenir, d'après mon expérience, il n'y a pas grand-chose que vous pouvez faire jusqu'à ce que l'accélération matérielle arrive à toutes les extrémités. Vous pourriez envisager d'utiliser une approche basée sur HTML pour un jeu basé sur les tuiles. –