Creando juegos en React

Hola, mi nombre es Paulo Henschel. Gracias por recibirme. Soy un desarrollador de Alemania. Y esta es mi cuenta de Twitter. Pueden echarle un vistazo. Esto no es una o, es un cero. Y hoy les mostraré cómo hacer juegos en React. Supongo que muchos de ustedes se preguntarán por qué diablos haría un juego en React. La cosa es que simplemente te brinda una nueva herramienta para expresarte. Así que podría ser un juego, podría ser frontend, podría ser cualquier cosa, realmente. Entonces tal vez tengas una historia para compartir, mensajes políticos, lo que sea. Esto simplemente te ayuda a abrir nuevas puertas, a hacer cosas que antes no hubieran sido posibles.

Lo que vamos a usar se llama React 3.0 Fiber. Esta es una biblioteca que creé una vez. Es un reconciliador o envoltorio, como quieras llamarlo, para three.js. Y aquí puedes ver algunas demos impresionantes. De donde proviene se llama Bureli, B-U-E-R-E-L-I.io, puedes echarle un vistazo aquí. Esto es lo que estamos haciendo en el trabajo, y de ahí proviene. Básicamente es una plataforma CAD incrustable y abierta para la web. Y solo necesitábamos algo para hacerlo más Reactivo, para controlar la escena de una manera mejor. Y esto es muy específico. Puedes crear modelos con él, configuradores de variantes, visualmente o headless. Pero lo que les mostraré hoy tiene más que ver con la biblioteca en sí, React 3.0 Fiber, y cómo pueden usarlo, y todo desde la perspectiva de un principiante porque eso es lo que soy. Nunca antes había hecho juegos, pero si puedes hacer algo como esto, supongo que puedes hacer cualquier cosa, al menos tienes las bases de partida.

Primero, te pediría que vayas a este repositorio y revises la sección de fundamentos. Aquí encontrarás tus bases de partida, documentación y cosas así, solo para tener una idea de cómo todo se está uniendo. Hoy no profundizaré demasiado, pero estamos aprendiendo haciendo. Y obviamente, también necesitas 3.js junto con la documentación, porque las cosas que voy a hacer hoy, no voy a explicar cómo las maneja 3.js, y así sucesivamente.

Así que, vamos directo al grano. Lo que estamos haciendo hoy es, creo que se llama Arcanoid. Es como un pequeño juego que vamos a hacer. La paleta, creo, no se puede ver debido a las pantallas video, pero de todos modos. Hoy haremos una versión muy reducida de esto. Así que, sí, empecemos.

Lo primero que voy a explicarte es cómo funciona el espacio 3D. Tienes tres ejes. El eje X es horizontal. Y es vertical. Y luego tienes la profundidad. Así es como funciona el espacio 3D. 3D es tridimensional. Luego tienes una cámara. Está mirando hacia el área que es visible. Y crea algo que se llama un frustum o un viewport. Es un área visible de nuestra pantalla. Y en esto, vamos a proyectar un par de objetos primitivos. Uno será la paleta. Lo vincularemos a nuestro mouse para hacerlo interactivo. Y el otro será esta pequeña pelota de ping-pong. La haremos gravitar hacia abajo. Así que, también estamos trabajando con física. Así que, vamos directo al grano.

Lo primero, y esto puede ser lo más importante que obtienes de React 3.0 Fiber, se llama Canvas. Básicamente, es una representación del contexto WebGL.

Todo lo que sucede aquí es visible. En 3.js, tienes varias cosas que puedes hacer. La más importante se llama malla. Y, si guardo esto, no pasará nada. No verás nada. Porque una malla es una representación de una forma, y también tiene que describir cómo se ve la forma.

