Cómo crear un coworking virtual tipo RPG con Claude Code

Te dejo el vídeo arriba, pero aquí lo tienes por escrito y con calma.

Ayer te enseñé mi coworking virtual por fuera. Hoy toca abrirlo en canal y enseñarte las tripas: cómo está montado por dentro, qué hay detrás y cómo lo levanté prácticamente en una noche con Claude Code.

Y ya te aviso una cosa. No hay magia chamánica. Hay una idea clara, un sistema de documentación bien montado detrás y pedirle las cosas bien a la IA. Ya está.

¿De dónde salen los dibujos tipo Pokémon?

Esta es la pregunta que más gente me hace. Los personajes, las mesas, las plantas, todo ese rollo pixelado estilo Pokémon o Final Fantasy de los antiguos.

Pues no los dibujé yo. Los compré.

Hay páginas donde te venden lo que se llaman assets: personajes, escenarios en 2D, muchos con animaciones ya hechas. Yo tiré de LimeZu y me pillé un pack que se llama Modern Interiors. Y oye, superbarato. Me gasté una miseria para todo lo que te dan. Compré alguno más para tener más cosas con las que jugar, pero vamos, nada.

Le das a descargar, pagas y ya está. Te viene todo preparado: los personajes con sus animaciones, los distintos elementos para vestirlos, los escenarios. Todo el creador de personajes que ves dentro del armario está montado con esto.

O sea, que no me inventé el arte. Ese trabajo ya estaba hecho. Yo solo lo coloqué.

¿Cómo montas el mapa de la oficina?

Aquí está lo interesante. Una vez tienes los assets, ¿cómo pones cada cosa en su sitio y montas la oficina a tu manera?

Para esto me inspiré en cómo funciona RPG Maker. Si no lo conoces, es un programa con el que se hacían juegos RPG de toda la vida, estilo Pokémon. Y lo bonito de RPG Maker es su editor de mapas: funciona con tiles.

Un tile es como una baldosa. El mapa entero está dividido en cuadraditos, y en cada cuadradito vas metiendo cosas. Rellenas, decoras, colocas. Y ya está.

Así que me monté mi propio editor con esa misma idea. Lo primero que defino es el tamaño del mapa. El mío es de 30 por 30. Al principio lo tenía más grande y me parecía exagerado, no hace falta tanto. Si algún día entra demasiada gente, que lo dudo, ya lo agrandaré.

Luego solo tienes que ir seleccionando tiles y plantándolos. Clic izquierdo para poner, clic derecho para quitar. Con la rueda del ratón lo desplazo a nivel de píxel para clavar la posición, y si hago un clic con la rueda sin arrastrar, roto el objeto. Poca cosa más.

Las capas: por qué el personaje pasa por detrás del árbol

Aquí viene un detalle que da mucho el pego. Quiero que el personaje pueda pasar por detrás de unas cosas y por delante de otras. Por detrás del árbol, por delante de la mesa.

Eso se resuelve con capas. Monté un sistema de cinco capas. La cinco es la que está más al fondo, la uno la que está más adelante del todo. Y el personaje vive en la tres.

En la práctica eso significa que las paredes van a la cinco, las mesas y las sillas a la cuatro, lo que hay encima de las mesas a la tres, y las plantas a la uno, para poder esconderte tras ellas. Gestionas todo por capas y queda ese efecto de profundidad sin complicarte la vida.

Los mapas de colisión: paredes invisibles

Si pones una mesa y ya está, la gente la va a atravesar como un fantasma. Para que no pase, hacen falta colisiones.

Esto se hace con lo que se llama un mapa de colisión. Básicamente pintas de rojo los sitios por los que el jugador no puede pasar. Pones una pared de colisión, recargas, y ya no puedes cruzar por ahí. Has creado una pared invisible.

Luego me hice medias baldosas de colisión, porque muchas veces me interesa cubrir solo media casilla y no la entera. Si tapas la baldosa completa queda un efecto raro en el que chocas antes de tiempo. Con las medias, y ajustando con la rueda del ratón, dejas el borde justo donde toca para que el personaje pase pegadito por detrás sin que se cuele.

