Construyendo juegos para Firefox OS TV

10 mayo, 2016 4:27 por

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks. Traducción por Rober Villar García.

Con Firefox OS centrado en un mundo de dispositivos conectados, es un buen momento para comenzar a construir juegos para nuevas y diferentes pantallas. Panasonic ofrece variedad de televisores que funcionan con Firefox OS — en este artículo explicaremos en términos generales cómo desarrollar juegos en HTML5 para grandes pantallas de televisión difiere del enfoque procedente de los teléfonos inteligentes.

Nueva visita a Captain Rogers

Mi trayecto como desarrollador de juegos y fundador de Enclave Games comenzó con el desarrollo de la primera versión de Captain Rogers (llamado Asteroid Belt of Sirius) — que fue construido hace ya casi tres años para teléfonos inteligentes de gama baja y optimizado para pequeñas pantallas. Recuerdo haberlo visto funcionando correctamente en el Geeksphone Keon, un dispositivo con una pantalla de 3.5″; en ese momento no podía haber imaginado que estaría trabajando en el mismo juego para un televisor de 50″.

Menú de juego Captain Rogers

Siempre he estado interesado en construir juegos en HTML5 utilizando nuevas tecnologías, la implementación de APIs de vanguardia, y su desarrollo en nuevas plataformas, por eso estaba tan emocionado cuando probé mi juego en el dispositivo Keon y vi que funcionaba muy bien. Cuando vi aparecer los primeros televisores inteligentes en el mercado me preguntaba si algún día tendríamos alguno funcionando con Firefox OS, y cómo se compararía el rendimiento y la facilidad de desarrollo a los teléfonos inteligentes y los ordenadores portátiles basados en la web. El estreno de los nuevos televisores Panasonic es una gran excusa para desempolvar el viejo Captain Rogers y ver si todavía tiene chispa para impresionar a la audiencia, aunque la audiencia ha cambiado a lo largo de estos últimos años.

La planificación de la nueva versión

Decidí reconstruir Captain Rogers con las tecnologías actuales y para grandes pantallas (con la televisión en mente). El juego original fue creado utilizando el motor de juego ImpactJS con una baja resolución base de 480 x 320.Avanzando hacia el día de hoy, he estado trabajando hasta ahora con Phaser haciendo juegos durante mas de dos años, y creo que es actualmente el mejor motor de juegos para juegos casuales 2D.

El rendimiento de los motores de renderizado de los navegadores ha mejorado mucho, entonces pensé que no sería un problema hacer el juego más grande y mantener todavía un framerate alto. Por eso decidí dar a la nueva versión de Captain Rogers una resolución base de 960 x 640 pixels — más que suficiente para hacer que el juego se viera mucho mejor que el original.

Captain Rogers 2 - portada

Al principio quise crear una copia exacta de la lógica del juego utilizando la nueva infraestructura. Originalmente iba a ser directamente una nueva versión HD, pero entonces decidí añadir características extra como disparar, enemigos flotantes, y algunos efectos visuales añadidos. Por lo tanto puedes considerarlo como un segundo episodio. Ya puedes jugar en la demostración que está siendo ahora exhibida en los televisores Panasonic con Firefox OS del CES 2016 en Las Vegas.

Actualmente estoy trabajando en Blackmoon Designs en la versión definitiva de Captain Rogers 2: Battle at Andromeda, que será lanzada dentro de uno o dos meses.

Comenzando a desarrollar

Muchos recursos han sido escritos durante los últimos años sobre cómo preparar tu juego HTML5 para teléfonos inteligentes con Firefox OS. Con el nuevo medio, el enfoque no es muy diferente (con algunas excepciones que se describen a continuación), por lo que podrás seguirlo en gran medida. Para comenzar a desarrollar juegos para televisores Panasonic con sistema operativo Firefox, necesitarás Firefox Nightly y WebIDE — todas las instrucciones paso a paso sobre cómo lanzar un juego en TV a través de la depuración remota de WebIDE puedes encontrarlas en este artículo de MDN.

Considerando grandes pantallas

La TV en tu salón es obviamente diferente al teléfono inteligente que tienes en tu mano, y los juegos y aplicaciones deben ser diseñados de manera diferente para el nuevo medio. Sin embargo, construir para la web nos ha enseñado que un juego debe ajustar su tamaño a la pantalla, no importa que sea un teléfono inteligente, tablet, portatil o monitor PC, por lo que una pantalla de TV no debería ser un problema.

