Final Fantasy IX en React: Luchando contra el Navegador, Un Cuadro a la Vez

Cómo usar ReactJS Soy ingeniero web, terminé un trabajo hoy, así que actualmente soy freelance por aproximadamente una semana antes de comenzar algo nuevo. Si quieres hablar conmigo en cualquier momento, y si tienes alguna opinión sobre la charla, puedes ir y hacerlo tú mismo. Tengo Master en el sitio web de Butterfly, correo electrónico, todo eso.

Así que primero que nada, quiero hablarte sobre algunas de las cosas tontas que hago. Muchas personas en su tiempo libre cuando son ingenieros de software, construyen negocios o proyectos paralelos o emprendimientos. Yo no. Hago cosas inútiles. Una cosa que manejo es la Pride Flag API. Si alguna vez pensaste que el orgullo gay y el orgullo queer en general realmente faltaba ser servido a través de GraphQL, esto es para ti. Es tan ineficiente servir SVG Basics a través de GraphQL.

Y luego un par de cosas que aún no he terminado de hacer, pero estas son como ideas que tengo que quiero hacer. Una de ellas es como un simulador de pull request deprimente con temática soviética donde la gente te envía cosas y tienes que revisarlas. Y es como un código con un ambiente horriblemente descuidado y tienes que revisarlo. Pero si no logras que las cosas entren en main, entonces tu familia no es alimentada y podría explotar. Se llama Changes, Please. Gracias. Otro en el que estoy trabajando es uno de mis juegos favoritos mientras crecía eran los juegos de estrategia, así que Command and Conquer. Así que estoy trabajando en un juego llamado Command and Conquer Tiberium Jira, que es un remake sprite por sprite de Command and Conquer Tiberium Sun, excepto que toda la cola de construcción se gestiona con Jira. Tenemos una versión más accesible y amigable para móviles que utiliza Trello. Lo siento para cualquiera que use Trello. No tenemos un ambiente lineal. Lo siento mucho.

Si quieres algo divertido que puedas jugar hoy, tengo algo en mi sitio web. Y esta es la cosa más de nicho que he hecho en mi vida. Se llama Katamari Node Modules. Así que puedes ir y jugar esto en mi sitio web. Puedes ir a joehard.co.uk slash games y básicamente juegas una carpeta de node y tienes que moverte por el mundo, absorbiendo paquetes hasta que te vuelvas tan grande como el sol. Eso es algo que puedes llevarte a casa hoy.

Pero ¿por qué estamos aquí hoy? Hoy estamos aquí para hablar sobre Final Fantasy. Existe el viejo chiste clásico, que es ¿cuántos de ellos tienes que hacer antes de dejar de llamarlos Final? Hay 16 de ellos y estos son solo los juegos principales. Hay algunos jugadores de Final Fantasy que he revisado, pero no necesitas saber nada sobre Final Fantasy para disfrutar de esta charla. Esto estará totalmente bien.

Realmente Final Fantasy, curiosamente, lo llamaron Final Fantasy porque la compañía iba a cerrar y dijeron, este es nuestro proyecto Hail Mary. Necesitamos que esto funcione. Y luego hicieron Final Fantasy y se convirtió en una de las franquicias de juegos más exitosas de todos los tiempos. Es esencialmente un RPG de fantasía que está masivamente inspirado por Dungeons and Dragons, pero a través del lente de ser desarrollado en Japón. Hay muchos de ellos. No voy a hablar de todos ellos. Principalmente quiero centrarme en estos tres.

Estos tres son los juegos de PlayStation 1. Y la razón es que creo que existen en un momento técnico particularmente interesante de así que básicamente del 1 al 6 son todos 2D, sabemos cómo funcionan los juegos 2D, eso está bien. A partir del 10 en adelante tuvimos la PS2 y luego la PS3 y 4 y 5 y tuvimos toda esta capacidad gráfica. La PS1 era una pequeña consola extraña.

Técnicamente podía hacer gráficos 3D pero simplemente no muy bien y tenían estos estándares realmente altos del tipo de cosas que querían hacer en ella y quiero hablar específicamente sobre Final Fantasy 9. La razón es que creo que es el pináculo de todas las cosas técnicas que hicieron en ese material. 7 es el más popular, sé que es el más popular. Ha tenido un remake, ha tenido de todo.

Final Fantasy 9 recientemente obtuvo un álbum de jazz de aniversario, es todo lo que han conseguido. Lo cual me pone muy triste. Pero es el 25 aniversario este año, lo cual es muy emocionante pero quiero hablar sobre cómo estaba adelantado a su tiempo. Estaba haciendo cosas en el año 2000, hace 25 años, de las que Unreal Engine se jacta hoy.

