Cómo no construir un videojuego

Hey, esta conferencia fue increíble. Hay tanta gente detrás del escenario, en todas partes haciendo de MCs, están los organizadores, hay Así que demos un aplauso a todas las personas que hicieron esto posible.

Esta charla es un poco diferente. Solo quiero que todos ustedes se relajen y quiero entretenerlos. No estoy aquí para vender nada, no estoy aquí para convencerlos de que lo que estoy haciendo es mejor que lo que todos los demás están haciendo. Todo lo contrario. Lo más probable es que lo que estoy haciendo sea mucho peor de lo que deberían hacer. Hoy voy a hablar sobre cómo no construir un video juego y les mostraré tecnologías que usan todos los días en su trabajo como ingenieros front-end, pero en un contexto en el que probablemente nunca las hayan visto usar. Y espero inspirarlos a hacer las cosas de manera diferente. A pensar más en soluciones específicas del dominio en lugar de construir otro formulario de 11 pasos.

Permítanme mostrarles el video juego que estoy construyendo. Aquí hay un video. Se llama Athena Crisis. Es un juego de estrategia moderno retro en 2D por turnos. En realidad, espera un minuto, falta algo aquí. Creo que falta música. Permítanme abrir VS code. Permítanme poner la música. ¿Tienen música? ¿No? Oh... Sí, eso es Athena Crisis. Supongo que se dieron cuenta de que todo esto es React. Y no solo React, este juego se ejecuta dentro de la presentación de diapositivas que está escrita usando MDX, que es un fork de React. Perdón, que es un fork de Markdown que te permite poner componentes de React en tus presentaciones. Así que tengo el juego ejecutándose dentro de una presentación de diapositivas que está escrita en JavaScript, React y CSS. Permítanme deshacerme de VS code de nuevo. Una vez que me di cuenta de que podía poner una versión del juego en mi presentación, también pude poner tres en ella. Y puedo jugar contra la IA, como estar sentado en Central Park en Nueva York y jugar ajedrez rápido, jugar múltiples partidas. Así que puedo esperar aquí hasta que la IA termine.

Por ejemplo, puedes combinar cualquier combinación de árboles. Puedes ir al editor de escenarios, puedes elegir el personaje que te guste, elegir su foto de perfil, por ejemplo. Y luego, desde allí, puedes entrar directamente en el juego y probar los mensajes en el modo de campaña. Esto es Athena Crisis. Todo lo que has visto se construye desde cero con JavaScript, React y CSS. La pila utiliza Vite, PMPM, TypeScript, React, Relay, Emotion, Prisma, GraphQL, GraphQL Pothos, Socket.io y estructuras de datos persistentes.

Escribí una publicación en el blog. Saqué las piezas principales en las que tengo una opinión, como Vite, PMPM, TypeScript, las puse en una plantilla y expliqué cómo armar una experiencia de front-end realmente rápida. La restricción que me impuse cuando comencé esto es que solo puedo usar herramientas en la capa directamente debajo de mí que entiendo tanto que podría construir una versión básica y compatible de ella si fuera necesario. No entiendo los motores de juegos, así que la única forma de usar uno era construir uno por mí mismo. He trabajado en infraestructura de pruebas en el pasado. ¿Cómo pruebas un juego de video? Si estás jugando juegos de video, son juegos AAA y se lanzan, lo primero que haces es descargar un parche de 10 gigabytes porque, desde el momento en que lo enviaron y el momento en que lo lanzaron, encontraron tantos problemas que tuvieron que parchearlo. No hay muchas pruebas y luego comienzas a jugar y hay tantos errores, tantos problemas visuales, todo tipo de problemas, ¿verdad? Y así, me gusta testing. No escribo muchas pruebas, pero quería averiguar cómo puedo asegurarme de que cuando estoy cambiando el juego, no estoy rompiendo algo todo el tiempo. Y recientemente exhibimos este juego en Tokio en una feria de videojuegos y la gente jugó en dos estaciones desde las 10 a. m. hasta las 6 p. m. durante todo el día y no experimentamos un solo error de jugabilidad. No digo que no haya errores, pero en ese día nadie encontró ninguno. Pero de todos modos, lo que haces, tienes este juego de video y tienes estados de juego. ¿Cómo verificas que funcione? Podrías escribir pruebas para verificar, ¿está esto aquí, está esto allí? ¿Tiene este una salud de 50 y este una salud de 77? Y luego cambias el equilibrio y todo se rompe, ¿verdad? O cambias los gráficos y se rompen cosas. Y así pensé, bueno, tal vez solo renderizaré el estado de mi juego como texto. Hago una instantánea de gesto o algo así y hago un renderizador que tome el estado de mi juego y lo convierta en texto. Luego terminas teniendo dos implementaciones de tu renderizador. Uno para el juego real y otro para tus pruebas. Y si estás usando texto para representar el estado de tu mapa, te das cuenta de que es un poco incómodo porque se desincroniza.