La forma podría ser, por ejemplo, una esfera. Ahora tenemos una esfera. Si guardo esto, la vemos. Pero está de color blanco, porque también necesitamos darle un material. Hay muchos materiales, pero el que siempre uso, y te sugiero que uses como principiante, se llama material estándar de malla. Este puede recibir un color. Oops, color. Digamos rosa fuerte. Si guardo esto, se pondrá negro, y esto es porque no recibe ninguna luz. Si alguna vez has estado en la fotografía, es el mismo principio, realmente. Las cosas son afectadas por la luz dentro de la escena. Si sabes qué es, por ejemplo, luz de campo, luz de tira o luz principal, estás bien. Si no sabes qué es esto, no te rompas la cabeza. Puedes improvisar, puedes probar cosas.

Al principio estamos en luz ambiental. Eso significa que la luz viene de todas partes. Esta esfera se ve bastante extraña. Es plana. Es lo mismo que en la fotografía. Si la luz viene desde todos los ángulos, no hay sombra. Entonces, necesitamos una luz principal, una fuente de luz que esté un poco inclinada. Y pongamos una luz puntual en la escena así. La posicionamos. Digamos, arriba a la derecha.

Y ahora puedes ver un poco de sombreado en acción. Vamos a hacer que la luz ambiental sea menos intensa. Así. Y ahora puedes verlo de una mejor manera. Además, hay un truco que siempre uso. Se llama luz de tira. Nuevamente, esto es como fotografía básica. Entonces, ahora es la luz que viene desde atrás. Y crea este pequeño borde.

Esta esfera se ve bastante áspera en 3js. Entonces, si haces una esfera u cualquier objeto, tienes algo llamado arcos o argumentos de constructor. El primero es el radio. Y el otro es segmentos, como qué tan suave se verá esta cosa, como puedes ver. Estos son los conceptos básicos. Ahora sabemos cómo colocar cosas en la escena. Ahora sabemos cómo agregar luces.

Y es posible que te preguntes, esto se ve bastante extraño porque estos no son diffs y spans. Estos son mallas y luces puntuales, y así sucesivamente. Entonces, no pienses en React como algo que solo es para el DOM, para la web. React es un estándar de componente multiplataforma. Puede manejar de todo. Aquí estamos colocando elementos de three JS en la escena. Debido a que esto es React, ahora podemos extraerlo y crear componentes, componentes reutilizables. Entonces, hemos creado una pelota. Esta será nuestra pelota de ping pong. Coloquémosla aquí y de vuelta en la escena. Y ahí vamos. Nada debería cambiar. Pero ahora lo hemos hecho reutilizable. Lo primero que podemos hacer es usar propiedades como esta.

Ahora, si quisiera, podría entrar aquí y darle un tamaño diferente, un radio diferente. Lo que sea. Supongo que estamos bien. El combo rosa debería ser blanco y tal vez no debería ser tan grande como esto. Eso se ve bien.

Ahora necesitamos tener nuestro pedal. También lo llamaremos pedal. He copiado el componente. Este toma diferentes argumentos. Queremos tener un rectángulo o una caja como esta. Tampoco debería ser una esfera, debería ser una caja de búfer y geometría. Si guardo esto... Ups, necesito ponerlo en esta cosa. Pedal, y sí, eso se ve bien. Pongámoslo aquí abajo.

Ahora tengo el pedal pero no quiero una caja. Quiero algo como un rectángulo estirado. Uno como este. Démosle otro color, digamos azul claro. Bien, estamos bien. Tenemos dos componentes, la pelota de ping pong y el pedal. Y ahora necesitamos hacerlos interactivos y reaccionar a dos físicas básicamente. Así que esto es lo siguiente que debemos hacer. La física es muy, muy compleja y hay muchas bibliotecas entre las que puedes elegir. MLJS, Canon.JS, y así sucesivamente. Por ahora, usaremos Canon.js. Es una biblioteca que hemos creado. Está en la organización de Github de React Spring. Se llama useCanon y podría ser la forma más fácil que hayas visto para hacer posible la física y te lo mostraré. Vamos a agregarlo.

