Elegir un Motor de Juego o Marco de Trabajo para el Desarrollo de Juegos HTML

Rate this content
Bookmark

Nunca hemos tenido tantas opciones excelentes para motores de juegos y marcos de trabajo. Sin embargo, a veces, tener demasiadas opciones puede ser paralizante. En esta charla vamos a discutir los diversos motores de juegos y marcos de desarrollo disponibles para el desarrollo de juegos HTML y, con suerte, ayudarte a seleccionar el que es adecuado para ti.

This talk has been presented at JS GameDev Summit 2022, check out the latest edition of this JavaScript Conference.

FAQ

Existen dos enfoques principales para desarrollar un juego en el navegador: el enfoque nativo, que implica escribir directamente en JavaScript y es ideal si la plataforma principal es la web; y el enfoque compilado, que trata el navegador como una máquina virtual usando tecnologías como WebAssembly o ASMJS y Emscripten.

Algunas opciones populares incluyen Unity, que es muy utilizado debido a su amplia comunidad y soporte de plataforma; Godot, que es completamente de código abierto y fuerte en 2D; y PlayCanvas, ideal para juegos 3D con la web como plataforma principal.

Babylon.js es un motor de juegos 3D de código abierto fuertemente respaldado por Microsoft. Aunque no ofrece entornos de edición al estilo Unity, proporciona una amplia funcionalidad para el desarrollo de juegos 3D basados en la web.

PhaserJS es un framework de juegos HTML5 basado en 2D que proporciona las herramientas necesarias para manejar sprites, atlas, sonido, carga de niveles, entre otros, facilitando notablemente el desarrollo de juegos 2D en la web.

Desarrollar con un motor de juego preexistente como Unity o Godot ofrece una solución completa con herramientas integradas y es más fácil de manejar, mientras que construir un juego desde cero con frameworks como Three.js o PhaserJS puede ofrecer más flexibilidad y control, pero requiere más tiempo y conocimiento técnico para integrar diferentes componentes.

Deberías considerar el rendimiento y la integración con el navegador. El enfoque nativo ofrece una integración más estrecha y un debugging más sencillo, ideal si la web es tu plataforma principal. El enfoque compilado es mejor si tratas la web como una plataforma adicional y no necesitas una integración profunda con el navegador.

Mike Fleischauer
Mike Fleischauer
25 min
08 Apr, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Bienvenido a la Cumbre de Desarrollo de Juegos Web donde se exploran las opciones de motores de juegos para juegos basados en la web. Se discuten los enfoques de desarrollo nativo y compilado, con motores listos para usar como Unity y motores específicos de HTML5 como opciones. Godot Engine se destaca como un motor de código abierto con un fuerte soporte web. Se mencionan motores de juegos tradicionales como Default, GameMaker Studio y Babylon.js, junto con marcos de trabajo como PhaserJS y Cocos2DJS. También se cubren las bibliotecas de JavaScript para el desarrollo de juegos, las opciones de soporte de audio y las consideraciones para elegir el motor adecuado.

1. Introducción al Desarrollo de Juegos Web

Short description:

Bienvenidos a mi Cumbre de Desarrollo de Juegos Web donde exploraremos las opciones de motores de juego para juegos basados en la web. Hay dos enfoques principales para desarrollar juegos en el navegador: nativo y compilado. El desarrollo nativo es ideal para proyectos enfocados en la web, proporcionando una integración estrecha con el navegador. El desarrollo compilado trata la web como otra plataforma, permitiendo objetivos adicionales. Puedes usar motores de juego listos para usar como Unity o explorar motores específicos de HTML5. Alternativamente, puedes construir sobre marcos y bibliotecas existentes. El desarrollo web es modular y ofrece muchas opciones.

Hola damas y caballeros, este es Mike Fleischer y bienvenidos a mi Cumbre de Desarrollo de Juegos Web. Ahora dirijo el canal GameFromScratch y GameFromScratch.com durante la última década, y durante esa década he cubierto literalmente cientos de motores de juego y frameworks. Y nunca hemos tenido más opciones. Si quieres desarrollar un juego en estos días, hay tantas opciones comerciales y gratuitas, de código abierto y de código cerrado. Estás absolutamente mimado por la elección.