Así que Unreal Engine es como el motor de videojuegos más poderoso, ya sabes, el más popular que puedes obtener en este momento. Y siempre están como oh, podemos hacer iluminación dinámica, podemos hacer efectos de partículas, podemos hacer efectos de agua, podemos hacer rayos de dios. Final Fantasy 9 hizo todo eso hace 25 años. Mira eso. Esa es iluminación dinámica mientras él deambula por la habitación. Además, me encanta el tipo de UX del 2000 donde eres esta cosa con un puntero gigante, es muy divertido. También tenía maravillosos efectos de partículas. Mira, es una tormenta de nieve, es una tormenta de nieve de bastante baja resolución, pero es una tormenta de nieve, lo está haciendo todo.

Y luego esto es de una de mis escenas favoritas donde puedes ver el tipo de agua burbujeante en el lado derecho, dinámica de fluidos en 2000, es increíble. Y luego esta hermosa escena de rayos de dios, así que come tu corazón Unreal Engine, tenemos todo eso allí hace 25 años. Así que si nos sentamos y dijéramos que queremos reconstruir Final Fantasy 9, que es lo que quería hacer, hay buenas maneras de hacerlo. No hice estas cosas. Una buena manera de hacerlo es que deberías usar un motor de juego. Deberías usar Godot o Unreal o Unity, tienen un montón de cosas integradas que harán todas las cosas difíciles por ti.

No voy a hacer eso. Probablemente deberías usar los activos de alta resolución que vienen con el tipo de cuasi remaster que salió en PC, y probablemente deberías usar un lenguaje fuertemente tipado como C sharp, porque simplemente te ayudará a hacerlo mucho más fácil. La razón por la que sé que esta es una buena manera de hacerlo es porque todo un equipo de personas ha hecho esto, se llama Memoria, y básicamente reconstruyeron todo el motor, porque dijeron que esto es malo, no corre a 60fps, vamos a construir todo. Así que no hice nada de eso. En cambio, voy a empezar completamente desde cero. Voy a hacerlo usando todos los activos originales de PlayStation 1, y lo voy a hacer solo usando React, JS, CSS, y luego otra biblioteca de la que hablaré más tarde.

La razón por la que hice esto es que pensé que cuando se trata de este tipo de proyectos paralelos, hacer este tipo de cosas y elegir este tipo de tecnologías es simplemente significativamente más doloroso. Y el desarrollo impulsado por el dolor puede llevarte a lugares a los que nunca pensaste que irías. Así que quiero que retrocedan en el tiempo ahora, imaginen que tenemos toda la tecnología que tenemos hoy, React, todo, y volvemos a 1998. Estamos en el equipo que está desarrollando Final Fantasy 9. No solo nos estamos moviendo en el tiempo, también nos estamos moviendo en el espacio. Vamos a ir al estado insular del Pacífico que desarrolló Final Fantasy 9, que fue en realidad Hawái, curiosamente. Y establecieron una nueva oficina para este proyecto. Consiguieron a uno de los viejos que trabajó en Final Fantasy 1 a 6 para ir a trabajar en este proyecto, y iba a ser un éxito masivo. Spoiler, se vendió muy mal y fue terrible, y lo lamentaron enormemente. Pero ahora es particularmente nostálgico para la gente. Y llegas allí, estás en Hawái, has tenido un día encantador en la playa, y te sientas en tu escritorio y enciendes tu máquina de desarrollo. Solo un pequeño golpe de dopamina para los millennials en la sala.

Así que la Playstation 1 era una pequeña consola maravillosa. Tenía una CPU de 33MHz, el equivalente a una conexión a internet de 2.4Mb a través de la unidad de CD, y tenía 1MB de VRAM. La versión original de esta tarea era que iba a intentar reducir la VRAM del navegador a 1MB, e intentar ejecutar algo, y no se puede. Simplemente no puedes ni siquiera renderizar HTML haciendo eso. Es un tiempo horrible, horrible. Pero entonces, estas son nuestras limitaciones. Esto es con lo que estamos trabajando. Esto es en lo que tuvieron que intentar ajustar su visión. Y Final Fantasy 9 tenía tres modos de jugarlo. Había este mundo exterior a la izquierda, una vista de ciudad, o una vista de área en el medio, y luego una batalla en el lado derecho. No voy a hacer el de la izquierda porque es aburrido, es solo un mundo 3D. Te paseas. Vamos a hacer los otros dos. Así que vamos a empezar con el más emocionante primero, vamos a hacer la vista de batalla. Así que imagina que es 1998, tienen Figma por alguna razón, y te han traído este diseño. Y tú dices, está bien, voy a echar un vistazo e intentar especificar esto. Claramente hay una especie de lista de cosas aquí, hay una lista de cosas allí.

Y podemos hacer mucho de eso solo con HTML. Mira eso, lo hemos hecho, hemos creado Final Fantasy 9. Bueno, no. Así que tenemos que estilizar esto al menos un poco. Pero también, pasé demasiado tiempo debatiendo si eso debería ser una lista ordenada o una lista desordenada. Por favor, no te enojes conmigo si elegí la incorrecta. Pero podemos estilizar la gran mayoría de esto solo usando CSS y HTML, y nos acercamos a la mayor parte de la UI allí. Esto es usando algunas técnicas antiguas que ahora, ya sabes, si solo estás usando alguna biblioteca de UI probablemente no harás la mayoría de estas cosas.