Física, digamos proveedor así. Ahora tenemos física. ¿Y puedo hacer esto? Esto realmente es malo. Bien, lo pongo aquí. Nos salvé, no pasa nada porque necesito decirle al mundo de la física acerca de estos objetos que he puesto en la escena. Y la forma más fácil de hacer esto, esta biblioteca nos proporciona un par de hooks y los consideran como una aproximación. Hemos creado una esfera. Ahí está la pequeña cosa blanca que puedes ver aquí y necesitamos decirle al mundo de la física que esto es una esfera y obtenemos un par de hooks que describen cómo se ve la geometría y funcionan de la misma manera. Tenemos el hook aquí. El hook quiere tener arcos, los mismos. Entonces, en este caso, quiere saber el radio y para comportarse de manera física, un objeto necesita tener masa. Así que decimos masa uno y todo lo que necesitamos hacer es vincularlo a nuestro objeto, obtenemos una referencia, lo colocamos en la malla, ref. Puedo guardarlo y como puedes ver, está cayendo. Así que la física está funcionando. Lo que sucede es que es demasiado lento. Así que deberíamos darle un poco más de gravedad, hay una propiedad aquí que dice gravedad y tiene tres ejes. Recuerda que tienes tres ejes en el espacio y queremos que la gravedad caiga hacia abajo, como desde el eje Y hacia arriba son valores positivos, hacia abajo son valores negativos. Así que pongamos por ejemplo menos 30 y eso debería verse mejor. Sí, eso se ve mucho mejor.

Lo siguiente es el pedal. No ocurre nada aquí porque solo la pelota es reconocida en el mundo de la física. Hay otro hook para esto. El mismo principio, es una aproximación. Así que se llama useBox. Esta vez no le damos el ratón porque queremos controlarlo con nuestro ratón. Ese es el principio básico detrás de esto, pero también toma los mismos argumentos que tu caja tomó. Así que si hago esto, y lo mismo, necesito vincularlo a nuestra malla así así y no ocurre nada porque estos dos ocupan el mismo espacio. Así que hay algo más que se llama API. Y con esta API, puedes poner, puedes actuar sobre ella, ponerle una fuerza, ponerla en un lugar específico, y así sucesivamente. Normalmente posicionarías objetos aquí como te he mostrado con la luz, sí, puedes, puedes hacer una posición y luego debería ser izquierda y derecha así. Pero en nuestro caso, no es así porque la física controla esta malla. Así que necesitamos encontrar una forma diferente. Y hay un hook llamado useFrame en React3 Fiber. Y este es el más importante de todos. Básicamente se ejecuta 60 veces por segundo. Suscribe este componente al bucle de fotogramas. Eso es lo que hace. Así que ten cuidado. Todo lo que pongas aquí no debe ser costoso pero puedes animar el objeto allí.

Y lo que vamos a hacer es tomar la API. También tiene una posición. Tiene un conjunto donde podemos poner las tres X y useFrame nos da un modelo de estado. El modelo de estado contiene muchas cosas útiles como qué tan grande es la ventana gráfica, la capacidad de respuesta pero también tiene datos del ratón. Así que podemos ir aquí, estado ratón X. Y si guardo esto, debería poder moverme hacia la izquierda y hacia la derecha. Lo que sucede es que esto no hace mucho porque estas son coordenadas normalizadas del ratón son cero en el centro. Si voy hacia la derecha, es uno. Si voy hacia la izquierda, es menos uno. Así que todo lo que necesito saber es qué tan grande, qué ancho tiene mi ventana gráfica.