Ahora el problema de tener muchas opciones es tener demasiadas opciones, y eso hace que cualquier decisión sea más difícil, especialmente cuando estás empezando. Así que si estás tratando de averiguar qué tecnología o motor de juego usar para tu próximo juego basado en la web, espero que esta charla te ayude. Hay dos enfoques principales sobre cómo puedes desarrollar un juego en el navegador. Uno es que puedes tomar el enfoque nativo, básicamente desarrollarlo como lo harías con cualquier otra aplicación basada en la web. Hay una serie de motores y frameworks que funcionan, estás escribiendo directamente en JavaScript. Esto tiene mucho sentido si tu plataforma de publicación principal es para la web. Si tu objetivo principal es la web, y la plataforma más importante es la web, este es un gran camino a seguir. Te da una integración estrecha con el navegador. Hace que tu experiencia de debugging sea un poco más fácil. La otra opción es básicamente compilada. Esto es tratar tu navegador más o menos como si fuera una máquina virtual. Usando tecnología como WebAssembly o ASMJS como relleno, y tecnología como Emscripten, las cadenas de herramientas para tu motor de juego o framework de elección, se compilan a casi un byte código que se ejecuta dentro de tu navegador. Esto generalmente no tiene una integración estrecha con el navegador, al menos no cuando se salta Pero el buen enfoque para el enfoque compilado es que estás tratando la web básicamente solo como otra plataforma. Así que en lugar de compilar para Windows y Mac y móvil y así sucesivamente, puedes agregar la web como un objetivo adicional. Este es el enfoque que toman muchos motores de juego tradicionales.

Complementario a la decisión de trabajar de forma nativa en el navegador o compilarlo usando una tecnología como WebAssembly y Emscripten, también tienes prácticamente tres decisiones principales diferentes en términos de qué tipo de tecnología de juego deseas usar para desarrollar tu juego. En la cima, tienes la idea de simplemente usar un motor de juego estándar listo para usar, el tipo de Unity, Unreal, Godot. Los conoces. Básicamente, tratan la web como otra plataforma. A veces es solo cuestión de incluso solo construir para la web y tu juego es creado. Ahora, además de eso, también tienes algunos de los motores de juego 3D y 2D específicos de HTML5 por ahí. Vamos a cubrir algunos de esos en este video también. Y luego, finalmente, tienes la opción de construir sobre un framework o una colección de bibliotecas que están ahí y más o menos hacerlo por tu cuenta. Ahora, tradicionalmente, no recomendaría hacer tu propio motor de juego porque hay un montón más trabajo del que te das cuenta, pero cuando se trata de desarrollo web, hay tantas bibliotecas y frameworks como Three.js o Box Physics, etc., en los que puedes construir, que la idea de hacer tu propio motor de juego en realidad no es tan desalentadora como lo sería en muchos otros escenarios. Y una de las cosas sobre el desarrollo web en general y las tecnologías de JavaScript es que tienden a ser muy modulares en su enfoque.

2. Opciones de Motores de Juego Web

Short description:

Y es más una cuestión de ensamblar piezas de Lego y construir tu propio motor a partir de componentes listos para usar en lugar de comenzar todo desde cero. Hablemos de los motores de juego tradicionales que tienen exportación web. Unity es el jugador más grande, con la mayoría de los desarrolladores, la comunidad más grande y un amplio soporte de plataforma. Es un motor de juego 3D y 2D completamente funcional con una gran cantidad de materiales de aprendizaje. Unreal Engine ha deprecado el soporte de destino web, pero hay plugins de terceros. Unreal Engine y Unity son los competidores más cercanos para los títulos basados en la web. Otra opción es el motor Godot.

Y es más una cuestión de ensamblar piezas de Lego y construir tu propio motor a partir de componentes listos para usar en lugar de comenzar todo desde cero. Así que vamos a ver algunos de esos bloques de construcción con los que también podrías trabajar.

Pero primero, hablemos de los motores de juego tradicionales. Comencemos hablando de algunos de los motores de juego tradicionales que tienen alguna forma de exportación web. Creo que ahora en una época en la que los plugins de navegador ya no son una cosa, básicamente estás mirando un backend Emscripten backend compilando a WebAssembly en alguna forma para todas estas cosas que estábamos a punto de mencionar. Y estas son excelentes opciones, especialmente si ya estás desarrollando un juego y quieres simplemente agregar la web como otra plataforma.