Escalando

Escalar en Phaser puede ser una breve linea:

this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

Esto se encargará de escalar la base del juego al espacio de pantalla disponible, manteniendo la relación de aspecto, por lo que no se estirará de ningún modo. Hay otras maneras de escalar un juego, pero esta es la solución más sencilla y universal. Funcionará para pequeños teléfonos inteligentes y grandes televisores — el único aspecto a considerar es la resolución de los activos frente al rendimiento del juego, para que se vea bien y tenga un rendimiento razonablemente bueno al mismo tiempo. Las decisiones sobre la resolución dependen del tipo de juego que estés construyendo, de cuantos activos dispondrás, o de lo que va a suceder en la pantalla, por lo que es una elección personal.

Controles

Es bueno saber que el control remoto puede emular a las teclas del teclado, entonces si ya lo tienes implementado para tu juego funcionará fuera de la caja:

this.cursors = this.input.keyboard.createCursorKeys();
//...
if(this.cursors.right.isDown) {
  this.player.body.velocity.x += forcePush;
}

En este caso, las teclas del cursor (correspondientes a las flechas del teclado si estás probando y jugando el juego en el escritorio) son creadas y pueden ser comprobadas más tarde. Tienen los mismos códigos que las flechas en el control remoto, por eso es tan fácil implementarlas y probarlas. Si cuando se está jugando al juego se presiona la tecla de la flecha derecha, la nave del jugador se moverá a la derecha. Puedes encontrar exactamente las mismas teclas en el control remoto:

Captain Rogers 2 - control remoto

Las cuatro teclas con flechas direccionales tienen exactamente el mismo código que sus homólogas en el teclado, pero, ¿cómo compruebas las otras teclas en el control remoto? Puedes hacerlo con un acceso en JavaScript puro:

window.addEventListener("keydown", function(evt) {
  console.log(evt.keyCode);
}, this);

De esta manera verás las teclas relacionadas impresas en la consola cuando presionas los botones en el control remoto, entonces puedes asignarles las acciones correctamente en el juego. También puedes revisar este artículo para que te resulte más sencillo: trazado de botones del teclado al control remoto del televisor.

Optimización

Es importante saber que los televisores y otros dispositivos tienden a tener limitaciones de hardware. Para hacer que el juego funcione sin problemas es importante seguir algunas directrices y comprobar el rendimiento para eliminar algunos potenciales cuellos de botella. Mira este artículo sobre el juego «Power Surge» para obtener consejos.

Cambiando a código abierto

Cuando estaba preparando la versión de prueba de el nuevo Captain Rogers, decidí completar y abrir el código de la plantilla privada que yo, como Enclave Games, utilizo para el desarrollo de juegos. Puedes encontrar la plantilla de Enclave Phaser en GitHub. También me di cuenta de que ya tengo algunos proyecto de desarrollo de juegos allí (como Monster Wants Candy y Cyber Orb), y sería fantástico enumerarlos a todos en una página para que los desarrolladores pudieran aprender y beneficiarse de ellos. Por lo tanto también he publicado en open.enclavegames.com una lista de mis más interesantes proyectos de código abierto.

Desde el Mobile World Congress al Consumer Electronics Show

Estuve haciendo una demostración del primer Captain Rogers en el Mobile World Congress 2014 en Barcelona en una gama de teléfonos inteligentes con Firefox OS. Desde entonces, he dado muchas charlas sobre construcción de juegos para Firefox OS, incluyendo Captain Rogers como caso de estudio. Ahora es el momento para que el nuevo juego sea mostrado en televisores con Firefox OS, en el Consumer Electronics Show de Las Vegas, donde los nuevos televisores Panasonic UHD se han presentado.

Date una oportunidad y mira si el desarrollo de juegos para TV es algo que te gustaría hacer en el futuro. Si es así, no dudes en Twittearme para hacerme preguntas — estaré encantado de ayudarte.

The following two tabs change content below.

jorgev

AMO Product Manager at Mozilla
Jorge trabaja para el equipo de complementos de Mozilla, y se dedica a Mozilla Hispano y Mozilla Costa Rica en su tiempo libre. Actualmente está encargado del blog de Mozilla Hispano Labs.

Compartir artículo:

  • ¡Participa!

    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