Pero como, puedes hacer el de la izquierda haciendo una imagen de borde encantadora, y luego la cortas a la antigua. Y luego, lo que es realmente interesante es trabajar con los navegadores. El navegador es increíblemente útil. Está tratando de hacer muchas cosas para sortear tus malas elecciones. Así que, con esto, quería pixelar, ahora esto no va a aparecer en esta pantalla, pero confía en mí. Este de la izquierda está más pixelado que este de la derecha. Y eso es porque el navegador, por defecto, espera, esos están destinados a ser intercambiados, lo siento.

Así que el navegador, por defecto, si subes una imagen, está tratando de suavizarla. Le has dado como cien píxeles para una imagen de héroe, y es como, está bien, déjame arreglar eso para ti. Pero no quiero eso. Quiero que se vea como una PS1. Quiero que sea bloqueado. Quiero que sea 320 por 240. Puedes hacer esto diciendo image rendering pixelated, y apagará todo ese filtrado, que es lo que queremos. Y luego también, porque es HTML, obtienes muchas cosas gratis. Así que cuando quieres tener ese pequeño puntero que mencioné antes apuntando a las cosas mientras bajas con la pestaña, puedes simplemente usar un efecto de enfoque. Así que puedes simplemente hacer, como, button focus, after, y luego renderizar una pequeña cosa allí. Ni siquiera tienes que escribir ningún JavaScript o React.

¿Qué tan bueno es eso? La única parte muy complicada de esto fue obtener estos números. Así que todos los otros los pude encontrar en fuentes, pero tuve que obtener la hoja de sprites original, sacar esos números. Pero luego en CSS, CSS tiene soporte para hojas de sprites, lo cual había olvidado por completo. Pero donde básicamente puedes establecer una URL como imagen de fondo. Así que hice, como, cada span tiene un ocho, como, en números, del uno al nueve, para que un lector de pantalla aún pueda leerlos, aún muy accesible. Pero luego le doy una clase de ocho o cuatro, y luego básicamente solo estableces la imagen de fondo y luego le das una posición de fondo calculada sobre qué número es. Así que si es ocho, se mueve esa cantidad, y obtienes las mismas cosas.

Ahora, estoy seguro de que estás mirando todas esas imágenes diciendo, Joe, no te creo. No creo que hayas hecho ninguna de esas cosas. Así que déjame echar un vistazo rápidamente a nuestra pequeña demo de UI. Porque lo maravilloso de hacer todo en React es que significa que puedes ponerlos en Storybook. Así que tienes, aquí está nuestro pequeño medidor ATB, oh, ¿puedo agarrarlo? Sí, y puedes hacer, ooh, mira eso, subiendo y bajando. Puedes hacer, no puedo ver eso un poco. También puedes obtener la visualización de números de la que hablé antes. Déjame acercarme un poco para ti, lo siento. Así que tenemos eso allí, y luego tenemos nuestro panel de comandos, que incluye... ¡Vamos! Para las personas que acaban de entrar, eso parecería increíblemente extraño. Así que también obtienes el estado de tu grupo, donde eso es solo una tabla renderizando cosas. Y luego podemos juntar todo eso en una pequeña UI bastante buena aquí. Así que ahora puedes tabular, presionar Enter e ir a atacar a alguien. Ahí vamos, hemos hecho toda la UI. Así que si cierro eso...

Ahora llegamos a la parte divertida. Queremos hacerlo interactivo. Esto es React después de todo, queremos reaccionar a las cosas. Así que queremos hacer esta escena de batalla, y nos hemos perdido todo este hermoso material 3D en el fondo. Ahora, antes de llegar a la parte 3D, necesitamos ejecutar el juego, de la misma manera que estás construyendo cualquier tipo de interfaz, necesitas tener algún tipo de estado, y somos ingenieros de React así que tendremos un hook llamado UseBattleSystem, y necesitas hacer un seguimiento de todos los diferentes elementos y los ataques y todo esto, así que esto es más complicado que solo usar algunos use states. Así que obtendremos un gran reducer que haga todo esto. Confía en mí, funciona. Y básicamente el verdadero truco aquí es, tomas este gran reducer, y vamos a crear un bucle de juego con él.

Este código no es esencialmente importante, pero vamos a usar requestAnimationFrame, que si alguna vez has hecho algo en la web donde quieres algún tipo de animación fluida cuando estás haciendo algo, simplemente te permite llamarte a ti mismo y llamarte a ti mismo y llamarte a ti mismo obteniendo un delta de tiempo en el medio, lo que básicamente significa que haces algún tipo de cosa, en nuestro caso, vemos quién está atacando a quién y si alguien está listo para atacar o no atacar, y luego esperamos una cierta cantidad de tiempo y volvemos a empezar. Y eso significa que podemos animar perfectamente de manera fluida. Así que al hacer eso, obtenemos esto. Esto es como Final Fantasy IX sin cabeza ejecutándose. Podrías hacer esto en algo como un CI o algo donde la gente está atacando, estás haciendo cosas, Vivi está siendo absolutamente destrozado por el Cactuar. No es un buen momento.

