Creando juegos en React

Rate this content
Bookmark

Esta charla tratará sobre react-three-fiber. Vamos a crear un mini juego juntos. Veremos cómo incluso los principiantes pueden superar todo el código boilerplate y las matemáticas sin volverse locos, y luego traducirlo a cualquier cosa, ya sea un juego o un sitio web con efectos visuales interesantes.

30 min
18 Jun, 2021

Video Summary and Transcription

Esta charla proporciona una introducción al desarrollo de juegos en React utilizando React 3.0 Fiber y three.js. Cubre temas como la creación de objetos 3D, la comprensión de mallas e iluminación, la adición de interactividad y física, el control de objetos con entrada de mouse y la creación de enemigos. El orador enfatiza la facilidad y potencia de React 3.0 Fiber para el desarrollo de juegos y fomenta la experimentación y el aprendizaje a través de ejemplos y recursos.

Available in English

1. Introducción al Desarrollo de Juegos en React

Short description:

Hoy les mostraré cómo hacer juegos en React. Les brinda una nueva herramienta para expresarse y abre nuevas puertas para hacer cosas que antes no hubieran sido posibles.

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.

2. Introducción a React 3.0 Fiber

Short description:

Hoy les mostraré cómo usar React 3.0 Fiber, una biblioteca que creé como un reconciliador o envoltorio para three.js. Surgió de Bureli, una plataforma CAD incrustable y abierta para la web. Necesitábamos algo para hacerlo más Reactivo y controlar la escena de manera más efectiva. Esto es muy específico y excelente para crear modelos y configuradores de variantes. Les mostraré cómo usarlo desde la perspectiva de un principiante.

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.

3. Introducción al desarrollo del juego Arcanoid

Short description:

Primero, ve al repositorio y revisa la sección de fundamentos. Hoy, vamos a hacer un pequeño juego llamado Arcanoid. Explicaremos cómo funciona el espacio 3D, los ejes, la cámara y el área visible. Proyectaremos objetos primitivos como la paleta y la pelota de ping-pong. Utilizaremos el lienzo de React 3.0 Fiber.

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.

4. Comprendiendo Mallas e Iluminación en 3.js

Short description:

En 3.js, una malla es una representación de una forma que también describe cómo se ve la forma. Para hacer visible la forma, necesitamos darle un material. El material estándar de malla es un material recomendado para principiantes. Puede recibir un color, que afecta cómo aparece la forma. La iluminación es importante en la escena, al igual que en la fotografía. La luz ambiental proviene de todas partes, lo que resulta en una apariencia plana. Para crear sombras, necesitamos una fuente de luz principal, como una luz puntual posicionada en una dirección específica.

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.

5. Sombreado, Iluminación y Reutilización en React

Short description:

Ahora exploremos las técnicas de sombreado e iluminación. Podemos ajustar la intensidad de la luz ambiental y crear un efecto de luz de tira. Para que los objetos sean más suaves, podemos usar argumentos de constructor como radio y segmentos. React no se limita a la web; puede manejar varios elementos, incluyendo mallas y luces puntuales. Ahora podemos crear componentes reutilizables, como una pelota de ping pong, utilizando propiedades.

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.

6. Añadiendo Interactividad y Física con Canon.js

Short description:

Ahora necesitamos tener nuestro pedal. También lo llamaremos pedal. Tenemos dos componentes, la pelota de ping pong y el pedal. Y ahora necesitamos hacerlos interactivos y reaccionar a dos físicas básicamente. La física es muy, muy compleja y hay muchas bibliotecas entre las que puedes elegir. Por ahora, usaremos Canon.js. Se llama useCanon y podría ser la forma más fácil que hayas visto para hacer posible la física.

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.

7. Física e Interacción de Objetos

Short description:

Ahora tenemos física y podemos hacer que los objetos se comporten de manera física. Usando hooks, podemos describir la geometría de los objetos y darles propiedades como masa y gravedad. Podemos vincular estos hooks a nuestros objetos y ver cómo interactúan en la escena. Ajustando el valor de gravedad, podemos controlar la velocidad y dirección de los movimientos de los objetos.

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.

8. Controlando el Pedal con el Ratón

Short description:

Lo siguiente es el pedal. Usamos el hook useBox para controlarlo con nuestro ratón. La API nos permite interactuar con objetos, aplicar fuerzas y posicionarlos. El hook useFrame es crucial para la animación y se ejecuta 60 veces por segundo. Accediendo al modelo de estado, podemos utilizar los datos del ratón para mover el objeto hacia la izquierda y hacia la derecha.

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.

9. Bouncing the Ball and Increasing Bounce

Short description:

Ahora sigue al ratón y todo lo que necesito hacer es ponerlo abajo. La restitución es qué tan fuerte es el rebote. En este momento, no tiene restitución en absoluto. Así que hay algo llamado material de contacto predeterminado. Aquí puedo describir cómo funciona el material en el mundo físico. Y ahora, puedes ver que la pelota está rebotando. Y no solo eso, el rebote está aumentando.