No tiene el mismo nivel de fidelidad. No obtienes la misma información de él. Entonces, ¿qué tal si simplemente tomamos una instantánea del juego y la convertimos en imágenes y tenemos instantáneas que se verifiquen según cómo se vea el juego? Y si estás usando iterm u otros terminales similares, puedes imprimir el mapa del juego real en la terminal mientras estás desarrollando.

Te lo mostraré. Tengo la suite de pruebas ejecutándose aquí en este momento. Puedes ver que verifica que el estado del juego sea correcto en cada etapa y simplemente imprime el estado del juego en esa etapa en la terminal. Entonces, mientras estoy desarrollando, puedo ver esto para ver si las cosas se ven correctas. Y si algo cambia, como una unidad que pierde una habilidad o una unidad que falta, puedo señalar el commit exacto donde algo salió mal.

Solo como ejemplo, esta es la infraestructura de pruebas que construí. Básicamente, ejecutas un montón de estados del juego en el mapa. Recibes un nuevo estado y luego capturas ese estado del juego como una captura de pantalla y lo comparas con una instantánea de imagen. Bien. Creo que eso fue mucho. ¿Verdad? Mucho JavaScript. Mucho JavaScript realmente mal escrito. Y mucho más CSS. ¿Por qué alguien escribiría un juego con CSS, el DOM y JavaScript? Una de las cosas es que obtengo tiempos de carga instantáneos. He estado jugando este juego todo el tiempo mientras estoy en el escenario aquí. Todo es en vivo. Puedo recargar este mazo de luces. Está justo ahí. Puedo tocar esto. Obtengo estas increíbles transiciones suaves. Todo esto es CSS. Es solo CSS. Hay un montón de variables CSS y automáticamente se encarga de cómo colocar este círculo. ¿Puedes ver esa transición suave cuando lo toco? Se sale un poco para que se vea realmente pulido. Accesibilidad. La web tiene un gran soporte para accesibilidad.

Puedes simplemente conectarte a esas APIs y hacer que este juego funcione para personas con diversos grados de daltonismo, por ejemplo. Modo claro y oscuro. Una de las cosas geniales es que no sé por qué harías eso. Pero puedes admitir el modo oscuro con el video juego. Por alguna razón, porque construyo todo desde cero aquí, toda mi presentación ahora está en modo oscuro. Y el juego también está en modo oscuro. Así que simplemente cambiaré de nuevo.

El inconveniente es, como todos saben con JavaScript y DOM y CSS y React, es que a veces tienes problemas de rendimiento. Y antes mencionaba estructuras de datos persistentes para describir de manera declarativa el estado del juego. JavaScript es adecuado para eso porque puedes avanzar tan rápido y obtienes recargas instantáneas y recarga de módulos en caliente. Y luego tienes estructuras de datos persistentes para evolucionar el estado del juego con el tiempo. Y si tienes estructuras de datos persistentes, lo bueno es que es muy económico. Por ejemplo, estoy hablando de Immutable.js. Es muy económico copiar el estado actual del juego, cambiar solo una pequeña cosa y no usar demasiada memoria. Así que puedo mantener muchos estados del juego. Y luego tomo este estado del juego y lo coloco en la parte superior de mi árbol de componentes para decir de manera declarativa a cada componente qué deben renderizar. Permíteme mostrarte. Aquí cargué un mapa y le dije a la IA que produjera 30 estados del juego y ver qué hace. Y tengo un medidor de FPS aquí. Y lo genial es que puedo entrar aquí y jugar el juego en cualquier punto, dependiendo de lo que quiera hacer. Pero sabes, 30 mapas no son geniales. ¿Qué tal 848 mapas? En realidad, no creo que eso sea muy genial tampoco, así que veamos si podemos obtener más si volvemos a hacer todo el proceso. Puede llevar un tiempo. Entonces, esto no está guionizado, no tengo idea de lo que hace la IA. No es completamente determinista. Y simplemente le digo a dos IA que jueguen entre sí hasta que una de ellas gane y luego me den todos los estados. Quedémonos con 1507. Y nuevamente, puedo entrar aquí y jugar el juego en cualquier momento. Veamos quién gana al final. No tengo idea.

