Construyendo Age of Empires 2 en React

♪♪ Hola, y bienvenidos a la recreación de Age of Empires II en React o el otro subtítulo. ¿Por qué sigo haciendo esto a mí mismo? Si te estás preguntando quién soy, hola. Hola, soy Joe. Soy un consultor de ingeniería web. Anteriormente trabajé para lugares como la BBC, Monzo, Lego, haciendo todo tipo de cosas de React y front-end para la gente.

Hoy en día, ofrezco mis habilidades para cualquier cosa relacionada con la vista, relacionada con React, o cosas generales de la web. Y además de hacer ingeniería web, también hago muchas, muchas cosas tontas en mi tiempo libre, incluyendo stand-up comedy. También hago tontos videojuegos, e incluso los combino donde hago stand-up comedy donde también jugamos tontos videojuegos. Si quieres ver más detalles sobre eso, puedes consultar mi Twitter en joeheart, o puedes ir a mi encantadora página de inicio, joeheart.co.uk. Paso mucho tiempo estilizándola. Por favor, déjame saber lo que piensas de esos estilos cuando le eches un vistazo. Y si alguna vez quieres enviarme un correo electrónico por cualquier motivo para decirme cuánto no te gustó esta charla, por favor envíame un correo electrónico a joeheart.dev.

Ahora, para establecer el contexto de hacia dónde va esta charla, pensé que sería bueno hablar de un ejemplo de las cosas que he hecho en el pasado. Uno de mis juegos favoritos que hice para un evento de desarrolladores llamado Smush en su día se llamaba Módulos de Nodo Katamari, que es una versión de Katamari Damacy, que si has jugado, sabrás hacia dónde va esto donde es un pequeño juego de video en el que juegas con una pequeña carpeta de módulos de nodo y te desplazas por el mundo. Y a medida que lo haces, y a medida que te encuentras con cosas, las cosas se te pegan. Y el objetivo del juego es llegar a ser lo más grande posible. Así que para desplazarte por este pequeño mundo donde todos los objetos en él representan paquetes de NPM de varios tamaños, quieres obtener los paquetes de NPM más grandes posibles y simplemente hincharte tanto como puedas, al igual que nuestras carpetas de Módulos de Nodo reales hacen en nuestras máquinas de desarrollo todos los días. Así que eso es un poco el contexto.

Y luego, para explicar un poco cómo llegué aquí y hablando sobre Age of Empires II, como todas las buenas charlas, esto comenzó con un ajuste aleatorio porque estaba un poco aburrido en el trabajo donde estábamos hablando de bibliotecas de gráficos y mencioné en la reunión este gráfico de Age of Empires II, que ocurre al final del juego, que renderiza todo esto para ti, lo cual creo que es realmente hermoso sobre cómo divide estas cosas y te muestra cuándo ciertos eventos ocurrieron en el juego.

Y jugué, bromeé en Twitter por un tiempo, para algunas personas, y luego finalmente fue Lorenzo quien sugirió ¿por qué no presentas la CFP a React Advanced para esto? Y lo hice, y ahora estamos aquí. Ahora, cuando esto comenzó, supongo que necesito agregar un poco de contexto para lo que es Age of Empires II, para aquellos de ustedes que pueden no saber qué es. Era un juego de estrategia en tiempo real. Fue lanzado en 1999, creo. Lo jugué mucho cuando era niño. Y a menudo se jugaba en uno de estos, un gigantesco monitor CRT que hacía boom cuando lo jugabas.

Y era un juego en el que asumirías el mando de uno de los ejércitos más grandes de la cultura, y los evolucionarías desde la edad de piedra hasta la edad del castillo y la edad medieval y obtener más tecnología. Y extraerías recursos y construirías tu base y elegirías tus unidades y tus ejércitos con mucho cuidado, los compondrías, y luego irías a luchar contra el enemigo. Pero realmente solo enviarías caballeros. Eso sería principalmente lo que harías, y funcionaría increíblemente bien.

