Desarrollo de Juegos con Threejs

Hola, mi nombre es Anderson Mancini, y gracias por unirte a mí en el JS Game Dev Summit. Hablaremos sobre el desarrollo de juegos con 3JS y cómo puedes comenzar tu viaje aprendiéndolo. Así que vamos a sumergirnos de lleno.

Por cierto, soy un desarrollador creativo de 43 años de Brasil, y soy fundador y CTO de Neltix, una empresa que tiene su sede en Brasil, por supuesto, como un estudio creativo, y trabajo con empresas que buscan formas de aumentar el compromiso a través de interacciones digitales, y diría que por eso el juego suele ser parte de mi rutina diaria en mi trabajo. Y quiero hablarte sobre cómo terminé conociendo 3js de todos modos. Suelo decir que soy un desarrollador atrapado en el cuerpo de un diseñador, como he trabajado con diseño UI y UX desde que tenía 18 años, pero mi verdadera pasión siempre fue el modelado 3D. Me encanta esto. Y estaba buscando una manera de cómo podría combinar mis habilidades de modelado 3D que adquirí a lo largo de los años con mi experiencia en juegos. Y hace unos cuatro años, decidí llevar mi conocimiento de modelado 3D a la web de alguna manera. Y siento que la mayoría de los sitios web en mi país especialmente, perdieron su atractivo después de que macro media flash se volvió obsoleto. Y macro media flash era lo que estaba usando cuando estaba creando mis cosas antes de comenzar en este viaje. Y luego me di cuenta de 3GS. Así que fue increíblemente difícil encontrar a alguien para contratar para mi empresa en ese momento. Y luego decidí aprenderlo yo mismo, para intentarlo. Y lo que comenzó como este esfuerzo de aprendizaje muy rápidamente se convirtió en esta obsesión apasionada. Y por eso estoy tan emocionado de estar aquí, para darte algunos consejos en tu viaje, intentar enseñarte cómo mejorar tu forma de aprender 3GS, y mostrarte que aprender esto puede ser tanto accesible como muy gratificante.

Así que hablemos de qué es 3GS de todos modos. Entonces, 3GS es una biblioteca de JavaScript de código abierto. Se utiliza para crear experiencias interactivas en 3D en tu navegador. Y fue creada por Ricardo Cabelo en 2010. Y ahora es mantenida por cientos de desarrolladores en todo el mundo. Diría que yo incluido de alguna manera. Y abstrae la complejidad de WebGL, que es como una forma muy compleja de crear 3D para la web. Pero básicamente eso significa que podemos ejecutar aplicaciones aceleradas por GPU sin ejecutar o instalar nada extra en tu computadora, lo que significa que no se necesitan plugins adicionales. Y es multiplataforma, lo que significa que tu trabajo puede ejecutarse en cualquier navegador. Y diría más que navegadores. Cualquier navegador moderno puede soportar 3GS. Y podemos extenderlo usando bibliotecas de física, bibliotecas de animación, y muchas más cosas. Así que puedes añadir funcionalidades a esta aplicación, a esta biblioteca. Y veamos cómo se ve en el código.

Así que puedo mostrarte un ejemplo simple, un ejemplo muy simple, de cómo se ve en el código. Este es un ejemplo simple. Sé que no es emocionante en absoluto tener un cubo giratorio en tu pantalla, pero quiero mostrarte qué pequeño es el código que necesitas para renderizar un cubo giratorio en tu pantalla. Y todo lo que está escrito allí, básicamente está tratando de imitar algo que sucede en nuestra vida real. Así que si fuera en la vida real, sería como un estudio o como un estudio de grabación de películas.

Así que para empezar, necesitas tu escena. Así que necesitas tener un lugar para grabar tu película. Luego necesitas como una cámara para grabar cosas. Luego necesitas un renderizador para que puedas ver lo que está siendo grabado por esa cámara y luego tienes actores u objetos que estarán grabando. Y esto es exactamente lo que está sucediendo en esas líneas. Así que es muy sencillo de entender usando esta comparación.

