Los juegos son más inteligentes que nosotros

Rate this content
Bookmark

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!

26 min
17 Jun, 2021

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.

Available in English

1. Introducción a los juegos y JavaScript

Short description:

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

Short description:

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.

es muy rico y muy fácil de buscar para dibujar realmente los gráficos de tu juego. Y luego tienes para colocar tus elementos de juego. Dado que no usas React y no usas state management, solo colocas elementos, solo colocas objetos en tu código, y por ejemplo, tienes el primer jugador, y tienes sus coordenadas, y si está corriendo o no, si está sano o no, y luego tienes al enemigo, por alguna razón es John McLean, pero Fry luchando contra John McLean, y tienes sus coordenadas y la velocidad, y estas son las cosas que representan tus elementos, y luego el Canvas, usarás el Canvas para dibujar desde estos objetos. Tienes que escuchar los controles, ¿verdad?, así que tienes las teclas, y luego escuchas los event listeners en la ventana key down o key up, y una vez que escuchas esos eventos, registras la tecla. Dices, bien, si la tecla fue presionada, entonces la pongo como verdadera, luego la pongo como falsa, y este es el código que hace eso, ¿verdad? Dices que el código de la tecla es izquierda, entonces pones keys.left como presionada, y luego tienes en el objeto keys, tienes la lista de todas las teclas que están presionadas. Luego tienes que implementar la lógica del juego. Entonces, la lógica del juego es donde realmente ocurre el juego. Por ejemplo, dices, bien, si se presionó la tecla izquierda, entonces aumentaré la velocidad X de Batman. Si es hacia abajo, aumentaré la velocidad Y de Batman, y luego tienes que decir, bien, para detectar los bordes, si Batman.y es mayor que la altura de la pantalla, entonces tengo que ponerlo en la altura de la pantalla, y luego dices, bien, si Batman y Superman tienen el mismo X, entonces reducirás las vidas de Batman. De lo contrario, si toma el corazón, aumentas sus vidas, y si es más inteligente, rompes. Y todo esto es para asegurarte de que el código siga la lógica del juego que deseas hacer. Ahora, ten en cuenta que todas esas cosas están sucediendo en un fotograma del juego. Eso nos lleva al bucle del juego. Debes ejecutar un bucle usando request animation frame, y debes hacerlo con toda la magia del juego dentro del bucle. Y en cada fotograma de animación, ejecutas toda la lógica del juego. Entonces, básicamente actualizas todo según las teclas que se presionaron, como vimos. Y luego ejecutas la lógica real del juego. Detectas colisiones, detectas bordes, todo. Y luego en el final, cuando tienes los objetos actualizados, los dibujas en el Canvas, y luego ejecutas el siguiente fotograma, y el siguiente fotograma, y el siguiente fotograma.

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

Short description:

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.

BitMellow es un framework de juegos muy simple y fácil de JavaScript, y lo mejor de todo es que te permite exportar tu lógica, exportar tu HTML, exportar tus recursos y usarlos en tu propia aplicación. Así que veamos. Cuando entramos en BitMellow, vemos este tipo de pantalla. Aquí a la izquierda tenemos el editor de mosaicos. El editor de mosaicos nos permite editar los mosaicos que se utilizarán en el juego. Así que podemos editar el actor. Podemos dibujar aquí algo más si queremos, si queremos añadir otro personaje. Veremos más adelante en la charla cómo vamos a implementar esto. Y tienes el editor de mapas de mosaicos, que básicamente te ayuda a editar el mapa del juego. Tienes el editor de sonido, que es muy bueno. Puedes añadir sonidos al juego. Y la parte más importante es el código. No te preocupes si es demasiado pequeño aquí. Lo veremos más adelante con más detalle. Y puedes exportar tu proyecto, lo cual es genial. En el editor de mosaicos, puedes ver aquí a la derecha algunos tutoriales. Así que si quieres planificar animaciones, puedes ver aquí cómo planificar la animación. Si quieres dibujar nubes, tienes algunas explicaciones de cuál es la mejor manera de dibujar las nubes, cómo deberían fluir. Por eso me gusta mucho BitMellow. Exporta un HTML. No es algo que podamos usar, exporta un solo HTML que básicamente incluye todos los datos del juego. Y no queremos usar eso. Y para aquellos de ustedes que se preguntaban cómo se conecta todo eso a React. Así que usaremos Npx create React app para el juego, y esa es la primera y última aparición de React en esta charla. Así que vamos a usar una aplicación de React, lo siento, usamos create React app y vamos a construir nosotros mismos una pequeña aplicación de React, y vamos a descomponer el HTML en partes. Así que vamos a importar el motor de BitMellow. Vamos a tomar toda la lógica del juego que escribimos y ponerla en game.js, y vamos a importar desde el proyecto los datos JSON. Y en el contenedor de juego de React, simplemente vamos a inicializar la lógica del juego. Este es el JSON. Y el

