Desarrollo de juegos con Threejs

¡Hola! Mi nombre es Anderson Mancini, y gracias por unirte a mí en la Cumbre de Desarrollo de Juegos JS. Hablaremos sobre el desarrollo de juegos 3JS y cómo puedes comenzar tu viaje aprendiéndolo. Así que sumerjámonos de lleno.

Por cierto, soy un desarrollador creativo de 43 años de Brasil, y soy fundador y CTO de Neltix, una empresa con sede en Brasil, por supuesto, como estudio creativo, y trabajo con empresas que buscan formas de aumentar la participación a través de interacciones digitales, y diría que por eso los juegos suelen formar parte de mi rutina diaria en mi trabajo. Y quiero hablarles sobre cómo terminé conociendo 3js de todos modos. Suelo decir que soy un desarrollador atrapado en un cuerpo de diseñador, como he trabajado con diseñadores de 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 forma de combinar mis conocimientos 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 mis conocimientos 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 el macro media flash quedara obsoleto. Y el macro media flash era lo que estaba usando cuando estaba creando mis cosas antes de comenzar en este viaje. Y luego me enteré de 3GS. Así que fue increíblemente difícil encontrar a alguien para contratar en mi empresa en ese momento. Y luego decidí aprenderlo yo mismo, probarlo. Y lo que comenzó como un esfuerzo de aprendizaje rápidamente se convirtió en una obsesión apasionada. Y por eso estoy tan emocionado de estar aquí, de darte algunos tips en tu viaje, intentar enseñarte cómo mejorar tu forma de aprender 3GS, y mostrarte que aprender esto puede ser accesible y muy gratificante.

Así que hablemos de qué es 3GS de todos modos. 3GS es una biblioteca de JavaScript de código abierto. Se utiliza para crear experiencias interactivas en 3D en tu navegador. Fue creado por Ricardo Cabelo en 2010. Y ahora es mantenido por cientos de desarrolladores de todo el mundo. Yo diría que yo también estoy incluido de alguna manera. Abstrae la complejidad de WebGL, que es una forma muy compleja de crear 3D para la web. Pero básicamente eso significa que podemos ejecutar aplicaciones aceleradas por GPU sin ejecutar ni instalar nada adicional en tu computadora, lo que significa que no se necesitan complementos adicionales. Y es multiplataforma, lo que significa que tu trabajo puede ejecutarse en cualquier navegador. Y diría que más que navegadores. Cualquier navegador moderno puede admitir 3GS. Y podemos ampliarlo utilizando bibliotecas de física, bibliotecas de animación y muchas más cosas. Por lo tanto, puedes agregar 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é tan poco código necesitas para renderizar un cubo giratorio en tu pantalla. Y todo lo que está escrito allí, básicamente intenta 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.

Para comenzar, necesitas tu escena. Necesitas tener un lugar para grabar tu película. Luego necesitas una cámara para grabar cosas. Luego necesitas un renderizador para poder 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. Es muy fácil de entender usando esta comparación.

Y también quiero hablar sobre React ThreeFiber. Entonces, React ThreeFiber, es más adecuado para ti probablemente si estás más familiarizado con el marco de React. Y veremos por qué. React ThreeFiber, 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. Y puedes construir tus escenas utilizando componentes para mantener todo más legible y organizado. Veremos un ejemplo en unos minutos. Entonces, tus componentes pueden ser reutilizados. Tiene un ecosistema extremadamente extenso con muchas cosas nuevas que se lanzan 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 un ejemplo en el código. Este es exactamente el mismo, no emocionante en absoluto, cubo de rotación pero ahora estamos usando React ThreeFiber. Y como puedes ver, es mucho más organizado y compacto porque está utilizando componentes para estructurar todo. Por supuesto, donde está el componente principal, MyBox está utilizando una composición. Entonces, todo lo que se necesita para ese componente específico está compactado o empaquetado en este componente aislado. Y luego puedes importarlo en tu lienzo y tienes la misma escena. Y aquí tienes un ejemplo de una comparación entre FreeJS que ya es corto y React ThreeFiber. Por supuesto, es más simple porque está utilizando componentes pero lo que está sucediendo aquí, es básicamente el mismo código. Todo está organizado de una manera diferente para que puedas tener 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 mencionando los beneficios de usar composiciones en tu trabajo.