Así que eso no es muy emocionante. Queremos algo de 3D. ¿Cómo hacemos eso? Ahora, hacer 3D en la web es complicado, para ser perfectamente honesto. La forma básica de hacerlo, y digo básica como en la forma más primitiva de hacerlo, es WebGL, que ese es el código para renderizar un cubo en WebGL. No queremos hacer eso. Así que, todos recurren a 3JS, solo cuatro líneas para renderizarlo. Eso también es muy encantador. Pero esto es JavaScript. No queremos JavaScript, queremos React. Queremos poder conectarnos a nuestra encantadora cosa de estado que construimos. Por supuesto, porque somos ingenieros de React, y de hecho hoy somos ingenieros avanzados de React.

Ese es el peor chiste de todo. Pasarás el peor punto. Estás bien. Así que, la pieza de tecnología que vamos a usar es un renderizador personalizado. Si estuviste aquí esta mañana, habrías escuchado a Eric hablando sobre renderizadores personalizados para React, siendo el predeterminado React DOM. Vamos a usar React 3 Fiber. Esto se conecta al estado y luego nos permite reaccionar a las cosas y lo hace súper fácil y encantador. Esta es la cantidad de código que necesitas para renderizar un cubo en React 3 Fiber. Es un poco más que solo usar 3JS, pero obtienes estado con ello. Pero requiere que cambiemos un poco nuestro modelo mental entre cómo estábamos pensando sobre cómo funcionaba antes.

Donde tienes renderizado del navegador, que son cosas como animaciones CSS, efectos de hover, cosas así. Y luego tienes renderizado de React DOM, que es como cambios de estado, uso de efectos que van para siempre y siempre, y está destruyendo el DOM y haciendo todo este trabajo pesado, mientras que el navegador es muy ligero y muy rápido y muy eficiente. Y ahora estamos agregando este nuevo llamado renderizado de React 3 Fiber. Que básicamente, como escuchamos esta mañana, hace un renderizado, lo reconcilia contra la escena de 3JS. Y básicamente hay dos maneras en que puedes hacer que la escena 3D reaccione. La primera es hacer el buen estado a la antigua. Esto tiene sentido para cuando VV está atacando, alguien se está moviendo, algo importante está sucediendo, o estamos cambiando el color de esta cosa en particular. Y luego la otra forma es que puedes interactuar con ella a través de refs, que usa una cosa llamada use frame, y almacenas una ref de la malla que estás cambiando. Esto es realmente bueno para rotar algo, o hacer flotar algo, o reproducir una animación de batalla, o algo así.

Así que luego actualizamos nuestro modelo donde básicamente el renderizado de React 3 Fiber es muy similar al renderizado del navegador. Ahí es donde deberías hacer todo rápido, todo lo que necesita suceder a menudo. Solo quieres hacer tus cosas grandes y pesadas dentro de React, y luego todo lo demás en los otros. Así que, echemos un vistazo a cómo se ve eso con 3D también. Oh, recordé la pantalla, increíble. Así que aquí tenemos una escena 3D de algunos cubos peleando. Su salud está representada por el tamaño de ellos, y puedo entrar aquí y puedo ir y atacar al cactuar, y está dañado, encantador. Esto no es tan genial. Lo que queremos es un poco de modelos 3D. Aquí vamos. Ahora tenemos a VV, y tenemos un cactuar, y también lo encantador es que ellos mismos son solo pequeños componentes. Así que aquí hay una pequeña historia para VV, y puedes ir y ver cómo se ve en reposo, o caminando, o corriendo.

Y luego realmente quieres... esto no es particularmente emocionante, están peleando en un gran cubo, no está pasando nada realmente. Pero si agregas un fondo y un poco de música, ¡de repente se siente mucho como Final Fantasy IX! No pude obtener el efecto de sonido real del juego. No, no pude. Creo que el cactuar va a ganar esa pelea. No voy a dejar que eso se desarrolle. Pero ahí vamos, ¡tenemos la mayor parte de la escena de batalla funcionando en Final Fantasy IX! Hay una extraña economía de aplausos en que el único efecto de sonido anterior fue como, ¡eso es increíble! Y luego una escena 3D completa es como, hmm, está bien, muéstranos más. Bueno, te mostraré más. Esto creo que es la parte más genial.