4. Construyendo Juegos con BitMellow

Short description:

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.

Lo bueno de BitMellow es que te permite exportar solo el JSON. Así que puedes seguir editando en BitMellow y exportando y sobrescribiendo solo el JSON. Bueno, veamos qué tenemos aquí. Tenemos este juego de Qt. Así que puedes escribir fácilmente un juego como ese, donde simplemente vas y recoges setas. Y puedes animar el texto y decidir dónde aparece cada seta. Y aquí puedes ver el texto que te dice cuántas setas has recogido. Básicamente, lo que hace es que puedes ver que el motor, en la actualización, es el bucle del que hablamos. Así que dibuja el mapa y luego dibuja los objetivos. Para cada objetivo, para cada seta, si el objetivo aún no ha sido recogido, dibuja el mosaico. Y es muy fácil, solo necesitamos screen.dot.drawTile, eso es todo lo que necesitamos. Y luego actualiza el jugador. ¿Qué significa actualizar el jugador? Simplemente tomas las coordenadas del jugador, verificas cuatro teclas como vimos. Y luego actualizas las coordenadas. Y luego calculas la distancia al objetivo. Y si la distancia es lo suficientemente pequeña, dices: `OK, se ha alcanzado el objetivo`. Y lo último es simplemente dibujar al jugador. Y como viste en los mosaicos, tienes tres mosaicos para el jugador porque puede ir cuando camina, levanta una pierna y luego levanta la otra pierna. Así que dices: `OK, cuentas los fotogramas desde que comenzó a caminar y luego decides qué mosaico soltar`. Así que es realmente agradable. Sí, se puede decir que hemos subido de nivel y ahora podemos construir fácilmente.

5. Utilizando IA para hacer que las computadoras jueguen

Short description:

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.

construir juegos utilizando el motor BitMellow. Y ahora es hora de hacer algo un poco más interesante. Es hora de visitar la Montaña de la Sabiduría. ¿Y qué significa, la Montaña de la Sabiduría? Bueno, construir nuestro propio juego no era el objetivo final para nosotros, ¿verdad? Queríamos hacer que la computadora lo juegue. Y la idea es que en los últimos años se ha visto mucho trabajo e investigaciones sobre la IA jugando juegos. Aquí puedes ver un ejemplo de StarCraft de DeepMind de los últimos años. Y no es tan complicado como parece, pero requiere mucho entrenamiento. Y veremos en un momento cómo funciona detrás de escena. Entonces puedes ver aquí una IA jugando a Super Mario. Y puedes ver aquí lo que sucede detrás de escena. Así que puedes ver lo que sucede detrás de escena. Bueno, la IA analiza todos los parámetros y luego decide qué hacer, qué tipo de acción realizar. Ok. La cuestión de utilizar IA en lugar de codificar las reglas es que si quieres jugar un juego codificando las reglas, tienes que codificar y decirle a la computadora qué hacer en cada paso, en cada estado, por ejemplo, si player.x es mayor que enemy.x y el jugador tiene suficiente salud, entonces muevete lejos del enemigo. Y cuando usas IA, simplemente intentas inferir las reglas a partir de los datos. Entonces le dices a la computadora, ok, este es el dato de entrada. Este es el resultado. Este es el dato de entrada. Este es el resultado. Este es el dato de entrada. Este es el resultado. Solo entrena con eso. Y luego te daré un nuevo dato de entrada y me dirás cuál es el nuevo resultado. La cuestión es que con los juegos de computadora, no tenemos todos los datos de entrada y no tenemos todos los resultados en Por ejemplo, en StarCraft, podemos decir, ok, en este fotograma, haz esto. En este fotograma, haz esto. En este fotograma, haz esto. Porque no lo sabemos. Así que tenemos el aprendizaje por refuerzo. Aprendizaje por refuerzo, lo que significa que enseñamos al modelo, enseñamos a la computadora a aprender a partir de recompensas y castigos en lugar de resultados. En lugar de etiquetar los datos.

