martes, 26 de julio de 2016

Iniciar Phaser.js y pantalla de carga

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.



var game = new Phaser.Game(600,480,Phaser.AUTO,{preload: preload, create: create, update: update});
function preload(){

}

function create(){

}
function update(){

}
¿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.

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.

No hay comentarios:

Publicar un comentario