Ahora la pala cruza la pantalla sola y vuelve a aparecer por la izquierda. Lo hace esto:
useUpdate((dt) => {
paddle.transform.x += PADDLE_SPEED * dt;
if (paddle.transform.x > WIDTH) paddle.transform.x = -PADDLE_W;
});useUpdate es el bucle del juego. Le das una función y el motor la llama una vez por
fotograma, para siempre. Todo lo que se mueva, decida o reaccione en tu juego va a acabar
saliendo de aquí.
Fíjate en dónde está esa llamada: dentro del cuerpo de la escena, que (como decíamos en el primer capítulo) se ejecuta una sola vez. No estás moviendo la pala ahí: estás apuntando al motor que, a partir de ahora, la mueva él.
dt: el número que lo cambia todo
dt son los segundos que han pasado desde el fotograma anterior. Un número pequeño, como
0.016 si el monitor va a 60 Hz.
Y de ahí sale la única regla de este capítulo: multiplica siempre por dt.
Mira la diferencia:
paddle.transform.x += 5; // 5 píxeles POR FOTOGRAMA
paddle.transform.x += 340 * dt; // 340 píxeles POR SEGUNDOLa primera línea parece más simple y es una bomba de relojería. En un monitor de 60 Hz da 300 píxeles por segundo. En uno de 144 Hz da 720. Tu juego va a ir al doble de velocidad en la máquina de otra persona, y no porque su ordenador sea mejor, sino porque su pantalla refresca más veces.
La segunda dice lo que quieres decir: 340 píxeles por segundo, en cualquier pantalla y
pase lo que pase. Si un fotograma tarda el doble, dt es el doble, y el movimiento sale
igual.
¿Por qué multiplicar arregla eso?
Velocidad por tiempo es distancia. Es la fórmula de toda la vida, la de «iba a 90 km/h durante 2 horas, luego recorrió 180 km».
Aquí es idéntica, solo que con números pequeños: vas a 340 píxeles por segundo y ha pasado 0,016 segundos, así que te toca moverte 340 × 0,016 = 5,44 píxeles.
Si el fotograma siguiente tarda el doble (0,032 segundos), te tocan 10,88 píxeles. Más distancia porque ha pasado más tiempo, que es exactamente lo que hace que el movimiento se vea igual de rápido en las dos pantallas.
Mutar directamente está bien
paddle.transform.x += PADDLE_SPEED * dt;Sin copiar el objeto, sin devolver nada. Dentro de useUpdate, cambiar
la posición a pelo es lo normal y lo rápido: transform es un objeto que el motor lee
cada fotograma, así que escribir en él es todo lo que hace falta.
Ahora tú
Sube PADDLE_SPEED a 1200. Bájalo a 40.
Y prueba lo del principio: cambia PADDLE_SPEED * dt por PADDLE_SPEED / 60 y mira si
notas la diferencia. En tu pantalla probablemente no, y ese es justo el problema. El
error no se ve en la máquina donde escribes el juego. Se ve en la de quien lo juega.