Y también quiero hablar sobre React 3 Fiber. Así que React 3 Fiber, probablemente es más adecuado para ti si estás más familiarizado con el framework React y veremos por qué. React 3 Fiber, por supuesto, es un renderizador de React para Three.js. Fue creado por Paul Hanschell en 2019 y ahora es mantenido por cientos de desarrolladores para la comunidad de miembros de point. Y puedes construir tus escenas usando componentes para mantener todo más legible y más organizado. Veremos un ejemplo en unos minutos. Así que tus componentes pueden ser reutilizados. Tiene un ecosistema extremadamente extenso con muchas cosas nuevas siendo lanzadas como cada semana, diría yo. Y tenemos muchos ayudantes creados por otros desarrolladores que están disponibles de forma gratuita para que los usemos. Y podemos ver como un ejemplo en el código. Este es el mismo cubo de rotación, no emocionante en absoluto pero ahora estamos usando React Tree Fiber. Y como puedes ver, es mucho más organizado y compacto porque está usando componentes para estructurar todo. Así que por supuesto, donde el principal, el componente MyBox está usando una composición. Así que todo lo que se necesita para ese componente específico está compactado o empaquetado en esta cosa de componente aislado. Y luego puedes importar eso en tu lienzo y tienes la misma escena. Y aquí hay un ejemplo de una comparación entre FreeJS que ya es corto y React ThreeFiber. Así que por supuesto es más simple porque está usando componentes pero lo que está sucediendo aquí, es básicamente el mismo código. Todo está simplemente organizado de una manera diferente para que puedas obtener una mejor comprensión y un mejor uso de la biblioteca. Y no estoy tratando de convencerte de usar React ThreeFiber o React, solo estoy diciendo los beneficios de usar composiciones en tu trabajo.

Y cuál es otra belleza de los componentes porque son fáciles de reutilizar. Así que si quieres otro cubo en tu pantalla, todo lo que tienes que hacer es duplicar esa línea y luego tienes otro cubo giratorio. Y por supuesto puedes pasar props. Así que puedes cambiar propiedades desde el componente interno desde fuera, lo cual es genial para mantener todo organizado.

Y por supuesto, como te mencioné, tenemos componentes de Dray. Dray es una colección de componentes en crecimiento como N ayudantes que puedes importar a tu escena y es gratis para usar. Así que si quieres tener controles de órbita, como tengo en este ejemplo, podemos rotar alrededor ahora en esa escena. Todo lo que tenemos que hacer es importar controles de órbita de la biblioteca Dray y es así de simple. Y si quieres, por ejemplo, tener nubes en tu proyecto o tu juego, no necesitas codificarlo como alguien ya lo hizo por ti. Simplemente importas el componente de nube también de Dray y luego lo añades a tu lienzo. Y es tan simple como eso. Y Dray tiene más de 150 otros ayudantes como este para que los uses. Así que el secreto es conocerlos visitando la documentación de React TreeFiber.

Y veamos ahora algunos ejemplos más emocionantes de cómo puedes usar React TreeFiber y FreeJS y qué puedes construir con esta biblioteca. Así que veamos. Estos son algunos ejemplos de mis proyectos recientes. Y como puedes ver, tenemos como la visualización de viajes. Tenemos configuradores de productos como el de GSI Games Sim Industries con ese hermoso controlador de volante para simulación de coches. Es increíble ver cosas como esa funcionando en tu navegador sin instalar ningún plugin en absoluto.

Y estos son otros dos ejemplos como uno para Dairy Farmers of Canada del proyecto reciente de Neltic y el Showroom Automotriz de Immersive Studios. Y todos estos están impulsados por FreeJS. Y nuevamente, funcionan con un gran rendimiento sin instalar nada extra en tu navegador. Puedes visitar esas direcciones, esos enlaces simplemente buscándolos en Google, si quieres. Y si quieres ver más ejemplos como este puedes visitar mi sitio web en salmansinha.dev o freejs.org, que es increíble para obtener ejemplos. Tienen muchas demostraciones en su página de inicio. Así que definitivamente deberías echarles un vistazo.

Y por supuesto, estamos aquí para hablar de juegos, no de proyectos. Y sí, puedes crear juegos usando FreeJS. Y veamos algunos ejemplos de juegos creados usando esta biblioteca. Aquí tenemos dos ejemplos asombrosos de Mercy y Mitchell. Y son tan hermosos que es difícil creer que funcionan en tu navegador y no necesitas instalar nada extra. Así que son realmente, realmente buenos. Y aquí hay algunos más ejemplos. Tenemos el Elysium de Blizzard, que fue lanzado, creo, el mes pasado. Y luego también tenemos Choo Choo World de Ellusion. Estos también son grandes ejemplos. Algunos de ellos también son multijugador. Así que definitivamente deberías echar un vistazo a esos enlaces y ver por ti mismo cómo funcionan y qué tan hermosos son. Realmente parecen una aplicación, no un sitio web. Y para más juegos como este, tú también deberías visitar este sitio web, WebGamer.io, que tiene muchos otros ejemplos de juegos usando 3Ds. Y quiero aprovechar esta oportunidad para hablar contigo sobre el desarrollo creativo, no solo el desarrollo de juegos. Así que estoy creando este juego con mi amigo Leandro Castanho de Argentina. Y esto será lanzado pronto.