Y vamos a empezar con el ejemplo más obvio. Ahora no voy a cubrir todas las opciones de motores de juego que existen que compilan para la web porque hay simplemente tantas de ellas. Vamos a hablar de algunos de los jugadores más grandes en este espacio. Y el jugador más grande directamente es Unity. Ahora Unity tiene la mayoría de los desarrolladores. Tiene la comunidad community más grande. Probablemente tiene el soporte de plataforma más amplio que existe. Es un motor de juego 3D y 2D completamente funcional. Tu lenguaje de scripting principal va a ser el lenguaje de programación C sharp. Pero hay una serie de opciones de scripting visual incluyendo dos que son oficialmente soportadas por Unity ellos mismos. Tiene el mayor volumen de materiales de aprendizaje que existen. Y francamente, si no estás haciendo web primero y no sabes cuál elegir, Unity es probablemente la elección más fácil que podrías hacer, simplemente porque la comunidad community es tan buena como se puede obtener. La comunidad community de Unity es masiva. Eso significa que hay una serie de materiales de formación, hay una serie de tutoriales, hay una serie de personas con las que puedes hablar si necesitas ayuda y así sucesivamente. Así que Unity es una excelente opción, especialmente si la web no es tu plataforma principal. Si sólo quieres agregar otra plataforma a la lista, si estás desarrollando para escritorio y móvil y web, bueno, Unity podría ser una buena elección.

Otra opción que solía existir era Unreal Engine. Ahora Unreal Engine ha deprecado realmente su soporte de destino web. Hay plugins de terceros que traen esta funcionalidad pero no creo que yo recomendaría Unreal Engine para nadie a menos que ya estuvieras trabajando en un proyecto de Unreal Engine porque Unreal simplemente no ha expandido tanto en el espacio web. Hay formas de hacerlo y hay terceros trabajando en retomar donde Epic Games dejó su soporte. Pero sólo sé que Unreal Engine y Unity son probablemente los competidores directos más cercanos que puedes encontrar cuando se trata de desarrollar títulos basados en la web. No realmente. Unreal Engine está muy por detrás en ese aspecto. En el lado del motor si estás buscando más hacia lo gratuito y específicamente de código abierto otra opción para ti es el motor Godot.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Optimización de juegos HTML5: 10 años de aprendizaje
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimización de juegos HTML5: 10 años de aprendizaje
Top Content
PlayCanvas is an open-source game engine used by game developers worldwide. Optimization is crucial for HTML5 games, focusing on load times and frame rate. Texture and mesh optimization can significantly reduce download sizes. GLTF and GLB formats offer smaller file sizes and faster parsing times. Compressing game resources and using efficient file formats can improve load times. Framerate optimization and resolution scaling are important for better performance. Managing draw calls and using batching techniques can optimize performance. Browser DevTools, such as Chrome and Firefox, are useful for debugging and profiling. Detecting device performance and optimizing based on specific devices can improve game performance. Apple is making progress with WebGPU implementation. HTML5 games can be shipped to the App Store using Cordova.
Construyendo Experimentos Divertidos con WebXR & Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Construyendo Experimentos Divertidos con WebXR & Babylon.js
Top Content
This Talk explores the use of Babylon.js and WebXR to create immersive VR and AR experiences on the web. It showcases various demos, including transforming a 2D game into a 3D and VR experience, VR music composition, AR demos, and exploring a virtual museum. The speaker emphasizes the potential of web development in the metaverse and mentions the use of WebXR in Microsoft products. The limitations of WebXR on Safari iOS are discussed, along with the simplicity and features of Babylon.js. Contact information is provided for further inquiries.
Creando juegos increíbles con LittleJS
JS GameDev Summit 2022JS GameDev Summit 2022
34 min
Creando juegos increíbles con LittleJS
Little.js is a super lightweight and fast JavaScript game engine that has everything included to start making games right away. It has a tiny footprint and no dependencies, making it perfect for size-coding competitions like JS13K. Little.js is built with an object-oriented structure and comes with several classes. It provides a fast rendering system, a comprehensive audio system, and various starter projects for different game types. Little.js is designed to be simple and easy to understand, allowing you to look at and modify the code.
Cómo no construir un videojuego
React Summit 2023React Summit 2023
32 min
Cómo no construir un videojuego
The Talk showcases the development of a video game called Athena Crisis using web technologies like JavaScript, React, and CSS. The game is built from scratch and includes features like multiple game states, AI opponents, and map editing. It demonstrates the benefits of using CSS for game development, such as instant load times and smooth transitions. The Talk also discusses optimizing performance, supporting dark mode, and publishing the game to other platforms.
¡Mejora el rendimiento de tus juegos WebGL Unity!
JS GameDev Summit 2023JS GameDev Summit 2023
7 min
¡Mejora el rendimiento de tus juegos WebGL Unity!
The Talk discusses ways to boost the performance of WebGL Unity games, including issues with bundle size, memory usage, and runtime performance. It suggests using Brotli for compression and non-exception support for better performance. Choosing the appropriate texture compression format and experimenting with separate builds can also help. The Talk also covers optimizing textures, models, audio, and assets by reducing build size, using compression, disabling unnecessary models, and optimizing audio quality. Unity's optimization tools and profilers are recommended for analyzing performance and memory issues.
Juegos Web 3: Qué es y por qué es importante
JS GameDev Summit 2022JS GameDev Summit 2022
36 min
Juegos Web 3: Qué es y por qué es importante
Web3 gaming enables decentralized identity and finance, allowing game developers to bypass centralized platforms. It is driven by wallets, ERC20 tokens, and NFTs. Web3 games focus on collaborative world-building, ownership, and open-source collaboration. The challenge is achieving decentralization while addressing economic and technological limitations. Web3 aims to redefine the gaming industry by using economic tools and exploring new genres like RPG and RTS games.

