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!
This talk has been presented at React Summit 2020, check out the latest edition of this React Conference.
FAQ
Para desarrollar un juego en JavaScript, necesitas usar la API Canvas que te permite dibujar gráficos y elementos de juego directamente en un lienzo en el navegador. También debes manejar la lógica del juego, eventos de teclado y utilizar un bucle de animación para actualizar los elementos del juego.
No, no es necesario utilizar React para crear juegos en JavaScript. Aunque React es popular para desarrollar aplicaciones web, no es muy eficiente para juegos. En su lugar, se recomienda utilizar la API Canvas para manejar gráficos y la interactividad del juego directamente.
BitMellow es un framework de juegos en JavaScript que simplifica el proceso de desarrollo de juegos al proporcionar herramientas como editores de mosaicos y mapas, y un editor de sonido. Permite exportar la lógica del juego, recursos y HTML para integrar fácilmente en tu propia aplicación.
Puedes utilizar técnicas de aprendizaje por refuerzo donde un modelo de IA aprende a partir de recompensas y castigos en lugar de resultados predeterminados. Esto implica definir estados, acciones y recompensas para entrenar al modelo a tomar decisiones inteligentes basadas en la experiencia obtenida durante el juego.
Reinforce.js es una biblioteca que ayuda a implementar aprendizaje por refuerzo en JavaScript. Puedes definir los estados esperados y las acciones, y utilizar un agente de Reinforce.js para actuar sobre estos estados y aprender de las recompensas obtenidas, facilitando así el desarrollo de comportamientos inteligentes en juegos.
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.
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.
PlayCanvas is an open-source game engine used by game developers worldwide. Optimization is crucial for HTML5 games, focusing on load times and frame rate. Texture and mesh optimization can significantly reduce download sizes. GLTF and GLB formats offer smaller file sizes and faster parsing times. Compressing game resources and using efficient file formats can improve load times. Framerate optimization and resolution scaling are important for better performance. Managing draw calls and using batching techniques can optimize performance. Browser DevTools, such as Chrome and Firefox, are useful for debugging and profiling. Detecting device performance and optimizing based on specific devices can improve game performance. Apple is making progress with WebGPU implementation. HTML5 games can be shipped to the App Store using Cordova.
This Talk explores the use of Babylon.js and WebXR to create immersive VR and AR experiences on the web. It showcases various demos, including transforming a 2D game into a 3D and VR experience, VR music composition, AR demos, and exploring a virtual museum. The speaker emphasizes the potential of web development in the metaverse and mentions the use of WebXR in Microsoft products. The limitations of WebXR on Safari iOS are discussed, along with the simplicity and features of Babylon.js. Contact information is provided for further inquiries.
Learn how to build brain-controlled interfaces using JavaScript and brain sensors. Understand the functions of different parts of the brain and how they relate to sensor placement. Explore examples of calm and focus detection, as well as the Kinesis API for mental commands. Discover the applications of brain-controlled interfaces, such as scrolling web pages and password-less authentication. Understand the limits and opportunities of brain control and the potential for using brain sensors in medical applications.
Little.js is a super lightweight and fast JavaScript game engine that has everything included to start making games right away. It has a tiny footprint and no dependencies, making it perfect for size-coding competitions like JS13K. Little.js is built with an object-oriented structure and comes with several classes. It provides a fast rendering system, a comprehensive audio system, and various starter projects for different game types. Little.js is designed to be simple and easy to understand, allowing you to look at and modify the code.
The Talk showcases the development of a video game called Athena Crisis using web technologies like JavaScript, React, and CSS. The game is built from scratch and includes features like multiple game states, AI opponents, and map editing. It demonstrates the benefits of using CSS for game development, such as instant load times and smooth transitions. The Talk also discusses optimizing performance, supporting dark mode, and publishing the game to other platforms.
The Talk discusses ways to boost the performance of WebGL Unity games, including issues with bundle size, memory usage, and runtime performance. It suggests using Brotli for compression and non-exception support for better performance. Choosing the appropriate texture compression format and experimenting with separate builds can also help. The Talk also covers optimizing textures, models, audio, and assets by reducing build size, using compression, disabling unnecessary models, and optimizing audio quality. Unity's optimization tools and profilers are recommended for analyzing performance and memory issues.
En esta masterclass, construiremos un juego utilizando el motor WebGL de PlayCanvas desde el principio hasta el final. Desde el desarrollo hasta la publicación, cubriremos las características más cruciales como la escritura de scripts, la creación de UI y mucho más. Tabla de contenido:- Introducción- Introducción a PlayCanvas- Lo que vamos a construir- Agregando un modelo de personaje y animación- Haciendo que el personaje se mueva con scripts- 'Falsa' carrera- Agregando obstáculos- Detectando colisiones- Agregando un contador de puntuación- Fin del juego y reinicio- ¡Resumen!- Preguntas Nivel de la masterclassSe recomienda familiaridad con los motores de juegos y los aspectos del desarrollo de juegos, pero no es obligatorio.
Aprovechando LLMs para Construir Experiencias de IA Intuitivas con JavaScript
Featured Workshop
2 authors
Hoy en día, todos los desarrolladores están utilizando LLMs en diferentes formas y variantes, desde ChatGPT hasta asistentes de código como GitHub CoPilot. Siguiendo esto, muchos productos han introducido capacidades de IA integradas, y en este masterclass haremos que los LLMs sean comprensibles para los desarrolladores web. Y nos adentraremos en la codificación de tu propia aplicación impulsada por IA. No se necesita experiencia previa en trabajar con LLMs o aprendizaje automático. En su lugar, utilizaremos tecnologías web como JavaScript, React que ya conoces y amas, al mismo tiempo que aprendemos sobre algunas nuevas bibliotecas como OpenAI, Transformers.js
En esta masterclass, construiremos un juego completo utilizando el motor PlayCanvas mientras aprendemos las mejores prácticas para la gestión de proyectos. Desde el desarrollo hasta la publicación, cubriremos las características más cruciales como la gestión de activos, scripting, audio, depuración, y mucho más.
Sientes las limitaciones de los LLMs? Pueden ser creativos, pero a veces carecen de precisión o se basan en información desactualizada. En esta masterclass, desglosaremos el proceso de construir y desplegar fácilmente un sistema de Generación con Recuperación Mejorada. Este enfoque te permite aprovechar el poder de los LLMs con el beneficio adicional de precisión factual e información actualizada.
Únete a nuestro masterclass dinámico para crear un portal de documentación impulsado por IA. Aprende a integrar ChatGPT de OpenAI con Next.js 14, Tailwind CSS y tecnología de vanguardia para ofrecer soluciones de código e resúmenes instantáneos. Esta sesión práctica te equipará con el conocimiento para revolucionar la forma en que los usuarios interactúan con la documentación, convirtiendo las búsquedas tediosas en descubrimientos eficientes e inteligentes. Aspectos destacados: - Experiencia práctica en la creación de un sitio de documentación impulsado por IA.- Comprensión de la integración de la IA en las experiencias de usuario.- Habilidades prácticas con las últimas tecnologías de desarrollo web.- Estrategias para implementar y mantener recursos de documentación inteligente. Tabla de contenidos:- Introducción a la IA en la documentación- Configuración del entorno- Construcción de la estructura de documentación- Integración de ChatGPT para documentación interactiva
En este masterclass, te presentaremos los conceptos básicos de la construcción de experiencias de Realidad Mixta con WebXR y Babylon.js. Aprenderás lo siguiente:- Cómo agregar objetos de malla 3D y botones a una escena- Cómo utilizar texturas procedurales- Cómo agregar acciones a objetos- Cómo aprovechar la experiencia predeterminada de Realidad Cruzada (XR)- Cómo agregar física a una escena Para el primer proyecto en este masterclass, crearás una experiencia interactiva de Realidad Mixta que mostrará estadísticas de jugadores de baloncesto a fanáticos y entrenadores. Para el segundo proyecto en este masterclass, crearás una aplicación WebXR activada por voz utilizando Babylon.js y Azure Speech-to-Text. Luego, desplegarás la aplicación web utilizando el alojamiento de sitios web estáticos proporcionado por Azure Blob Storage.
JS GameDev Summit 2022
JSNation Live 2021
React Summit 2023
JSNation 2023
C3 Dev Festival 2024
Comments