Vale. Terminó en empate. Demasiado pasando. Hagamos uno más. 1461. No puedo llegar al final. Creo que el rojo gana en este. Vale. De todos modos, eso es Athena Crisis.

Ahora, quiero jugar un pequeño juego contigo. Es realmente aburrido, porque el juego se llama ¿es eso CSS y, excepto una vez, siempre es CSS. Permíteme demostrártelo. Simplemente toca esto, ve al panel de elementos. Todos estos son divs. Todos divs. Lo único aquí que no es CSS, en realidad, es esta flecha. Esa usa SVG. Sin embargo, esta animación de hormigas marchantes utiliza una animación CSS. Si miras este fondo aquí, este radio azul donde las unidades pueden moverse, esos son todos diffs, rectángulos con un borde alrededor y una imagen de máscara rotada encima de ellos que es como un patrón a rayas para ocultar cada otro píxel.

Para mostrarte esta infraestructura, permíteme abrir VS Code nuevamente. Ve a la unidad. Aquí puedes ver las unidades con las que puedo interactuar, tienen este contorno rojo y se anima un poco. Aparece. Permíteme hacer zoom aquí. Aparece cuando tocas una unidad. ¿Lo ves? Es como una transición muy suave y pequeña de 200 milisegundos porque quiero que sea lo más pulido posible. Lo bueno de mi infraestructura es que puedo cambiarla y se recarga instantáneamente. No hay demora. Esta es la infraestructura. Si miras los edificios aquí, este edificio, hay una unidad detrás de él.

El edificio se desvanece hacia la parte superior para que puedas ver lo que hay detrás. También es una imagen de máscara con un degradado lineal que se desvanece progresivamente esa imagen. Permíteme desactivar ese degradado y luego se verá así. De acuerdo.

La niebla, este tipo de juegos tienen un sistema llamado niebla donde no puedes ver lo que hay detrás hasta que muevas una unidad cercana que tenga un cierto rango de visibilidad. Si me muevo aquí, se revelarán partes de esta niebla. Pasé por varias iteraciones, pero la más divertida que encontré es renderizar un montón de rectángulos negros en el DOM, agregar un filtro de desenfoque y luego usar el modo de mezcla de colores con el atributo de saturación para fusionarlo en la capa inferior. También puedo cambiarlo. Así es como se ve el modo de mezcla de colores. Así es como se ve el filtro de desenfoque.

Una de las cosas interesantes de la niebla es que, debido a que este juego es una experiencia híbrida, no es solo un juego para un solo jugador. Es un juego híbrido en línea para un solo jugador y multijugador donde otras personas pueden invadir tus mundos y es posible que tengas que invadir los suyos cuando se lance el juego. Pero si puedes tomar este nodo DOM con una niebla en el panel de elementos en tus herramientas de desarrollo y simplemente eliminarlo, sería como jaja te tengo, veo todo lo que está sucediendo y voy a hacer trampa, eso no sería muy divertido, ¿verdad? Entonces, aquí está la cosa, en Athena Crisis, todo el estado del juego al que no se te permite ver está en el servidor y el servidor decide qué puede ver cada cliente. Es como cuando vas a una red social y publicas algo solo para tus amigos y alguien te carga un feed de noticias, los mensajes a los que no se les permite ver se ocultarán desde el lado del servidor. Excepto aquí, cada campo tiene esa regla de visibilidad aplicada. Entonces, en este ejemplo, hay dos mapas, tienen el mismo estado de juego exacto, pero el jugador rosa aquí no puede ver nada de lo que está oculto aquí en la niebla. Permíteme hacer que la IA haga los mismos movimientos aquí. Y así, en el cliente solo verás los estados de juego a los que se te permite ver. Por ejemplo, aquí abajo hay una nueva unidad que se creó durante el turno de la IA o del enemigo. Entonces puedo tomar esta, moverme aquí y una vez que llegue aquí me mostrará lo que está sucediendo alrededor de aquí, dependiendo de lo que se me permita ver, recibiré esos estados de juego. Así es como funciona la niebla.