6. Observando el Estado y Evaluando Acciones

Short description:

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.

¿Qué significa esto? Digamos que tenemos un agente y tenemos el entorno. Entonces el agente quiere jugar en el entorno. Primero que nada, nuestro agente necesita observar el estado. Y el estado generalmente significa lo que está sucediendo en este momento. ¿Cómo puedo cuantificar lo que veo en este momento en el juego? Por ejemplo, para Super Mario, puede ser el eje horizontal, el eje vertical, cuántos enemigos ves, cuántas vidas, cuántas monedas. Eso puede ser el estado. Y el agente observa el estado, realiza algún tipo de procesamiento y luego invoca una acción y envía la acción al entorno sin saber nada sobre el entorno. Solo sabe que necesita enviar la acción allí. Entonces el entorno recibe la acción y a cambio devuelve una recompensa. Y la recompensa puede ser cero si no sucede nada, y puede ser positiva o negativa. Depende de los resultados de la acción y el entorno también cambia el estado. Así que establece un nuevo estado.

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

Short description:

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.

acciones cuando haces eso. Vale. Y aquí tienes un ejemplo de un Flappy Bird, algo que intenta jugar a Flappy Bird, si lo conoces, y básicamente eso es lo que hace, ¿verdad? Guarda en la tabla el estado y si debe aletear o no hacer nada. Y lleva muchas iteraciones. Se necesita algo así como 25 minutos hasta que aprenda a jugarlo completamente. Y si tienes un estado muy complejo donde no puedes ponerlo en la tabla, simplemente pones una red neuronal y eso es un mundo mucho más grande para discutir, una red neuronal que recibe el estado y luego genera la acción. Eso es lo que vamos a usar. Y para juegos más complejos, no se utiliza ni siquiera un estado, solo se alimentan los fotogramas. Este es el fotograma del juego, solo decide qué hacer. Este es el fotograma. Los píxeles reales, no el estado. Eso es lo que hacen los coches autónomos. Vale. Todo está genial. Pero, ¿cómo lo implementamos? Así que tenemos un marco agradable que se llama TensorFlow, que puede ayudarnos. Y tenemos TensorFlow.js, por supuesto, que nos permite utilizar ese tipo de aprendizaje automático en JavaScript. Y puede hacer cosas realmente geniales. Recomiendo revisar TensorFlow.js y el proyecto MetaCar, que no utiliza TensorFlow, pero es autónomo en el navegador. Lo cual es genial. Y tenemos Open AI, que nos proporciona un gimnasio, un entorno para juegos retro. Así que solo podemos enviar acciones, obtener recompensas, enviar acciones, obtener recompensas y luego entrenar cómo jugar a esos juegos, lo cual es bastante agradable. Podemos simplemente escribir código que juegue a este juego.

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

Short description:

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.

y obtén la recompensa. Y luego le dices al agente que aprenda de la recompensa. Y es tan fácil. Eso es todo. Simplemente inicializas al agente. Actúas sobre el estado. Obtienes la recompensa. Aprendes de la recompensa. Y luego, en el bucle, lo haces una y otra vez. Eso es lo que vamos a usar. Vamos a cambiar Game.js para exponer a nuestros actores, el actor y el objetivo. Y permitirnos ejecutar acciones. Y aquí tenemos el código AI.js. Compartiré el código más tarde. Pero básicamente, es realmente fácil. Simplemente dice, ok, obtén el actor y el objetivo. Obtén la distancia entre ellos. Actúa sobre sus coordenadas. Invoca las acciones. Invoca la acción. Obtén las nuevas coordenadas. Y luego obtén la recompensa. Y la recompensa es si te acercaste al objetivo. Entonces obtendremos una recompensa positiva. Si nos alejamos del objetivo, obtendremos una recompensa negativa. Y aprendemos de esta recompensa. Así que ahora, simplemente podemos empezar a jugar y darle a la computadora para que juegue por nosotros. Puedes verlo a la izquierda. Y puedes ver a nuestro agente jugando y explorando. Y obtiene una recompensa positiva si se acerca al hongo. Y obtiene una recompensa negativa si se aleja de él.

