sábado, 8 de septiembre de 2018

La estructura de un programa en Phaser 3


Hola mundo!!!

Como no podía ser de otra manera vamos a ver como se estructura un programa en Phaser 3 con un sencillo y manido Hola Mundo!!!

Una página HTML

Phaser 3 se integra en una página HTML monda y lironda


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>Holi mundo</title>
     <script src="http://cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.min.js"></script> 
 </head>

 <body>
  
  <script type="text/javascript">

    ---> Aquí pondremos nuestro código
                     
  </script>
 </body>
</html>

Como podéis ver, se trata de una estructura típica HTML con su cabecera y cuerpo. En la cabecera es dónde cargamos Phaser. O bien llamándolo a la URL dónde lo tengamos descargado en nuestro site, o bien directamente de jsDeliver. Tenéis más info de esto en mi post sobre instalación de Phaser 3.

En el cuerpo ponemos la etiqueta de JavaScript y en su interior nuestro código.

Estructura de Phaser 3

El código siguiente iría dentro de las etiquetas de JavaScript.


var config = {
 type: Phaser.AUTO,
 width: 617,
 height: 410,
 backgroundColor: '#01DF01',
 parent: 'phaser-example',
 scene: {
  preload: preload,
  create: create,
  update: update
 }
};

var imgUnchi;
var game = new Phaser.Game(config);

function preload() {
 this.load.image('unchi', './unchi.png');
 this.load.image('texto', './texto.png');
}

function create() {
 this.add.image(300,100, 'texto');
 imgUnchi = this.add.image(305, 250, 'unchi');
}

function update() {
 imgUnchi.rotation += 0.01;
}

Lo primero que hacemos es declarar y dotar de valor una variable config que determinará los parámetros en los que se desarrollará el juego. Luego entro con más profundidad...

Después creamos el juego y guardamos la instancia en una variable game.  Fijaos que le pasamos la configuración definida anteriormente.

Posteriormente definimos la escena y las fases que conforman su ciclo de vida. Fijaos que éstas se han definido en el config. Hay más (init, render, shutdown, destroy) pero las básicas son:

Preload: Cargaremos todo lo cargable: Imágenes, sprites, sonidos... antes de nada, para que no hayan retardos después.

Create: Pintamos la escena. Es decir, colocamos todo en su sitio.

Update: Definimos cómo se mueve cada cosa. Esta escena se ejecuta contantemente un montón de veces por segundo. Vamos, el juego está aquí.  :-)

El concepto de escena es muy raro en Phaser 3. Una escena sería también el menú inicial, cada nivel de un juego de plataformas o la pantalla de Game Over. Incluso el menu de inventario que se superpone en un juego de rol o el mapa de un mundo que vemos en la esquinita de un shooter también serian escenas y cada una tendría su preload, create y update. Pero eso ya lo veremos. Aquí tenemos una única pantalla. No nos compliquemos nada más empezar...

La configuración Config

Evidentemente hay mucha cosas que configurar en nuestro juego, pero las básicas son:

Type: Define cómo se va a renderizar el juego. Básicamente si se van a usar las capacidades de nuestra tarjeta grafica (tecnología WEBGL) o si se lo vamos a dejar todo al procesador. Si ponemos AUTO nos aseguramos que si se puede, usamos la tarjeta gráfica.

Width y Height: ¿Qué tamaño va a tener la ventana de nuestro juego? Pues aquí se lo decimos.

BackgroundColor: O color de fondo de la ventanita del juego.

Parent: Aquí podéis poner cualquier cosa o una referencia a una etiqueta <div> de HTML. Me explico, si utilizamos la estructura web mostrada hasta ahora, Phaser 3 se ejecutará dónde le de la gana. Normalmente al final de nuestra página. En el ejemplo no pasa nada ya que no tenemos texto, ni imágenes... sólo Phaser. Pero imaginaos que queremos integrar Phaser en medio de una página con texto.  Entonces en nuestro código HTML pondríamos:

<div id="phaservaaqui"></div>

Y nuestro parámetro parent seria:

De hecho esto es lo que voy a hacer para ver el resultado del código anterior: