Categorías: Labs

Iniciando con el desarrollo de juegos HTML5

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

Hay varias maneras de crear un juego HTML5, y bastante material sobre aspectos técnicos de cada una, así que para este artículo, voy a estar dando una vista previa amplia sobre el desarrollo de juegos HTML5. Cómo “HTML5” puede ser mejor que algo nativo, en donde iniciar con el proceso de desarrollo, dónde ir cuando estás atascado, y cómo monetizar y distribuir juegos.

Beneficios de HTML5

html5-games

La mayoría de la audiencia presente ya ha visto valor en HTML5, pero queremos reiterar porque tú debes construir un juego HTML5. Si tú estás apuntando hacia iOS para tu juego, escribe el juego en Objective-C, las contras superan los beneficios en ese escenario… pero si quieres construir un juego en múltiples plataformas, HTML5 es el camino a seguir.

Multiplataforma

Una de las ventajas más obvias de HTML5 para juegos es que los juegos trabajarán en varios dispositivos modernos. Sí, tendrás que pensar algo extra en cómo tu juego responderá a varios tamaños de pantallas y tipos de entradas, y sí, puede que tengas que hacer un poco de ‘personalización’ en el código por cada plataforma (el principal inhibidor viene siendo el audio); pero eso es mucho mejor que portar el juego completamente cada vez.

Vemos varios juegos que no funcionan en móviles y tablets, y en la mayoría de casos eso es un gran error cuando desarrollas tu juego ─ ¡Mantén el móvil en mente cuando desarrollas tu juego HTML5!

Distribución única

La mayoría de juegos que han sido desarrollados hasta ahora fueron construidos de la misma manera, con Flash o juegos móviles nativos. Hasta cierta medida, esto tiene algo de sentido, pero lo que se pasa por alto son los beneficios que la web añade como plataforma. Esto es como si un desarrollador iOS construyera un juego que no aprovecha que lo táctil es diferente de un ratón ─ o si Doodle Jump fuera construido con las flechas en la parte inferior de la pantalla en vez de usar el acelerador del dispositivo.

Es tan fácil caer en la mentalidad de hacer lo que ha funcionado en el pasado, pero eso ahoga la innovación. Es una trampa en la que había caído ─ intentar emular completamente lo que ha sido exitoso en iOS, Android y Flash ─ y no fue hasta conversar con el ex Mozilero Rob Hawkes, que lo comprendí completamente. Aunque emular lo que funcionó en el pasado es necesario hasta un punto, la web abierta es un vehículo diferente para juegos y la innovación solamente puede ocurrir cuando tomas un riesgo e intentas algo nuevo.

La distribución para los juegos HTML5 es de vez en cuando considerada como una debilidad, pero eso es solo porque nosotros hemos estado mirando en el mismo sentido que los juegos móviles nativos, en donde una tienda de aplicaciones es la única forma de encontrar juegos. Con los juegos HTML5 tú puedes tener el increíble poder del hipervínculo. Los enlaces pueden ser fácilmente distribuidos a través de la web y dispositivos móviles (piensa en cuántos enlaces haces clic en las aplicaciones de Facebook y Twitter), y ciertamente, ésto no debe estar limitado a la página principal del juego. La tecnología está ahí para tener disponible un enlace a tu juego y hacer cosas más interesantes como saltar a un punto específico en el juego, intenta vencer la puntuación de un amigo, o jugar en tiempo real contra ese amigo ─ ¡Úsalo para tu ventaja!

Observa lo que ha funcionado para la viralidad de los sitios web y aplica eso mismos principios a tus juegos.

Proceso de Desarrollo Rápido

No hay que esperar por una compilación, actualizaciones y depuración en tiempo real, y una vez que el juego está hecho puedes lanzar la actualización inmediatamente.

Elección de un motor de juego

Los motores de juegos son sólo un nivel más de abstracción que se encargan de algunas de las tareas más tediosas del desarrollo del juego. La mayoría se encarga de cargar recursos, entradas de usuario, física, audio, dibujar mapas y animación, pero varían un poco. Algunos motores son sencillos, mientras otros (ImpartJS por  ejemplo) va más lejos, incluyendo un editor de niveles 2D y herramientas de depuración.

Decidir si necesitas o no un motor de juegos

Esto es más una decisión personal. La mayoría de los motores de juegos pueden reducir el tiempo que toma crear un juego completamente funcional, pero hay algunas personas que les gusta el proceso de construir todo desde cero para entender mejor cada componente del juego.

Para juegos sencillos, no es realmente una dificultad construirlos desde cero (asumiendo que tienes conocimientos en JavaScript y entiendes cómo funcionan lo juegos). Slime Volley (fuente), por ejemplo, fue construido sin tener un motor de juego, y ninguno de los componentes son particularmente complejos. Claro, Slime Volley es un juego muy básico, construir un jugo de rol (RPG) desde el principio podría resultar en más de un tirón de pelos.