Workshops on related topic

Crea un Juego Con PlayCanvas en 2 Horas
JSNation 2023JSNation 2023
116 min
Crea un Juego Con PlayCanvas en 2 Horas
Top Content
Featured WorkshopFree
Steven Yau
Steven Yau
En esta masterclass, construiremos un juego utilizando el motor WebGL de PlayCanvas desde el principio hasta el final. Desde el desarrollo hasta la publicación, cubriremos las características más cruciales como la escritura de scripts, la creación de UI y mucho más.
Tabla de contenido:- Introducción- Introducción a PlayCanvas- Lo que vamos a construir- Agregando un modelo de personaje y animación- Haciendo que el personaje se mueva con scripts- 'Falsa' carrera- Agregando obstáculos- Detectando colisiones- Agregando un contador de puntuación- Fin del juego y reinicio- ¡Resumen!- Preguntas
Nivel de la masterclassSe recomienda familiaridad con los motores de juegos y los aspectos del desarrollo de juegos, pero no es obligatorio.
PlayCanvas de principio a fin: la versión rápida
JS GameDev Summit 2022JS GameDev Summit 2022
121 min
PlayCanvas de principio a fin: la versión rápida
Top Content
WorkshopFree
João Ruschel
João Ruschel
En esta masterclass, construiremos un juego completo utilizando el motor PlayCanvas mientras aprendemos las mejores prácticas para la gestión de proyectos. Desde el desarrollo hasta la publicación, cubriremos las características más cruciales como la gestión de activos, scripting, audio, depuración, y mucho más.
Introducción a WebXR con Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introducción a WebXR con Babylon.js
Workshop
Gustavo Cordido
Gustavo Cordido
En este masterclass, te presentaremos los conceptos básicos de la construcción de experiencias de Realidad Mixta con WebXR y Babylon.js.
Aprenderás lo siguiente:- Cómo agregar objetos de malla 3D y botones a una escena- Cómo utilizar texturas procedurales- Cómo agregar acciones a objetos- Cómo aprovechar la experiencia predeterminada de Realidad Cruzada (XR)- Cómo agregar física a una escena
Para el primer proyecto en este masterclass, crearás una experiencia interactiva de Realidad Mixta que mostrará estadísticas de jugadores de baloncesto a fanáticos y entrenadores. Para el segundo proyecto en este masterclass, crearás una aplicación WebXR activada por voz utilizando Babylon.js y Azure Speech-to-Text. Luego, desplegarás la aplicación web utilizando el alojamiento de sitios web estáticos proporcionado por Azure Blob Storage.
Masterclass de Codificación en Vivo de Juegos Pequeños
JS GameDev Summit 2023JS GameDev Summit 2023
115 min
Masterclass de Codificación en Vivo de Juegos Pequeños
Workshop
Frank Force
Frank Force
Sumérgete en el cautivador mundo del desarrollo de microjuegos con Frank Force en este interactivo masterclass de codificación en vivo. Diseñado tanto para desarrolladores experimentados como para curiosos principiantes, esta sesión explora los desafíos únicos y las alegrías de crear juegos y demos con restricciones extremas de tamaño.
Construyendo el Metaverso Interconectado y Traversable
JS GameDev Summit 2022JS GameDev Summit 2022
103 min
Construyendo el Metaverso Interconectado y Traversable
WorkshopFree
Avaer Kazmer
Avaer Kazmer
Basado en gran medida en Free Association en el Metaverso - Avaer @Exokit - M3, Avaer demostrará algunas de las formas en que los estándares abiertos permiten la travesía abierta y gratuita de usuarios y activos en todo el metaverso interconectado.