Se ha incrementado. Lo siguiente que notamos es que la pelota cae. Y el juego está básicamente muerto. Así que necesitamos algo para reiniciar, para volver a aparecer la pelota. Y para esto, hay algo, hay muchas formas en que podríamos hacerlo. Pero la más fácil sería un plano de contacto. Ponemos un objeto físico. No necesita una representación visual. Y se supone que debe atrapar la pelota. Así que decimos usePlane, le damos un objeto de nuevo. Este tampoco tiene masa. Permanece fijo. Y necesitamos rotarlo. La razón de esto es porque si colocamos una malla o un plano en la escena, aparecerá así. Y necesitamos rotarlo para que se convierta, digamos, en una base o una superficie. Así que decimos rotación. Esto va a ser math pi. Es una rotación por dos, así que lo rotamos a la mitad. Y eso debería ser todo. Y también, ahora necesitamos bajarlo un poco. Debe estar en la parte inferior. Esto es en el eje y. Y ahora necesitamos conocer el tamaño de la ventana de visualización. ¿Qué tan grande es la ventana de visualización? Hay otro gancho muy importante. Se llama useFrame. Este nos da la ventana de visualización. No, use3. Aquí, esto es responsive. Entonces, cada vez que el usuario cambia el tamaño de la pantalla, este componente se volverá a renderizar. Así que solo pongámoslo aquí.

Altura del viewport. Y debería estar debajo. Y si todo está funcionando, entonces ya debería estar bien. Así que veamos. Sí. OK. Así que vemos que tenemos este plano físico allá abajo. Pero el problema es que está haciendo rebotar la pelota hacia arriba. Pero no queremos eso. Queremos respawnear la pelota. Así que eso también es fácil. Estos ganchos, tienen algo llamado onCollide. Así que cada vez que son golpeados, se nos llama de vuelta. Y todo lo que necesitamos hacer, obtenemos la API de esta pelota. Y simplemente la reseteamos. Reseteamos su posición a cero. Así que probemos esto. Funciona. Pero mantiene su velocidad. Así que también necesitamos restablecer la velocidad. Es lo mismo. Velocidad. Y ahí está. Ahora respawneará. En realidad podríamos darle un poco de velocidad hacia arriba. Entonces puedes ver que rebota un poco hacia arriba. Y estos son los elementos básicos de nuestro juego. La cosa es que no hace mucho, porque la cosa solo puede rebotar hacia arriba y hacia abajo.

Así que vamos a angilar un poco el pedal. Hacemos esto en el componente del pedal. Ya tenemos una línea de código para la posición para que siga al ratón. Ahora añadimos otra para la rotación, así. Establecido. Y de nuevo, la cámara viene del eje x, no, del eje z. Así que necesitamos rotarla alrededor de este eje. Es este. Si solo decimos ratón, no, estado del ratón x, esta vez lo multiplicamos con un ángulo porque la rotación toma un ángulo. Si tomamos una fracción de esto, digamos 5. Y lo que sucede es que esto ya está cerca de ellos. Puedes ver que tienes que interactuar con él. Necesitas tener cuidado.

Así que hay un par de cosas que podríamos hacer ahora. No quiero estirarlo. Esto debería ser un ejemplo muy reducido, nada más. Podríamos poner paredes invisibles en los lados para que esto rebote. Pero no hagamos esto. Simplemente añadamos un par de enemigos. Y supongo que hemos terminado. Así que hago una función llamada Enemy. Y copio todo dentro del panel, así. Pero esta vez, también le doy props. Tomemos un color y el resto de las props. Y propaguemos las props aquí y conectemos el color aquí. Así que ahora, el desarrollador puede poner enemigos. Creo uno. Digo color, naranja. Y démosle una posición. Así.