Otra cosa es que quiero que este juego funcione muy bien en dispositivos móviles, en IOS y Android, y específicamente con dispositivos táctiles. ¿Alguna vez has escrito en tu teléfono y estás escribiendo una palabra y el siguiente carácter es una E y luego tocas ligeramente la W cerca de la E y aún sale como una E? Eso se debe a que los botones que ves en los teclados de los teléfonos móviles están dimensionados de manera diferente según lo que el teléfono móvil predice que es probable que escribas a continuación. Y entonces pensé, ¿cómo puedo aplicar esto a un juego de video donde hay una cuadrícula y todos son bastante pequeños y quiero asegurarme de que siempre estés escribiendo lo correcto? Así que construí un pequeño motor predictivo para averiguar con qué unidad es más probable que el jugador interactúe, y lo más probable es que interactúes con tus propias unidades. Entonces, si soy el jugador rosa aquí y voy a esta playa y simplemente me acerco a esa casilla donde está la unidad, donde está este jet, la tomará de inmediato. Entonces puedo hacer clic aquí, aunque no esté en ese campo, para enfocar ese. Una vez que enfoco esa unidad, cambia las áreas táctiles según lo que es probable que haga a continuación. Lo más probable es que quiera ir a esta unidad. Entonces, incluso si estoy aquí en este bosque y me acerco un poco a eso pero no estoy en el campo del helicóptero, aún lo enfocará. Pero como dije, hay algunas dificultades en cuanto al performance.

Uno de ellos es que el juego se renderiza de esta manera. Puedo jugarlo, pero no creo que sea una experiencia muy agradable si tienes una pantalla grande. Entonces, ¿cómo escalamos las cosas en la web? Simplemente agregamos una escala de transformación de tres y luego el juego se ve así. Es posible que tengas que entrecerrar los ojos un poco porque estoy presentando aquí en una pantalla grande, pero todos los colores se ven realmente deslavados aquí. Ya no es perfecto en píxeles cuando hago zoom. ¿Lo ves? Y agregué este pequeño 3D efecto al mapa para que parezca que están flotando en el aire. Y cuando haces eso, los colores se deslavan cuando usas una escala de transformación de tres.

Una de las grandes cosas es cuando tienes arte de píxeles y quieres que las cosas se vean perfectas en píxeles, hay una propiedad CSS llamada image rendering donde puedes indicarle que se vea pixelado, para que cuando se aumente la escala, la nitidez del arte de píxeles se mantenga igual. Sin embargo, todavía tenía colores deslavados debido al problema que mencioné sobre la rotación3D. Y me di cuenta de una propiedad CSS no estándar de 25 años que se construyó para Internet Explorer y resultó ser la solución perfecta. Y cada píxel es simplemente perfecto.

Construí un proceso de imágenes. Cada vez que hay un sprite y lo cambio o mi artista lo cambia, pasa por el proceso de imágenes para comprimir la imagen al tamaño más pequeño posible, y luego pensé, no quiero descargar 300 imágenes. Quiero descargar un solo archivo. E idealmente puedo poner mis imágenes en un archivo CSS y codificarlas en base 64.

Y has visto todas esas pequeñas unidades que se mueven hacia arriba y hacia abajo. Esa es la animación de inactividad. Es como si estuvieras respirando. Todos ustedes se están moviendo mientras los miro fijamente. Y lo que hice fue tener mi bonito proceso de representación de imágenes. Tenía un archivo CSS con todos los sprites dentro de ellos, y funcionaban muy bien en Chrome, pero luego abrí Safari, y de alguna manera era 20 cuadros por segundo o 15 cuadros por segundo más lento que Chrome. Y pensé, ¿qué está pasando aquí? Y lo que me di cuenta es que si estás cambiando tus imágenes de fondo, como la posición, el tamaño o la frecuencia con la que se repite, si haces eso con frecuencia y usas imágenes codificadas en Base64 , que a menudo hacemos para pequeños iconos o algo así, Safari no las tiene en caché. Entonces, cuando Safari mira esa URL con una imagen Base64 codificada directamente allí, es como cada 180 milisegundos en el juego, sería como, nunca he visto este arte en mi vida, nunca he visto esta unidad en mi vida, y luego decodifica toda esa cadena Base64 nuevamente. Entonces no hay almacenamiento en caché allí.

