Oneshot Gems
Jouer

Pour les développeurs de jeux

Faire dépendre le mouvement du temps et non du nombre d'images

Le delta time est le temps écoulé entre deux mises à jour. Multiplier une vitesse par le nombre de secondes écoulées permet à un objet de parcourir une distance similaire en une seconde, que le navigateur dessine 45 ou 144 images. La difficulté consiste à décider quoi faire lorsque cet intervalle devient inhabituellement long. Si un onglet a été suspendu ou qu’une tâche coûteuse a bloqué le thread principal, appliquer aveuglément tout l’intervalle peut provoquer un saut cohérent mathématiquement, mais désagréable en jeu.

Sur cette page

Garder les unités visibles dans le code

Choisissez une unité de temps et utilisez-la de manière cohérente. Si la vitesse est exprimée en pixels par seconde et le delta en secondes, la position avance de vitesse × delta. Pour vérifier manuellement, déplacez un marqueur réglé à 80 pixels par seconde pendant dix secondes : il devrait parcourir environ 800 pixels dans le monde, quel que soit le nombre de rendus.

Ne mélangez pas les millisecondes de performance.now() avec une vitesse par seconde sans diviser par 1 000. Indiquez les unités dans les noms, par exemple deltaSeconds ou speedPixelsPerSecond, afin qu’un ajustement ultérieur ne multiplie pas silencieusement le déplacement par mille.

Limiter l’effet d’un blocage

Dans un jeu d’action simple, plafonnez le delta à une valeur maximale choisie et acceptez que la simulation ralentisse brièvement sous forte charge. Pour une simulation physique qui doit avancer par étapes répétables, accumulez le temps et progressez par incréments fixes ; limitez le nombre d’étapes de rattrapage pour éviter que la récupération monopolise la page. Ces choix ont des compromis différents : tenez compte des sensations et des règles de votre jeu.

Testez avec une pause artificielle entre les mises à jour, puis comparez un déplacement en ligne droite et une collision en fin de parcours. Si l’objet traverse un obstacle mince, utilisez peut-être des sous-étapes plus petites ou un test de collision par balayage ; modifier seulement la fréquence de rendu ne corrigera pas ce problème lié aux règles.

Questions sur ⁨delta time dans les jeux⁩

Le temps delta rend-il la physique déterministe ?

Non. Des intervalles de mise à jour variables peuvent toujours produire des résultats d'intégration différents. Une étape de simulation fixe améliore la répétabilité, même si le timing d'entrée et les détails en virgule flottante sont toujours importants.

Quelle horloge doit fournir le temps écoulé ?

Utilisez l’horodatage du callback d’animation ou performance.now() ; MDN décrit ces deux sources de temps haute résolution. N’utilisez pas les dates de l’horloge civile pour les courts intervalles entre les frames : les réglages de l’horloge système n’ont aucun lien avec le temps de simulation.

Pour aller plus loin

Vous avez repéré une information dépassée ? Signaler une correction

Continuez à jouer.

Des jeux gratuits sur navigateur, prêts quand vous l’êtes. Trouvez celui qui vous plaît et faites-en votre prochain favori.

Suivez votre curiosité