Cómo no construir un videojuego

Rate this content
Bookmark

En esta charla profundizaremos en el arte de crear algo significativo y gratificante. A través de la mirada de mi propio viaje de redescubrir mi pasión por la programación y construir un videojuego desde cero con JavaScript y React, exploraremos los compromisos entre soluciones fáciles y rendimiento rápido. Obtendrás información valiosa sobre prototipado rápido, infraestructura de pruebas y una variedad de trucos de CSS que se pueden aplicar tanto al desarrollo de juegos como a tu trabajo diario.

32 min
02 Jun, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La charla muestra el desarrollo de un videojuego llamado Athena Crisis utilizando tecnologías web como JavaScript, React y CSS. El juego se construye desde cero e incluye características como múltiples estados de juego, oponentes de IA y edición de mapas. Demuestra los beneficios de usar CSS para el desarrollo de juegos, como tiempos de carga instantáneos y transiciones suaves. La charla también aborda la optimización del rendimiento, el soporte de modo oscuro y la publicación del juego en otras plataformas.

Available in English

1. Introducción a la Charla

Short description:

Solo estoy aquí para hacer otro sorteo. Esta charla es un poco diferente. Voy a mostrarles 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. Permítanme mostrarles el videojuego que estoy construyendo. Se llama Athena Crisis. Es un juego de estrategia moderno retro en 2D por turnos. Este juego se ejecuta dentro de la presentación de diapositivas que está escrita usando MDX, que es un fork de React. 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.

¿Quieren hacer otro sorteo? No.

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.

2. Building and Testing the Game

Short description:

Esperemos un segundo. La IA está tratando de vencerme. Ahora puedo entrar y jugar el juego simultáneamente en todos los mapas. También puedo traducir el juego a cualquier idioma y hacerlo funcionar en la presentación. Además, puedo incluir el editor de mapas en la presentación, lo que me permite crear nuevos mapas. El juego se construye desde cero utilizando JavaScript, React y CSS, junto con varias otras herramientas. Probar el juego fue importante para asegurarse de que funcionara correctamente, y desarrollé un método para renderizar el estado del juego como texto. Esto facilitó la verificación y evitó problemas al realizar cambios.

La IA está tratando de vencerme. Ahora puedo entrar y puedo jugar el juego simultáneamente en todos estos mapas. Luego me di cuenta de que también puedo simplemente traducir este juego a cualquier idioma y hacer que el juego se ejecute dentro de esta presentación en cualquier idioma en el que se haya traducido el juego. Incluso más, me di cuenta, hagamos uno diferente, me di cuenta de que puedo incluir el editor de mapas que construí en la presentación. Así que puedo entrar aquí y crear un nuevo mapa. Y solo hay dos restricciones aquí para que todo esto funcione, para que todos los mapas se vean automáticamente hermosos. Una es, ¿puedes colocar esta ficha en esta ubicación? Y dos, dependiendo de las fichas que me rodean, ¿cómo debería verse esta ficha?

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.

3. Game Testing and CSS Benefits

Short description:

No tiene el mismo nivel de fidelidad. Tomar una instantánea del juego y convertirla en imágenes permite obtener instantáneas verificadas. También es posible imprimir el mapa del juego en la terminal durante el desarrollo. La suite de pruebas verifica el estado del juego en cada etapa, lo que facilita la identificación de problemas. La infraestructura de pruebas implica ejecutar estados del juego en el mapa y compararlos con las instantáneas de imágenes. Escribir un juego con CSS, el DOM y JavaScript ofrece beneficios como tiempos de carga instantáneos, juego en vivo, transiciones suaves y soporte de accesibilidad.

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.

4. Supporting Dark Mode and Game States

Short description:

Puedes admitir el modo oscuro con el videojuego. JavaScript y DOM y CSS y React a veces pueden tener problemas de rendimiento. Las estructuras de datos persistentes como Immutable.js permiten copiar y modificar eficientemente los estados del juego. Se pueden almacenar múltiples estados del juego y usarlos para renderizar componentes de manera declarativa. La IA puede producir y analizar múltiples estados del juego. El juego no está guionizado y el resultado es desconocido. Veamos quién gana al final.

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.

5. Game Demonstration and Infrastructure

Short description:

Vale. Terminó en empate. El juego se llama ¿es eso CSS y, excepto una vez, siempre es CSS. Simplemente toca esto, ve al panel de elementos. Todos estos son divs. Lo único aquí que no es CSS es esta flecha. La animación de las hormigas marchantes utiliza una animación CSS. El fondo tiene un radio azul donde las unidades pueden moverse, esos son todos diffs. Permíteme abrir VS Code nuevamente. Aquí puedes ver las unidades con las que puedo interactuar. Aparece cuando tocas una unidad. Lo bueno de mi infraestructura es que puedo cambiarla y se recarga instantáneamente. No hay demora. Si miras los edificios aquí, este edificio, hay una unidad detrás de él.

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.