Lo que hice como solución fue eliminar mi proceso de representación de imágenes, y simplemente volver a usar PNG normales. Otro problema fue que tengo una hija de cinco años, se llama Mia, y ella viene a mí con frecuencia y me dice: `Oye, Papá, ¿puedo trabajar en el juego contigo?` Y le di el editor de mapas. Y ella dijo: `De acuerdo, voy a poner una casa en cada campo`. El mapa quedó más disperso. Así que tenía alrededor de 150 de esas entidades en él. No es tantas. No es un escenario real. Pero de alguna manera encontró un error. El juego se representaba a siete cuadros por segundo después de hacer eso. Y aprendí que hay filtros buenos y malos. La propiedad CSS filter se supone que está acelerada por GPU. Algunos de ellos lo están. No todos.

Como viste antes cuando explicaba cómo esa sombra difuminada alrededor de las unidades se desvanecen ligeramente. La única forma de lograrlo es estableciendo una sombra en todas ellas que sea transparente para que cuando cambies el color, se desvanezca. Porque si no lo estableces al principio y luego lo estableces a un color específico, no hará la transición. Probablemente todos hayan experimentado eso si están usando transiciones CSS en un elemento que se inserta en el DOM.

Puse cuatro de esas sombras en cada una de las entidades del juego porque quería que fueran perfectas en píxeles, no borrosas como suelen ser. Una a la izquierda, una arriba, una a la derecha y una abajo. Y eran transparentes porque solo estaban ahí en caso de que necesite desvanecer ese contorno en. Y me di cuenta de que aunque eran transparentes, la GPU estaba haciendo mucho trabajo y en lugar de 60 fps, solo obtuve siete. Así que ten cuidado, incluso si alguien dice que esta propiedad está acelerada por GPU, algunas partes de ella podrían estarlo, no todas las partes. Por otro lado, el brillo, la saturación y la escala de grises siempre están acelerados y son rápidos.

Un día, ni siquiera tenía un problema de rendimiento, así que no sé cómo sucedió esto, pero me desperté y vi esta cosa llamada 'will change'. Y la descripción de la propiedad decía que así es como puedes indicarle al navegador que omita algunas optimizaciones porque le estás diciendo al navegador qué propiedades CSS cambiarán. Y pensé, maldición, soy mucho más inteligente que los navegadores, sé exactamente qué va a cambiar. Así que lo puse, no lo probé porque solo confié en lo que leí allí. Dos días después, me di cuenta, oh, tengo un problema de rendimiento nuevamente. Así que hice una búsqueda binaria en mi historial. Y luego me di cuenta, okay, en realidad no uses 'will change'. Los navegadores son realmente inteligentes. Cuando leí esta página de documentación, hay una parte de esa página que no leí y es la parte en rojo.

Otro aprendizaje que hice es que deberías, ya sabes, o si quieres, por favor usa un Medidor de FPS. No quiero hacer ninguna afirmación prescriptiva aquí. Puse un Medidor de FPS. Lo viste antes y idealmente casi siempre estaba a 60 FPS. Puedo mostrarte que esto es en vivo abriendo y cerrando y causando reflows. Sí, está en vivo. Lo que me di cuenta es que puse mi Medidor de FPS en el nivel superior de mi árbol de componentes de React y estaba mirando mi juego y estaba depurando algo y pensé, ¿por qué mi juego se vuelve a renderizar cada segundo? No estoy haciendo nada. Y eso es porque mi Medidor de FPS estaba en el nivel superior de mi árbol de componentes. Así que mi recomendación es usar un Medidor de FPS. Sé que hay uno dentro de Chrome. Debes habilitarlo.

Nunca lo miras. Si siempre está presente en desarrollo, tal vez incluso en tu entorno de preparación, y se cae, inmediatamente sabrás que algo está mal. Y el consejo profesional aquí es colocarlo en un árbol separado de React en tu página para que no vuelva a renderizar el resto de tu aplicación real.