Y otra belleza de los componentes es que son fáciles de reutilizar. Entonces, si quieres otro cubo en tu pantalla, todo lo que tienes que hacer es duplicar esa línea y luego tendrás otro cubo giratorio. Y, por supuesto, puedes pasar props. Así que puedes cambiar las propiedades desde el interior del componente desde el exterior, 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 ayudantes, que puedes importar en tu escena y es gratuito de usar. Entonces, 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 los controles de órbita desde la biblioteca de Dray y es así de simple. Y si quieres, por ejemplo, tener nubes en tu proyecto o juego, no necesitas codificarlo como alguien ya lo hizo por ti. Simplemente importas el componente de nube también desde Dray y luego lo agregas 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 está en conocerlos visitando la documentación de React ThreeFiber.

Y ahora veamos algunos ejemplos 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 visualizaciones de viajes. Tenemos configuradores de productos como el de GSI Games Sim Industries con ese hermoso controlador de volante para simulación de autos. Es increíble ver cosas como estas funcionando en tu navegador sin instalar ningún complemento en absoluto.

Y estos son otros dos ejemplos como el de Dairy Farmers of Canada del proyecto reciente de Neltic y el Showroom Automotriz de Immersive Studios. Y todos ellos están impulsados por FreeJS. Y nuevamente, funcionan con un gran rendimiento sin instalar nada adicional en tu navegador. Puedes visitar esas direcciones, esos enlaces simplemente buscándolos en Google, si quieres. Y si quieres ver más ejemplos como estos 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 echar un vistazo a eso.

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 con esta biblioteca. Aquí tenemos dos ejemplos increíbles de Mercy y Mitchell. Y son tan hermosos que es difícil creer que funcionen en tu navegador y no necesites instalar nada adicional. Así que son realmente, realmente buenos. Y aquí hay algunos ejemplos más. Tenemos Elysium de Blizzard, que fue lanzado, supongo, el mes pasado. Y luego también tenemos Choo Choo World de Ellusion. Esos también son excelentes 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 lo hermosos que son. Realmente parecen una aplicación, no un sitio web. Y para más juegos como este, también deberías visitar este sitio web, WebGamer.io, que tiene muchos otros ejemplos de juegos que utilizan 3Ds. Y quiero aprovechar esta oportunidad para hablarles 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 se lanzará pronto.

Entonces quiero mostrarte un poco del proceso creativo. Comenzamos recopilando muchas referencias y tratando de definir un estilo para un juego. Por supuesto, tuvimos la idea de construir una máquina de pinball utilizando FreeJS. Y en este caso, utilizamos inteligencia artificial para obtener referencias y diseños potenciales para el juego.

Luego comenzamos a recopilar activos o crear nuevos activos para nuestro juego y crear el tablero y el ambiente general que queremos para ese juego específico. Luego creamos un concepto visual, que, por supuesto, evoluciona a medida que experimentamos con la vida y los visuales del juego, y la guía general para el juego. Finalmente, creamos el tablero, como el diseño final para la máquina de pinball. Este es un prototipo de jugabilidad. Es solo para probar la física y la interfaz general. Por supuesto, actualmente está en desarrollo, así que asegúrate de seguirnos en Twitter o YouTube para seguir el progreso de este juego que estamos creando.

Entonces, te preguntas, ¿es 3JS un motor de juegos? No, es un renderizador 3D genérico. Por lo tanto, cosas como la física y las animaciones debes hacerlas tú mismo. Pero como te mostré, tenemos muchas cosas que puedes agregar como extras a 3JS para convertirlo en un motor de juegos. Y si realmente quieres sumergirte en el desarrollo de juegos utilizando tu navegador, también debes conocer PlayCanvas y Babylon. Están más enfocados en el desarrollo de juegos webGL. No los cubriré aquí porque es otro curso, por así decirlo. Pero definitivamente deberías echarles un vistazo.

