Somos el equipo de desarrollo independiente detrás de Wobbly Bottle.
En las fiestas con amigos, 10 personas siempre terminan amontonadas sobre una sola pantalla móvil de 6 pulgadas. Wobbly Bottle resuelve esto permitiendo que hasta 15 personas se unan a una sala con un código PIN de 6 dígitos: la botella gira en tiempo real y sincronizada a 60 FPS en el teléfono de cada participante.
1. El fallo de transmitir fotograma por fotograma
Nuestra primera idea fue transmitir el ángulo de rotación a 60 FPS por WebSockets a los 14 teléfonos restantes.
Las consecuencias fueron inmediatas:
- Consumo masivo de datos: 60 mensajes por segundo multiplicados por 14 dispositivos saturan la red.
- Micro-cortes: Si una conexión 4G flaquea, la animación se vuelve entrecortada y pierde sincronía.
- Calentamiento: Los móviles antiguos sufrían caídas de rendimiento al procesar tantos paquetes de red.
2. La solución: Sincronizar el evento, renderizar en local
En lugar de enviar posiciones, el anfitrión envía un único mensaje inicial:
{ "type": "spin_started", "roundId": "round-42", "initialAngle": 1.2, "impulse": { "angularVelocity": 18.7 }, "startAt": 1730000000000 } Cada móvil ejecuta exactamente la misma fórmula de fricción en su propio CustomPainter a 60 FPS:
const fixedStep = 1 / 60; const damping = 0.985; void onTick() { angularVelocity *= damping; angle += angularVelocity * fixedStep; } Al compartir el mismo impulso de inicio y el mismo paso de integración, la botella frena en el mismo grado exacto en todas las pantallas.
3. Reconexión instantánea por instantánea (Snapshot)
Si un jugador pierde cobertura o cambia de app unos segundos, no reproducimos animaciones pasadas. El cliente solicita una instantánea de estado (quién tiene el turno y qué carta está en juego) y vuelve a la partida al instante.