Quiero mostrarte un poco del proceso creativo. Comenzamos reuniendo muchas referencias y tratando de definir un estilo para un juego. Por supuesto, tuvimos esta idea de construir un juego de máquina de pinball usando FreeJS. Y usamos, en este caso, inteligencia artificial para obtener referencias y diseños potenciales para el juego.

Luego comenzamos recopilando activos o creando nuevos activos para nuestro juego para crear el tablero y el ambiente general que queremos para ese juego específico. Y luego creamos un concepto visual, que es, por supuesto, un experimento que evoluciona, experimentando con la vida, con los visuales de él, y la guía general para el juego. Y finalmente, creamos el tablero, como el diseño final para la máquina de pinball. Y este es un prototipo de jugabilidad. Es solo para probar la física y la interfaz general. Está, por supuesto, actualmente en desarrollo, así que asegúrate de seguirnos en Twitter o YouTube para que puedas seguir el progreso de este juego que estamos creando.

Así que la física funciona, pero nada más por ahora. Pero esto es un poco del proceso creativo de crear un juego. Y entonces preguntas, ¿es 3JS un motor de juegos? No. Es algo así. La respuesta corta es no, porque es un renderizador 3D genérico. Así que cosas como la física, como las animaciones, necesitas hacerlas tú mismo. Pero como te mostré, tenemos muchas cosas que puedes agregar como un extra a 3JS para transformarlo en un motor de juegos. Y si realmente quieres sumergirte en el desarrollo de juegos usando tu navegador, también deberías conocer PlayCanvas y Babylon. Están más enfocados en el desarrollo de juegos webGL. No los abordaré aquí, porque es otro curso, digamos. Pero definitivamente deberías revisarlos.

Y quiero compartir contigo un poco de mi camino de aprendizaje. Así que veamos cómo podemos comenzar a aprender 3JS. Este es mi camino. Quiero decirte que funcionó para mí. Seguí esto cuando lo estaba aprendiendo. Pero tu camino podría ser diferente. Así que úsalo con precaución, ¿de acuerdo? Podemos comenzar mencionando que necesitas tener conocimientos de HTML y CSS para comenzar con esto. Esto es algo obligatorio. Y también conocimientos de JavaScript, es un requisito, porque todo lo que crearemos será usando JavaScript al final.

Así que recomiendo este curso. Este curso puede enseñarte todos los conceptos básicos de JavaScript. Si nunca has visto JavaScript antes, solo busca Learn JavaScript Free Camp en YouTube. Es un gran curso.

Y si deseas usar React TreeFiber, por supuesto, el conocimiento de React es un requisito. Y te recomiendo buscar el curso Joy of React de Josh. Es un curso de pago, pero tiene horas y horas de videos y ejercicios. Y es amigable para principiantes, así que si nunca has visto React antes, no te preocupes. Estarás cubierto. Y es otro gran curso.

Y luego, después de aprender lo básico de JavaScript, te recomiendo aprender software 3D. ¿Y por qué? Porque crear un juego 3D en una biblioteca 3D sin tener conocimiento previo de un software 3D será muy desafiante. Así que te animo a aprender lo básico de cualquier software 3D que desees, solo para tener una interfaz con la que jugar cuando quieras. Y recomiendo Blender 3D, por supuesto, porque es gratuito. Y es el que he estado usando durante todos estos años. Es muy popular, por lo que puedes encontrar muchos cursos gratuitos y mucho contenido gratuito en internet. Y puedes comenzar con este tutorial de Blender Google, y esto te enseñará todos los conceptos básicos que necesitas. Y también puedes aprender Spline estos días. Así que Spline es un software 3D utilizado para crear experiencias interactivas 3D en tu navegador. Así que soporta exportación nativa de 3JS y React 3 Fiber. Y solo para mencionar, todo este software 3D fue creado usando 3JS o basado en 3JS. Así que puedes ver el poder de esto. Es bastante loco, ¿no? Así que todo se ejecuta en tu navegador. No necesitas instalar nada. Así que definitivamente deberías echarle un vistazo, al menos. Y después de aprender lo básico del software 3D, lo que recomiendo es seguir dos posibles caminos. Así que quieres aprender usando recursos gratuitos.