6. Building Fog and Mobile Interaction

Short description:

El edificio se desvanece hacia la parte superior con una imagen de máscara y un degradado lineal. La niebla en el juego oculta áreas hasta que una unidad cercana las revele. La creación del efecto de niebla se logra mediante la renderización de rectángulos negros con un filtro de desenfoque y el modo de mezcla de colores. Los estados del juego son controlados por el servidor para evitar el fraude. El juego está diseñado para funcionar bien en dispositivos móviles con un motor predictivo para la interacción táctil.

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.

7. Game Rendering and Scaling

Short description:

El juego se renderiza con una escala de transformación de tres, lo que puede hacer que los colores parezcan deslavados. Además, se agrega un pequeño efecto 3D al mapa para crear una apariencia flotante.

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.

8. Optimización de la Representación de Imágenes y Rendimiento

Short description:

Cuando se trabaja con arte de píxeles, la propiedad CSS 'image rendering' se puede utilizar para mantener la nitidez al aumentar la escala. Una propiedad CSS no estándar de 25 años construida para Internet Explorer resultó ser una solución perfecta. Se creó un proceso de imágenes para comprimir sprites y codificarlos en un solo archivo CSS utilizando base64. Sin embargo, Safari tenía problemas de rendimiento con imágenes codificadas en base64 debido a la falta de almacenamiento en caché. Como solución, se eliminó el proceso de procesamiento de imágenes y se utilizaron PNG normales en su lugar. Además, la propiedad CSS filter tiene filtros buenos y malos, algunos de los cuales están acelerados por GPU.

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.

9. Sombra difuminada y monitoreo de rendimiento

Short description:

Para lograr un efecto de sombra difuminada, establezca una sombra transparente en las unidades y cambie el color. Tenga cuidado con las afirmaciones de aceleración de GPU, ya que no todas las partes pueden acelerarse. La propiedad 'will change' puede causar problemas de rendimiento. El uso de un medidor de FPS puede ayudar a monitorear el rendimiento y evitar renderizaciones innecesarias.

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.

10. Optimización del rendimiento de la IA y las herramientas

Short description:

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. Colócalo en un árbol separado de React en tu página para que no vuelva a renderizar el resto de tu aplicación real. Realiza pruebas de referencia temprano, pero solo optimiza lo que importa. Construí una IA utilizando programación funcional y estructuras de datos inmutables. La prueba de referencia y la optimización de la IA la hicieron 20 veces más rápida. Creé una biblioteca de intercambio de paletas que inicialmente era lenta, pero la reescribí para que fuera 23 veces más rápida. Publiqué en código abierto re-MDX, el código utilizado para la presentación de diapositivas. Comencé el proyecto para meditar y pasé todas las noches codificando en lugar de dormir.

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.

QnA

Starting a Company and Appreciation

Short description:

A veces tal vez cuatro. Pero se sentía mejor que simplemente dormir, porque equilibraba lo que estaba haciendo. Comencé hace 22 años cuando quería aprender programación para hacer videojuegos. La semana pasada anuncié que estoy comenzando una empresa llamada Nakazawa Tech, un estudio de videojuegos independiente con sede en Japón. Firmamos una asociación con Null Games para publicar Athena Crisis el próximo año. Aprecio a Kristof y todos los besos que recibo de él en las conferencias. Tenemos una pregunta sobre la cantidad de tiempo invertido en esto.

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í.

Building the Game and Art Direction

Short description:

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. ¿Tienes experiencia en arte? ¿Creaste este arte de píxeles tú mismo? Nakazawa Tech está trabajando con seis artistas increíbles. ¿Por qué no construir un juego de esta manera? Realmente es el rendimiento lo que me está causando más dolores de cabeza. Al principio, era solo un proyecto de meditación, y ahora tengo que ser mucho más pragmático. Si hubieras planeado crear un juego de calidad de producción, ¿qué habrías hecho diferente? Lo genial de esto y usar una pila que conoces es que puedes aprender mucho. ¿Qué biblioteca usaste para la interacción multijugador? No, no hay inteligencia. Solo mi propio código.

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.

Game Engines and Publishing to Other Platforms

Short description:

Ojalá eso fuera algo que pudiera usar. ¿Cuánto pesaba ese bebé en ese momento? Seis kilos. Aquí hay una pregunta que suena muy inteligente pero podría ser una pregunta tonta. No sé nada sobre motores de juegos. ¿Cómo podrías publicar esto en otras plataformas? Puedes reemplazar todo el renderizador para no usar CSS y el DOM. Confiar en tecnologías web y el DOM y React y CSS te brinda tantas ventajas de forma gratuita. Otros motores de juegos tienen problemas para admitir el juego en línea. Podrías tomar todo el motor y reemplazar el renderizador para renderizar en algo más.

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
We all love GraphQL, but it can be daunting to get a server up and running and keep your code organized, maintainable, and testable over the long term. No more! Come watch as I go from an empty directory to a fully fledged GraphQL API in minutes flat. Plus, see how easy it is to use and create directives to clean up your code even more. You're gonna love GraphQL even more once you make things Redwood Easy!
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Solid caught the eye of the frontend community by re-popularizing reactive programming with its compelling use of Signals to render without re-renders. We've seen them adopted in the past year in everything from Preact to Angular. Signals offer a powerful set of primitives that ensure that your UI is in sync with your state independent of components. A universal language for the frontend user interface.
But what about Async? How do we manage to orchestrate data loading and mutation, server rendering, and streaming? Ryan Carniato, creator of SolidJS, takes a look at a different primitive. One that is often misunderstood but is as powerful in its use. Join him as he shows what all the Suspense is about.
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
Top Content
Jotai is a state management library. We have been developing it primarily for React, but it's conceptually not tied to React. It this talk, we will see how Jotai atoms work and learn about the mental model we should have. Atoms are framework-agnostic abstraction to represent states, and they are basically just functions. Understanding the atom abstraction will help designing and implementing states in your applications with Jotai
TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt.In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.

Workshops on related topic

JSNation 2023JSNation 2023
116 min
Make a Game With PlayCanvas in 2 Hours
Featured WorkshopFree
In this workshop, we’ll build a game using the PlayCanvas WebGL engine from start to finish. From development to publishing, we’ll cover the most crucial features such as scripting, UI creation and much more.
Table of the content:- Introduction- Intro to PlayCanvas- What we will be building- Adding a character model and animation- Making the character move with scripts- 'Fake' running- Adding obstacles- Detecting collisions- Adding a score counter- Game over and restarting- Wrap up!- Questions
Workshop levelFamiliarity with game engines and game development aspects is recommended, but not required.
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
WorkshopFree
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.
JS GameDev Summit 2022JS GameDev Summit 2022
121 min
PlayCanvas End-to-End : the quick version
Top Content
WorkshopFree
In this workshop, we’ll build a complete game using the PlayCanvas engine while learning the best practices for project management. From development to publishing, we’ll cover the most crucial features such as asset management, scripting, audio, debugging, and much more.
JSNation 2022JSNation 2022
41 min
Build a chat room with Appwrite and React
WorkshopFree
API's/Backends are difficult and we need websockets. You will be using VS Code as your editor, Parcel.js, Chakra-ui, React, React Icons, and Appwrite. By the end of this workshop, you will have the knowledge to build a real-time app using Appwrite and zero API development. Follow along and you'll have an awesome chat app to show off!
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Hard GraphQL Problems at Shopify
WorkshopFree
At Shopify scale, we solve some pretty hard problems. In this workshop, five different speakers will outline some of the challenges we’ve faced, and how we’ve overcome them.

Table of contents:
1 - The infamous "N+1" problem: Jonathan Baker - Let's talk about what it is, why it is a problem, and how Shopify handles it at scale across several GraphQL APIs.
2 - Contextualizing GraphQL APIs: Alex Ackerman - How and why we decided to use directives. I’ll share what directives are, which directives are available out of the box, and how to create custom directives.
3 - Faster GraphQL queries for mobile clients: Theo Ben Hassen - As your mobile app grows, so will your GraphQL queries. In this talk, I will go over diverse strategies to make your queries faster and more effective.
4 - Building tomorrow’s product today: Greg MacWilliam - How Shopify adopts future features in today’s code.
5 - Managing large APIs effectively: Rebecca Friedman - We have thousands of developers at Shopify. Let’s take a look at how we’re ensuring the quality and consistency of our GraphQL APIs with so many contributors.
JSNation 2023JSNation 2023
57 min
0 To Auth In An Hour For Your JavaScript App
WorkshopFree
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool.
We will enhance a full-stack JS application (Node.js backend + Vanilla JS frontend) to authenticate users with One Time Passwords (email) and OAuth, including:
- User authentication – Managing user interactions, returning session / refresh JWTs- Session management and validation – Storing the session securely for subsequent client requests, validating / refreshing sessions
At the end of the workshop, we will also touch on another approach to code authentication using frontend Descope Flows (drag-and-drop workflows), while keeping only session validation in the backend. With this, we will also show how easy it is to enable biometrics and other passwordless authentication methods.