Un coworking virtual fet amb Claude: tiles, col·lisions i WebSockets sota el píxel art

Bueno, hoy me toca enseñaros cómo funciona por detrás un poquito las tripas de este corking virtual que yo creé con herramientas para gente con TDA porque lo hice básicamente en una noche con Cloud y pues bueno, creo que es muy interesante que os cuente un poquito pues eso, cómo he montado todo, qué es lo que hay detrás y no sé, creo que os puede ser de utilidad. Así que bueno, si no has visto el vídeo de mi querido coworking, eh, puedes ver el vídeo que subí ayer, que te explico pues cómo funciona, cuáles son las herramientas que tiene, o sea, con eso ya tendrás un poco de contexto de de qué va toda la vaina, ¿no? Y quizás la pregunta que más gente se puede hacer es, "Oye, ¿y estos así dibujitos estilo Pokémon, ¿de dónde los has sacado?" Pues bueno, si nos vamos al armario, lo vas a ver que eh tienes abajo una mención aquí abajo el todo que pone assets por eh limezu, ¿vale? Que es esto de aquí. Esto es una página que básicamente sirve para, o sea, donde te venden assets, o sea, todo lo que viene siendo pues este tipo de cosas, ¿vale? Para crear personajes, para el tema de de crear pues eh escenarios así todo en en 2D, eh algunos con animaciones, o sea, todo muy chulo, ¿vale? Y básicamente yo lo que hice fue comprar este pack que se llama Modern Interiors, que

es es vamos superbato, o sea, fíjate, me costó como $ o sea, nada. Compré alguno más, ¿vale? Para digamos compensar con más cosas que quería pillar y tal, pero vamos, me gasté muy poquito en, vamos, para todo lo que te dan. La verdad es que es superbarato. Y básicamente pues lo único que tienes que hacer es le vas a download, pagas y y ya está. O sea, no tiene más. Aquí, ya ves, tienes es que un montón de de historias para poder crear lo que a ti te dé la gana, ¿vale? Y ya te viene todo, o sea, te viene ejemplo, por ejemplo, de como tema de los personajes, que si te fijas viene aquí con todas sus animaciones, con todo, o sea, está todo preparado para poder hacer un montón de cosas ya eh con todo esto, incluido el tema de poder crear eh los personajes con diferentes elementos, o sea, todo lo que ves dentro de del creador, ¿vale?, que tengo del armario, eh, está todo creado con esto. Entonces, pues ya vees que es muy interesante, muy sencillo y la verdad es que no sé, h funciona increíblemente bien para encima el precio que tiene, o sea, que es que me parece una ganga de verdad. Una vez tienes todos esos assets, ¿vale? ya puedes pues lo que te digo, crear algo como lo que yo he creado aquí, que que ya ves que es pues muy chulo, es muy interesante y se pueden crear pues cosas increíbles, ¿no? Pero claro, cuando

entras al tema de la oficina eh quizás lo que más te llama la atención es, okay, ahora que tienes todo esto, ¿cómo has creado eh todo lo que es la oficina, el poner las cosas en su sitio, el poder, no sé, hacerla a tu manera? ¿Esto es algo que ya te venía o lo has creado tú a mano? Pues bueno, esto es algo que yo he creado a mano y para hacerlo lo que hice fue inspirarme e en cómo está diseñado RPG Maker, ¿vale? Si no conoces RPG Maker, básicamente es un programa que servía, bueno, sirve a día de hoy, pero eh es un programa con el que se podían crear juegos RPG, ¿vale? De este estilo, o sea, estilo así Pokémon y y Final Fantasy, los antiguos y tal y cual. Entonces estaba muy interesante porque e todo lo que era el editor de mapas era con lo que se conocen como tiles, ¿vale? Tiles, que es eh como si fuera una baldosa eh cada una de estas partes como si lo dividen en cuadritos, ¿vale? Y en cada cuadrito tú vas metiendo cosas, vas metiendo elementos. Entonces, de esa manera, pues tú lo que haces es ir rellenando cosas, ¿no? Y poder hacer historias. Entonces, yo lo que hice fue inspirarme en eso y básicamente, o sea, antes de que me preguntes e cómo lo he construido, lo hice todo con Cloud Code. O sea, quiero decir, eh no me compliqué la vida, yo más o menos tenía la idea, se lo pedí, lo hizo, arreglamos cosas, cambiamos