9. Aprendizaje de la Computadora y Optimización del Modelo

Short description:

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.

El agente recibe una recompensa negativa si se aleja más del hongo. Puedes ver que se queda atascado, pero rápidamente llega al hongo. Y aprende a acercarse al hongo. Y eso es la computadora jugando. Y está aprendiendo y aprendiendo. Y puedes ver que las recompensas son negativas porque cada vez que toma un hongo o un pastel, se aleja más del siguiente. Por lo tanto, las recompensas acumulativas son negativas. Y dado que todo está modelado en la red, podemos guardar realmente este modelo y luego cargarlo. Entonces, si cargo el modelo o cargo un modelo previamente entrenado, mi agente debería ser mejor. Mi agente debería usar todo el conocimiento que ya aprendió en iteraciones anteriores para jugar. Y puedes, compartiré este sitio web más tarde y simplemente puedes jugar y ver que cuando llega a 30, 40, 50, se vuelve realmente bueno.

10. Explorando IA y Modificando Recompensas

Short description:

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.

Tan genial. Ahora tenemos IA, que es muy buena. Y ahora podemos empezar a explorar un poco con eso. Sí, creo que merecemos subir de nivel por eso.

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

Short description:

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.

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

JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Building Fun Experiments with WebXR & Babylon.js
Top Content
During this session, we’ll see a couple of demos of what you can do using WebXR, with Babylon.js. From VR audio experiments, to casual gaming in VR on an arcade machine up to more serious usage to create new ways of collaboration using either AR or VR, you should have a pretty good understanding of what you can do today.
Check the article as well to see the full content including code samples: article. 
JSNation Live 2021JSNation Live 2021
27 min
Building Brain-controlled Interfaces in JavaScript
Top Content
Neurotechnology is the use of technological tools to understand more about the brain and enable a direct connection with the nervous system. Research in this space is not new, however, its accessibility to JavaScript developers is.Over the past few years, brain sensors have become available to the public, with tooling that makes it possible for web developers to experiment building brain-controlled interfaces.As this technology is evolving and unlocking new opportunities, let's look into one of the latest devices available, how it works, the possibilities it opens up, and how to get started building your first mind-controlled app using JavaScript.
React Summit 2023React Summit 2023
32 min
How Not to Build a Video Game
In this talk we'll delve into the art of creating something meaningful and fulfilling. Through the lens of my own journey of rediscovering my passion for coding and building a video game from the ground up with JavaScript and React, we will explore the trade-offs between easy solutions and fast performance. You will gain valuable insights into rapid prototyping, test infrastructure, and a range of CSS tricks that can be applied to both game development and your day-to-day work.
6 min
Charlie Gerard's Career Advice: Be intentional about how you spend your time and effort
Featured Article
When it comes to career, Charlie has one trick: to focus. But that doesn’t mean that you shouldn’t try different things — currently a senior front-end developer at Netlify, she is also a sought-after speaker, mentor, and a machine learning trailblazer of the JavaScript universe. "Experiment with things, but build expertise in a specific area," she advises.