Vamos a darle 0. Entonces, ¿dónde queremos colocarlo? Movámoslo un poco hacia arriba. Y en el lado izquierdo, arcs no está definido. OK. Uno. Estos son ancho, longitud, altura, como expliqué antes. Ah. Este se me olvidó copiarlo. OK. Ahora debería funcionar. OK, ahí está nuestro enemigo. Y como puedes ver, también responde. Puedo golpearlo. Y puedo poner muchos de ellos dentro de la escena. Hagamos otro. Hagamos que este sea de color rosa fuerte. Colócalo en el otro lado y un poco más alto. Y ahí lo tenemos. Tal vez aún más alto así. Estos son los elementos básicos de nuestra aplicación. No voy a ir más allá de esto, porque estamos acortando el tiempo. Lo que quería mostrarte con esto es que todas estas cosas no son difíciles. Como puedes ver, solo usamos alrededor de 60 líneas. Y no necesitas mucha matemática. Puedes improvisar. Puedes probar cosas. Y lo más importante es que te diviertas. Así que si te interesa, puedes encontrar el ejemplo real, el más complejo, en mi página de GitHub. También subiré la versión reducida. Y sí, si haces algo genial, ya sea un juego o cualquier cosa, asegúrate de mencionarme en Twitter.

Me encantaría ver sus preguntas.

Y espero que se hayan divertido aprendiendo un poco sobre WebGL, gráficos, 3DJS, React 3 Fiber, en React.

Y eso es básicamente todo.

Gracias nuevamente por tenerme, diviértanse.

Y adiós.

Hola Paul.

Hola.

Gracias por unirte a nosotros en esta increíble demostración.

Debo decir que solía trabajar en una empresa de publicidad desarrollando anuncios.

Y una vez estuve en un equipo que construyó un juego 3D con 3S, si recuerdo correctamente.

Han pasado seis o siete años, así que perdónenme si me equivoco.

Y eso no se veía tan fácil en absoluto.

No estuve involucrado en una parte 3D que se viera tan fácil como tú lo haces ver.

Lo haces ver, bueno, como, bueno, 60 líneas y construyes este pedal de pelota rebotante, comienzo de Space Invaders, no, Arkanoid.

Es increíble.

Así que debe haber mucho desarrollo que se realizó, por supuesto, en el motor, React 3 Fiber, del cual no podemos entrar en detalles ahora, pero se ve realmente poderoso.

Así que gracias por brindarlo a la comunidad.

De acuerdo, quiero ir a la primera pregunta del público. La pregunta es de Cynthia. ¿Alguna recomendación para habilidades básicas de fotografía para aquellos que quieren usar React Fiber pero no tienen experiencia en fotografía? De acuerdo, supongo que solo inténtalo, simplemente pruébalo. Puedes colocar luces en la escena, ver cómo se ve, pero lo encontrarás en Google, solo busca conceptos básicos de fotografía, para que tengas una idea básica, qué es una luz de relleno, qué es una luz de tira, qué es una luz principal. Estos son conceptos esenciales para la fotografía y esto realmente te ayudará. Sí, solo para familiarizarte con la terminología, en mi experiencia, siempre hay, las personas que se dedican a la fotografía están realmente contentas con lo que hacen. Entonces, si tienes a alguien en tu entorno que se dedica a la fotografía, estarán encantados de ayudarte. Sí, al igual que los desarrolladores, sin faltar el respeto a los desarrolladores, por supuesto.

La siguiente pregunta es de Danilo, con WebAssembly volviéndose más prominente, ¿hay algún motor de física, que aproveche las API de bajo consumo? En realidad sí, no estoy seguro cuál era el nombre, supongo que AMO de physics JS o algo así, así que sí hay, pero CanonJS, el que estamos usando, se ejecuta en un WebWorker, así que está bien también, no bloquea el hilo principal. De acuerdo, espero que Danilo esté satisfecho con esa respuesta y si no, por supuesto, puede preguntarte en tu sala de Zoom para profundizar un poco más.

La siguiente pregunta es de Rin, ¿has tenido la oportunidad de experimentar con la combinación de esto con la API del Acelerómetro? Oh, buena pregunta. No, no mucho. No he hecho mucho con PWA, también llamado PWA. No importa, la API del Acelerómetro es solo una API de JavaScript. No lo he hecho, o React Native, no me resulta tan familiar, pero supongo que sería fácil. No creo que sea muy difícil de hacer. Sí, por lo que recuerdo, ha pasado un tiempo desde que lo toqué, es solo una API que dice, no sé, dispositivo.punto.ángulo, algo así. Solo obtienes un número de vuelta así que podrías girar el teléfono para mover tu panel, sería genial. Así que se aceptan solicitudes de extracción, ¿verdad? La siguiente pregunta es de Drum, con doble M.

