jairogarcíarincón

Los estados

3.08K
Los estados
15/03/2018

Contenidos

  1. El entorno y la plantilla
  2. Dibujar el mapa
  3. Los estados
  4. Programar el mapa
  5. El jugador
  6. Las trampas
  7. Las gemas
  8. La plataforma móvil
  9. Los sonidos
  10. Últimos retoques y código completo

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:

Publicado el 05 de Febrero de 2025

phasertiled map editor

Anterior
Siguiente