Así que construir una escena 3D es normal, eso es estándar. La gente hace eso todo el tiempo. Pero lo que queremos hacer es construir estas escenas. Mencioné antes lo buenas que eran estos gráficos. Estaban haciendo cosas que simplemente no podías hacer en el año 2000, nadie más lo estaba haciendo. Entonces, ¿cómo logró Squaresoft crear gráficos en tiempo real que lograron hacer rayos de dios y simulaciones de líquidos y iluminación dinámica y todo eso? ¿Cómo lograron resolver ese difícil problema de computación? No lo hicieron. La forma en que lo hicieron fue que miraron las limitaciones de su Playstation, eran como, bueno, no podemos actualizar la CPU, no podemos cambiar la RAM o la VRAM, pero podemos agregar más discos. Porque son 660MB por disco. Así que cuando salió Final Fantasy IX, salió en cuatro discos, y lo que hicieron fue que en lugar de renderizar toda esta escena en 3D, los únicos elementos 3D aquí son este personaje y este personaje escondido en el tronco del árbol si puedes verlo allí, el resto es una imagen fija. Así que cada ubicación a la que ibas en Final Fantasy IX era una imagen fija. Lo cual, por supuesto, es muy muy grande, pero solo le pides a la persona que lo usa que reemplace el disco. Si estás luchando por imaginar esto, una buena manera de pensarlo es como las viejas películas donde están mucho en un backlot o algo y están proyectando algo detrás de ellos, y se ve bastante bien. También descubrí esta animación en PowerPoint. Oooh. Eso es esencialmente lo que estamos haciendo. La razón por la que creo que Final Fantasy IX es el mejor en esto, es porque primero hicieron estas escenas pre-renderizadas. Así que esta es una escena 3D que hicieron, la enviaron a una computadora grande grande grande que probablemente no es tan buena como tu teléfono para renderizar esto. Pero luego, pintaron a mano sobre ella. Así que estos son solo dibujos artísticos pintados a mano. Y creo que hicieron, como, esa es la predeterminada. ¡Mira eso! Eso es mucho mejor, creo que es absolutamente hermoso. Así que queremos hacer eso en la web. Así que podemos renderizar una escena 3D, podemos renderizar cosas 2D simplemente por defecto fuera de la escena 3D, pero necesitamos algunas cosas para hacerlo. Así que necesito ir y sacar un montón de activos del juego, incluyendo estas cosas llamadas caminos de caminata, que es como pueden caminar alrededor del mundo 3D. Y luego necesitamos juntarlo. Así que sacas esta imagen del juego, pero no es una imagen, es un tiff de cosas en capas, donde cada una de ellas es una cosa diferente. Así que si Vivi va al fondo por allí, va detrás del área. Y los separamos todos, y queremos juntarlos. Así que. Esta es la gran demostración donde voy a mostrarte todo desde el primer cubo siendo renderizado hasta una especie de recreación del comienzo del juego, donde Vivi está yendo al teatro para intentar ver algo.

Espero que esto funcione. Así que, aquí vamos. Comienzas muy bien con solo, como, un pequeño cubo. Déjame acercar un poco, ahí vamos. Donde solo tienes un pequeño cubo y puedes mirar alrededor de él, eso no es muy emocionante. Pero queremos agregar el camino de caminata. Así que hemos cargado nuestro camino de caminata, ese es el tipo de pasillo por el que vamos a estar deambulando alrededor. Y luego queremos mover nuestro cubo alrededor. Así que podemos hacer esto, lo cual es muy emocionante. ¡Pero se sale del borde! Eso no es muy bueno, no queremos que eso suceda. Así que hacemos algo llamado ray casting, y ahora nuestro cubo no se sale del borde, lo cual es muy agradable.

De la misma manera, si estás luchando por imaginar cómo funciona eso, de la misma manera si tuviera un palo, podría golpear debajo de mí. Y cuando llegara aquí, sabría que estoy al borde del escenario, así que no me caeré. Es el mismo tipo de cosa. Y luego queremos hacer que esto funcione con la malla. Así que ahora ves, él va por aquí, no se cae. Sube por aquí, ¡y realmente sigue subiendo! Y luego queremos hacer que esta sea una cámara fija también, porque no queremos que la escena se alinee con nuestra imagen de fondo. Y luego queremos cargar la imagen de fondo.

Eso es todo lo que es. Es solo un ejemplo de dónde está. Hay algo divertido aquí que no voy a mencionar porque me voy a pasar un poco de tiempo de todos modos, pero hazme una pregunta sobre eso más tarde. Así que ahora vamos a superponer la escena una encima de la otra. Ahora, este fue el único dato que no pude extraer del juego, así que tuve que alinear manualmente esta cámara! ¡Fue exasperante! Pero ahora tenemos nuestro cubo corriendo alrededor. Pero no queremos un cubo corriendo alrededor, ¡queremos a Vivi corriendo alrededor! Aquí vamos, él está corriendo por ahí. Y ahora correrá alrededor, y se detendrá en la parte de atrás. También añadí algo... solo corre a 15 FPS, que es la tasa de fotogramas en la que Final Fantasy 5 corría. Y luego tienes a Vivi en el camino de caminata. Y eso también está funcionando, y luego lo superponemos en la escena. Pero ves, eso no está alineado.

