Cómo tus juegos detectan tu mano con la cámara
Hand Catch, Swipong, Air Hoops, Shadow Punch: todos usan la misma base para convertir tu cámara en un control. Nada se envía a un servidor.
How your games detect your hand through the camera
Hand Catch, Swipong, Air Hoops, Shadow Punch: they all share the same foundation for turning your camera into a controller. Nothing gets sent to a server.
MediaPipe: visión por computador que corre en tu teléfono
MediaPipe es una librería de Google que detecta manos, caras y poses completas en tiempo real, usando un modelo de aprendizaje de máquina liviano. Lo importante para nuestros juegos: corre 100% en tu dispositivo, dentro del navegador. La imagen de tu cámara nunca sale de tu teléfono o computador para ser procesada en algún servidor externo.
Por cada cuadro de video, el modelo entrega 21 puntos por mano —la punta de cada dedo, cada nudillo, la muñeca—, cada uno con su posición x/y en la imagen. A partir de esos 21 puntos se puede calcular casi cualquier gesto: un puño cerrado, una mano abierta, dos dedos juntos.
MediaPipe: computer vision that runs on your phone
MediaPipe is a Google library that detects hands, faces and full body poses in real time, using a lightweight machine learning model. The important part for our games: it runs 100% on your device, inside the browser. Your camera feed never leaves your phone or computer to be processed on some external server.
For every video frame, the model returns 21 points per hand — the tip of each finger, each knuckle, the wrist — each with its x/y position in the image. From those 21 points you can compute almost any gesture: a closed fist, an open hand, two fingers touching.
De un punto en la imagen a un punto en el juego
Los 21 puntos vienen en coordenadas de la imagen de la cámara —normalizadas entre 0 y 1—, pero el juego necesita coordenadas de su propio mundo: los píxeles del canvas, o unidades de un motor 3D. El primer paso siempre es esa conversión: multiplicar la coordenada normalizada por el ancho y alto reales del área de juego.
From a point in the image to a point in the game
The 21 points arrive in camera-image coordinates — normalised between 0 and 1 — but the game needs coordinates in its own world: canvas pixels, or units in a 3D engine. The first step is always that conversion: multiply the normalised coordinate by the real width and height of the play area.
const puntoEnJuego = {
x: puntoDeteccion.x * anchoDelCanvas,
y: puntoDeteccion.y * altoDelCanvas
};El verdadero trabajo: que no tiemble
Usada cruda, la detección tiembla —el punto salta un par de píxeles de un cuadro a otro, aunque la mano esté perfectamente quieta—. Un control que tiembla se siente roto, no preciso. La solución es un suavizado exponencial: en vez de saltar directo a la nueva posición detectada, el punto en pantalla se mueve solo una fracción de la distancia cada cuadro.
The real work: keeping it from shaking
Used raw, detection jitters — the point jumps a couple of pixels from one frame to the next, even with a perfectly still hand. A controller that shakes feels broken, not precise. The fix is exponential smoothing: instead of jumping straight to the newly detected position, the on-screen point only moves a fraction of the distance each frame.
const SUAVIZADO = 0.25; // 0 = no se mueve nunca, 1 = sigue crudo, con temblor
posicionActual.x += (posicionDetectada.x - posicionActual.x) * SUAVIZADO;
posicionActual.y += (posicionDetectada.y - posicionActual.y) * SUAVIZADO;Ese único número es la diferencia entre un juego que se siente bien y uno que no. Muy bajo, y el control se siente pesado, con retraso. Muy alto, y vuelve el temblor. El valor correcto casi siempre se encuentra jugando, no calculando.
That single number is the difference between a game that feels right and one that doesn't. Too low, and the control feels heavy, laggy. Too high, and the jitter comes back. The right value is almost always found by playing, not by calculating.
¿Quieres una activación de marca con control por cámara? Es exactamente lo que hacemos.
Cotizar un proyectoWant a brand activation with camera-based control? This is exactly what we do.
Get a quote