Elegir entre un “Motor de juegos” y un “Creador de juegos”

La mayoría de la audiencia típica de Mozilla Hacks estén probablemente inclinándose a usar un motor de juegos o construir desde cero, pero está también la alternativa de usar un “Creador de juegos” como Construct 2 (Nota del traductor: Construct 2, en su documentación, dice que es compatible con Firefox OS, Firefox para Android y Firefox Marketplace). El uso un creador de juegos significa que en realidad no vas a escribir en JavaScript; en cambio, crearás eventos como código en el editor. Es una operación del fácil uso y rapidez para crear prototipos/desarrollar contra la personalización y control sobre el resultado final. Hay juegos muy impresionantes construidos con cualquiera, pero como desarrolladores tendemos a favorecer a escribir desde cero/usar un motor.

Encontrar el Motor de juegos / Creador de juegos correcto para ti

Hay muchos motores de juegos HTML5 por ahí, lo que en parte es algo bueno, pero también puede ser algo malo ya que un gran porcentaje han dejado de ser mantenidos, o lo serán pronto. Definitivamente quieres elegir un motor que continuamente será actualizado y mejorado con los años.

html5gameengine

HTML5GameEngine.com es un gran lugar para iniciar tu búsqueda porque los cientos de motores de juegos son reducidos a cerca de 20 que están bien establecidos, mantenidos activamente y tienen juegos siendo desarrollados con ellos.

Para una lista de motores más completa (lo que significa que puede haber basura que filtrar), esta lista en GitHub es tu mejor opción.

Herramientas de aprendizaje

Si vas con un motor de juegos, típicamente su sitio web es el mejor recurso con tutoriales y documentación.

Tutoriales técnicos

Tutoriales de diseño de juegos

Con el desarrollo de juegos, los aspectos técnicos no lo son todo – lo que es más importante es que el juego sea realmente divertido. A continuación están algunos lugares para iniciar a aprender sobre la mecánica de los juegos.

Herramientas útiles para juegos

Retención de usuario, monetización y más

Aclaración: el autor original del artículo es un co-fundador en Clay.io.

Hacer una función de juego es solo parte de la ecuación. También quieres que los jugadores jueguen bastante tiempo, vuelvan a jugar, le cuenten a sus amigos acerca del juego e incluso compren algo. Los elementos comunes en juegos que se centran en esas áreas son características como cuentas de usuario, puntuaciones altas, logros, integración social, y pagos en el juego. A simple vista, la mayoría son fácil de implementar, pero a menudo hay algunos problemas de multiplataforma y complejidades que son pasadas por alto. También es valioso tener un servicio central ejecutándose a través de muchos juego ─ por ejemplo, hay jugadores que se preocupan verdaderamente acerca de logros en Xbox Live porque las puntuaciones (Gamerscore) son importantes para ellos.

  • Clay.io – cuentas de usuario, puntuaciones altas logros, pagos en juego, análisis de estadísticas, distribución y más.
  • Scoreoid – similar al anterior.

Herramientas de desarrollo

  • stats.js – Un monitor para el desempeño de JavaScript. Muestra cuadros por segundo (framerate) y el desempeño a través tiempo.
  • Socket.IO – comunicación cliente-servidor en tiempo real (si estás pensando tener un backend para tu juego).
  • pixi.js – Un motor de renderizado canvas y WebGL.
  • CocoonJS – Mejora el desempeño de juegos HTML5 en iOS y Android con un canvas acelerado unido a OpenGL ES.

Motivación

Sin importar lo que estés desarrollando, una motivación extra siempre es de gran ayuda. Para los juegos, esa motivación a menudo viene de rodearse con otras personas quienes están en lo mismo que tú ─ trabajando en juegos.

js13kGames

js13kGames es una competición que se desarrolló el pasado mes de septiembre. El objetivo era desarrollar un juego que cuando fuera comprimido pesara menos de 13kb.

Mozilla Game On

Mozilla realiza un competición de juegos cada año desde diciembre hasta febrero con unos premios fantásticos ─ el año pasado fue un viaje todo pagado y alfombra roja a San Francisco para el GDC 2013.

El “Got Game?” de Clay.io

Clay.io realiza una competición anual de desarrollo de juegos HTML5 para estudiantes. El último año fue el primer año y más de 70 juegos fueron enviados. La siguiente competición está planeada para febrero /marzo de 2014.

Ludum Dare

Ludum Dare no es por premios tangibles, ni es específicamente para juegos HTML5, pero hay varios desarrolladores HTML5 que participan.

Un juego cada mes

Un Juego Cada Mes no es tanto una competición como es una herramienta de rendición de cuentas. Esto no está restringido a juegos HTML5, pero varios de los participantes trabajan con HTML5. El objetivo es liberar un juego cada mes. No es muy recomendado al largo plazo, ya que un mes es muy poco tiempo para crear un buen juego, pero es bueno para aprender ya que te fuerzas a desarrollar y finalizar juegos simples.

