Bonjour,

J'essaie actuellement de créer une sorte de Space Invaders, jusque là tout allait bien.

J'ai donc créé mes boucliers (12 sous forme d'objets), mais lorsque je veux les dessiner sur le canvas, il se met à lagger et c'est injouable. Je ne comprends pas pourquoi dessiner 12 rectangles sur un canvas fait tout lagger.

Merci d'avance.

Bonjour,

Sans pouvoir voir le code, on ne peut pas te répondre.

Bonjour,

D'abord merci pour vos réponses. Effectivement j'ai déjà testé avec un seul objet et il n'y a aucun problèmes.

Pour ce qui est du code la fonction drawBouclier est appellé toutes les 5 ms, (comme pour tous les décors du canvas), la voilà :

function drawBouclier(){
	// Dessin des boucliers
	ctx.rect(bouclier1.x, bouclier1.y, bouclierSize, bouclierSize);
	ctx.rect(bouclier2.x, bouclier2.y, bouclierSize, bouclierSize);
	ctx.rect(bouclier3.x, bouclier3.y, bouclierSize, bouclierSize);
	ctx.rect(bouclier4.x, bouclier4.y, bouclierSize, bouclierSize);
	
	ctx.rect(bouclier5.x, bouclier5.y, bouclierSize, bouclierSize);
	ctx.rect(bouclier6.x, bouclier6.y, bouclierSize, bouclierSize);
	ctx.rect(bouclier7.x, bouclier7.y, bouclierSize, bouclierSize);
	ctx.rect(bouclier8.x, bouclier8.y, bouclierSize, bouclierSize);
	
	ctx.rect(bouclier9.x, bouclier9.y, bouclierSize, bouclierSize);
	ctx.rect(bouclier10.x, bouclier10.y, bouclierSize, bouclierSize);
	ctx.rect(bouclier11.x, bouclier11.y, bouclierSize, bouclierSize);
	ctx.rect(bouclier12.x, bouclier12.y, bouclierSize, bouclierSize);
	ctx.stroke();
}

Je n'ai pas mis de boucle pour l'instant pour pouvoir tester chaque rectangle.

Merci d'avance pour votre aide.

-
Edité par Rayles 18 février 2019 à 11:17:46

En fait, ce qui nous aiderait, ça serait que tu nous fournisse un codepen par exemple. Ce petit extrait de code ne nous aidera pas beaucoup.  

Au passage, j'espère que tu utilises requestAnimationFrame, sinon tu risques d'avoir des sursauts et un framerate pas forcément fluide ou constant, quoi que tu fasses. Ah et encore mieux, si tu veux de la performance utilise plutôt du WebGL (enfin une lib qui repose dessus) que juste l'API Canvas de base. Mais pour aussi peu, elle ne devrait quand même pas ramer.

-
Edité par Genroa 18 février 2019 à 16:02:41

Merci pour ton aide Genroa,

Je vais me renseigner sur le requestAnimationFrame pour le mettre en place.

Voici le code demandé

-
Edité par Rayles 18 février 2019 à 19:53:59

Je n'ai pourtant aucune erreur quand je vais dessus

Cependant, j'ai trouvé une solution. Plutôt que de dessiner un rectangle noir j'ai pris une image noir et je l'affiche en rectangle. Je n'ai plus aucun problèmes avec cette astuce. Même  si je me demande toujours pourquoi le fait de dessiner dessus faisait lagger.

Merci à tout ceux qui m'ont aidé.

-
Edité par Rayles 19 février 2019 à 14:49:05