Así que empecé a pensar qué podría hacer en el contexto de Age of Empires II y React? ¿Qué sería una charla interesante para venir y armar sobre la tecnología React en Age of Empires II? Y había muchas formas diferentes de abordarlo. Age of Empires II tiene menús relativamente famosos en él. Son estos hermosos diseños esquemorfos. ¿Cómo sería intentar recrear eso y React? Y hay muchas cosas realmente interesantes allí Solo conseguir que las fuentes se rendericen exactamente así, porque eso es solo Georgia, pero en un sitio web modelo es un poco complicado. Tienes que desactivar cualquier tipo de suavizado de fuentes que esté ocurriendo en el navegador. E incluso el logotipo principal de Age of Empires, utiliza una versión particularmente antigua de la fuente Castellan, que es de 1997 y es realmente difícil de conseguir ahora.

Pensé que tal vez podría ir y crear un marco de broma para crear componentes de Age of Empires II, que sería como este aceite-aceite CSS y podría construir un generador de sitios web medieval increíble donde la gente pasaría todo su tiempo aprendiendo mi propio sistema de tokens de diseño personalizado en lugar de simplemente aprender CSS. Pero pensé que no lo haría, pensé que no sería tan divertido. En cambio, empecé a pensar en ¿qué pasaría si pudiera intentar hacer Age of Empires II? ¿Cuánto de Age of Empires II podría hacer usando React? ¿Recrear este juego en React tanto como sea posible? ¿Qué tan difícil sería, en general, recrear Age of Empires II? Y como, si alguna vez tienes la inclinación de Voy a ir y rehacer uno de los mejores juegos de estrategia de todos los tiempos, aquí hay algunos consejos de buenas formas de hacerlo. Estas serían buenas decisiones que tomar. Podrías usar un motor de videojuego. Esto siempre ha crecido cuando se hacen cosas de videojuegos porque tienen muchas funciones de ayuda y cosas de renderizado. Han resuelto muchos de esos problemas comunes de videojuegos una y otra vez, y eso simplemente te hará la vida mucho más fácil. Usa un lenguaje tipado, porque simplemente te dará mucha más previsibilidad sobre las cosas que se están actualizando, todos tus ciclos de eventos. Serías capaz de construir una cantidad considerable de tu aplicación de forma automática simplemente asegurándote de que las cosas se alinean en rojo en los lugares correctos. Y luego, si vas a desarrollar un videojuego, idealmente querrías estar usando un método de renderizado de estilo rasterizado. Entonces, si vas a hacerlo en la web, intenta usar algo como HTML 5 canvas donde puedes dibujar sprites e imágenes directamente en él. O incluso si eso es un poco demasiado bajo si usas algo como Three.js donde podrías hacer como una cosa pseudo 3D o incluso posiblemente como React 3D Fiber, React 3 Fiber sería algo genial para enganchar en cosas como la gestión de estado de React. Entonces, todas esas serían formas realmente buenas de abordar este proyecto.

Pero decidí en su lugar comenzar completamente desde cero usar solo JavaScript y React y renderizar todo usando elementos DOM. Y la principal razón por la que decidí hacer esto es porque fundamentalmente, solo quería asegurarme de que este proyecto fuera lo más doloroso posible para mí. Principalmente porque creo que es más entretenido para ustedes. Y simplemente creo que puedes aprender mucho sobre una herramienta si la usas de las maneras equivocadas. Y eso es un poco lo que vamos a intentar hacer hoy.

Entonces, has ido a tu jefe de proyecto, has hablado sobre reconstruir Age of Empires 2 y React. Has obtenido la aprobación, ahora necesitas sacar el JIRA e intentar averiguar ¿qué es un MVP de Age of Empires 2? ¿Cuál es el mínimo viable de Age of Empires que podemos hacer? Y para mí creo que va a ser, queremos poder renderizar este fondo isométrico, este campo de batalla que está en marcha. No puedes ver necesariamente este isométrico aquí pero básicamente hay una cuadrícula de baldosas isométricas en las que todas las unidades pueden existir. Quieres poder desplazarte por el campo de batalla. Entonces, en el juego, cuando moverías tu cursor a la parte superior izquierda, se movería a la parte superior izquierda. Cuando te mueves a la parte superior derecha, se movería a la parte superior derecha. Quieres poder hacer clic en una unidad, un edificio, de una manera bastante genérica para que podamos seleccionar cosas alrededor del campo de batalla. Y luego queremos poder hacer clic con el botón derecho en el suelo para mover la unidad. Creo que si podemos empezar con eso, entonces podremos construir y construir el resto de Age of Empires.