cosas y ya está, ¿vale? O sea, sí que yo tengo muy bien un sistema de documentación muy bien montado, todo preparado, pero que no tiene más misterio, o sea, que que no hay que hacer proms raros, no hay no es más saber exactamente qué quieres y que te lo haga y ya está. Entonces, bueno, si me voy a mi administración y me vengo aquí donde pone oficina, si te fijas, es lo que te digo, yo me inspiré mucho en lo que es RPG Maker para crear todo esto, ¿vale? Entonces, es muy simple, o sea, es increíblemente simple de hacer todo esto. Lo primero que puedo definir es el tamaño del mapa, ¿vale? lo puedo hacer más grande o más pequeño. Yo lo hice de 30x 30 porque eh más grande que lo tenía al principio me parecía eh exagerado, o sea, extremo, no no hace falta tanto. Si un día veo que entra demasiada gente, que lo dudo, pero si entra demasiada gente, pues ya me pensaré el hacerlo más grande. Pero bueno, ya ves que lo puedes ver aquí, o sea, un mapa así ya tiene suficientes cosas para poder hacer un montón de historias, ¿vale? Entonces, pues bueno, lo hice con aquí para poder hacer zoom y tal, para poder posicionar mejor ciertas cosas. Pero si te fijas, ¿ves? Son todo cuadraditos. Entonces, en cuadra cuadradito tú vas metiendo eh cosas dentro y ya está, ¿vale? Entonces, no tiene mucho misterio. ¿Okay? ¿Y cómo funciona esto? Pues bueno, lo primero tú tienes capas, ¿okay? ¿Por qué? Porque

digamos que a mí me interesa que el personaje esté en un sitio y que haya cosas por las que pueda pasar por detrás y cosas por las que pueda pasar por delante, ¿vale? Y esto es importante entenderlo porque, por ejemplo, si nos venimos aquí, esto es lo que nos va a dar la sensación de que yo puedo ponerme detrás del árbol y yo estoy detrás del árbol, ¿vale? Pero yo en cualquier momento puedo, no sé, pasar por delante de la mesa y estar por encima de la mesa, ¿vale? Entonces, esto eh hay que entender un poco cómo funciona todo ese tema de las capas. Entonces, es muy sencillo. Yo lo que creé fue un sistema de cinco capas, ¿vale? Entonces, en el cinco voy metiendo unas cosas que digamos que es la capa que está más atrás y la uno es la capa que está más adelante del todo, ¿vale? Entonces el personaje normalmente está en la tres, ¿vale? Entonces todo lo que haya antes de la tres está por delante del personaje y todo lo que haya más atrás de la tres está por detrás del personaje. ¿Okay? Entonces, eh, ya está. O sea, es que no no tiene más misterio. Por ejemplo, la planta la tengo en el uno. ¿Ves que se eh pone como consombreado todo el resto? O sea, aquí puedo ver en qué capa está cada cosa. ¿Vale? Entonces, esto es interesante porque eh ves de esta manera, puedes ver que, por ejemplo, las paredes las he puesto en el cinco, pero en el cuatro he plantado las sillas y las mesas, ¿vale? Y si me voy al tres, tengo lo que hay

encima de las mesas. ¿Por qué? Porque está encima de la mesa, ¿vale? Entonces voy gestionando todo esto por capas. Y en el uno, por ejemplo, tengo las plantas. ¿Para qué? Para que puedas pasar por detrás de las plantas. Entonces, ya te digo, es una forma muy interesante de poder construir todo esto de una forma sencilla por capas para tenerlo eh sers simple. ¿Okay? ¿Y cómo meto cosas nuevas? Pues te vienes aquí y aquí tienes todo lo que son los tiles, ¿vale? Por ejemplo, si le digas una mesa, no es una mesa que la planto y ya está, son como diferentes partes de la mesa que yo tengo que unir. Entonces, claro, cada cuadradito pues tiene una parte de algo, pero si yo, por ejemplo, quisiera poner aquí una silla, ¿vale? Yo selecciono la silla esta y me podría venir aquí y plantar la silla y ya está. Con clic derecho quito la silla. Vale, que no, de verdad no no tiene más misterio que que todo esto. Luego lo que hice es que yo puedo plantear un objeto y si hago clic con la rueda del ratón, no sé si voy a poder. Espera, déjame que active el ratón y lo vas a ver muy claro, porque hay veces que tengo que posicionar las cosas más a nivel de píxel, ¿vale? Yo pongo esto, pero si pones la rueda del ratón, puedo desplazarlo un poquito más, ¿vale? De forma que de esta forma puedo posicionar las cosas exactamente donde yo quiero, ¿vale? Entonces, pues bueno, clic derecho, elimino, clic izquierdo, meto y con la rueda de ratón arrastro y pongo,

