Juegos con cámara web: cómo hice un juego de correr con dinosaurios
Quería hacer un juego de correr donde apretar una tecla no valiera como correr. Si el jugador dejaba de moverse, el personaje tenía que frenarse también. Si sacaba otra ráfaga de velocidad, la huida debía sentirse más fácil. Y si solo agitaba los brazos delante de la cámara, el juego tenía que notarlo.
Así nació Dino Survival, un juego de navegador donde corres en tu lugar para escapar de un T-Rex. Dicho en una frase suena fácil, pero hacerlo implicó resolver una pregunta mucho más difícil: ¿cómo consigue una cámara web convertir un cuerpo en movimiento en un control que se sienta justo?
Por qué la cámara web pide otro tipo de control
La mayoría de los juegos de correr sin fin reducen el movimiento a un botón, un deslizamiento o una velocidad automática hacia adelante. Funciona porque la entrada es exacta: un botón está apretado o no lo está.
Un cuerpo es mucho más desordenado. Cada persona tiene otra estatura, otro tamaño de cuarto, otro ángulo de cámara y otra forma de correr. Las rodillas se pueden salir del cuadro por abajo, la ropa puede tapar una articulación, y con poca luz un punto puede temblar aunque la persona esté quieta.
Por eso no podía asignar una pose directamente a una velocidad. Necesitaba un proceso capaz de observar el movimiento durante un rato, descartar el ruido y aun así responder con la rapidez suficiente para que se sintiera conectado:
- Pedirle permiso de cámara al navegador.
- Estimar los puntos del cuerpo en cada cuadro de video.
- Medir el movimiento alterno de las piernas y el de todo el cuerpo.
- Convertir los pasos por minuto recientes en un ritmo de juego estable.
- Usar ese ritmo para mover al corredor y cambiar la distancia que lo separa del dinosaurio.
El navegador gestiona el permiso de la cámara con MediaDevices.getUserMedia(). Dino Survival solo pide video y usa la cámara frontal si hay una. Después, el modelo de pose procesa en el propio navegador los cuadros en vivo.
Los puntos de la pose no son lo mismo que correr
Dino Survival usa MediaPipe Pose Landmarker en modo video. El modelo puede devolver 33 puntos del cuerpo, pero tener más datos no significa que el control salga mejor.
Para la cadencia me quedo con un grupo más pequeño: hombros, caderas, rodillas y tobillos. Los hombros y las caderas me dan un eje aproximado del torso, y las rodillas y los tobillos me dicen cómo se mueven las piernas respecto a ese eje.
Esa medida relativa es importante. Si solo midiera a qué altura aparece una rodilla en la pantalla, un celular inclinado o alguien que no está centrado podrían alterar el resultado. Al proyectar el movimiento de las piernas sobre el eje del torso de cada jugador, el detector depende menos de cómo esté puesta la cámara.
El juego también comprueba que se vean las dos caderas y las dos rodillas. Si no es así, te pide que retrocedas en lugar de inventarse un ritmo con datos incompletos sin decir nada. En un juego de control por movimiento, es mejor ser honesto que fingir que la entrada es fiable.
De las piernas alternas a la cadencia
Correr en tu lugar crea un patrón que se repite: una rodilla sube, alcanza su punto más alto y baja, y luego la otra pierna hace lo mismo. El detector vigila el movimiento de rodillas y tobillos y busca esos picos alternos.
Uso umbrales adaptables para cada pierna, porque un número fijo no sirve para todos los cuerpos ni todas las cámaras. Una persona alta puede generar en pantalla un movimiento mucho mayor que otra más baja que está más lejos. El detector aprende un rango local útil, y un tope máximo evita que esa adaptación se vuelva demasiado permisiva.
Tras un pico válido, esa misma pierna entra en un periodo refractario corto de 130 milisegundos. Así, el temblor de los puntos en lo alto de la elevación de la rodilla no se convierte en dos o tres pasos imaginarios. Los pasos válidos pasan a una ventana móvil de tres segundos: lo bastante larga para suavizar la cifra y lo bastante corta para notar un cambio real de esfuerzo.
Si pasan unos 1.1 segundos sin ningún paso, la cadencia vuelve de golpe a reposo. Prefiero ese corte tajante a una caída larga y lenta: cuando el jugador para, el juego tiene que parar.
Cómo evité que agitar los brazos contara como un sprint
Los primeros sistemas de movimiento suelen premiar cualquier actividad dentro del cuadro. Eso deja un atajo obvio: quédate con los pies quietos y mueve las manos. Además, una cámara que tiembla pasa por ejercicio.
Dino Survival añade un segundo filtro basado en las caderas. Busca un rebote vertical real del cuerpo dentro de una ventana corta. La cadencia solo cuenta cuando coinciden el patrón alterno de las piernas y esta señal de movimiento más amplia.
No intenta evaluar la técnica de nadie al correr. Solo exige una prueba de que el trabajo lo hace la parte baja del cuerpo. Mover solo los brazos no abre el filtro, y el pequeño ruido de la estimación de pose no hace avanzar al corredor.
Fue una de las lecciones más importantes que me dejó crear juegos con cámara web: una buena entrada no consiste en detectar la mayor cantidad de movimiento, sino el movimiento correcto, y en explicar con claridad cuándo la cámara no lo alcanza a ver.
De pasos por minuto a una persecución con dinosaurio
El detector de cadencia saca pasos por minuto, pero el juego no necesita una medida de laboratorio, sino una señal clara y jugable. Traduzco el resultado a tres niveles de esfuerzo fáciles de entender: trote, a unos 70 pasos por minuto; carrera, a 120; y sprint, a 160.
Esos niveles se vuelven un ritmo normalizado, que el motor de supervivencia usa para acercarte a una meta de escape de 50 unidades. Al mismo tiempo, el dinosaurio tiene su propia velocidad, y esta aumenta durante la carrera.
La distancia entre ambos cambia según la diferencia entre las dos velocidades. Si corres más que el dinosaurio, ganas espacio. Si aflojas, empieza a acercarse. Si llegas al jeep, te salvas. Y si la distancia llega a cero, se acabó la persecución.
Esto es lo que hace que el juego se sienta distinto de un juego de correr con dinosaurios cualquiera. El dinosaurio no es un simple reloj con dientes: es la explicación visual del esfuerzo que estás haciendo ahora mismo.
El mundo solo se mueve cuando tú te mueves
El sendero está hecho de una secuencia de cuadros de selva. Los indexo por la distancia acumulada y no por el tiempo del reloj. Si el jugador deja de correr, el entorno se congela; si vuelve a empezar, el sendero se mueve otra vez bajo el corredor.
El tamaño aparente del dinosaurio y su posición dependen de la distancia: cuanto más cerca está, más espacio ocupa en la escena. El polvo, las líneas de velocidad y el indicador de ritmo dicen lo mismo. Varias señales pequeñas responden a una sola pregunta: ¿me estoy escapando?
El ciclo de dibujo usa requestAnimationFrame(), que le pide al navegador que haga el trabajo de animación antes del siguiente repintado. Con la marca de tiempo de esa función calculo el tiempo transcurrido, de modo que el movimiento depende del tiempo y no de suponer que todos los dispositivos dibujan los mismos cuadros por segundo.
Tampoco recorto a la persona en vivo para meterla en la escena en cada cuadro: uso un corredor prerrenderizado. Así hay menos procesamiento visual en los celulares y el juego tiene un personaje coherente. La cámara web es el control, no el arte final.
Por qué la calibración es parte del diseño
Ajustar la cámara no es una pantalla técnica que pueda esconder: es el primer nivel.
Dino Survival muestra una guía de encuadre y espera a que se vean los puntos necesarios. Te dice cuándo retroceder y te da una cuenta regresiva corta antes de la persecución. En ese momento queda fijado el trato: mantén a la vista la parte baja del cuerpo, corre en tu lugar y el juego te sigue.
También hay un modo demo con teclado, para explorar el juego sin dar permiso a la cámara, probarlo en un equipo que no lo soporte o entender primero las reglas. La experiencia completa sigue siendo la de la cámara, porque lo que importa es el vínculo físico entre el esfuerzo y la huida.
Lo que aprendí haciendo Dino Survival
Lo más difícil no fue dibujar un T-Rex, sino decidir qué debía contar como un paso.
Un control corporal fiable necesita varias comprobaciones sencillas que trabajen juntas. Los puntos dicen dónde está el cuerpo. Los picos alternos de rodillas y tobillos apuntan a la cadencia. El movimiento de la cadera confirma que de verdad estás corriendo. Una ventana móvil suaviza el resultado. Y un reinicio rápido a reposo hace que detenerse cuente de verdad. Luego el motor del juego convierte esa señal en una distancia que se entiende sin leer ningún manual.
Eso es lo que más me gusta del control por movimiento en el navegador: la tecnología desaparece cuando la respuesta es la correcta. No piensas en puntos, umbrales ni marcas de tiempo. Ves un dinosaurio, lo oyes acercarse y corres.
Si te interesa el enfoque de diseño e investigación, lee por qué creo que Dino Survival es el tipo adecuado de juego de ejercicio.
Puedes jugar Dino Survival gratis en tu navegador, sin descargar nada. Si quieres ver cómo la misma cámara web se encarga del movimiento de la parte superior del cuerpo, lee cómo hice Monster Punch, un juego de boxeo online. Y para encontrar más juegos que empiezan al instante, mira mi guía de juegos gratis sin descargas.