Ayuda de la comunidad

HTML5GameDevs.com

HTML5GameDevs se ha convertido en la mayor comunidad de HTML5 activa de desarrolladores de juegos. La mayoría de la gente es muy amable y dispuesta a ayudar con cualquier problema que se presente.

#BBG

#BBG es el canal IRC por excelencia pra juegos HTML5 ─ incluso encontrarás varios Mozilleros dando vueltas por ahí.

Cómo hacer dinero

Pagos dentro del juego

Los pagos dentro del juego, en mi opinión, son el camino a seguir para juegos HTML5 en el largo plazo. Por ahora la mayoría de los juegos no tienen el suficiente contenido de calidad, ni la mecánica del juego para tener jugadores que compren artículos.

Este es el modelo de negocio con el más alto potencial, pero también es la mayor dificultad para lograrlo, por el momento ─ no técnicamente, pero tener el juego correcto. La mejor forma de aprender cómo monetizar apropiadamente tu juego en este aspecto, es echar un vistazo a juegos en Flash y nativos que lo hacen realmente bien ─ juegos de King.com y Zynga suelen realizarlo muy bien. Hay también algunos materiales de lectura, como Los Mejores Trucos de Monetización de Juegos Gratis en Gamasutra.

Licenciamiento

En donde estamos ahora con los juegos HTML5, los juegos licenciados son la forma más fuerte y consistente de hacer dinero ─ si y sólo si tu juego trabaja bien dispositivos móviles.

Hay innumerables “Portales de Juegos en Flash” que reciben tráfico móvil orgánico, pero no pueden monetizarlo con los juegos Flash que ellos tienes. Su solución es salir y buscar juegos HTML5 para comprar licencias no exclusivas  (el derecho para ponerlos en su sitio web, haciendo algunos ajustes) para ofrecer a sus visitantes móviles.

Por lo general las licencias no exclusivas de juegos HTML5 (lo que significa que se pueden vender a más de un sitio) rondan entro los $500 – $1 000 dependiendo del juego y distribuidor. Algunos distribuidores ofrecen un modelo de reparto ingresos en donde obtendrás un participación del 40 a 50% en ingresos por publicidad, pero sin pagos por adelantado.

El licenciamiento es la forma más segura de hacer dinero ahora, pero es limitada ─ lo máximo que podrás hacer con un simple juego está en el rango de $5 000 a $6 000, pero es más rápido de obtener que con pagos dentro del juego o publicidad.

Publicidad

La publicidad es el punto medio entre los pagos dentro del juego y el licenciamiento. Es más fácil que los pagos dentro del juego para ganar dinero y con un potencial más alto que el licenciamiento (pero probablemente menos que los pagos dentro de juegos).  Es bastante fácil de implementar publicidad: solo elige tu red de publicidad (ten cuidado con los términos estrictos de Adsense) e impleméntala alrededor del juego, o en varios puntos de parada.

Las redes de publicidad comúnmente usadas son LeadBolt para móviles y CPMStar para escritorio. También puedes usar Clay.io que hace un poco más fácil implementar la publicidad, e intenta maximizar los ingresos usando diferentes redes, dependiendo del dispositivo usado y otros factores.

Distribución

La parte final en el desarrollo de un juego es la distribución. El juego está hecho, ¡ahora quieres que la gente lo juegue! Afortunadamente con HTML5 hay varios lugares para tener tu juego (muchos de los cuales con frecuencia no se utilizan).

Mas y más tiendas de aplicaciones, estos días, están aceptando juegos HTML5. Cada una tiene sus propios requerimientos (Facebook requiere SSL, la mayoría requiere archivos manifiesto de diferente formato, etc…), pero el tiempo que toma entrar en cada una de ellas es menos de 30 minutos. Si quieres reducirlos más que eso, Clay.io te ayuda a auto-generar los archivos manifiesto y recursos de imágenes de promoción que necesitas (también se ocupa de los requerimientos de SSL) ─ la documentación sobre esto, aquí.

game-markets

En algunas tiendas de aplicaciones, tendrás que tener un contenedor nativo para tu juego ─ principalmente el iOS App Store y Google Play. Un contenedor como PhoneGap es una opción, pero los visores web nativos tiene terribles motores JavaScript, así que por ahora es mejor con herramientas como CocoonJS y Ejecta.

Ahora, es tu turno para seguir adelante y hacer un gran e innovador juego ─ ¡Queremos ver lo que estará en el horizonte en los siguientes meses y años!

The following two tabs change content below.

AngelFQC

Web Developer at BeezNest Latino
Ingeniero de Sistemas y Computación. Desarrollador PHP. Mozilla Peru. Chamilo LMS Developer.