Una cosa que aprendí es realizar pruebas de referencia temprano, pero solo optimizar lo que importa. Construí una IA desde cero para este juego basada en cómo jugaría el juego. No tengo ni idea de cómo construir una IA. De alguna manera construí una IA. La construí utilizando la programación funcional, estructuras de datos inmutables y no la probé. Parecía bien, parecía rápido, pero luego, de alguna manera, estaba jugando en el editor de mapas donde la IA se ejecuta localmente, no en un servidor, y mi juego se bloqueó durante dos segundos, y pensé, ah, simplemente agregaré un web worker y lo quitaré del hilo principal, pero luego comencé a medir el rendimiento, y me di cuenta de que si estás utilizando la programación funcional para cosas que haces un millón de veces durante un turno de la IA, probablemente no es una gran idea con JavaScript. JavaScript es rápido cuando se parece más a C y menos a un lenguaje de programación funcional. Así que lo probé, pero solo optimicé — hay otras partes lentas, pero optimicé la IA para que fuera aproximadamente 20 veces más rápida.

En cuanto al rendimiento de las herramientas, viste que algunas de estas unidades son las mismas para diferentes facciones, diferentes equipos, pero tienen diferentes colores, para que puedas distinguirlas. Construí una pequeña biblioteca de intercambio de paletas, que no es una gran implementación en absoluto, pero funciona para mí. Y me di cuenta — cuando lo publiqué en código abierto, primero que nada, tengo que decir que construí todo eso mientras llevaba a un bebé. Y luego me di cuenta de que era muy lento. Así que lo revisé y lo reescribí para que fuera 23 veces más rápido. La lección aquí es simplemente no confiar en alguien que hace código abierto mientras lleva a un bebé dormido. Eso es algo que hice. Estoy tratando de publicar en código abierto tanto como puedo mientras sigo en este viaje. Hay una cosa más. Como viste, toda esta presentación de diapositivas estaba utilizando MDX y se construyó específicamente para esta presentación. Así que justo hoy, publiqué en código abierto re-MDX, que es el código exacto que estoy usando para esta presentación de diapositivas. Puedes echarle un vistazo. Es muy minimalista. Por favor, bifurca si hay una función que te gustaría agregar. Pero eso es re-MDX. Si estás de acuerdo, te molestaré con otra cosa. Así que comencé este proyecto hace un año y medio para meditar, para ver hasta dónde puedo llegar. Para equilibrar mi día. Así que en lugar de dormir, pasé todas las noches codificando durante una hora, tal vez dos.

A veces tal vez cuatro. Pero se sentía mejor que simplemente dormir, porque equilibraba lo que estaba haciendo. Pero luego, con el tiempo, sentí que tenía algo. Es realmente divertido. Así que si le daba mi computadora portátil a un amigo o alguien de mi familia, se la robarían durante una hora y jugarían el juego. Y luego perderían. Y luego querrían jugar de nuevo. Así que pensé, algunas personas quieren que este juego exista. Yo quiero que este juego exista. Y así es como comencé hace 22 años, cuando quería aprender programación para hacer video juegos.

Así que construí video juegos y redes sociales. Pasé mucho tiempo trabajando en una red social. Y así pensé, quiero volver a eso. Tal vez esto sea algo divertido de hacer. Y tal vez no funcione. Pero cuando sea mayor, no quiero arrepentirme de no haberlo hecho. Y así, la semana pasada anuncié que estoy comenzando una empresa, se llama Nakazawa Tech. Que es un estudio de videojuegos independiente con sede en Japón, pero también una empresa de código abierto. Y estoy muy emocionado de anunciar que hay un nuevo editor de video juegos llamado Null Games, que es muy amigable para los desarrolladores y trabaja con juegos independientes. Y acabamos de firmar una asociación. Y ellos publicarán Athena Crisis el próximo año.

¿Puedo decirte, Kristof, que esta es la segunda conferencia en la que te veo este año, y siempre eres una persona tan encantadora para estar cerca. Realmente disfruto de ti y de todo lo que haces. Y solo quiero decir, te aprecio, hombre. Aprecio todos los besos que recibo de ti en las conferencias. Sí, lo sé. Muy bien, genial. Así que tenemos un par de preguntas. Una pregunta, que no sé si conoces la respuesta a esto. ¿Cuánto tiempo has invertido hasta ahora en todo esto? Sí.

Una hora y media todos los días durante los últimos 1.4 años. Así que si haces los cálculos, tendrás una respuesta. Sí. Sí. Tienes que hacer los cálculos tú mismo. Este hombre es un enigma.

