pixel-platformer

Un plataformas 2D completo en estilo pixel art - física del personaje, niveles, enemigos y objetos coleccionables. La prueba de que bajamos hasta la capa del motor de juego y no solo ensamblamos piezas ya hechas.

pixel-platformer
TL;DR

Un plataformas 2D que corre en el navegador. Nunca fue cuestión del número de funciones, sino de que el salto tuviera una buena sensación y se mantuviera fluido incluso en un portátil más débil.

Descripción general

Un plataformas es uno de esos proyectos que parecen banales desde fuera. Un cuadrado salta sobre baldosas, ¿qué puede tener de difícil? Toda la dificultad está en cosas que el jugador no ve pero siente en pocos fotogramas: si el salto es elástico, si el control tiene retardo, si se llega a alcanzar el borde.

Este proyecto nació por diversión, y para entender de verdad de dónde sale un buen control. En lugar de amontonar mecánicas, llevamos a un nivel alto una sola cosa: un movimiento del personaje que se siente bien en la mano, y un bucle de juego que se comporta igual en cualquier hardware.

Un jugador juzga un juego en los primeros segundos, y no con la razón sino con el tacto. Un personaje demasiado ligero se escapa de los dedos, uno demasiado pesado se arrastra y frustra. Entre ambos hay una franja estrecha en la que el salto se siente agradable - y esa franja solo se encuentra ajustando valores concretos: la fuerza del salto, la gravedad, la fricción al aterrizar.

Por eso un plataformas es un ejercicio tan bueno. No hay una gran arquitectura que diseñar, pero sí una respuesta implacable: un número mal elegido y el juego deja de ser agradable de inmediato. El resto de este caso de estudio cuenta qué hubo que ordenar para que ese ajuste tuviera algún sentido.

Un paso de física, cada máquina por igual

El error más común en los juegos hechos fuera de horario: un bucle atado al número de fotogramas. En un monitor de 60 Hz el personaje salta con normalidad, a 144 Hz vuela el doble de rápido, y en un portátil débil que pierde fotogramas se ralentiza. La física no puede depender de la velocidad a la que dibuja la pantalla.

La solución es simple y probada: la simulación avanza a paso fijo, y el dibujado ocurre aparte, con interpolación entre ticks. El mundo se actualiza exactamente sesenta veces por segundo sin importar el monitor, y el renderizador recibe el estado más una fracción del paso para que el movimiento sea fluido.

gameLoop.js · javascript
let accumulator = 0;
const step = 1 / 60;

function frame(now) {
  accumulator += (now - last) / 1000;
  last = now;

  while (accumulator >= step) {
    world.update(step);
    accumulator -= step;
  }

  renderer.draw(world, accumulator / step);
  requestAnimationFrame(frame);
}

Dos bucles de juego

EnfoqueEn una pantalla rápidaEn un portátil débil
Bucle atado a los fotogramasel personaje vuela demasiado rápidoel personaje se arrastra
Paso fijo más interpolaciónmismo ritmomismo ritmo

Colisiones que no hacen trampa

La segunda cosa que arruina la sensación son las colisiones. El personaje debe detenerse exactamente en el borde de una baldosa, ni un píxel antes ni un píxel después, o el jugador nota que algo no va bien aunque no sepa nombrarlo. La simulación calcula de forma más simple de lo que parece: la velocidad, luego el eje X y el eje Y por separado contra la rejilla de baldosas, con una corrección de posición en el contacto.

1
Entrada

leemos las teclas una vez por fotograma, pero las pasamos a la simulación, no directamente al movimiento.

2
Simulación

el paso fijo calcula velocidad, gravedad y colisiones contra la rejilla de baldosas.

3
Dibujado

el renderizador recibe el estado del mundo más una fracción del paso para que el movimiento sea fluido entre ticks.

➜
Consejo

Un paso de simulación fijo más la interpolación al dibujar es la forma más simple de que un juego se comporte igual en cualquier hardware. La física no sabe nada de la frecuencia de fotogramas del monitor, y es eso lo que decide si el salto es justo.

El efecto que se siente en la mano

Lo que sale es un juego pequeño que de verdad se controla con gusto, con un código que se mantiene legible y fácil de ampliar. El salto tiene un buen peso, las colisiones son honestas, y el ritmo es el mismo en cada monitor. No es una demo técnica que finge ser un juego, sino algo llevado a un estado en el que quieres jugarlo más tiempo del que tarda en arrancar.

Más proyectos

Más trabajos de la misma categoría - mira cómo abordamos retos parecidos.

¿Tiene un proyecto similar?

Escríbenos - el presupuesto es gratuito y llega en una hora.