Una vez ya tengamos instalado Phaser.js y tengamos la estructura de carpetas podemos empezar a escribir en el fichero main.js. Puedes usar cualquier editor de texto. Los mejores son Sublime Text, Atom y Visual Studio (tanto Community, solo Windows, como Code, multiplataforma). También es bueno y rápido Notepad++.
Para iniciar Phaser tenemos que crear un nuevo objeto Game. En Phaser todos los objetos y componentes se encuentran bajo el prefijo Phaser, para que no choquen con otras librerías o nuestros propios componentes. Además Phaser necesita 3 funciones importantísimas, preload, create y update.
- preload, se ejecuta nada más Phaser es iniciado. La usaremos para cargar los recursos del juego. Haremos una pantalla de carga
- create, se ejecuta cuando Phaser ha terminado de cargar todo lo necesario. La usaremos para crear los escenarios y personajes.
- update, se ejecuta constantemente. La usaremos para la lógica del juego (¿has pulsado esta tecla?, ¿el malo te ha dado?,...) pues comprueba constantemente el universo ficticio que creamos en Phaser. </ul>
var game = new Phaser.Game(600,480,Phaser.AUTO,{preload: preload, create: create, update: update});
function preload(){
}
function create(){
}
function update(){
}
</code></pre>
¿Qué parámetros necesita Phaser.Game?
- Los dos primeros números son las dimensiones del juego. En este caso, 600 de ancho por 480 de alto.
- El tercer argumento, Phaser.AUTO, indica a Phaser que motor de renderizado ha de usar. Phaser está basado en Pixi.js y este soporta 2D de dos formas. A través de OpenGL, usando WebGL (modo por defecto, pues usa la tarjeta gráfica y teóricamente es más rápido) y con la API Canvas 2D de HTML5. Esta es soportada por muchos más navegadores, teléfonos, etc. Indicando AUTO le decimos que intente usar WebGL, y si no está disponible, use la API Canvas 2D.
- El cuarto argumento tiene las funciones básicas de Phaser. En este caso las hemos llamado iguales que como las llama la API de Phaser. Abajo las hemos declarado, pero están vacías.
</ul>
Una pantalla de carga
La función preload como hemos dicho sirve para cargar todo lo que necesitemos en el juego. Phaser gestiona las cargas de una manera muy sencilla, a través de un objeto Phaser.Loader accesible en game.load. Lo primero que tenemos que hacer es añadir una lista de recursos que deben ser cargados.
function preload(){
game.load.image("imagen","img/imagen.png"); // Cargar una imagen, con ID imagen, ubicada en img/imagen.png
game.load.images(["chico","chica","policia"],["img/chico.png","img/chica.png","img/policia.png"]); // Añade imágenes en lote
game.load.audio("disparo","sfx/disparo.ogg"); // Carga un audio en formato Ogg
game.load.audio("disparo",["sfx/disparo.ogg","sfx/disparo.wav"]); // Carga un audio y elije el formato que más convenga según el navegador
game.load.pack("nivel1","maps/nivel1.json"); // Carga los recursos especificados en el fichero PACK
game.load.tilemap("casa","maps/casa.json",Phaser.Tilemap.TILED_JSON); // Carga un mapa de Tiled en formato JSON
}
Con estas funciones tendrás suficiente para ir cargando tus recursos, pero Phaser dispone de más funciones, cargar tipografías, textos, ficheros XML, vídeos, shaders, definiciones de cuerpos físicos, binarios,...
Ahora vamos a añadir una pantalla de carga para que el jugador esté informado del progreso de la carga. Usaremos un rectángulo, veremos las formas primitivas en el siguiente tutorial.
function preload(){
var progress = game.add.graphics(0,0);
game.load.onFileComplete.add(function(prg){
progress.beginFill(0xFF3300);
progress.drawRect(0,0, prg*4.8,100);
progress.endFill();
});
game.load.image....
....
}
Esta barra mostrará una barra en la parte superior que irá avanzando hasta llenar el ancho de la pantalla.