Entonces, renderizar un campo de batalla isométrico, esto es sorprendentemente fácil usando CSS. Entonces, nuestro método de renderizado es muy simple. Solo vamos a tener un div al que le daremos una clase de cuadrículas. Y luego terminé creando dos matrices de índices para que podamos mapearlos, una para las filas, donde agregamos una fila anidada en cada una de ellas y columnas donde mapeamos y renderizamos baldosas. Además, probablemente debería señalar ahora, esto no es nada accesible. Pensé que tratar de hacer un DOM basado en Age of Empires 2 accesible sería un poco más doloroso de lo que estaba dispuesto a soportar esta vez. Y entonces nuestra cuadrícula, simplemente la vamos a hacer relativa. La vamos a colocar en la parte superior izquierda de la página y la centraremos un poco más. Cada fila será simplemente una fila flexible. Nos aseguraremos de que no haya envoltura en ella porque tuve un error extraño en el que, si accidentalmente encogías esto, no se encogería demasiado. Se vería como un fondo emergente. Terminas con esta cuadrícula dentada. Y simplemente usamos algunas variables CSS muy simples para asegurarnos de que cada bloque tenga el tamaño correcto y la cuadrícula correcta. Ahora, si estás mirando estos dos trozos de código, estás diciendo, Joe, eso solo renderiza una cuadrícula, no una isométrica, tendrías razón. Ese trozo de código que acabo de mostrarte renderizaría este tipo de cosa en el lado derecho. Es solo una pequeña cuadrícula como esa.

Pero luego, usando solo un poco de transformación, vamos a rotar todo en el eje X y luego en la tercera dimensión, vamos a rotar un poco el eje Z. Terminamos con esta hermosa cuadrícula isométrica, todo hecho con solo unas pocas líneas de CSS y un método de renderizado.

Ahora vas a mirar eso y decir, Joe, eso no se parece en nada a Age of Empires 2. Y yo diré, tienes razón. Esta es una captura de pantalla de Age of Empires 2 y mira este hermoso césped algo borroso en el que está parada esta unidad. Así que queremos poder obtener esas texturas.

Ahora bien, podría simplemente buscar en Google texturas para Age of Empires 2. Extrañamente, eran bastante difíciles de encontrar. Así que en su lugar terminé descargando este maravilloso software de modificación llamado Turtle Pack, que te permite extraer los archivos SLP y DRS, que eran archivos particulares. No sé si eran particulares para ese juego exacto, pero eso almacenaba todos estos datos. Así que fui a este encantador foro, que, por cierto, solo quiero decir cuánta alegría me dio ver un sitio web que hablaba de deshabilitar aceleradores de descarga y gestores de descargas, lo que me hizo sentir muy nostálgico por un sentido del tiempo. Así que logré descargar esta maravillosa pequeña herramienta, y arranqué mi CD, y puedes ver que dentro de cada uno de estos SLPs hay estos casi GIFs de almacenamiento de estas baldosas, donde es un solo archivo, pero hay todos estos diferentes que serían como una animación. Pero logré exportar uno de ellos como un mapa de bits. Ahí vamos, boom, tenemos nuestra baldosa de césped. Hay un total de seis píxeles allí, esto es increíble.

Ahora, el problema es que hemos hecho esa transformación en nuestra cuadrícula. Así que si ponemos eso como una imagen de fondo, va a sesgar eso de nuevo, lo cual es demasiado. Así que, un rápido salto a Photoshop, lo enderezamos un poco, lo que hace que parezca significativamente más embarrado, y luego podemos simplemente establecer la imagen de fondo en todas nuestras baldosas, boom, tenemos nuestra hermosa cuadrícula isométrica. Mira qué rápido hemos cumplido nuestro primer requisito, esto va realmente bien.