¿Se pueden usar texturas y materiales personalizados? Básicamente, cosas 3D adecuadas. Sí, por supuesto. Todo lo que 3js puede hacer es posible en React 3 Fiber. No hay limitaciones, no hay restricciones. La gente suele pensar que porque es React o porque es declarativo o involucra JSX, debe haber algo que no pueda hacer, pero no es el caso. Todo, cada pequeña cosa que hace 3js, también se puede hacer aquí. Materiales, texturas, todo. Entonces, una pregunta de seguimiento de mi parte, hola de Matthijs. Esta pregunta es de Matthijs. Si alguien ha visto esta demostración y piensa: eso es todo, quiero experimentar con esto. Pero ni siquiera tienen experiencia con 3js, ¿recomendarías que primero se sumerjan en 3js o que utilicen su experiencia en React y usen React 3 Fiber? Sí, sugeriría que al menos vayan a 3js.org, revisen todo, prueben algunas demostraciones y tienen algo así como un pequeño documento que te enseña cómo hacer una escena, cómo colocar las cámaras, cosas así. Supongo que sería mejor si lo hacen primero, pero no necesitan profundizar en 3js, pueden combinar ambos, es un poco como la gente, preguntan, ¿qué debería aprender primero, React? ¿O no sé, HTML, lo que sea, pero creo que puedes hacer ambas cosas al mismo tiempo. React definitivamente te ayudará porque no hay plantilla, puedes probar fácilmente las cosas, tienes recarga en caliente, así que facilitará el aprendizaje. Pero definitivamente debes conocer los conceptos básicos, qué es una cámara, qué es una escena, luces, etc. Debes aprender a caminar antes de correr. Sí, en el repositorio de GitHub de React 3 Fiber, hay una pequeña sección llamada fundamentos. Así que ese es el conocimiento básico que deberían tener antes de jugar con React 3 Fiber. De acuerdo, gracias. La siguiente pregunta es de Andrew Greenage. Hola, Paul, excelente charla. ¿Podrías contarnos un poco sobre el proceso de aprender a escribir un renderizado personalizado en React? No tenía idea, no hay documentación. Solo estaba probando. Prueba y error. Cambian la API todo el tiempo, así que eso fue un poco decepcionante, pero es posible. Si quieres, conéctate conmigo en Twitter y puedo darte un ejemplo muy sencillo. Tengo uno en CodeSandbox, son unas 50 líneas o algo así, y sí, te enseña los conceptos básicos. No es tan difícil, pero un poco complicado de entender si sabes a qué me refiero. De acuerdo, tenemos tiempo para una pregunta más. Es de Martin Yu. ¿También es posible mover la iluminación con el mouse en React? Sí, por supuesto.

¿También es posible mover la iluminación con el mouse en Tree? Sí, por supuesto. Tengo una demostración interesante de esto en mi GitHub.

De acuerdo, genial. Entonces, Martin Yu, te recomendaría ir al GitHub de Paul. ¿Cuál es tu nombre de usuario en GitHub? Tengo diferentes nombres de usuario en todas las plataformas. Bueno, el enlace probablemente esté en el sitio web hacia tu GitHub. Creo que es D-R-C-M-D-A, espero.

Así que para las personas que aún tienen preguntas sin respuesta o la pregunta fue respondida, pero no lo suficientemente a fondo, Paul todavía tiene tiempo para responder sus preguntas en su sala de Zoom a la que se dirigirá ahora. Paul, me gustaría agradecerte mucho por unirte a nosotros aquí hoy y compartir este increíble proyecto tuyo. Gracias, Tom. Adiós. Adiós.