Pero si alineas la cámara, ahora parece que él realmente... puede subir las escaleras, pero se está renderizando frente a esas escaleras. Eso no es lo que queremos. Entonces, ¿cómo superpones cosas en el navegador? Bueno, podemos usar un Z-index. Así que si vas por aquí hacia atrás ahora, toda esta cosa baja en Z-index, y luego él ahora puede moverse por aquí. Y así básicamente leo la posición Z 3D de Vivi en la escena, y altera una variable CSS en la parte superior, y luego se mueve hacia atrás y hacia adelante. Me encanta esto, porque hay varias personas en la audiencia diciendo, como, eso es genial. Y yo estoy como, no hay otro lugar en este mundo donde eso sería genial. Es la cosa más de nicho de nicho. Y luego eso solo lo muestra sin ser renderizado, lo cual es muy encantador.

Pero, dije que te mostraría... ¡No, vete, controles! Quería mostrarte aquí. Así que he intentado recrear la primera escena del juego con un poco de música también, y podemos hacer que Vivi corra alrededor, y él puede ir por aquí un poco despacio. Pero luego vas por aquí a la plaza central principal... ¡Oh, mira esto! Necesita ir a conseguir su boleto para el teatro esta noche. Así que va hacia el tipo, y habla con él. ¡Oh, ese boleto que tienes es falso! ¡Aquí tienes un boleto para React Advanced! ¡Es un evento mucho mejor! Bueno, está bien, no recuerdo eso en el juego original.

Pero si caminamos por aquí, porque lo interesante de estar en la web es que puedo hacer cosas en la web que no puedes hacer en otros lugares. Puedes conectar dispositivos, puedes renderizar cosas que normalmente no se renderizan en otros lugares. Así que podemos venir por aquí, y podemos ir y echar un vistazo a Vivi en React Advanced! Y espero poder... ¿Es eso...? ¡Oh no, estoy en el camino! ¡Oh, estoy tan oscuro! Es la cosa más tonta que he hecho en mi carrera.

Así que, está bien, voy a concluir. ¿Recreamos todo Final Fantasy IX en React? No. Nos faltan bastantes cosas aquí. Realmente no llegamos a hacer ningún diálogo o cosas de fondo. Nos divertimos un poco, pero un poco fuera del juego. Pero realmente es un ejercicio interesante, porque aprendes bastantes cosas al respecto. En primer lugar, las limitaciones en las que trabajaron en ese momento estaban aquí, y eso sigue siendo algo muy relevante para nosotros. Pero nuestras limitaciones han cambiado. Ahora no tenemos limitaciones en cuanto a poder de cómputo, o gráficos, o algo así. Nuestras limitaciones son más sobre si nuestro usuario tiene un teléfono similar al nuestro, o si su señal es muy buena, o si tienen necesidades de accesibilidad, o cosas así. Y luego el otro aprendizaje importante cuando hice esto, porque hice esto antes en una conferencia donde rehice Age of Empires II en React.

Y eso fue bastante fácil. Era isométrico, 2D, muy encantador. Esto fue muy difícil. Hacer cosas en 3D en la web es simplemente horrible. Es una experiencia horrible. Y lo que me entristece de eso es que no hay un buen... Y realmente no es culpa de React allí, porque en realidad React 3 Fiber es una forma realmente encantadora y declarativa de renderizar escenas 3D. Mientras que simplemente me entristece que el renderizado normal del DOM, si tienes este JSX en React, obtienes este HTML. ¿Y no es encantador? Puedes recorrer este mapa de cosas, y obtienes la cosa al otro lado. Es súper fácil para tu cerebro pensar, ¿cómo se relaciona el tercero aquí con esto? Oh, será cuando lleguemos al tercero en la lista. Pero cuando renderizas algo en React 3 Fiber, o en cualquier tipo de cosa de 3GS, simplemente termina siendo un canvas. Y luego es ahí donde toda la accesibilidad y la semántica van a morir. También significa que si tienes un agente de codificación de IA, él dirá, no sé. El cubo está en el lugar equivocado. Él dirá, está bien. No puedo ver eso. ¿Y no sería genial si hubiera algún tipo de lenguaje de marcado donde lo escupieras de React 3 Fiber y realmente te diera un canvas y una cámara y mallas y cosas así?

Sí, eso es correcto. Esta no es una charla tonta y divertida. Es una charla sobre estándares web. ¡Al final del día! Curiosamente, en 1995, hicieron una especificación llamada lenguaje de modelado de realidad virtual, que estaba muy adelantada a su tiempo. Mucha tecnología sucede demasiado temprano en el mundo. Estamos muy cerca de obtener un poco de 3D semántico en la web. Desafortunadamente, está patrocinado por Safari y Apple, así que todos lo odian. Pero aparte de eso, creo que es una especificación realmente genial donde puedes decir que hay una imagen 3D aquí, y vuelves a una imagen, o cosas así. Creo que si tuviéramos más estándares web que pudieran hacer 3D bien de una manera semántica, sería menos doloroso, y un poco más divertido.

Y eso es básicamente todo. No tengo nada que venderte. No tengo un boletín ni nada por el estilo. Solo tengo un mandato. Solo deseo que salgas al mundo y hagas cosas tontas.