Ahora, también queremos poder desplazarnos por este campo de batalla. Esto va a ser un poco más complicado que nuestro anterior. Ahora, afortunadamente, React lo hace muy, muy fácil para engancharse a los eventos de movimiento del mouse. Así que podemos ir al evento onmousemove, tener un pequeño controlador, y el controlador simplemente va a almacenar el mouseX y el mouseY en un estado de React para que podamos usarlo básicamente como queramos. Y vamos a usar una referencia, y conectarla a ese div, para que podamos sacar propiedades de ese div, sobre cuán alto es, y cosas así. Y luego vamos a escribir esta función. Y digo, nosotros, quiero decir, yo hice esto, donde básicamente queremos hacer la lógica de, cuando el mouse se mueve, ¿está a 50px del borde del contenedor? Entonces desplázate un poco en esa dirección si lo está. Y la forma en que vamos a hacer esto es que hay este método de desplazamiento en los Elementos HTML, pero el método de desplazamiento no es ir y desplazarse un poco, es desplazarse a este punto exacto, porque eso es lo que quieren los documentos web, ¿verdad? Quieres poder desplazarte a un lugar, quieres desplazarte a una etiqueta o cosas así. Así que tenemos que hacer un poco de matemáticas para calcular dónde queremos que sea el desplazamiento a la izquierda y el desplazamiento superior, donde es bastante fácil donde vamos y obtenemos el ancho y la altura del contenedor actual. El margen de desplazamiento es como usarlo como la distancia de cuán cerca del borde de mi pantalla quiero empezar a desplazarme? Y luego la cantidad de desplazamiento es esencialmente la velocidad a la que vamos a desplazarnos. Vamos a obtener la posición de desplazamiento actual, eso es el desplazamiento a la izquierda y el desplazamiento superior.

Y luego simplemente hacemos, si el ratón está más allá que el ancho del contenedor menos el margen, así que el ancho del contenedor menos el margen, justo allí, entonces añade un poco de desplazamiento a la izquierda. Y si es al revés, quita un poco de la izquierda, añade un poco a la parte superior, resta de la parte superior. Y luego podemos tomar este uso de callback, que he envuelto, he envuelto este método en uso de callback diciendo que depende del estado de mouseX y mouseY que definimos más arriba. Y ahora podemos poner eso dentro de un use effect. Y tenemos este bonito pequeño tipo de bucle de juego sucediendo aquí. Esta era realmente mi idea alrededor, quiero intentar jugar con React para video y cosas así porque el bucle use effect es muy similar a ese bucle de juego que los motores de juego o el software de juego tienen donde estás constantemente haciendo un poco de lógica. Y ahora cuando mueves tu cursor al borde de la pantalla, se va y se mueve a través. Tenemos nosotros mismos desplazándonos a través del campo de batalla. Esto es fantástico con un montón de registros de console también. Muy necesario, muy requerido.

Así que hemos avanzado muy rápidamente. Tenemos nuestro primer conjunto y nuestro segundo conjunto de requisitos hechos haciendo clic en unidades y edificios para seleccionarlos. Así que en primer lugar, para poder hacer clic en ellos, necesitamos poder representarlos. Así que vamos a mover nuestro estado que estábamos manteniendo en solo algunos ganchos de estado a un poco más de un reducer porque vamos a hacer mucho más. Si vamos a tener muchas unidades en el futuro, queremos poder acceder a todas ellas en un reducer. Así que vamos a crear un array de unidades, añadir una unidad allí por ahora, y luego mover todas nuestras otras cosas a un objeto de UI para que esté fuera del camino. Y por ahora solo vamos a añadir un reducer que haga las cosas de actualización de la posición del ratón. Así que la lógica que estábamos almacenando en el estado antes, pero ahora la estamos almacenando en un reducer.

Ahora, añadir una unidad y representarla, vamos a tomar un enfoque muy similar a lo que estábamos haciendo con la representación de las baldosas, donde simplemente vamos a añadir este div que existe dentro del elemento de la cuadrícula, y vamos a mapear sobre todas las unidades en nuestro estado. Les vamos a dar un div donde tendrán una clase de unidad, que les dará algunos atributos genéricos sobre su ancho y su altura. Y luego tienen cualquier tipo particular que sea. Así que para esto, él es un lancero, así que usa el fondo de lancero. Y luego vamos a establecer dinámicamente la posición como baldosas porque van a moverse más tarde en lugar de hacerlo en el CSS. Y eso significa que obtenemos esta maravillosa representación. Ahora, la razón por la que esto está sucediendo es porque la textura del lancero es un cuadrado y él está de pie, pero obviamente hemos hecho esta transformación para que esté un poco más abajo. Así que necesitamos encontrar una manera de esencialmente voltearlo de nuevo. Y la forma en que vamos a hacer eso es esencialmente desrotándolo un poco, donde vamos a hacer una rotación Z negativa, rotando el X, y luego también scale el Y un poco, y boom, tenemos a nuestro lancero de pie y está listo para la acción. Pero desplazarse por un campo de batalla con una unidad en el medio no es particularmente emocionante. Entonces, ¿cómo lo hacemos interactivo? Ahora, aquí es realmente donde React brilla porque los manejadores de clic son pan y mantequilla. Así que muy fácilmente para cada unidad que vamos a representar, le vamos a dar un manejo de clic en la unidad, donde vamos a pasar el ID de la unidad.

