Los juegos son más inteligentes que nosotros

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

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

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

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

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.

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.