Y quiero compartir contigo un poco de mi camino de aprendizaje. Veamos cómo podemos comenzar a aprender 3JS. Este es mi camino. Quiero decirte que funcionó para mí. Lo seguí cuando lo estaba aprendiendo. Pero tu camino puede ser diferente. Úsalo con precaución, ¿de acuerdo? Comenzamos 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 utilizará 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, simplemente busca Learn JavaScript Free Camp en YouTube. Es un excelente curso.

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

Luego, después de aprender los conceptos básicos de JavaScript, te recomiendo aprender un software 3D. ¿Y por qué? Porque crear un juego 3D en una biblioteca 3D sin tener conocimientos previos de un software 3D será muy desafiante. Por lo tanto, te animo a aprender los conceptos básicos de cualquier software 3D que desees, solo para tener una interfaz con la que jugar cuando lo desees. Recomiendo Blender 3D, por supuesto, porque es gratuito y es el que he estado utilizando durante todos estos años. Es muy popular, por lo que puedes encontrar muchos cursos gratuitos y mucho contenido gratuito en Internet. Puedes comenzar con este tutorial de Blender Google, que te enseñará todos los conceptos básicos que necesitas. También puedes aprender Spline en estos días. Spline es un software 3D utilizado para crear experiencias interactivas en 3D en tu navegador. Admite la exportación nativa de 3JS y React ThreeFiber. Y solo para mencionar, todo este software 3D se creó utilizando 3JS o se basa en 3JS. Así que puedes ver su poder. Es bastante impresionante, ¿no? Todo se ejecuta en tu navegador, no necesitas instalar nada. Definitivamente deberías echarle un vistazo, al menos. Y después de aprender los conceptos básicos del software 3D, lo que recomiendo es que sigas dos posibles caminos. Si deseas aprender utilizando recursos gratuitos, requerirá más disciplina y paciencia de tu parte. O puedes aprender utilizando recursos de pago para acelerar las cosas de una manera más estructurada, por así decirlo. Y comencemos con los recursos gratuitos.

Si simplemente escribes 3JS, aprende 3JS, tutoriales de 3JS en YouTube o en cualquier plataforma, encontrarás muchas cosas geniales para aprender. Yo comenzaría con la documentación de 3JS porque cubre muchas cosas. Es un gran lugar para empezar. 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 que enseñan los conceptos básicos de 3JS. También 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, si puedes permitírtelo, el curso más completo sin duda es 3JS Journey de Bruno Simon. Es todo lo que necesitas en un solo lugar. Tiene más de 72 horas de videos y puedes pasar de principiante absoluto a avanzado. Esta es la forma en que yo aprendí 3JS. Diría que todo lo que sé proviene de este curso, así que es increíble, para ser honesto. Definitivamente deberías echarle un vistazo.

Y avanzando, después de tener los conceptos básicos del conocimiento de 3JS, luego puedes estudiar cursos más específicos de desarrollo de juegos. Y también tenemos muchos de ellos, porque 3JS ha estado en el campo durante bastante tiempo, más de 10 años. Entonces, muchos otros desarrolladores, más experimentados que nosotros, pueden enseñarnos. Por ejemplo, tienes el curso de Nick Lever, el desarrollo de juegos de 3JS es muy específico. Es un curso de pago en Udemy, y también tienes el curso de Baba Sensei, que acaba de ser lanzado de forma gratuita en YouTube, lo cual es genial. Así que son formas muy buenas para que comiences el desarrollo de juegos. Y recuerda comenzar con los más 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 ampliar tus conocimientos y hacerlo aprendiendo, por ejemplo, más sobre modelado 3D, porque eso te permitirá personalizar tus activos 3D o crear tus propios activos 3D. También puedes aprender el lenguaje de shaders GLSL, que es genial, puedes aprender shaders GLSL para crear materiales ú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. Por supuesto, todo tiene sus desventajas. El mayor problema al crear juegos con 3JS es el rendimiento.

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

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

Y una última cosa que quiero decir, es que no intentes aprender todo de una vez porque es difícil. Por supuesto, necesitas tiempo y comenzar con lo básico, crear juegos muy simples al principio. Y esto te dará la experiencia que necesitas para avanzar. Así que sé paciente contigo mismo.

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