Este manejo de clic en la unidad en realidad va a generar un método para cada una de ellas. Por lo tanto, va a crear un método que será llamado cuando esté listo, donde simplemente despachará una acción para seleccionar la entidad, la acción de seleccionar entidad. Simplemente va a establecer un ID seleccionado de lo que sea que haya clicado en ese momento. Y hemos añadido un poco de estado inicial aquí para null, que debería estar bien.

Y ahora cuando hacemos clic en él, y con un poco de magia extra de CSS para mostrar un poco de health en una barra de selección, ahora podemos hacer clic en él y hacer clic fuera, y hacer clic en él, y hacer clic fuera. ¿Quién no jugaría eso durante varias horas? ¿No es eso fantástico?

Ahora, si queremos poder hacer clic derecho para movernos, esto es muy similar a lo que puedes hacer clic derecho, tener un manejador de clic derecho, que es lo que hace este método de menú de contexto. Este es esencialmente tu método de clic derecho, si tuviera otro nombre. Y vamos a hacer lo mismo que hicimos para la unidad, donde para cada baldosa, le vamos a dar un manejador, donde vamos a manejar el clic derecho. Vamos a generar un nuevo método a partir de la X y la Y, y despachar este método. Esto es un poco más complicado que el otro, pero eso es porque queremos ir y encontrar la unidad seleccionada actualmente, y luego básicamente decirle que se mueva tomando la posición de esta nueva que acabamos de admitir, hemos clicado en una baldosa, queremos movernos allí. Y luego vamos a pasar por las unidades, actualizarla, y resetear el estado.

Así que ahora clic, boom, movimiento. Oh, eso es un poco rápido. Realmente no, eso parece injusto, y no parece muy realista para la era medieval tener teleportación todavía. Pero, como estamos moviéndolo solo usando variables de CSS, podemos establecer la transición a lineal, y de repente tenemos esta unidad en movimiento. ¿No es eso fantástico? Oh, en realidad. Bueno, ahora el problema con esto es, que se está moviendo suavemente, pero independientemente de cuánto se mueva, va a tomar un segundo, que es un poco demasiado largo. Lo que significa que si se mueve muy lejos, es super rápido, y cerca, super lento. Entonces, ¿cómo podemos cambiar esto? Bueno, podríamos establecer dinámicamente ese tiempo de transición de distancia basado en cuánto se ha movido. Así que ahora, si haces clic muy, muy lejos, la distancia será bastante larga. Y si haces clic muy cerca, será un tiempo bastante corto. Así que aquí hay un ejemplo de eso funcionando, donde ahora se está moviendo super lejos, y es un poco lento, y se mueve un poco, y es mucho más rápido. Mucho más consistente en la cantidad de tiempo. Pero entonces, si empiezas a hacer clic un poco más rápido, no está funcionando demasiado, y de repente esto no es exactamente lo que queremos. Estás haciendo clic aquí, estás haciendo clic en uno de ellos, y está estableciendo la posición. Haces clic en el siguiente lugar, acelera la animation, pero la unidad no se ha movido tanto. Y también, en realidad, si volvemos a ese desplazamiento que estaba sucediendo, en realidad solo se está desplazando cuando mueves el ratón. Así que si mueves el ratón al borde del marco, y no lo mueves en absoluto, no seguirá desplazándose por ti. Este no es realmente el comportamiento que quieres. Y la razón por la que esto está sucediendo es porque esa idea que tenía de usar ese useEffect como un bucle de juego, no está funcionando realmente, porque el useEffect solo se está ejecutando cuando realmente mueves tu ratón.

