Estoy aquí con el Poimandris Open Source Dev Collective, y voy a mostrarte cómo hacer un juego con React usando patrones que conoces y probablemente muchos que no. Vamos a hacer esto hablando sobre renderizado, gestión de estado, generación y comportamiento. Usaremos React, React 3 Fiber, Kota y Triplex. React 3 Fiber te permite construir escenas 3D de manera declarativa en React, totalmente interactivas con HTML y potenciadas por 3JS. Se ve como un componente regular de React con una malla, geometría y material. Actualizamos rápidamente con el hook useFrame.
Hola, hola, mi nombre es Chris Baumgartner. Estoy aquí con el Poimandris Open Source Dev Collective, y voy a mostrarte cómo hacer un juego con React usando patrones que conoces y probablemente muchos que no.
De hecho, será este juego justo aquí. Vamos a hacer esto hablando sobre renderizado, cómo dibujamos cosas en 3D con React. Luego vamos a hablar sobre gestión de estado, cuál es nuestra estrategia para actualizar datos muy rápidamente en React. Vamos a hablar sobre generación, cuáles son nuestros patrones para crear y destruir entidades dinámicamente, y vamos a hablar sobre comportamiento, cómo hacemos que nuestras entidades hagan cosas. Luego vamos a darle a todo un buen resplandor. Para hacer eso, vamos a usar, por supuesto, React. También vamos a usar React 3 Fiber y Kota. Ambas son bibliotecas creadas por Poimandris y en las que he trabajado yo mismo. Vamos a usar esta herramienta llamada Triplex. Nos va a dar un IDE visual para mover cosas y guardarlas de nuevo en el código.
Comencemos con el renderizado. React 3 Fiber probablemente no necesita una introducción para mucha gente, pero en caso de que no estés familiarizado, te permite construir escenas 3D de manera declarativa en React, tal como lo haces con el DOM. Puedes hacer eso con 3D. Es totalmente interactivo con HTML. Participa en el ecosistema de React, lo que significa que todas las mismas herramientas y bibliotecas que usas, puedes usar en 3D. Está potenciado por 3JS, así que si te preguntas cómo sucede la magia, puedes buscar 3.
Así es como se ve. Se parece mucho a un componente regular de React, excepto que aquí tenemos una malla. Dentro de la malla hay una geometría y un material. La geometría nos dice la forma que va a tener nuestra malla. El material nos dice cómo se va a ver. Aquí va a cambiar de color de rojo a azul cuando hagamos clic en él. Luego, en nuestra aplicación, tenemos un lienzo. Ese lienzo aquí es el entorno 3D en el que vamos a dibujar. Así es como se ve. Con solo un poco de código, obtenemos una pieza interactiva en 3D. Una diferencia adicional con los componentes de React es que a menudo necesitamos actualizar en un bucle de fotogramas muy rápidamente. Tenemos un hook llamado useFrame.
Comments