How to Make a Game With React

Rate this content
Bookmark

Hacemos sitios web con React. Hacemos aplicaciones con React. Pero, ¿cómo hacemos juegos con React? En esta presentación, te mostraré cómo construir un tecstack de motor de juegos en React usando las bibliotecas de Poimandres, explicar los conceptos básicos y, sí, incluso construir un juego.

This talk has been presented at React Summit US 2024, check out the latest edition of this React Conference.

Kristopher  Baumgartner
Kristopher Baumgartner
22 min
19 Nov, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
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. Usaremos React, React 3 Fiber, Kota y Triplex. Cota es una solución de estado ágil que crea una base de datos local para actualizaciones eficientes. Genera entidades con características específicas y actualízalas en consecuencia. Aprende sobre el comportamiento componible en Kota y cómo actualizar entidades en cada frame. Mejora la apariencia visual del juego agregando una vista HiFi, materiales, luces y post-procesamiento para bloom. Entiende los conceptos de crear juegos en React, generando dinámicamente entidades y dándoles comportamiento. Aprende sobre la estrategia de pruebas, la compatibilidad con React Native y las ventajas de usar React para el desarrollo de juegos, incluyendo una mayor accesibilidad y una iteración más rápida.
Available in English: How to Make a Game With React

1. Introduction to React Game Development

Short description:

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.

2. State Management and Entity Creation

Short description:

Es un callback que va a ocurrir en un request animation frame en nuestro bucle central de fotogramas. Teníamos tres entidades: jugador, enemigos y balas. Nuestro jugador se mueve con el teclado, dispara balas y los enemigos se agrupan hacia el jugador. Las balas colisionan con los enemigos. Comenzamos con wireframes para la funcionalidad. La gestión de estado es crucial para los juegos ya que las soluciones actuales son demasiado lentas para actualizaciones de alta frecuencia y muchos objetos.

Es un callback que va a ocurrir en un request animation frame en nuestro bucle central de fotogramas. Aquí solo estamos obteniendo la ref para la malla y la estamos rotando en cada tick del fotograma.

Nuestro juego, teníamos tres entidades que estábamos tratando de crear. Teníamos un jugador, teníamos enemigos, y luego teníamos balas. Queríamos que nuestro jugador se moviera con las teclas, con nuestro teclado. Queríamos disparar balas. Queríamos que nuestros enemigos se agruparan hacia el jugador, y luego queremos que desaparezcan cuando sean disparados. Queremos que nuestras balas se muevan rápidamente desde donde se generan, y queremos que colisionen con los enemigos para saber cuándo destruirlos. Vamos a comenzar con wireframes solo para asegurarnos de que no nos preocupamos por los visuales. Nos preocuparemos primero solo por cómo funciona.

Aquí hay un pequeño video rápido de mí haciendo eso. Aquí estoy solo tomando una vista del jugador. Es una geometría de caja con una malla de wireframe, y estoy creando una vista para el enemigo y para las balas, un dodecaedro para el enemigo. Luego nuestras balas solo van a ser una esfera por ahora. Estamos haciendo que las balas se reduzcan. Hay un prop allí como en CSS con un transform. Vamos a añadir eso a nuestra escena. A la derecha está triplex, que es un pequeño IDE visual agradable. Solo voy a entrar allí rápidamente y moverlos para que podamos verlos. No están superpuestos uno encima del otro. Ahí está nuestra primera escena.

Pero ahora, ¿cómo hacemos que haga algo? Ahora hablamos de probablemente la parte más importante de esta charla, la gestión de estado. Las soluciones de estado actuales son demasiado lentas para lo que queremos hacer. Asumen una baja frecuencia de actualizaciones. Asumen relativamente pocos objetos y generalmente también una estructura rígida. Solo piensa en tu típica aplicación de React donde tienes una jerarquía. Es como un documento. Estás actualizando en la interacción del usuario o la obtención de datos o una llamada a la API. Normalmente no tienes miles y miles de objetos. Por el contrario, los juegos son mucho más exigentes.

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

El Potencial Caprichoso de los Marcos de Trabajo de JavaScript
React Summit US 2023React Summit US 2023
28 min
El Potencial Caprichoso de los Marcos de Trabajo de JavaScript
Top Content
The speaker discusses the whimsical and detailed work of Stripe, particularly their interactive and dynamic pages. They explain the use of React for building whimsical details and tracking mouse position. The speaker introduces React Spring for smooth animation and React3 Fiber for creating a 3D egg model. They also mention the use of Framer Motion and React server components for animating CSS properties.
Animaciones Emocionales y Funcionales de la Interfaz de Usuario en React
React Day Berlin 2022React Day Berlin 2022
28 min
Animaciones Emocionales y Funcionales de la Interfaz de Usuario en React
Today's Talk discussed the importance of UI animations in React, both functional and emotional. Examples were given using CSS and Framer Motion, with a focus on user feedback and accessibility. Design guidelines and animation usage were highlighted, as well as the consideration of negative emotions in animations. The Talk also touched on designing 404 error pages and concluded with gratitude to the audience and organizers.
JavaScript Haikus: Mis Aventuras en la Programación Mínima
JS GameDev Summit 2023JS GameDev Summit 2023
27 min
JavaScript Haikus: Mis Aventuras en la Programación Mínima
This Talk is about writing super tiny JavaScript programs, known as tiny code. It explores the concept of code golf and the use of a live editor for instant feedback. The Talk discusses various ways to share tiny code, including Twitter.net. It also covers creating graphics, games, and sound in a small space. The speaker highlights inspiring tweets and showcases examples of tiny code, including asemic writing. The future of tiny code includes new techniques, better browser support, and AI-assisted programming.
Hackeando un e-Reader para Mostrar Mi Menú de Té Con JSX
React Day Berlin 2023React Day Berlin 2023
7 min
Hackeando un e-Reader para Mostrar Mi Menú de Té Con JSX
React can be used to create custom menus for e-readers, and the process involves creating an image and e-book with React and loading them onto the e-reader. Writing an EPUB e-book for e-readers involves converting an SVG file into a PNG image and writing the e-book in EPUB format using HTML, CSS, and images. EPUB generators like Pandoc and Dino simplify the process of generating EPUBs from markdown and running JavaScript on the desktop, respectively.
Hackeando un e-Reader con React
React Advanced 2023React Advanced 2023
7 min
Hackeando un e-Reader con React
React for eBooks? Learn how to hack an eReader to display a tea menu. Create images and write e-books using React. Use EPUB format to create chapters and include CSS. Use Pandoc and Dino to simplify the process and make quick updates.