What led you to software engineering?My background is in digital marketing, so I started my career as a project manager in advertising agencies. After a couple of years of doing that, I realized that I wasn't learning and growing as much as I wanted to. I was interested in learning more about building websites, so I quit my job and signed up for an intensive coding boot camp called General Assembly. I absolutely loved it and started my career in tech from there.
 What is the most impactful thing you ever did to boost your career?I think it might be public speaking. Going on stage to share knowledge about things I learned while building my side projects gave me the opportunity to meet a lot of people in the industry, learn a ton from watching other people's talks and, for lack of better words, build a personal brand.
 What would be your three tips for engineers to level up their career?Practice your communication skills. I can't stress enough how important it is to be able to explain things in a way anyone can understand, but also communicate in a way that's inclusive and creates an environment where team members feel safe and welcome to contribute ideas, ask questions, and give feedback. In addition, build some expertise in a specific area. I'm a huge fan of learning and experimenting with lots of technologies but as you grow in your career, there comes a time where you need to pick an area to focus on to build more profound knowledge. This could be in a specific language like JavaScript or Python or in a practice like accessibility or web performance. It doesn't mean you shouldn't keep in touch with anything else that's going on in the industry, but it means that you focus on an area you want to have more expertise in. If you could be the "go-to" person for something, what would you want it to be? 
 And lastly, be intentional about how you spend your time and effort. Saying yes to everything isn't always helpful if it doesn't serve your goals. No matter the job, there are always projects and tasks that will help you reach your goals and some that won't. If you can, try to focus on the tasks that will grow the skills you want to grow or help you get the next job you'd like to have.
 What are you working on right now?Recently I've taken a pretty big break from side projects, but the next one I'd like to work on is a prototype of a tool that would allow hands-free coding using gaze detection. 
 Do you have some rituals that keep you focused and goal-oriented?Usually, when I come up with a side project idea I'm really excited about, that excitement is enough to keep me motivated. That's why I tend to avoid spending time on things I'm not genuinely interested in. Otherwise, breaking down projects into smaller chunks allows me to fit them better in my schedule. I make sure to take enough breaks, so I maintain a certain level of energy and motivation to finish what I have in mind.
 You wrote a book called Practical Machine Learning in JavaScript. What got you so excited about the connection between JavaScript and ML?The release of TensorFlow.js opened up the world of ML to frontend devs, and this is what really got me excited. I had machine learning on my list of things I wanted to learn for a few years, but I didn't start looking into it before because I knew I'd have to learn another language as well, like Python, for example. As soon as I realized it was now available in JS, that removed a big barrier and made it a lot more approachable. Considering that you can use JavaScript to build lots of different applications, including augmented reality, virtual reality, and IoT, and combine them with machine learning as well as some fun web APIs felt super exciting to me.


Where do you see the fields going together in the future, near or far? I'd love to see more AI-powered web applications in the future, especially as machine learning models get smaller and more performant. However, it seems like the adoption of ML in JS is still rather low. Considering the amount of content we post online, there could be great opportunities to build tools that assist you in writing blog posts or that can automatically edit podcasts and videos. There are lots of tasks we do that feel cumbersome that could be made a bit easier with the help of machine learning.
 You are a frequent conference speaker. You have your own blog and even a newsletter. What made you start with content creation?I realized that I love learning new things because I love teaching. I think that if I kept what I know to myself, it would be pretty boring. If I'm excited about something, I want to share the knowledge I gained, and I'd like other people to feel the same excitement I feel. That's definitely what motivated me to start creating content.
 How has content affected your career?I don't track any metrics on my blog or likes and follows on Twitter, so I don't know what created different opportunities. Creating content to share something you built improves the chances of people stumbling upon it and learning more about you and what you like to do, but this is not something that's guaranteed. I think over time, I accumulated enough projects, blog posts, and conference talks that some conferences now invite me, so I don't always apply anymore. I sometimes get invited on podcasts and asked if I want to create video content and things like that. Having a backlog of content helps people better understand who you are and quickly decide if you're the right person for an opportunity.What pieces of your work are you most proud of?It is probably that I've managed to develop a mindset where I set myself hard challenges on my side project, and I'm not scared to fail and push the boundaries of what I think is possible. I don't prefer a particular project, it's more around the creative thinking I've developed over the years that I believe has become a big strength of mine.***Follow Charlie on Twitter

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.
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.
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introduction to WebXR with Babylon.js
Workshop
In this workshop, we'll introduce you to the core concepts of building Mixed Reality experiences with WebXR and Balon.js.
You'll learn the following:- How to add 3D mesh objects and buttons to a scene- How to use procedural textures- How to add actions to objects- How to take advantage of the default Cross Reality (XR) experience- How to add physics to a scene
For the first project in this workshop, you'll create an interactive Mixed Reality experience that'll display basketball player stats to fans and coaches. For the second project in this workshop, you'll create a voice activated WebXR app using Balon.js and Azure Speech-to-Text. You'll then deploy the web app using Static Website Hosting provided Azure Blob Storage.
ML conf EU 2020ML conf EU 2020
160 min
Hands on with TensorFlow.js
Workshop
Come check out our workshop which will walk you through 3 common journeys when using TensorFlow.js. We will start with demonstrating how to use one of our pre-made models - super easy to use JS classes to get you working with ML fast. We will then look into how to retrain one of these models in minutes using in browser transfer learning via Teachable Machine and how that can be then used on your own custom website, and finally end with a hello world of writing your own model code from scratch to make a simple linear regression to predict fictional house prices based on their square footage.