Si simplemente escribes como 3JS, aprender 3JS, tutoriales de 3JS en YouTube o cualquier plataforma, encontrarás muchas cosas geniales de las que aprender. Comenzaría con la documentación de 3JS porque hay muchas cosas cubiertas allí. Así que es un gran lugar para comenzar. Si te gustan los libros, este libro Discover 3JS puede cubrir todos los conceptos básicos que necesitas. Y si eres como yo y prefieres los videos, hay toneladas de videos enseñando los conceptos básicos de 3JS. Y tienes un gran curso gratuito. Solo busca este tutorial de 3JS para principiantes absolutos, y estarás cubierto.

Y por supuesto, si quieres un recurso de pago, como si puedes permitírtelo, el curso más completo sin duda es 3JS Journey de Bruno Simon. Como, es todo lo que necesitas en un solo lugar. Tiene más de 72 horas de video, y puedes pasar de ser un principiante absoluto a avanzado. Y esta es la forma en que terminé usando para aprender 3JS. Diría que todo lo que sé proviene de este curso, así que es increíble, para ser honesto. Así que definitivamente deberías echarle un vistazo.

Y avanzando, después de tener los conceptos básicos de 3JS, puedes estudiar cursos más específicos de desarrollo de juegos. Y tenemos muchos de ellos también, porque 3JS, está en el campo desde hace bastante tiempo, más de 10 años. Así que muchos otros desarrolladores, más experimentados que nosotros, pueden enseñarnos. Así que, tienes, por ejemplo, el curso de Nick Lever, el desarrollo de juegos con 3JS es muy específico. Es de pago en Udemy, y también tienes el curso de Baba Sensei, recién lanzado gratis en YouTube, lo cual es genial. Así que, son formas muy buenas para que comiences el desarrollo de juegos. Y recuerda comenzar con los fáciles y no con los juegos más difíciles, para que no te frustres contigo mismo.

Y después de crear tu primer juego básico, puedes expandir tu conocimiento, y puedes hacerlo aprendiendo, por ejemplo, más sobre modelado 3D, porque eso te permitirá personalizar tus activos 3D o crear tus activos 3D. Y también puedes aprender el lenguaje de shaders GLSL, que es crear, que es, lo siento, necesitas cortar esta parte también. También puedes aprender GSGL, oh, este es difícil de decir. Lo haré de nuevo. Puedes aprender shaders GLSL para crear materiales únicos, shaders únicos, efectos de post-procesamiento únicos. Es increíble. También puedes aprender una biblioteca de animación como GSA, React Spring o Firmware Motion para ayudarte con las animaciones en tus proyectos. Y dependiendo de los requisitos de tu juego, también puedes aprender efectos visuales, sistemas de partículas de post-procesamiento, y mucho más. Así que, por supuesto, tenemos desventajas como cualquier cosa. Como el mayor problema cuando creamos juegos usando 3JS, es el rendimiento.

Y diría cualquier plataforma web, pero 3JS se ejecuta en tu navegador, por lo que las escenas complejas pueden reducir la tasa de fotogramas. Pero los navegadores están mejorando gradualmente en esto. Así que probablemente se cubrirá en algún momento en el futuro.

Y será muy difícil para mí darte consejos sobre rendimiento porque tenemos tiempo limitado aquí, pero tendremos una discusión mañana. Y allí podré compartir contigo más tiempo algunas técnicas que podemos hacer para mejorar el rendimiento. Así que asegúrate de visitarnos mañana para esos consejos.

Y una última cosa que quiero decir, es como, no trates de aprender todo de una vez porque es difícil. Por supuesto, necesitas tiempo y comienza con lo básico, crea juegos muy básicos al principio. Y esto te dará la experiencia que necesitas para avanzar. Así que ten paciencia contigo mismo.

Y quiero agradecerte mucho por tu tiempo. Espero que lo hayas disfrutado tanto como yo. Y espero que mi conocimiento te haya sido útil. Y no olvides seguirme en Twitter y en YouTube para que puedas obtener más consejos e inspiración. Y espero verte pronto. Te deseo un gran día y adiós.