Así que digo ancho del área de visualización dividido por dos. Y eso es todo. Ahora sigue al ratón y todo lo que necesito hacer es ponerlo abajo. Así que eso es menos el ancho del área de visualización y dividido por dos. Y ahora está aquí. Y como puedes ver, ya está funcionando. Atrapa la pequeña esfera. Y si me muevo hacia abajo, se va. Pero queríamos que rebote. Así que hay algo en la física. Me he quedado dormido en la escuela de física en las clases. Quiero decir, pero la propiedad se llama restitución. La restitución es qué tan fuerte es el rebote. En este momento, no tiene restitución en absoluto. Así que hay algo llamado material de contacto predeterminado. Aquí puedo describir cómo funciona el material en el mundo físico. Así que digo restitución, le doy un poco más de 1. Y ahora, puedes ver que la pelota está rebotando. Y no solo eso, el rebote está aumentando.

10. Resetting the Ball with a Contact Plane

Short description:

Necesitamos algo para reiniciar, para volver a aparecer la pelota. La forma más fácil sería un plano de contacto, un objeto físico que no necesita una representación visual. Se supone que debe atrapar la pelota. Le damos un objeto y lo rotamos para que se convierta en una base o una superficie. También lo posicionamos en la parte inferior y usamos el gancho useFrame para obtener el tamaño de la ventana de visualización.

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í.

11. Respawnear la Pelota y Juego Limitado

Short description:

La pelota puede ser respawnada usando el gancho onCollide y restableciendo su posición y velocidad. Además, se puede agregar una pequeña velocidad hacia arriba para crear un efecto de rebote. Sin embargo, el juego aún está limitado ya que solo permite que la pelota rebote hacia arriba y hacia abajo.

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.

12. Añadiendo Rotación y Enemigos

Short description:

Vamos a angilar el pedal y añadir rotación. Al multiplicar el estado del ratón x con un ángulo, podemos lograr el efecto deseado. Podemos elegir añadir paredes invisibles o añadir enemigos en su lugar. La función Enemy se puede utilizar para crear enemigos con diferentes colores y posiciones.

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í.

13. Creando y Personalizando Enemigos

Short description:

Vamos a crear enemigos en nuestro juego y personalizar su apariencia y posición. Podemos colocar varios enemigos en la escena y observar su capacidad de respuesta. Estos simples pasos demuestran que el desarrollo de juegos en React no es difícil y se puede lograr con solo unas pocas líneas de código. Si estás interesado, puedes encontrar un ejemplo más complejo en mi página de GitHub. No dudes en contactarme en Twitter si creas algo genial.

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.

14. Introducción y Agradecimiento

Short description:

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.

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.

QnA

Habilidades de Fotografía para React Fiber

Short description:

Si quieres usar React Fiber pero no tienes experiencia en fotografía, simplemente pruébalo y experimenta con las luces en la escena. También puedes buscar conceptos básicos de fotografía para entender términos como luz de relleno, luz de tira y luz principal. Puede ser útil conectarse con alguien que tenga experiencia en fotografía.

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.

Motores de Física y API del Acelerómetro

Short description:

Existen motores de física, como CanonJS, que aprovechan las API de bajo consumo. Combinar React 3 Fiber con la API del Acelerómetro es posible, aunque personalmente no he experimentado con ello. La API del Acelerómetro es una API de JavaScript que proporciona datos de ángulo del dispositivo, lo que permite la interacción potencial de rotación del teléfono. Se aceptan solicitudes de extracción.

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.

Texturas y Materiales Personalizados

Short description:

Sí, todo lo que 3js puede hacer es posible en React 3 Fiber. Puedes combinar React y 3js para aprender ambos al mismo tiempo. Se recomienda tener una comprensión básica de cámaras, escenas y luces. El repositorio de GitHub de React 3 Fiber tiene una sección de fundamentos para principiantes. Aprender cómo escribir un renderizado personalizado en React es posible, pero la API puede cambiar con el tiempo. Conéctate conmigo en Twitter para obtener un ejemplo sencillo. Es posible mover la iluminación con el mouse en React 3 Fiber.

¿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.

Mover la iluminación con el mouse en Tree

Short description:

¿Es posible mover la iluminación con el mouse en Tree? Sí, hay una demo en mi GitHub. Martin Yu, puedes encontrar el enlace al GitHub de Paul en el sitio web. Siéntete libre de hacer cualquier pregunta restante en la sala de Zoom. Gracias, Tom.

¿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.

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

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.
React Advanced Conference 2021React Advanced Conference 2021
27 min
(Easier) Interactive Data Visualization in React
Top Content
If you’re building a dashboard, analytics platform, or any web app where you need to give your users insight into their data, you need beautiful, custom, interactive data visualizations in your React app. But building visualizations hand with a low-level library like D3 can be a huge headache, involving lots of wheel-reinventing. In this talk, we’ll see how data viz development can get so much easier thanks to tools like Plot, a high-level dataviz library for quick & easy charting, and Observable, a reactive dataviz prototyping environment, both from the creator of D3. Through live coding examples we’ll explore how React refs let us delegate DOM manipulation for our data visualizations, and how Observable’s embedding functionality lets us easily repurpose community-built visualizations for our own data & use cases. By the end of this talk we’ll know how to get a beautiful, customized, interactive data visualization into our apps with a fraction of the time & effort!

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Advanced Conference 2021React Advanced Conference 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured WorkshopFree
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn