La genialidad de JS va más allá de las páginas web. Primero escribiremos un juego en 2D (en Javascript) - y luego - escribiremos código de IA (¡en Javascript!) que será capaz de ganar este juego por nosotros. ¡Oh, qué época para estar vivo!
Los juegos son más inteligentes que nosotros
Video Summary and Transcription
La charla de hoy explora el desarrollo de juegos utilizando JavaScript, incluyendo la construcción de juegos en el navegador, el uso de motores de juegos y la utilización del marco de trabajo BitMellow. También profundiza en el concepto de utilizar IA para hacer que las computadoras jueguen, discutiendo el aprendizaje por refuerzo e implementándolo en juegos como Flappy Bird. La charla destaca el proceso de enseñar al agente a aprender, modificar las recompensas para mejorar el rendimiento y el viaje del desarrollo de juegos desde las etapas iniciales hasta la integración avanzada de IA.
1. Introducción a los juegos y JavaScript
Hoy vamos a hablar sobre juegos y cómo podemos usar computadoras para jugarlos. Dividiremos esta charla en dos partes: construir un juego en el navegador con JavaScript y enseñar a la computadora a jugar el juego. En la primera parte, exploraremos cómo construir un juego y los desafíos que conlleva. En la segunda parte, discutiremos la importancia de los gráficos del juego y cómo usar la API de Canvas para dibujar los gráficos del juego.
Script y Aprendizaje de JavaScript Script y Aprendizaje de JavaScript Script y Aprendizaje de JavaScript Script y Aprendizaje de JavaScript Script y Aprendizaje de JavaScript Script y Aprendizaje de JavaScript Script y Aprendizaje de JavaScript Hola gente, gracias por unirse, y para aquellos que lo ven en la transmisión después, gracias por ver. Hoy vamos a hacer una charla un poco diferente, vamos a hablar un poco sobre juegos y cómo podemos jugarlos y cómo podemos usar computadoras para jugarlos. Así que el título de la charla es los juegos siempre cambian. Y un poco sobre mí. Soy Liad, soy el Arquitecto de Cliente en Duda, y el subtítulo de esta charla es píxeles y robots porque vamos a dividir esta charla en dos partes. En la primera parte, veremos cómo construir un juego nosotros mismos en el navegador con JavaScript. Y la segunda parte es cómo hacer que el juego o enseñarle al juego a enseñar al ordenador a jugar el juego por nosotros. Así que el juego será más inteligente que nosotros. Lo primero, el capítulo uno de nuestro viaje, es el pueblo de Borden. ¿Y por qué lo llamo el pueblo de Borden? Porque quieres construir un juego, ¿verdad? Y en tu cabeza, ves el juego, y te dices a ti mismo, vale, voy a construir este juego y voy a añadir un chat para que cada jugador pueda hablar entre sí, y voy a añadir un chat de video para que todos mis amigos puedan hablar entre sí y otro chat de video con el resto de mis amigos y otra caja para uno de mis amigos más antiguos. Y luego empiezas a decir, vale, ¿cómo se desarrolla un juego en JavaScript? Y buscas en línea y lees sobre el desarrollo de juegos en JavaScript, y ves un artículo que se lee en seis minutos. Es un buen artículo, pero solo se lee en seis minutos. Y dices, vale, aprende mientras avanzas, ¿cómo lo construyo? Y vas a otras escuelas y ves un ejemplo de juego en HTML con solo unas pocas cajas y se siente así, ¿verdad? Cómo dibujar un búho, solo dibuja dos círculos y luego dibuja el resto del búho. Así que no ayuda mucho. Y luego vas al otro extremo del espectro y ves estos tutoriales muy largos, horas y horas y horas sobre cómo construir un juego, cómo codificar un juego en JavaScript. Y te sientas frente a tu VS code, y te sientas frente a tu pantalla, tu pantalla en blanco, y te sientes así, ¿verdad? Dices, vale, no voy a hacer eso. No voy a invertir 30, 40, 50 horas de codificación solo para entender cómo escribir un juego en JavaScript. Así que llegas a la cima de la desesperación, y la cima de la desesperación te lleva directamente de vuelta a Netflix. Pero no tiene que ser así. Así que empecemos con nuestro capítulo dos, el valor de los píxeles y veamos qué necesitamos para construir un juego en JavaScript. Entonces, lo primero y obviamente lo más importante son los gráficos del juego. Y en JavaScript, las conferencias son sobre React. Así que probablemente utilizarás componentes de React para construir el juego. Resulta que en los juegos de JavaScript, no se utilizan realmente componentes de React. No es tan eficiente. Se utiliza una API que se llama Canvas. ¿Y qué significa eso? Significa que tienes en tu cabeza el dibujo de cómo quieres construir el juego, cómo se ve el mapa y cómo quieres que se vea el juego, y cómo quieres que se vea el personaje. Y tienes esta idea en tu cabeza. Pero lo que realmente necesitas es dibujar un lienzo, dibujar un lienzo en el cuerpo, y luego tienes una API para el lienzo que te permite dibujar en él como si fueras el navegador. Así que en lugar de poner elementos y animarlos, puedes simplemente dibujar en el lienzo. Y lo haces obteniendo el contexto y luego usando este contexto y la API de Canvas
2. Construcción de elementos de juego y uso de motores de juego
Para construir un juego, debes colocar tus elementos de juego en el código y usar el Canvas para dibujarlos. También debes escuchar los controles e implementar la lógica del juego. Todo esto ocurre en un fotograma del juego, que es controlado por el bucle del juego. Dibujar en el Canvas puede ser desafiante, por lo que a menudo se utilizan sprites para simplificar el proceso. Si construir un juego desde cero parece abrumador, los motores de juego como Phaser, Pixy.js y GDevelop pueden proporcionar un marco para centrarse en los gráficos y la lógica. Otra opción es el marco bitmello.com.
Ahora, hablamos de dibujar en el Canvas, pero no es tan fácil. Puedes ver aquí, por ejemplo, cómo dibujar este personaje de arte de píxel en el lienzo. Y ves que es muy, muy, muy, muy largo hacerlo en código. Por lo general, usaremos sprites. Los sprites son, como puedes ver aquí, tienes todos los modos del personaje en una imagen, comprimidos en una imagen, para que puedas usar la parte de la imagen que desees según la posición y la velocidad del personaje. Y cuando ves todo eso, ¿todavía quieres construir un juego? ¿Todavía crees que es fácil? Probablemente no tanto. Afortunadamente, tenemos motores de juego, y los motores de juego son frameworks que encapsulan la mayoría de las cosas de las que no necesitamos preocuparnos, y nos permiten centrarnos en los gráficos y la lógica. Eso nos lleva al capítulo 3, o la mitad de la eficiencia. Hay muchos motores de juego en JavaScript. Phaser es uno de los mejores, y tienes Pixy.js, que también es muy bueno. Tienes GDevelop, y la mayoría de ellos requieren algún tipo de aprendizaje o conocimiento previo para poder usarlos. Elegí mostrar aquí un marco llamado
3. BitMellow: Exportando Lógica y Usando React
BitMellow es un framework de juegos simple y fácil de JavaScript que te permite exportar tu lógica, HTML y recursos para usar en tu propia aplicación. Proporciona un editor de mosaicos, un editor de mapas de mosaicos, un editor de sonido y un editor de código. Puedes exportar tu proyecto como un solo archivo HTML, pero en su lugar usaremos Npx create React app para construir una pequeña aplicación de React. Importando el motor de BitMellow, la lógica del juego y los datos del proyecto JSON, podemos inicializar la lógica del juego en el contenedor de juego de React.
4. Construyendo Juegos con BitMellow
Puedes editar y exportar tu juego en BitMellow, y construir juegos fácilmente utilizando el motor de BitMellow. El motor se encarga de dibujar el mapa, los objetivos y el jugador, así como de actualizar las coordenadas del jugador y verificar si se ha alcanzado un objetivo. También se encarga de animar los movimientos del jugador en función del recuento de fotogramas. Con BitMellow, el desarrollo de juegos se vuelve simple y agradable.
5. Utilizando IA para hacer que las computadoras jueguen
Ahora, exploremos el concepto de utilizar IA para hacer que la computadora juegue. La IA puede analizar parámetros y tomar decisiones sobre qué acciones tomar. A diferencia de codificar reglas para cada paso y estado, la IA puede inferir reglas a partir de datos. Sin embargo, en los juegos de computadora, no tenemos todos los datos de entrada y resultados, por lo que se utiliza el aprendizaje por refuerzo. Esto implica enseñar a la computadora a aprender a partir de recompensas y castigos en lugar de datos etiquetados.
6. Observando el Estado y Evaluando Acciones
El agente observa el estado, realiza procesamiento y selecciona la mejor acción basada en recompensas inmediatas y esperadas. El entorno devuelve una recompensa basada en la acción, que puede ser cero, positiva o negativa. Las acciones se evalúan comparando sus resultados y actualizando una tabla de valores de estado-acción. El aprendizaje por refuerzo implica probar acciones, recibir recompensas y aprender su efectividad.
Ahora la pregunta es, ¿qué tan buena es cada acción? Cuando un agente ve un estado, necesita saber qué tan buena es, necesita mirar todas las acciones y seleccionar la mejor. Entonces, ¿cómo se mide la mejor? ¿Qué tan buena es la acción? Bueno, se calcula la recompensa inmediata que se obtiene de la acción. Y como te lleva a un nuevo estado, también se calcula la recompensa esperada de este nuevo estado. Entonces, si me lleva a un estado mejor, esta acción es mejor que alguna acción que me lleve a un estado peor. Básicamente, solo tenemos una especie de tabla, y en esta tabla para cada estado, por ejemplo, ahora estamos en el estado dos. Miramos las acciones y vemos que la mejor aquí es arriba, a la derecha, porque tiene un valor de 11. Así que seleccionamos arriba. Y ahora, si seleccionamos arriba, obtenemos alguna recompensa, por lo que llegamos al estado dos, y luego nos lleva a otro estado porque estábamos en el estado dos y luego seleccionamos arriba, por lo que ahora estamos en el estado tres. En el estado tres seleccionamos la mejor acción aquí, que es a la derecha, pero también actualizamos el valor de la acción arriba del estado anterior porque ahora sabemos que nos lleva a un estado donde el valor es 10. Así que ahora lo actualicé. Básicamente, el aprendizaje por refuerzo es simplemente probar y fallar, probar y obtener una recompensa, probar y fallar, probar y obtener una recompensa y tratar de aprender qué tan buenas son las
7. Implementando Flappy Bird y Reinforce.js
Aquí tienes un ejemplo de un juego de Flappy Bird y cómo aprende a jugar a través de la iteración. Si el estado es complejo, se puede utilizar una red neuronal para generar acciones. Para juegos más complejos, se utilizan fotogramas en lugar de estados. TensorFlow y TensorFlow.js son frameworks que permiten el aprendizaje automático en JavaScript. El proyecto MetaCar y Open AI proporcionan entornos para entrenar código de juego. Reinforce.js es una biblioteca fácil de usar para definir estados, acciones y entrenar agentes.
Vale. Pero vamos a utilizar algo que se llama Reinforce.js. Y es muy fácil de usar. Solo tienes que definir los estados que esperas y las acciones que deseas. Y luego inicializas un agente. Actúas sobre el estado. Le dices al agente, actúa sobre el estado. Y luego el agente devuelve la acción que necesitas hacer. Intentas ejecutar la acción
8. Enseñando al Agente a Aprender
Para hacer que el agente aprenda, lo inicializamos, actuamos sobre el estado, obtenemos la recompensa y aprendemos de ella. El código AI.js es sencillo: obtiene el actor y el objetivo, calcula la distancia entre ellos, actúa sobre sus coordenadas, invoca las acciones, obtiene las nuevas coordenadas y determina la recompensa en función de la distancia al objetivo. Ahora podemos ver cómo juega la computadora, obteniendo recompensas positivas por acercarse al hongo y recompensas negativas por alejarse de él.
9. Aprendizaje de la Computadora y Optimización del Modelo
La computadora aprende a acercarse al hongo y mejora con el tiempo. Las recompensas son negativas a medida que se aleja del siguiente hongo o pastel. El modelo se puede guardar y cargar para un mejor rendimiento. Cuando el agente alcanza niveles más altos, se vuelve muy bueno.
10. Explorando IA y Modificando Recompensas
Ahora tenemos IA, que es muy buena. Podemos agregar otros bloques y cambiar la lógica del juego sin modificar el código de IA. Rick puede recolectar planetas en un juego temático espacial. Al cambiar la recompensa, Rick aprende a alejarse más de Morty. Se pueden agregar recompensas por acercarse a algo y alejarse de Morty.
Bien, ahora llegamos al capítulo final, el río de oportunidades. Y dado que tenemos IA, y la IA no está conectada en absoluto al juego, podemos simplemente agregar otros bloques, agregar diferentes lógicas de juego y la IA aún podrá jugar este juego. Entonces digamos que ahora dibujo muchos otros bloques, dibujo a Rick y Morty y dibujo algunas estrellas y quiero que mi juego esté en el espacio, así que pongo mi juego en el espacio. No cambio en absoluto el código de IA, y simplemente comienzo. Y dejo que mi Rick intente recolectar los planetas. Entonces puedes ver que recolecta los planetas. Cargué el modelo previamente entrenado del juego de los hongos, pero no importa porque todo lo que cambié fue la apariencia y parte de la lógica de los planetas. Y puedes ver que Rick todavía está un poco confundido, pero no pasará mucho tiempo hasta que también tome a Marte, y luego el pastel. Y eso es realmente bueno. Y si lo dejas correr, se vuelve realmente, realmente bueno.
También podemos agregar otro jugador y cambiar la recompensa. Entonces, en lugar de recompensar por acercarse a algo, podemos recompensarlo por alejarse de algo. Entonces digamos que tenemos a Rick y Morty, y tenemos a Morty corriendo por aquí, y ingresaremos las coordenadas de Rick y las coordenadas de Morty y cambiaremos la recompensa. Entonces, en lugar de recompensar por acercarse, recompensaremos por alejarse. Entonces agregaremos un signo menos aquí. Y luego podemos ver que Rick está tratando de escapar de Morty, y no puedo cargar nada aquí porque el modelo que entrené anteriormente era sobre acercarse. Entonces ahora necesitamos dejar que Rick aprenda por sí mismo a alejarse más de Morty. Y puedes ver que cada vez que Morty se acerca, Rick se aleja más y eventualmente se vuelve realmente, realmente bueno en eso. Y las recompensas van aumentando cada vez más. Bueno, creo que Morty está atrapando a Rick aquí, así que lo pongo en la esquina. Bien, lo último que puedes hacer es intentar agregar la recompensa. Entonces la recompensa por acercarse a algo y la recompensa por alejarse de Morty. Y veamos cómo funciona. Entonces ves la recompensa aquí es menos uno por acercarse a Morty y más uno por acercarse al objetivo. Y aquí, Rick se confunde un poco más porque necesita moverse en el espacio de esa manera. Por ejemplo, esta situación donde Morty está muy cerca del objetivo, él no sabe qué hacer. Y puedes ver que las recompensas se vuelven negativas muy rápido.
11. El Viaje del Desarrollo de Juegos
Pasamos por diferentes etapas en nuestro viaje de desarrollo de juegos, desde el pueblo del aburrimiento hasta el pozo de la desesperación, y luego al valle de los píxeles donde aprendimos a construir juegos. Llegamos al punto medio de eficiencia y a la montaña de la sabiduría, donde agregamos IA a nuestros juegos. Finalmente, llegamos al río de oportunidades, dándonos cuenta de las infinitas posibilidades con nuestro modelo. Así que no solo sueñes, toma acción e implementa tus ideas. ¡Eres increíble!
Pero nuevamente, si lo dejas correr durante unos minutos, se vuelve realmente, realmente bueno en eso. Entonces, ¿qué tuvimos? Tenemos el pueblo del aburrimiento, que nos llevó al pozo de la desesperación. Y luego tuvimos el valle de los píxeles donde aprendimos a construir juegos. El punto medio de eficiencia, la montaña de la sabiduría donde aprendimos a agregar IA a los juegos. Y luego el río de oportunidades donde vimos que una vez que tenemos este modelo, podemos hacer todo, cualquier cosa con él. Así que no dejes que tus sueños sean solo sueños. Simplemente hazlo. Simplemente hazlo. Si piensas en algo, simplemente lee sobre ello e intenta implementarlo. Y eso es todo. Eres increíble. Yo soy Liad. Aquí puedes ver que tengo el repositorio y el sitio web para jugar, y compartiré la presentación. Muchas gracias.