Creo que deberías hacerlo. Es muy divertido. Es más fácil que nunca hacerlo, y también ve y juega Final Fantasy IX. Es fantástico. He sido Joe Hart.

Ahora tendremos una sesión de preguntas y respuestas. ¿Cuánto tiempo te llevó llegar a esta etapa? Porque dijiste que es muy tonto. Es muy complicado de hacer. No es agradable, pero el resultado final es fantástico.

Fue como cocinar en mi cerebro durante unos meses antes de que comenzara a echarle un vistazo adecuadamente. Comenzó originalmente como, quiero intentar hacer un navegador web con la VRAM que tenían de la PS1, lo cual fue simplemente, no. Ni siquiera pude reducir la velocidad de un Raspberry Pi para tener solo un mega de VRAM. El kernel no te deja ir tan bajo.

Solo comencé a jugar con eso, y luego muchas noches muy largas tratando de llevar esta cosa a este punto. Incluso solo conseguir los activos fue un ... Hay una gran escena de modding, pero eso tomó mucho tiempo de poder ... Tienes que encontrar la imagen. Tienes que sacar la cosa. Todo simplemente tiene IDs aleatorios. Aquí es donde el problema de que Final Fantasy IX sea menos popular que Final Fantasy VII es un problema. Final Fantasy VII, hay este manual técnico realmente interesante que estas personas han hecho en internet que tiene como 200 páginas. Cada byte en ese disco es como, esto es lo que hace. Este es el nombre de ello.

Es increíble. No hay uno para Final Fantasy IX, y eso me puso muy, muy triste. A medida que te adentras en este agujero de conejo, ¿qué ideas tienes a continuación que ejecutarás? ¿Como en más cosas de videojuegos? Sí. Creo que me encantaría hacer algo de Pokémon, pero Nintendo me asusta. Te van a aplastar. Sí, sí. Estoy como, simplemente no puedo dejar eso por ahí. Age of Empires, he hecho estrategia, he hecho RPG. Me encantaría hacer una especie de cosa de FPS. Pero también, Doom se ha hecho mil veces en diferentes cosas, pero hacer algo como, ¿puedo hacer Halo en el navegador? Subir una generación desde eso. Creo que sería bastante interesante, pero ya veremos.

Muy genial. ¿Qué tan sensible es la posición de la cámara en primer lugar? Es tan... Intentar hacer ingeniería inversa de la posición de la cámara de la cosa es increíblemente difícil. Porque es una función tanto de la posición como de la rotación, y luego las posiciones en la escena. Y probé un montón de... Hay algunas herramientas de ingeniería inversa realmente interesantes donde puedes dibujar líneas de perspectiva y decir, está bien, con esto, esto. Pero para estas cosas, simplemente no funcionó porque son como dibujadas a mano y como realmente... Y no sé el FOV de la cosa. En algún lugar de ese disco está la información que necesito. Pero fue una de esas cosas en las que pasé como tres días tratando de encontrarlo. Y estaba como, lo haré yo mismo. Lo prometo. Sí, entendido. Bien, genial.

¿Correrá en... ¿Correrá Crysis? Eso debe ser una referencia. Entonces, Crysis es un videojuego de, creo, también de hace mucho tiempo. Creo que tal vez hace 10 años, si no más. Era muy, muy difícil de jugar en ese momento.

Y ahora puedes jugarlo en un Nintendo Switch, lo cual es profundamente preocupante. Está bien. Buen material. No tenía idea de qué era eso, para ser honesto. No muestra mi edad. Sí.

¿Cómo inicias un proyecto que es tan masivo? ¿Lo planificas en tickets y partes? ¿O cómo no te aterroriza el tamaño de esto? Oh, tienes que gustarte el terror. Como que tienes que mirar la cosa y decir, eso no es posible. Y solo... Y también, creo que eso es lo que quiero decir sobre hacer una cosa tonta es como no solo en la tarea es tonta, sino como liberarte de las restricciones que tienes en tu trabajo diario de como, no tienes que hacer los tickets. No tienes que hacer pruebas de extremo a extremo. No tienes que hacer pruebas unitarias. Puedes escribirlo en puro JavaScript sin ningún tipo. No. Es extrañamente más fácil de usar. Es simplemente más fácil usar TypeScript. Pero creo que simplemente me gusta ir comiendo el elefante lentamente. Tengo como, está bien, aquí está esta cosa. ¿Cómo obtengo los activos para ello? Eso es lo primero. E incluso solo haciendo eso, probablemente sea como un blog de diversión del que puedes venir y hablar. Y luego simplemente sigues hasta que llega el día de la conferencia, o te cansas profundamente y dices, no puedo hacer esto más.