Es ir jugando con el mapa hasta dejarlo fino. Ni más ni menos.

Las baldosas de evento

Lo último son los eventos. Son baldosas donde ocurre algo cuando te acercas.

Tengo la de spawn, que es donde aparece la gente al entrar, y la puedo mover donde quiera. Y luego baldosas de acción: una abre la gramola, otra abre el Pomodoro, otra las tareas, otra una URL embebida. Te acercas, pulsas la E y se abre. Y también les metí atajos de teclado para lanzarlas sin acercarte.

Lo bueno es que esas acciones no son inventos nuevos. Son funcionalidades que ya tenía en la web. El muro de la vergüenza, por ejemplo, no deja de ser una página mía metida como URL embebida. Ya la tenía hecha, y ahora la puedo usar también aquí dentro.

¿Cómo consigues que dos personas se vean en tiempo real?

Esto es lo que hace que sea un coworking de verdad y no un juego para ti solo. Que entre otra persona, veas dónde está y puedas interactuar con ella.

Eso se hace con websockets. Sin meterme en jerga: es una tecnología que no funciona como una web normal que ataca una base de datos cada vez que quiere algo. En vez de eso abre un canal y te da los datos en tiempo real. Es la misma idea con la que funcionan los chats en directo.

Monté un servidor con un websocket que va trayendo quién está conectado y en qué posición. Le añadí encima un sistema de reconexión por si el servidor se cae o lo reinicio para meter una actualización, para que la gente lo siga viendo todo en vivo sin enterarse.

Y al final cada persona no es más que una posición y un muñeco con unas características. El sistema imprime ese muñeco en su sitio, con sus animaciones y sus emotes, y ya está. Como todo se loguea con tu cuenta de la web, esa misma cuenta guarda cómo es tu personaje para dibujarlo bien.

Yo esta parte la conozco bien porque hace años trasteé mucho con sockets en cosas de videojuegos. Pero el código de esto también lo escribió Claude. Yo sé cómo funciona la tecnología; a la hora de picarla, se la pedí y la hizo.

¿Hace falta saber programar para montar algo así?

La respuesta corta es que no como te imaginas.

Todo esto lo construí con Claude Code. No me compliqué. Tenía la idea, se la pedí, lo hizo, arreglamos cosas, cambiamos otras, y para adelante. Nada de prompts raros ni fórmulas mágicas.

Lo que sí tengo bien montado es el sistema de documentación de detrás. Eso es lo que hace que pedirle las cosas funcione. Lo más importante no es el prompt del momento, es el contexto que ya está preparado para que la IA sepa dónde está y qué toca.

La parte que más me costó fue la versión móvil, con su joystick que cambia de velocidad, sus botones para emotes y chat, y que un Pomodoro te siga funcionando cuando vuelves a la oficina. Eso sí fue echarle amor con Claude e ir dejándolo fino poco a poco. Pero al final funciona, y va genial.

Como dicen en Los Simpson, en vez de "lo hizo un mago"... aquí lo hizo Claude.

Las herramientas que hay detrás

Por si quieres montar algo parecido, esto es todo lo que usé:

• Claude Code: con esto construí el coworking entero, del editor de mapas al servidor de tiempo real.
• LimeZu: la tienda de assets donde compré el pack Modern Interiors, el arte pixelado estilo RPG.
• RPG Maker: no lo usé para construir, pero me inspiré en su editor de tiles para diseñar todo el sistema de mapas.

Si empiezas de cero, te viene bien ver primero todo lo que se puede hacer con Claude Code sin programar, y de paso cómo se puede montar algo funcionando en muy poco tiempo. Y si te llama la atención lo de la documentación de la que tanto hablo, te lo cuento en detalle en cómo uso Claude Code para gestionar mis notas.

Si quieres que te enseñe de verdad cómo uso la IA para montar sistemas completos como este, con toda la documentación que hay detrás para que funcione, échale un ojo a YO S.A.