Séparer les changements d'état du dessin
Utilisez requestAnimationFrame pour la prochaine mise à jour visuelle, puis transmettez son horodatage dans un petit coordinateur de boucle. Mettre à jour les positions, les minuteries et les règles à partir du temps écoulé ; dessiner l'état actuel après les mises à jour. Le moteur de rendu ne doit pas décider si une collision s'est produite, et une vérification de collision ne doit pas dépendre du fait qu'un sprite ait été peint ou non.
Pour un petit test de plate-forme, déplacez un marqueur horizontalement à un nombre choisi d'unités mondiales par seconde. Exécutez le même itinéraire sur un écran 60 Hz et un écran à rafraîchissement élevé. Si le marqueur se déplace plus loin dans le même intervalle d'horloge murale sur un écran, un certain mouvement est toujours appliqué par rappel plutôt que par unité de temps.
Choisissez une politique de récupération pour les images en retard
Une longue pause peut produire un intervalle écoulé énorme. Limitez la valeur écoulée pour un jeu occasionnel en temps réel afin qu'un joueur qui revient ne voie pas un personnage se téléporter à travers plusieurs obstacles. Pour les simulations déterministes, utilisez une étape de mise à jour fixe avec un accumulateur, exécutez un nombre limité de mises à jour de rattrapage et effectuez le rendu entre les états de simulation si l'interpolation est utile.
Enregistrez l'intervalle de rappel le plus long au cours d'une course d'obstacles répétable, puis inspectez le jeu après avoir changé de position. Décidez si le jeu doit s'arrêter, rattraper un peu ou reprendre à partir du dernier état ; rendez ce choix explicite au lieu de laisser une seule image retardée le déterminer.
Questions sur boucle de jeu par navigateur
Dois-je utiliser setInterval pour dessiner ?
Utilisez requestAnimationFrame pour le travail visuel, car il est planifié à proximité du repeint et est généralement mis en pause pour les documents masqués. Un minuteur peut toujours programmer des tâches non visuelles, mais il ne doit pas être traité comme une horloge à affichage.
D'où vient l'horodatage du frame ?
Le rappel requestAnimationFrame fournit un horodatage haute résolution. MDN documente son timing et son comportement ponctuel ; utilisez cet horodatage pour calculer la progression plutôt que de compter les rappels.
Pour aller plus loin
Vous avez repéré une information dépassée ? Signaler une correction