Necesito algo más emocionante. Bueno, ya el hecho de que digas, está bien, sé cómo, cuál es el primer paso, déjame obtener los activos para ello de alguien que no tiene ningún conocimiento, pero quieren hacer cosas tontas. ¿Cuál es tu consejo entonces para que comiencen? ¿Cuál es el primer paso? Creo que con la mayoría de las cosas, especialmente en cosas creativas, y creo que programar así y programar en general es una cosa muy creativa de como imitar a la gente de como, ve y haz una copia de Pac-Man en JavaScript, ve y haz, y eso es más complicado de lo que piensas que es. Hay muchas pequeñas cosas que harás en ello. Y luego descubrirás cosas que hicieron en el juego original o como ve y haz Tetris o, o intenta hacer algo o haz un videojuego personal de como, uh, hubo una conferencia hace un par de años llamada FFConf en Brighton donde el organizador hizo un videojuego de la conferencia como un regalo para todos los oradores, lo cual fue simplemente increíble como, puedes hacer videojuegos para tus amigos y puede ser solo una cosa a pequeña escala. Y lo mismo con como, si hiciste Dungeons and Dragons para cuatro de tus amigos, puedes hacer un videojuego para cuatro de tus amigos, especialmente en estos días de como es tan fácil ir y como empezar cosas. Y también si hay algo que se ha hecho antes, habrá guías y herramientas y cosas de como, aquí está cómo lo haces. Y luego vas, ¿cómo lo arruino? ¿Cómo lo cambio? ¿Cómo lo rompo? ¿Cómo le agrego algo? Perfecto.

Impresionante. Gracias por compartir. Veamos. ¿Cómo pixelarías la vista de React 3 fiber para un efecto de ocho bits? Ooh. Bueno, lo interesante es que React 3 fiber tiene un montón de filtros encantadores y cosas y shaders como, um, especialmente también, así que hubo un punto en esto donde iba a ir por uno de dos caminos, terminé haciendo, solo renderiza 320 por 240, pero hoy en día puedes obtener shaders CRT 4k realmente buenos donde toma toda tu pantalla 4k y renderiza cada píxel individual de una manera que hace que se vea como un monitor CRT, lo cual es como simplemente una locura. Como la cantidad de poder de cómputo que estás usando para emular algo que era pequeño es absolutamente ridícula. Um, pero especialmente porque, como, porque React 3 fiber es solo three JS envuelto en algunas cosas, cualquier cosa que puedas hacer en three, puedes hacer en React 3 fiber. Así que me adentraría en el agujero del conejo de ir como 3js, filtro de ocho bits, y luego probablemente habrá como siete de ellos y elegiría uno de la estantería y luego simplemente lo metería en React y deberías estar bien. Es agradable que funcione así. Sí. Oh, encantador. Es divino.

Absolutamente. Si pudieras ignorar ciertas restricciones, ¿cuál sería tu juego de ensueño para rehacer en la web? Oh, gran pregunta. Creo que sería Halo tres y específicamente el multijugador de Halo tres para que pudieras simplemente imaginar si solo juegas Halo tres multijugador en cualquier momento con las personas a tu alrededor, eso sería increíble. Sí. Quiero eso. Y me pone triste que nunca tendré eso. No sé. Tal vez algún día. En algún momento. Tal vez. No sé. Siempre lo estoy construyendo.

Podría ser. Sí. ¿Sientes que habrías disfrutado resolviendo todos los problemas de renderizado y rendimiento más que lo complejas que se vuelven estas cosas incluso más en la actualidad? Oh, totalmente. Creo que no tengo la inteligencia o la capacidad para ser como un ingeniero gráfico adecuado, adecuado de como, soy como un fanático de los gráficos de como, me encanta leer sobre cómo resolvieron la cosa.

Mientras que es como si te sentaras allí y no supieras el camino a seguir, no tengo idea de cómo descubrirías muchos de estos tipos de técnicas. Mientras que es encantador volver atrás y decir, ¿hicieron qué? Y hicieron esto y realmente conectaron esto con aquello y luego obtuvieron esa cosa del otro lado.

Como, como recientemente, no es una cosa de renderizado, sino una cosa web de que recientemente leí el nuevo libro de Tim Berners-Lee y trata sobre cómo creó la World Wide Web en los años 90. Y hay tantas cosas encantadoras de eso. Es una idea genial. Pero igualmente, si me hubiera sentado allí en 1995, habría pensado, oh no, la web no existiría.

Muy bien, entonces. Pregunta final. ¿Hay alguna biblioteca que estés emocionado de probar para tu próximo proyecto de dolor? Curiosamente, creo que probablemente quiero volver a una biblioteca que solía usar mucho, que era processing o processing JS de hace mucho, mucho tiempo. Hice un grado en diseño e hicimos muchas cosas con processing allí. Y puedes hacer mucho cuando ML era divertido y como buenas vibras de como, era simplemente como puedes hacer reconocimiento facial en este opens CV de como hacer algo donde la entrada es como una cámara web o algo así. Y es menos de videojuegos, pero más puede leer todo tu cuerpo y hacer cosas y tú puedes ser el controlador como, sí, como recrear Microsoft Kinect o Wii Sports, pero usando una cámara web o algo así sería muy genial.