Home | Clases | Videojuego avanzado con Phaser | Los estados

Los estados


Introducción

Antes de añadir el mapa a nuestro proyecto en Phaser, debemos inicializar, tal y como hicimos en el Juego Sencillo, el archivo script.js.

La cuestión es que en este caso lo vamos a hacer de forma diferente, y esto es porque vamos a crear nuestro juego con varios estados.

Estados

A nivel conceptual, los estados en Phaser podríamos definirlos como los capítulos de un libro, de forma que cada uno tiene una tarea o función diferente. Por ejemplo:

  • La pre-carga del juego
  • El menú principal
  • La pantalla de selección de niveles del juego
  • Una intro
  • Las opciones de jugadores, sonidos, imagen, etc.
  • Las puntuaciones
  • El juego en sí
  • La tienda de compras in-app

De esta forma, una de la premisas que podemos intuir y que siempre debemos cumplir es que, si bien puedo cargar varios estados para cambiar de uno a otro con facilidad, solo puede haber un estado activo en cada momento.

Igualmente, hay que tener claro que un estado puede contener objetos del juego: jugadores, fondos, marcadores, botones, etc., pero el estado como tal no tiene propiedades de visualización, esto es, el estado no es un objeto gráfico del juego y por tanto tampoco se renderiza ni nada parecido.

Para cargar varios estados al juego utilizamos el State Manager de Phaser, que es el que nos va a permitir saltar de un estado a otro con facilidad.

Creación de archivos

Si bien en proyectos anteriores usábamos un solo archivo script.js para todo el juego, a medida que se va complicando vamos a utilizar diferentes archivos de script de forma que mantengamos el código organizado.

Para este caso concreto, utilizaremos un archivo script.js general y 4 archivos js, uno para cada estado del juego.

De esta forma, crea los siguientes archivos nuevos dentro de la carpeta juegoknights/js:

  • script.js (si ya existía, borra todo su contenido y déjalo vacío).
  • estadoInicio.js
  • estadoOpciones.js
  • estadoJugar.js
  • estadoSalir.js


Enlazado de archivos (index.html)

Igual que hacíamos antes para enlazar el archivo script.js desde index.html, debemos hacer para enlazar cada uno de los archivos anteriores.

Para esto, el código del archivo juegoknights/index.html debe quedar como sigue:


<!DOCTYPE html>
<html>
<head>
<title>Juego Phaser</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/phaser.min.js"></script>
<script type="text/javascript" src="js/estadoInicio.js"></script>
<script type="text/javascript" src="js/estadoOpciones.js"></script>
<script type="text/javascript" src="js/estadoJugar.js"></script>
<script type="text/javascript" src="js/estadoSalir.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<h1>Juego Knights</h1>
</body>
</html>


Estilos básicos (style.css)

Además, vamos a añadir algunas líneas a la hoja de estilos juegoknights/css/style.css para centrar los textos y visualizarlo mejor:


body{
text-align: center;
}

h1{
margin: 1em 0;
}

canvas{
margin: 0 auto;
}


Imágenes para los botones

Para entender el ejemplo de los estados, vamos a añadir cuatro botones cuya finalidad será cambiar de estado. estos cuatro botones en formato png los puedes descargar haciendo clic AQUÍ.

Descomprime el archivo zip y copia los cuatro archivos png dentro de la carpeta juegoknights/img.

Inicialización de estados (script.js)

El archivo script.js se encargará únicamente de iniciar el juego y añadir (precargar) los diferentes estados del juego para que podamos utilizarlos, así como de lanzar el estado inicial del juego.

Para ello, añade el siguiente código al archivo juegoknights/js/script.js:


//Variable juego
var juego = new Phaser.Game(800, 600);

//Creador de estados
juego.state.add('EstadoInicio', MiJuego.EstadoInicio);
juego.state.add('EstadoOpciones', MiJuego.EstadoOpciones);
juego.state.add('EstadoJugar', MiJuego.EstadoJugar);
juego.state.add('EstadoSalir', MiJuego.EstadoSalir);

//Inicio el estado por defecto
juego.state.start('EstadoInicio');


Estado Inicio (estadoInicio.js)

En estadoInicio.js vamos a realizar las siguientes acciones:

Inicializar una variable MiJuego que nos servirá para los diferentes estados en los diferentes archivos
Inicializar una variable MiJuego.EstadoInicio vacía
Crear el prototipo o plantilla para la función anterior (lo que se creará cada vez que iniciemos una variable MiJuego.EstadoInicio
Dentro de ese prototipo, pre-cargaremos las imágenes con los botones, crearemos un fondo y un texto para ese estado y crearemos el menú (mediante la función crearMenu())
En este menú, cada botón llamará a la función cambiarEstado para cambiar el estado al hacer clic sobre él.

Este sería el código completo del archivo estadoInicio.js:


//Variable MiJuego
var MiJuego = {};

//Inicializo la función EstadoInicio vacía
MiJuego.EstadoInicio = function (juego) {

};

//Este es el prototipo o "plantilla" que se cargará cada vez que inicialice una nueva función MiJuego.EstadoInicio
MiJuego.EstadoInicio.prototype = {

preload: function () {

//Cargo las imágenes para los botones
this.load.spritesheet('botonInicio', 'img/BotonInicio.png', 100, 25);
this.load.spritesheet('botonOpciones', 'img/BotonOpciones.png', 100, 25);
this.load.spritesheet('botonJugar', 'img/BotonJugar.png', 100, 25);
this.load.spritesheet('botonSalir', 'img/BotonSalir.png', 100, 25);

},

create: function () {

//Pinto el fondo y el texto
this.stage.backgroundColor = '#95c11f';
this.texto = this.add.text(juego.world.centerX -100, juego.world.centerY - 50, 'Estado Inicio', { fontSize: '32px', fill: '#FFF' });

//Creo el menú de botones
crearMenu();

},

};

function crearMenu(){

//Creo un grupo para el menú
menu = juego.add.group();

//Añado los cuatro botones al menú
this.botonInicio = juego.make.button(125, 50, 'botonInicio', cambiarEstado, this, 2, 1, 0); //over, out, pressed
menu.add(this.botonInicio);

this.botonOpciones = juego.make.button(275, 50, 'botonOpciones', cambiarEstado, this, 2, 1, 0);
menu.add(this.botonOpciones);

this.botonJugar = juego.make.button(425, 50, 'botonJugar', cambiarEstado, this, 2, 1, 0);
menu.add(this.botonJugar);

this.botonSalir = juego.make.button(575, 50, 'botonSalir', cambiarEstado, this, 2, 1, 0);
menu.add(this.botonSalir);

//Fijo los botones para que no se muevan al moverse la cámara
menu.fixedToCamera = true;

}

function cambiarEstado(item){

//Cambio el estado al hacr clic en un botón
var estado = 'Estado'+item.key.substr(5);
juego.state.start(estado);

}


Resto de estados (estadoOpciones.js, estadoJugar.js y estadoSalir.js)

Para este ejemplo concreto, los archivos estadoOpciones.js, estadoJugar.js y estadoSalir.js serán realmente parecidos, ya que podrán aprovechar las funciones ya creadas en estadoInicio.js, y su única finalidad (de momento) será cambiar de estado.

Por ello, simplemente llevarán un color y un texto diferentes para ver mas claramente que hemos cambiado de estado.

Estado Opciones (estadoOpciones.js)


MiJuego.EstadoOpciones = function (juego) {

};

MiJuego.EstadoOpciones.prototype = {

create: function () {

//Fondo y texto
this.stage.backgroundColor = '#e47611';
this.texto = this.add.text(juego.world.centerX -100, juego.world.centerY - 50, 'Estado Opciones', { fontSize: '32px', fill: '#FFF' });

//Menú Botones
crearMenu();

}

};


Estado Jugar (estadoJugar.js)


MiJuego.EstadoJugar = function (juego) {

};

MiJuego.EstadoJugar.prototype = {

create: function () {

//Fondo y texto
this.stage.backgroundColor = '#4685ca';
this.texto = this.add.text(juego.world.centerX -100, juego.world.centerY - 50, 'Estado Jugar', { fontSize: '32px', fill: '#FFF' });

//Menú Botones
crearMenu();

}

};


Estado Salir (estadoSalir.js)


MiJuego.EstadoSalir = function (juego) {

};

MiJuego.EstadoSalir.prototype = {

create: function () {

//Fondo y texto
this.stage.backgroundColor = '#ca1c1c';
this.texto = this.add.text(juego.world.centerX -100, juego.world.centerY - 50, 'Estado Salir', { fontSize: '32px', fill: '#FFF' });

//Menú Botones
crearMenu();

}

};


Resultado final

Si ejecutamos el juego, inicialmente debería mostrarnos la pantalla verde que se muestra a continuación, y a medida que pulsemos lo botones del menú, podremos alternar entre los diferentes estados / pantallas del juego:


Fecha de publicación: 15/03/2018
Asignaturas: realización de proyectos multimedia interactivosaplicaciones webmontaje y mantenimiento de equipos
Temas: phaser tiled map editor
Utilizamos cookies propias y de terceros para mejorar su experiencia en la navegación. Al seguir navegando entendemos que acepta su uso.
Si lo desea, consulte nuestras políticas de privacidad y cookies
ENTENDIDO
[X] Cerrar

Contacta conmigo


[X] Cerrar

Acceso alumnos