¿vale? Y luego, si solamente hago un clic, eh, con la rueda del ratón sin arrastrar, lo que hago es rotarlo, ¿vale? porque esto me puede servir para poner ciertos objetos en distintas posiciones. Entonces es una forma pues de poder hacer todo esto que que ya te digo que es muy interesante, funciona muy bien, ya te digo, me inspiré en RPG Maker, funciona prácticamente igual y ya está. Entonces, ¿qué pasa? Que si yo pongo aquí un objeto, el problema de poner ese objeto es que eh la gente va a poder pasar a través de ese objeto. ¿Por qué? Porque hace falta que las personas que los objetos tengan colisiones, ¿vale? Entonces es lo que se genera lo que se llaman mapas de colisiones, que lo único que haces es esto que ves aquí que pone colisión, lo que haces es pintar de rojo los sitios que el jugador no puede pasar, ¿vale? O no debería poder pasar. Por ejemplo, vamos a poner aquí para que lo veas, una pared aquí, ¿vale? De de colisión y voy a guardar el mapa un momento. Y lo que voy a hacer va a ser venirme aquí, ¿vale? Voy a recargar y entonces lo que va a pasar ahora es que si yo intento andar, si te fijas, no puedo pasar. ¿Por qué? Porque he puesto una pared invisible, ¿vale? Entonces, he puesto aquí una colisión y como hay colisión, yo no puedo pasar de aquí. Entonces, lo que vamos a hacer primero vamos a eliminar todas estas eh partes de aquí de la colisión porque no me interesa que la gente de repente no

pueda andar por el mapa, ¿vale? Pero e básicamente funciona así. Y luego lo que hice fue crearme medios medias baldosas, ¿vale? De colisión. ¿Por qué? Porque hay muchas veces que que me interesa que solamente cubra pues parte, ¿vale? Por ejemplo, e esto es solamente media baldosa porque la baldosa entera sería todo esto, entonces quedaría un efecto raro de que intento andar por aquí, no podría. ¿Vale? Entonces, básicamente poniendo de estas podría colorear solamente parte de la baldosa, podría colorear la metad, ¿vale? Y no y no todo. Y luego aparte también la con el con la rueda del ratón puedo moverlas un poquito para ajustarlas. Exactamente. Por ejemplo, aquí eh creé una aquí y lo que hice fue moverla para que la gente no pueda pasar por aquí, ¿vale? Entonces, de esa manera me ahorro muchos efectos que que pues que de otra manera tendría que estar teniendo cuidado con ellos. Mira, ahora viéndolo desde aquí me doy cuenta de que eh esta planta de aquí no le había puesto colisión, ¿vale? O sea, estoy viendo la hora y digo, "Coño, ¿en qué momento yo esta planta no le he puesto colisión?" Entonces, entiendo que si yo ahora me vengo aquí, eh, y intento andar con esta planta, voy a poder pasar por encima. Míralo. ¿Ves lo que te digo? Como está la capa uno, el la lo que viene siendo la planta está por encima del personaje, ¿vale? Pero la puedo atravesar porque no hay mapa de

colisión, entonces pues lo voy a arreglar. Así que lo único que tendría que hacer es plantar la colisión aquí. Vale, ves qué pasa que si ahora yo dejo esto así, lo que va a suceder es que si yo pongo otro, ¿ves? La colisión la va a hacer mucho antes de de lo que debería hacerla. Entonces, para eso tengo estos medios tiles, ¿vale?, que puse, que ya está, que con esto ya lo tengo arreglado, ya no tengo que preocuparme nada más. Y lo que sí que hice, ¿vale? Para que no quede un efecto raro de que el personaje al final se ponga e digamos que por debajo, lo que hice fue poner eh básicamente medio tile, que sería este de aquí, lo pongo aquí y con el ratón eh con la rueda lo que hago es ajustarlo a que se quede justamente debajo aquí, ¿ves? para que haya un trocito más y que de esta manera voy a guardar el mapa y lo vas a ver ahora al recargar. Lo primero ahora voy a tener la colisión, ¿vale? Que vas a ver que que existe la colisión, o sea, ves, ya no puedo pasar, pero ves, sí que puedo pasar por detrás, que es lo importante, pero al intentar caminar por delante, ¿ves? Aún todavía falta un poquito, ¿ves que hace este efecto raro? Entonces, lo que toca hacer es ponerle un poquito más de colisión, ¿vale? Y se la tengo que poner, pues más o menos que llegue hasta aquí. Así que lo que tendría que hacer es venirme por aquí y plantarla más o menos hasta aquí. Si ahora yo guardo esto y vuelvo a recargar, pues vas a ver que ahora va a

