Hace poco tuve que iniciar a desarrollar algunos juegos para una pagina web que debían funcionar tanto en desktop como en tabletas y pues realice un benchmark de las herramientas que hay en el mercado que les compartire en un siguiente post.
De los framework encontrados uno de los mejores es Phaser JS, desarrollado por Richard Davey@photonstorm. Es un framework muy completo para desarrollar juegos en 2D. Personalmente ya he desarrollado dos juegos sobre este framework y los resultados han sido sumamente satisfactorios y los tiempos de desarrollo muy cortos.
El repositorio de Github con el proyecto se puede encontrar en https://github.com/photonstorm/phaser
En este breve tutorial, explicare como crear nuestro primer proyecto usando Yeoman el cual es una herramienta para crear andamiajes para crear de una forma rapida diversas aplicaciones web. Con Yeoman se pueden generar tanto proyecto completos como partes para los mismo desde la consola.
Lo primero que tenemos que realizar es descargar Node JS si no lo tenemos instalado en nuestro equipo. Node JS tiene un manejador de paquetes llamado NPM (Node Package Manager) que es un repositorio de proyectos de NodeJS en el cual encontraremos un proyecto llamado generator-phaser . Para verificamos que Node este instalado
Shell
1
2
$node-v
v0.10.30
Ejecutamos el siguiente comando para instalar Yeoman, puede necesitar ejecutarlo como administrador para que funcione.
Shell
1
$npm install-gyo
El siguiente paso es instalar el proyecto que nos permitirá construir la plantila que es el generator-phase
Shell
1
$npm install-ggenerator-phaser-official
Tecnicamente en este punto podriamos construir nuestro proyecto, pero puede ser necesario eliminar la cache del manejador de paquetes para que funcione sin problemas. Para ellos ejecutamos lo siguiente:
Shell
1
$npm cache clean
Ya en este punto podemos crear el proyecto ejecutando YO
O también copiando directamente
Shell
1
$yo phaser-official
La figura anterior muestra los archivos autogenerados para nuestra plantilla. Si colocamos en la terminal (parados en nuestro proyecto) lo siguiente vemos nuestro proyecto corriendo
Shell
1
$grunt
Si la version de npm es menor a 1.2.10 se debe instalar grunt (versiones posteriores ya lo incluyen)
Shell
1
$npm install-ggrunt-cli bower
Se abrirá nuestro browser predefinido con el siguiente demo
Esta plantilla tiene una forma muy bien estructura para iniciar nuestro primer proyecto con Phaser. Paralelamente el generador permite la creación de estados para el proyecto de manera rapida mendiante el siguiente comando:
Shell
1
$yo phaser-official:state"stateName"
Con esto tenemos la configuración del proyecto inicial terminada y podemos arrancar a trabajar.