Conceptos básicos para construir juegos 3D en la Web

27 agosto, 2016 23:43 por

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks.

Podrías pensar que los juegos 3D son más difíciles de desarrollar que en 2D,debido a la dimensión extra que hay que tener en cuenta, pero es más fácil de lo que pudieras creer. Recientemente hemos actualizado la sección de juegos en MDN con una colección de tutoriales que incluyen el desarrollo 3D, con un enfoque en los frameworks que ofrecen atajos para los desarrolladores que están empezando a construir y desarrollar juegos para la web y no están familiarizados con WebGL.

Formas 3D

WebVR y desarrollo de juegos 3D

La realidad virtual en el navegador ha hecho grandes progresos este año, y la API de JavaScript conocida como WebVR está en desarrollo. La especificación WebVR está en camino de alcanzar la version 1.0. Esto será un gran hito para la tecnología de la realidad virtual en el navegador. A medida que la API WebVR vaya madurando, irá llegando el momento para moverse desde las demostraciones “experimentales” hasta la fase de aplicaciones y juegos comerciales “preparados para la producción”.

El framework A-Frame construida sobre Three.js está evolucionando rápidamente. Ya existen casos de estudio de interesantes de proyectos VR como mazmorra de cartón y SECVRITY. El framework por sí mismo ha alcanzado la version 0.2.0 y rápidamente se está ganando el interés de la comunidad. Este sencillo pero poderoso acceso utiliza markup para crear experiencias VR que funcionan en todas las plataformas y dispositivos. El resultado: la creación diaria de nuevos tutoriales, demostraciones y plugins.

Imágenes VR

Estos son tiempos excitantes para experimentos de vanguardia con la realidad virtual, pero si eres un entusiasta de los juegos 2D como yo, el salto a las tres dimensiones podría ser un reto. Vamos a explorar juntos los conceptos básicos de las tres dimensiones, y veremos como algunos conocidos frameworks pueden ayudarte a alcanzar tus objetivos más rápidamente, y crear impresionantes demostraciones y juegos.

El concepto de juegos 3D en la web es fundamentalmente rederizado de WebGL en Canvas, para crear animaciones interactivas aceleradas por hardware. La teoría básica gira alrededor del canal de renderizado, que gestiona la información sobre tus creaciones y las muestra en la pantalla.

Un vistazo a los frameworks para el desarrollo de los juegos 3D

Puedes hacerlo todo tú mismo en WebGL puro, o puedes hacerte la vida más fácil, acelerar el desarrollo, y centrarte únicamente en la parte importante de tu idea del juego , con una gran variedad de frameworks disponibles. Los tutoriales de juegos de Mozilla Developer Network incluyen:

Three.js es la herramienta más popular para las animaciones WebGL, mientras que PlayCanvas te ofrece la posibilidad de utilizar el motor PlayCanvas o el editor en línea para crear un juego o una demostración. Babylon.js es escogido con frecuencia por su API sencilla y características potentes.  A-Frame también puede ser utilizado para crear prototipos rápidos de mundos en 3D visibles de inmediato en la realidad virtual. También hemos incluido tutoriales para cubrir conceptos fundamentales como el sombreado. La comprensión de lo que está ocurriendo detrás de las escenas del framework te da un gran control sobre como se verá tu juego cuando todo el post-procesamiento sea aplicado.

Ventajas de los frameworks

¿Cuales son las ventajas de utilizar un framework para el desarrollo de un juego? Los framworks proporcionan beneficios y atajos. Aquí hay algunos ejemplos:

Playcanvas

Puedes descargar trabajo que parece repetitivo en comparación con otras partes de la creación del juego: cargar activos, reproducir la escena, o dibujar cualquier cosa en la pantalla. No tendrás que ocuparte de la configuración específica de cámaras, luces, y demás. En su lugar, puedes crear alguna geometría, añadir animación, y olvidarte de todo lo demás; simplemente trabajarás y verás tu creación inmediatamente.

No tendrás que preocuparte por la diferencia de la implementación de características por los navegadores; el framework se encarga de ésto y expone una API de alto nivel.

Los frameworks añaden una capa que abstrae muchas cosas, de tal manera que puedas escribir menos código y hacer más con menos. Un framework puede ayudar a enfocarte en las mecánicas claves de tu juego. Algunas veces unas pocas líneas de código de framework hacen exactamente lo mismo que docenas de líneas de JavaScript puro. (Recuerda que no siempre es el caso.)

Editor playcanvas

Diferentes frameworks ofrecen diferentes experiencias: Three.js generalmente se utiliza para crear animaciones; Babylon.js, por otro lado, se centra en la creación de juegos. También puede ocuparse del anti-aliasing. Ambos frameworks pueden emplearse con éxito para la creación de juegos, por lo tanto la elección realmente dependerá de tus preferencias y de los objetivos de tu proyecto.

Algunos frameworks añaden incluso una capa extra de características y se ofrecen motores físicos, detección de colisión, o sistemas de partículas. Toda esa infraestructura está disponible para utilizar en tu proyecto sin los problemas de compatibilidad por los que era necesario utilizar plugins personalizados o escribir estas funcionalidades desde cero.

Es más fácil iniciar y rápidamente prototipar una escena utilizando frameworks; ofrecen pocas complicaciones para construir creaciones complejas. Mira como el código fuente de un simple juego Breakout 2D en JavaScript puro es más extenso y complicado que el mismo juego en Phaser. Utilizando un framework ahorras tiempo, por lo que puedas centrarte en crear algo único.

playcanvas-github

En conclusión

Por otro lado, es bueno aprender primero el lenguaje para saber como están construidos los frameworks, porque este funciona de un modo y no otro, si no están haciendo exactamente lo que quieres que hagan. Las estructuras tienden a entrar y salir de moda, y esto puede ser un esfuerzo añadido para aprender su sintaxis. Después de todo, siempre puedes escribir una sencilla característica por ti mismo en JavaScript puro – una habilidad muy poderosa.

Echa un vistazo a mi repositorio GitHub para ver una colección de demostraciones que muestran como construir una sencilla escena 3D con las herramientas proporcionadas, o también las puedes ver en línea.

Recuerda: no tienes que utilizar ningún framework específico, y puedes lograr resultados comparables en JavaScript puro con WebGL. Las demostraciones que se muestran arriba fueron seleccionadas para ilustrar cómo utilizar las herramientas más populares de este momento. Si crees que falta algo, puedes escribir sobre ello y lo añadiré a la colección de demostraciones anterior en GitHub; todas las contribuciones son bienvenidas. Y si no he incluido tu framework favorito, puedes sugerirlo en los comentarios o escribir una presentación tu mismo, para que más gente lo conozca.

No dudes en utilizar el código fuente como tú quieras — por ejemplo, como un código base para tu nuevo proyecto 3D — ¡ y recuerda mostrarnos lo que has construido! Nos encantaría escuchar aquí tus comentarios o en el repositorio de Github.

The following two tabs change content below.

Compartir artículo:

Join the discussion at foro.mozilla-hispano.org

  • ¡Participa!

    Firefox Friends »
    Agrega botones de Firefox en tu sitio web y comparte tu amor por Mozilla Firefox.
    Armada alucinante »
    Ayuda a otros usuarios en Twitter.
    Colabora con la comunidad »
    En Mozilla lo importante son las personas. Descubre cómo puedes colaborar.

    Boletín Firefox

    Suscríbete al boletín de novedades de Firefox.

  • Descargas

    Descarga los programas de Mozilla.

    Lo más visto

    cc-by-sa