hacerlo bien. Ya más o menos no me deja no me deja pasar. Vale, esto ya te digo, lo tendría que dejar fino del todo para que funcione funcione bien, pero eh la idea un poco es esa, es que yo no pueda pasar desde aquí. ¿Ves? Ya está, ya está ahora todo bien hecho, ya no puedo pasar, ya está todo bien armado. Entonces es eso, es ir jugando con el mapa de colisiones, ir dejándolo todo fino y ya está. O sea, que no tiene más misterio. Y luego lo último que hice fue lo que vienen siendo los eventos, que es básicamente todo lo que aparece aquí, ¿vale? Bueno, aparte de los objetos que tengo de distintos tipos, ¿vale? Para ir rellenando cosas en las paredes y en todos los lados, que esto es un arte el ir haciendo estas cosas, eh, tienes paredes y suelos, ¿vale? Lo mismo para poder crear eh paredes de distintos tipos y toda la historia y de esa manera pues vas haciendo todo, que esto es quizás lo más lo que más cuesta, ¿vale? ir haciendo y decorando todo esto. Y luego lo que te digo, están las baldosas de eventos, que es que digamos que baldosas donde ocurren cosas. E, ¿qué he hecho con esto? Pues crearme varias. O sea, primero tengo la de spawn, ¿vale? Que es donde aparece el personaje, que es esto de aquí, que básicamente si yo le pulso, puedo cambiar el sitio donde aparecen los personajes cuando entran a la oficina, ¿vale? Y luego tengo todo lo que son e digamos que distintos h baldosas de eventos que he creado para cosas que que suceden en la plataforma.

Por ejemplo, una para abrir la gramola, otra para abrir un una URL normal y corriente, que esta ahora mismo no la estoy usando, pero la podría usar para lo que sea, eh, o una de información, que tampoco la estoy usando, la del pomodoro, ¿vale? Entonces, fíjate, yo lo que hago es poner esas baldosas de de digamos de acción, las voy poniendo en distintos sitios. Por ejemplo, aquí está la de Pomodoro. Eh, tengo las de tareas, están puestas aquí, ¿vale? ¿Las ves? Tengo la de la gramola, la tengo puesta aquí, pero también las tengo puesta aquí, ¿vale? En los objetos. Entonces, esto lo que hace es básicamente que me creé varias con distintas acciones que están programadas, ¿vale? Que las he ido programando de abrirme cosas de la web y toda la historia que lo que hacen es que básicamente si yo me acerco a un sitio, ¿ves? Me aparece para eh poder eh abrir algo. Entonces, ¿ves? Yo pulso la E y entonces se me abre pues aquí lo de las tareas. Si me acerco aquí, pues para abrir lo de los pomodoros, ¿vale? Entonces, estos son todo funciones que se han ido programando y que puedo lanzarlas así, pero también he metido atajos de teclado para poderlas abrir de otra manera, ¿vale? para con tecla sin tener que activar nada puedas hacerlo. Entonces, ya te digo, está superb porque son cosas que luego puedo utilizar realmente en el resto de la web, pero aparte de tenerlas en el resto de la web, las tengo aquí para poder utilizarlas dentro de de todo lo que ocurre aquí, con lo cual es cojonudo porque son funciones que ya tienes

dentro de la web. Es más, por ejemplo, abre abrdo el tema de lo del panel del muro, ¿vale? El muro de la vergüenza. Y esto no deja de ser eh una URL embebida, o sea, no deja de ser una página web que he metido de que está dentro de mi web y ya está. Entonces, esto se gestiona así todo lo que viene siendo el mapa. Lo tengo hecho de esta manera y ya ves que es una pasada el cómo está montado todo, porque la verdad es que eh funciona superb y no sé, si el día de mañana quiero meter algo más, pues es que lo meto y ya está, o sea, meto las baldosas que quiero meter, ¿vale? los objetos, en los tiles, lo que sea, me creo o si ya la tengo, pues utilizo un tile nuevo de estos de acción, lo meto, ¿vale? O sea, una baldosa de acción, la utilizo y ya está. Y no tendría que hacer prácticamente nada más. Lo que sí que me ha llevado un poquito más de tiempo es hacer la versión móvil, ¿vale? Que es esto de aquí, que básicamente lo meneas con un joystick, que además, fíjate, el mismo se cambia la velocidad dependiendo de del joystick, ¿vale? Y aparte del joystick, puedes utilizar los distintos botones, pues por ejemplo, esto te abre los emotes, ¿vale? Para poder hacer cosas. Esto te abre el chat, ¿ves? Se abren de diferentes maneras porque aquí se abre pantalla completa, aquí tienes el menú para hacer distintas cosas, ¿vale? Entonces, todo lo que tú usas eh se usa de una forma un poquito diferente, ¿vale? Por ejemplo, los pomodoros, pues si meto un pomodoro aquí, eh, ves, yo tengo que poder volver

