Qué es el game loop (y por qué tu juego va a tirones)

Todo juego, sin excepción, es el mismo bucle repetido:

mientras (el juego corre) {
  procesar entrada
  actualizar estado
  dibujar
}

Phaser, Pixi y Babylon lo esconden detrás de un update(), pero está ahí. Y casi todos los bugs de movimiento que vas a escribir en tus primeros meses salen de no entenderlo.

El error que todos cometemos

update() {
  this.player.x += 5   // 5 píxeles por frame
}

Esto funciona en tu máquina. En un monitor de 144 Hz el jugador se mueve al doble de velocidad que en uno de 60 Hz. No es un bug de física: estás midiendo el movimiento en frames, y los frames no duran lo mismo en todas las máquinas.

Delta time

delta es cuántos milisegundos pasaron desde el frame anterior.

update(time, delta) {
  this.player.x += 300 * (delta / 1000)   // 300 píxeles por segundo
}

Ahora la unidad es el segundo, no el frame. Mismo resultado en cualquier monitor.

Dónde delta time no alcanza

Delta time arregla el movimiento, pero rompe la física determinista. Si un frame tarda 200 ms porque el navegador se atragantó, un objeto que cae puede atravesar el suelo — nunca hubo un frame en el que estuviera dentro del suelo.

La solución es el fixed timestep: la física avanza siempre en pasos fijos, y el render interpola entre ellos. Es de lo primero que vemos en clase, porque es la diferencia entre un juego que se siente sólido y uno que no.

Esto es material del curso presencial de Phaser. Las clases en vivo son en Tijuana; los asistentes tienen acceso a las grabaciones y al código.