¿Tienes experiencia en arte? ¿Creaste este arte de píxeles tú mismo? Oh, bueno, quitamos las diapositivas en la última diapositiva. Acredité a todos los artistas. Así que Nakazawa Tech está trabajando con seis artistas increíbles que están trabajando en el arte. Aprendí que soy un buen director de arte, no un buen artista. Puedo modificar lo que hacen, pero son increíbles. Y tengo la suerte de tenerlos.

Sí. Entonces, una pregunta es, ¿por qué no construir un juego de esta manera? Quiero decir, obviamente ya has hablado de muchas de las dificultades de rendimiento y todo eso, pero, ¿por qué es una mala idea? Sí. Sí. Creo que realmente es el rendimiento lo que me está causando más dolores de cabeza, donde a veces las cosas simplemente se vuelven lentas de repente y pienso, okay, tal vez no es tan inteligente hacer lo que estoy haciendo. Pero sabes, también es divertido llamarlo así, porque creo que lo llamé así antes de comenzar una empresa para hacer esto. Y como dije, al principio era solo un proyecto de meditación. Y ahora tengo que ser mucho más pragmático acerca de lanzarlo realmente, lo cual es un cambio un poco grande. Entonces, si hubieras, quiero decir, obviamente aquí, el viaje era el objetivo en sí mismo. Sí. Pero, si hubieras planeado crear un juego de calidad de producción, ¿qué habrías hecho diferente? Tal vez pregúntame dentro de unos años. Tengo que tener algo de experiencia en cómo podría hacerlo de manera diferente. Sabes, lo genial de esto y usar una pila que conoces es que puedes aprender mucho al descubrir todas las otras cosas que no sabes. Y si te metes en una nueva pila, no sabes nada, y luego nunca llegas a esas cosas donde realmente estás aprendiendo algo. Así que creo que eso fue principalmente por qué quería intentarlo de esta manera y ver hasta dónde puedo llegar.

Genial. ¿Qué biblioteca usaste para la interacción multijugador? Mencionaste Socket.IO, pero ¿hay algo más detrás de eso? No, no hay inteligencia. Solo mi propio código, que no me gusta usar.

Ojalá eso fuera algo que pudiera usar. Eso es mejor. Sí. ¿Cuánto pesaba ese bebé en ese momento? Seis kilos. ¡Oh, wow! Genial. Muy bien. Estas preguntas son tontas.

Muy bien. Vale, aquí hay una pregunta que suena muy inteligente pero podría ser una pregunta tonta. No sé nada sobre motores de juegos. No sé si tenemos tiempo para eso. Quiero decir, puedo decir que ECS significa sistema de entidad-componente. No, no lo hice. Solo uso JavaScript y mapa inmutable. Genial. Bueno, quiero decir, estas preguntas son demasiado tontas. No perdamos nuestro tiempo aquí. ¿Hay algo, ves algo en la pantalla que realmente quieras?

Oh, sí. Quiero decir, nosotros, ya sabes, el último es bueno. Ahora, ¿cómo podrías publicar esto en otras plataformas? Oh, sí. Eso es divertido. Bueno, responde la pregunta entonces. Sí, en primer lugar, puedes hacerlo. Bueno, tengo que leer las preguntas, así que sabemos cuál es la pregunta. Podríamos hacerlo reemplazando todo el renderizador para no usar CSS y el DOM, lo cual puede ser mucho trabajo, pero luego, ya sabes, hay ventajas y desventajas, ¿verdad? Lo que dije antes, creo que una de las verdaderas ventajas y, perdón, tal vez estaba un poco en broma sobre cómo no construir un videojuego, pero obtienes mucho al confiar en tecnologías web y el DOM y React y CSS. Obtienes todo eso de forma gratuita, mientras que otros motores de juegos tienen problemas para admitir el juego en línea, donde, ya sabes, si estás construyendo el frontend, ni siquiera sé cómo no hacerlo en línea, ¿sabes? Y así hay muchas cosas que obtienes de la plataforma web. Y si quisieras admitir algo fuera de la plataforma web, podrías tomar todo el motor y simplemente reemplazar el renderizador para renderizar en algo más. Es algo en lo que estoy pensando, pero no para la primera versión del juego. Muy bien. Creo que esa fue una gran respuesta para terminar. Todos, aplaudan a Christoph. Gracias.