a la oficina y que el pomodoro siga viéndose en algún sitio, ¿vale? Entonces, la versión para móviles sí que me ha costado un poquito más el hacerla funcionar bien, pero eh básicamente ha sido echarle un poco de amor con Cloud y de echar tiempo, de ir pidiéndole cosas y poco a poco ir dejándolas finas, pero ya ves que que al final funciona muy bien y que lo puedes seguir utilizando en el móvil y que pues va genial. Y luego está lo más importante que es el hecho de que si entra otra persona, pues eh digamos que puedas ver la posición donde está, puedas interactuar con ella y tal. Y esto se hace con algo que se conoce como web sockets, ¿vale? Que lo que hace es eh no usa el protocolo HTTP normal, sino que abre pues eso, un protocolo que funciona pues eso con sockets y que lo que hace es eh digamos darte todo lo que viene siendo datos en tiempo real, ¿vale? En vez de hacerlo como lo hace aquí que atacas una base de datos y que es otro rollo y tal, aquí te lo da todo en tiempo real. es básicamente la tecnología con la que funcionan los chats, con lo que funciona por ejemplo WhatsApp, con todo. O sea, son sockets lo que se utilizan y básicamente pues eso es como, o sea, no me voy a meter en temas técnicos porque no tiene no tiene sentido, pero monté básicamente un servidor eh con un web socket que está básicamente trayéndose los datos de quién está conectado.

Encima luego le metí un sistema de reconectar por si acaso se cae el servidor, por si lo reinicio porque estoy metiendo una actualización, por lo que sea, que la gente automáticamente pues esté viendo todo en tiempo real. Pero entonces es lo bueno que tú en tiempo real puedes estar viendo a otras personas, interactuando con ellas y y ya está. Pero lo único que es es eh una posición con un moña que tiene unas características, ¿vale? y lo único que hace es imprimir ese móña con esas características en el sitio donde está y pues eso, poner las animaciones que está usando, si usa emotes, lo que sea, o sea, que no tiene nada complicado detrás y que lo mismo lo hizo cla, o sea, no no lo hice yo. O sea, yo sé cómo funciona la tecnología porque he utilizado mucho tema de sockets en cosas que hice hace años de videojuegos. He tenido muchos vídeores de World of Warcraft, hecho muchas cosas y sé a la perfección cómo funciona toda esta tecnología, pero e pues aquí básicamente la hice que que la usara eh Cloud para hacer todo esto y no tiene mucha más historia. O sea, al final e básicamente hice que todo te pudieras loguear con la web, que la misma cuenta que tú tienes de usuario te guardara las características de tu personaje para poder imprimirlo bien. Eh, no sé. Todas estas cosas al final no dejan de ser funcionalidades que ya estaban en la web, que las tenía ahí y que he hecho que funcionen de una manera pues que las puedes utilizar aquí y que

no sé que la verdad que son superinesantes. Y bueno, pues ya sabes un poquito más por detrás cómo he creado todo esto. Espero que te haya gustado. Ponme en los comentarios si se te ocurren mejoras de cosas que harías o cosas que meterías dentro que crees que pueden ser útiles. Y te voy a dejar una URL en la descripción y en el primer comentario a mi formación ya, que básicamente te enseño todo el cómo yo utilizo la IA, eh, cómo yo utilizo cloud, ¿vale? O sea, todo el sistema de documentación que he creado detrás para que todo esto pues sea factible el crearlo. O sea, yo no te voy a enseñar dentro de esa formación a crear una web como esta, no tiene sentido, pero sí que te enseño a hacer a crear todo el tema de agentes, toda la historia de cómo yo estoy haciendo todo, ¿vale? para que tú le puedas pedir a Cloud que haga estas cosas y te las haga, porque al final no deja de ser eso. O sea, lo más importante de todo lo que yo hago es toda la documentación que hay detrás, pero luego lo único que le hago es pedirle cosas. Sí que es cierto que yo como persona que soy técnico, eh a lo mejor le pido cosas de una forma un poquito más acertada, ¿vale? De lo que le puede pedir una persona normal, porque ya sé, tecnologías a usar eh cosas que hay que tener en cuenta para que funcione todo bien y tal, pero bueno, que al final es pedirle cosas y esto como dice Los Simpson, ¿no? En vez de lo hizo un mago, pues aquí lo hizo Cloud. Suscríbete para ver más vídeos como este y como te digo siempre, que la productividad os acompañe.