Y sería mucho más como un juego si se estuviera ejecutando todo el tiempo. Donde un bucle principal en un juego es usualmente, manejar un montón de entradas, renderizar un montón de elementos, y luego se llama a sí mismo, y simplemente sigue y sigue y sigue hasta que sales. Eso es fundamentalmente lo que es un bucle de juego.

Entonces, esto nos lleva a la horrible pregunta que la mayoría de nosotros normalmente hacemos lo contrario, ¿cómo podemos hacer que React renderice más? Ahora he decidido revelar muchos de mis Secretos Oscuros donde podemos ir y leer nuestro libro de artes oscuras de React para encontrar todas las diversas formas de hacer renders adicionales. Podemos usar un set timeout para desencadenar un render modificando una variable que luego dispara nuestro use effect. Podemos actualizar una cantidad variable de estado. Estoy seguro de que muchos de ustedes han hecho esto accidentalmente como errores en su propio code donde tienen un user effect que se ejecuta al montar, pero dentro de ese user effect también cambian alguna variable que también está en el árbol de dependencias, y simplemente se ejecuta para siempre. Aunque eso causa más errores de desbordamiento de pila que cosas divertidas de renderizado.

O podríamos hacer una llamada, llamar al callback real dentro del user effect en sí. Entonces, haces ese use effect inicial y luego llamamos al callback allí. Pero el problema con estas cosas es que son formas de hacer que se renderice más, pero no necesariamente de hacer que se renderice de manera más consistente, lo que querríamos para más cosas de animation.

Entonces, para esto, podríamos usar la maravillosa API exclusiva de React window.requestAnimationFrame. Estoy bromeando. Por supuesto que no es una API de React. Es una browser API. Es una que ayuda con muchas cosas basadas en animación, pero podemos engancharla a React aquí. Y decidí robar este encantador hook de CSS Tricks, donde es useAnimationFrame. Y básicamente te permite analizar un callback, que luego será llamado por requestAnimationFrame, creando esta forma muy suave de renderizar cosas donde puedes hacerlo basado en el tiempo en lugar de solo en eventos que están sucediendo. Esto es mucho, mucho más cercano a ese bucle de juego del que estaba hablando.

Ahora, puedes tener solo esta función de animación donde te dan tiempo. Puedes hacer un montón de lógica. Puedes mover el ratón si está en el margen. Puedes mover las unidades. Puedes actualizar las animations de los sprites. Puedes hacer walla-la-la tu camino hacia la libertad. Y realmente, es en este punto que probablemente deberías haberte dado cuenta de que esto no es realmente acerca de reconstruir Age of Empires II y React. La razón por la que quería hablar sobre este tipo de cosas hoy, el tipo de cosas que aprendes cuando empiezas a jugar alrededor de los bordes de lo que React puede hacer y lo que React no puede hacer, es la verdadera pregunta a hacer es, ¿en qué es bueno React y qué otras herramientas tenemos? Creo que es bastante fácil para nosotros cuando estamos mirando cosas de React decir, debe estar en la API de React. Debe haber una solución de React para esto. Pero tenemos que recordar que, como desarrolladores de React, tenemos una gran cantidad de herramientas en nuestro kit de herramientas. Podemos construir cosas en HTML5.

Podemos construir cosas solo con CSS o Calaveras, por alguna razón, porque no pude pensar en un cuarto elemento para agregar allí. Tal vez las Calaveras es testing, no lo sé. Pero creo que las cosas que puedes aprender al hacer que algo haga cosas terribles pueden ser bastante útiles.

Espero que hayas disfrutado de mi dolorosa experiencia de intentar reconstruir Age of Empires 2 en React, que fue horrible y terrible, y no lo recomiendo en absoluto. Pero espero que puedas encontrar algo divertido para hacer con React que sea completamente diferente de forms o SPAs o cualquiera de esas cosas en las que React es bueno. Ve y haz algo en lo que React sea terrible.

Soy Joe Hart. Si tienes algún comentario sobre cómo se desarrolló esto, por favor házmelo saber en Twitter. Visita mi sitio web o envíame un correo electrónico y ven a charlar. Ha sido un placer absoluto. Gracias. ♪♪