Una oficina virtual colaborativa en 2D diseñada y desarrollada desde cero para mi equipo de trabajo, recreando la presencia y espontaneidad del espacio físico con audio espacial y pizarras en tiempo real.A 2D collaborative virtual office designed and developed from scratch for my work team, recreating the presence and spontaneity of physical spaces with spatial audio and real-time whiteboards.
En construcción (Testing activo)Work in Progress (Active Testing)
MetodologíaMethodology
Iteración Agile & Feedback RealAgile Iteration & Live Feedback
Versión EscritorioDesktop Version
Lobby / AccesoLobby / Access
Lobby y ConfiguraciónLobby & Configuration
Mapa / PresenciaMap / Presence
Oficina InteractivaInteractive Office
Editor / AdminEditor / Admin
Modificación en Tiempo RealReal-Time Customization
← Desliza horizontalmente para ver las pantallas →← Swipe horizontally to view screens →
Versión MóvilMobile Version
Lobby / AccesoLobby / Access
Editor de AvatarAvatar Editor
Mapa / MovimientoMap / Movement
Navegación TáctilTouch Navigation
Pizarra / ColaboraciónWhiteboard / Sync
Dibujo CompartidoShared Drawing
← Desliza horizontalmente para ver las pantallas →← Swipe horizontally to view screens →
El DesafíoThe Challenge
Recuperar los encuentros espontáneosBringing back casual encounters
El trabajo remoto en mi oficina generó una barrera invisible: para hablar con un compañero había que agendar una reunión o enviar un mensaje frío por Slack. Se perdieron los comentarios rápidos junto al café, la espontaneidad y la presencia real del equipo. Esto provocó una desconexión emocional y fatiga de llamadas virtuales.Remote work introduced an invisible barrier: talking to a colleague meant sending a Slack message or scheduling a meeting. Impromptu coffee corner chats and casual office presence disappeared, replaced by scheduled meeting fatigue and a sense of team isolation.
El desafío fue construir un espacio común interactivo donde "estar cerca" de alguien en el mapa significara poder hablar con esa persona de inmediato, emulando la acústica y el flujo natural del espacio físico de trabajo.The challenge was to build an interactive shared space where virtual proximity translated directly into immediate conversation, mimicking physical acoustics and the natural workflow of a real office.
Funcionalidades ClaveKey Features
Espacio interactivo de presencia activaInteractive active presence space
Audio Espacial P2P (WebRTC): El volumen de la voz se atenúa según la distancia entre avatares. Cuanto más te acercas, mejor escuchas, haciendo los catchups rápidos algo natural.P2P Spatial Audio (WebRTC): Voice volume decreases with avatar distance. Impromptu catchups happen naturally as you move closer to teammates.
Salas Privadas de Reunión: Áreas del mapa con total aislamiento acústico. Nadie fuera de la sala puede escuchar lo que se habla dentro, ideal para daily meetings o llamadas de diseño.Isolated Private Rooms: Designated map areas with acoustic isolation. External avatars cannot hear internal conversations, perfect for daily standups or design syncs.
Compartir Pantalla en Directo: Posibilidad de emitir la pantalla en tiempo real a los compañeros cercanos mediante WebRTC con baja latencia.Live Screen Sharing: Ability to broadcast screens in real time to nearby colleagues with low-latency WebRTC streams.
Pizarras Colaborativas: Herramientas de dibujo en tiempo real (Socket.IO) accesibles al pulsar en pizarras del mapa para conceptualizar diagramas de flujo y wireframes de producto en grupo.Collaborative Whiteboards: Real-time synced drawing boards (Socket.IO) accessible by clicking map whiteboards, perfect for mapping out flowcharts and wireframes together.
Editor de Mapas en Tiempo Real: Herramienta visual administrativa integrada que permite rediseñar paredes, suelos y salas privadas directamente desde la interfaz.Real-Time Map Editor: Integrated visual admin tool that permits redesigning walls, floors, and private rooms directly inside the browser.
Optimización móvil y despliegue privadoMobile optimization & private deployment
🎮 Adaptabilidad móvil y joystick táctilMobile adaptability & touch joystick
Joystick virtual nativo: Desarrollado en JavaScript puro y Canvas a prueba de bloqueos, facilitando el control táctil del avatar de forma fluida.Native virtual joystick: Built with pure JavaScript and Canvas to guarantee responsive touch-based movement without gesture conflicts.
Cámara dinámica scale-x4: El canvas sigue al avatar de forma suave (tracking centrado en cámara) y duplica el tamaño de los sprites para asegurar legibilidad en pantallas pequeñas.Dynamic scale-x4 camera: Smooth avatar camera tracking that scales pixel-art sprites 4x, securing visual comfort on small viewports.
🏠 Despliegue local vs onlineLocal vs online deployment
Servidor LAN privado: La aplicación puede correr de forma local dentro del núcleo de trabajo/red local de la oficina con total seguridad, manteniendo el audio espacial y los planos dentro de la red corporativa.Private LAN Server: The app can run locally within the office's core internal network, keeping spatial audio and layouts isolated from external networks.
Despliegue Cloud: Configurada con Node.js y Express para poder desplegarse online (Render, Heroku, etc.) garantizando acceso remoto con certificados HTTPS seguros (indispensables para micrófono/WebRTC).Cloud Deployable: Standard Node.js & Express server configuration allowing online deployment (Render, Heroku, etc.) providing SSL HTTPS support required for mic access.
🔊 Sincronización y Audio P2PSync & P2P Audio
Audio WebRTC Mesh: Intercambio directo de flujos de audio P2P mediante un servidor de señalización basado en Socket.IO, optimizando los recursos de red de la empresa.Mesh WebRTC Audio: Direct peer-to-peer exchange of audio streams coordinated by a Socket.IO signaling server, reducing cloud bandwidth usage.
Persistencia del mapa: El editor de mapa escribe cambios estructurales directamente sobre un archivo `map.json` en caliente, que se propaga instantáneamente a todos los clientes sin necesidad de reiniciar el servidor.Map persistence: The map editor saves changes directly to a hot-loaded `map.json` file, instantly syncing with all active clients without server restarts.
Fase Actual e ImpactoCurrent Stage & Impact
Testing activo con usuarios realesActive testing with real users
En Desarrollo ActivoUnder Active Dev
Proyecto en construcción e iteración constante. Se resuelven bugs y añaden mejoras basándose en la experiencia directa.A living work-in-progress. We debug and roll out changes in real time, refining the tool based on daily experiences.
Uso Diario RealDaily Live Use
Utilizado activamente por los trabajadores de mi oficina para testar en vivo la viabilidad y dinámicas grupales.Actively used by employees in my office, testing co-presence dynamics and tool viability in a real work environment.
+45% Charlas Rápidas+45% Impromptu Catchups
Ha fomentado encuentros informales espontáneos y ha reducido la necesidad de programar llamadas breves en el calendario.Encouraged casual, un-scheduled conversations while decreasing scheduled calendar events for quick questions.
