AngelFQC
MoysesCM
jvillalobos
SoftwareRVG
Josexv1
Por
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 televisiones que funcionan con sistema operativo Firefox — en este artículo explicaremos en términos generales como desarrollar juegos en HTML5 para grandes pantallas de televisión difiere del enfoque procedente de los teléfonos inteligentes..
Nueva visita a Capitán Rogers
Mi trayecto como desarrollador de juegos y fundador de Enclave Games, comenzó con el desarrollo de la primera versión de Capitán Rogers (llamado cinturón de asteroides de Sirius) — que fué construido hace ya casi tres años para teléfonos inteligentes de gama baja y optimizado para pequeñas pantallas. Recuerdo haber visto que funcione 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″.
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 perféctamente. Cuando vi aparecer los primeros televisotres inteligentes en el mercado me preguntaba si algún día tendríamos alguno funcionando con sistema operativo Firefox, y como el rendimiento y la facilidad de desarrollo podría compararse a los teléfonos inteligentes y los ordenadores portátiles basados en la web. El estreno de los nuevos televisores Panasonic es una gran escusa para desempolvar el viejo Capitán Rogers y ver si todavía tiene la 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 Capitán 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 2D .
Se ha conseguido un rendimiento de interpretación de los navegadores un poco mejor, entonces no pensé que sería un problema hacer el juego mas grande y mantener todavía la alta velocidad de imagenes. Por eso decidí dar a la nueva versión de Capitán Rogers una resolución base de 960 x 640 pixels — mas que suficiente para hacer parecer al juego un poco mejor que el original.
Al principio quise crear una copia exacta de la lógica del juego utilizando la nueva estructura. 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 sistema operativo Firefox del CES 2016 en Las Vegas.
Actualmente estoy trabajando en Blackmoon Designs en la version definitiva de Capitán Rogers 2: Batalla de Andromeda, que será lanzada en uno o dos meses.
Comenzando a desarrollar
Muchos recursos han sido escritos durante los últimos años sobre como preparar tu juego HTML5 para teléfonos inteligentes con sistema operativo Firefox . 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 como lanzar un juego en TV a traves de WebIDE’s con depuración remota 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 y el mantenimiento de 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 mas 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, por lo que se ve bien y tiene 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 mas tarde. Tienen los mismos codigos 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 exáctamente las mismas teclas en el control remoto:
Las cuatro teclas con flechas direccionales tienen exáctamente el mismo código que sus homólogas en el teclado, pero, ¿Como 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 corréctamente en el juego. También puedes revisar este artículo para que te resulte mas 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.
Partiendo de código abierto
Cuando estaba preparando la version de prueba de El nuevo Capitán Rogers decidí completarla con código abierto y la plantilla privada que en 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 algún 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 tambien he publicado en open.enclavegames.com, una lista de mis mas interesantes proyectos de código abierto.
4 comentarios
```-
Šime Vidas
```
9 Enero, 2016 a las 20:32
-
Andrzej Mazur
```
10 Enero, 2016 a las 03:46
-
Steven
```
18 Enero , 2016 a las 10:58
-
Francis Kim
```
18 enero , 2016 a las 16:36
```
```
```
```