Creando juegos HTML5 con Phaser

Phaser

Como ya dije para mi CV online usé el framework de Phaser para juegos en Javascript. Por qué? y porque no.

La verdad que hay muchos tipos de frameworks diferentes y estuve ojeando unos cuantos pero en el fondo pasa como con todo, elijas lo que elijas con el tiempo te das cuenta que igual hubiera sido mejor elegir otro, así que tras mirar muy por encima unos cuantos me decanté por Phaser pues me pareció que tenía muy buena proyección, que tenía muchos ejemplos, tenía un foro, tenía documentación y era gratis :)

En la web de HTML5 Game Engines podemos ver un listado de frameworks con información variada sobre cada uno de ellos, si es gratuito o no, el tipo de licencia, la última actualización…

Una cosa a tener en cuenta es que cargaremos ficheros y por temas de seguridad para poder probar el juego en forma local deberemos tener un servidor web montado de forma local. No es complicado y ya lo he escrito en otro post. Así que vamos a escribir nuestro primer código.

Antes de nada comentar que ya que están con la versión 1.2 Beta que será la siguiente en salir usaré esta para tal menester.

El código html será básico añadiendo Phaser y nuestro fichero js donde incluiremos el código necesario.

No hay mucho que resaltar añadimos dos ficheros js uno con phaser y el otro será donde tengamos nuestro código.

Para empezar haremos algo sencillito:

Expliquemos un poco el código

Creamos la variable game inicializando Phaser con el tamaño que queramos. El tercer parámetro que le pasamos es que tipo de renderizado tendrá. Al pasarle la constante Phaser.AUTO autodetectará y usara WebGL en caso de que esté disponible y sino Canvas. También podría pasarle Phaser.CANVAS o Phaser.WEBGL. El cuarto parámetro sería el id del elemento donde queremos que se renderice el juego, si no ponemos nada nos lo renderizará en el body. Y el siguiente parámetro será decirle el nombre de las métodos que tendrá que llamar cuando llame a preload, create o update (existen otro tipo de métodos que ya veremos)

Los métodos que usaremos serán:

  • preload, que se ejecutará al principio para cargar los recursos que necesitemos.
  • create, una vez que preload ha terminado se llamará a create que será donde creamos nuestros objetos e inicializamos sus valores.
  • update, una vez que create ha finalizado, update se ejecutará por cada frame. En modo local sin problemas tendremos una velocidad de 60fps que podrán verse reducidos por temas de rendimiento

Analicemos entonces nuestro código.

En la función preload:

Con esto cargaremos una imagen a la que asignaremos el tag de bg (que usaremos más adelante para referirnos a ella)  alojada en la carpeta assets y con nombre starfield.png

En la función create:

Añadimos al juego un  un tileSprite que es un sprite donde la imagen indicada se repite para rellenar todo el tamaño y también se puede mover para dar sensación de movimiento como ya veremos en  update.

Nosotros le pasaremos la posición x e y, el ancho y el alto y el nombre del recurso  que le hemos dado cuando lo creamos en update, en nuestro caso ‘bg‘. Lo asignamos a una variable a la que llamamos fondo para poder referirnos a ella más adelante.

En la siguiente línea, añadimos un texto a la pantalla pasandole la posición x e y, el texto que queremos mostrar y el estilo del texto. Finalmente para centrar de verdad el texto deberemos poner su anchor (punto de referencia) en el centro del objeto. Los valores del anchor va desde 0 a 1 siendo ambos extremos, por lo tanto en nuestro caso ponemos a 0,5 para que este en el centro tanto a lo ancho como a lo alto.

Y para terminar en la función update:

usaremos la propiedad tilePosition del tileSprite para decir que la imagen se desplace en su interior los pixeles que le digamos para generar una sensación de movimiento del fondo.

Y listo ya tenemos nuestro primer “juego” xD

2 Responses to “Creando juegos HTML5 con Phaser”

Deja un comentario

  • (will not be published)


5 + = 12