Home | Clases | Videojuego sencillo con Phaser | Dibujar el mundo

Dibujar el mundo


En este capítulo nos centraremos en el método create() para pintar sobre el canvas los diferentes elementos del videojuego, a saber: fondo, suelo, vigas, jugador y estrellas.

El fondo, el suelo y las vigas

Para mostrar estos tres elementos, añade las siguientes variables después de la declaración de la variable juego e incluye el siguiente código dentro de el método create():


/* Declaración de la variable juego */

//Declaración de variables
var plataformas; //Grupo para definir las características del suelo y las vigas
var suelo, viga1, viga2; //Para los diferentes elementos del grupo plataformas

/** Método preload **/

//Aquí iniciamos diferentes componentes del juego y lo arrancamos
function create() {

//Habilitamos el sistema de física Arcade de Phaser (velocidad, movimientos, colisiones, etc)
juego.physics.startSystem(Phaser.Physics.ARCADE);

//Pinto el fondo
juego.add.sprite(0, 0, 'cielo');

//Inicializo el grupo para el suelo y las vigas
plataformas = juego.add.group();

//Habilito la física para cualquier elemento del grupo
plataformas.enableBody = true;

//Pinto el suelo
suelo = plataformas.create(0, juego.world.height - 64, 'suelo');

//Escalo el suelo para que ocupe el ancho completo y el doble de alto (de 400x32 a 800x64)
suelo.scale.setTo(2, 2);

//Evito que el suelo se "caiga" al caer un objeto sobre él
suelo.body.immovable = true;

//Primera viga (uso la misma imagen que para el suelo)
viga1 = plataformas.create(400, 400, 'suelo');
viga1.body.immovable = true;

//Segunda viga
viga2 = plataformas.create(-150, 250, 'suelo');
viga2.body.immovable = true;

}


Estas son las acciones realizadas:

  • Hemos añadido la física al juego para poder establecer acciones como solidez de objetos, velocidad, rebote, movimientos, etc.
  • Hemos creado un grupo para añadir todos los elementos de tipo plataforma de modo que podamos establecer acciones en grupo más adelante.
  • Hemos añadido el suelo a 64 px de la altura total del juego y lo hemos escalado al doble de su tamaño para que ocupe todo el ancho de la pantalla y 64px de alto (hasta el final de la altura). Por último, le hemos dicho que no se puede mover, esto es, que cuando algún objeto (estrella, jugador, etc.) rebote sobre él, no se "caiga" hacia abajo.
  • Hemos creado dos vigas a unas distancias determinadas en pixeles utilizando de nuevo la imagen del suelo, y les hemos dicho que tampoco se pueden mover.

Si ahora ejecutamos el juego, deberíamos acceder a una pantalla similar a esta:

Fuente: http://phaser.io


El jugador

Para mostrar al jugador, añade las siguientes variables después de la declaración de las variables anteriores e incluye el siguiente código dentro de el método create(), después del código anterior:


//Declaración de variables
var jugador; //Para el jugador

/* Resto de código */

//Aquí iniciamos diferentes componentes del juego y lo arrancamos
function create() {

/* Resto de código */

//Dibujo el jugador con su spritesheet
jugador = juego.add.sprite(32, juego.world.height - 150, 'jugador');

//Habilitiamos la física al jugador
juego.physics.arcade.enable(jugador);

//Propiedades físicas del jugador
jugador.body.bounce.y = 0.2; //Rebote al chocar con un objeto
jugador.body.gravity.y = 300; //Gravedad
jugador.body.collideWorldBounds = true; //Hago que se choque con los bordes del juego

//Animaciones para los movimientos izquierda y derecha
jugador.animations.add('izquierda', [0, 1, 2, 3], 10, true); //Alterna esas imágenes a 10 frames por segundo en bucle
jugador.animations.add('derecha', [5, 6, 7, 8], 10, true); //Alterna esas imágenes a 10 frames por segundo en bucle

}


Estas son las acciones realizadas:

Hemos añadido el jugador con su spritesheet para que aparezca a 150px de la altura total del juego
Hemos habilitado las opciones de física para el jugador
Hemos configurado valores para el rebote, la gravedad y la colisión con los bordes del juego
Hemos declarado las animaciones izquierda y derecha para utilizarlas cuando añadamos los controles de teclado del videojuego y que el muñeco de la sensación de que camina hacia ambos lados.

Fuente: http://phaser.io


Al ejecutar el juego, vemos que aparece el jugador y cae hasta el final del juego (en altura). Esto es porque aún no le hemos dicho que debe colisionar con las plataformas. Además, mira siempre hacia la izquierda, que es el primer frame de nuestro spritesheet. esto es porque aún no le hemos establecido cual debe mostrar.
Fecha de publicación: 01/02/2018
Asignaturas: realización de proyectos multimedia interactivosmontaje y mantenimiento de equipos
Temas: phaser video sonido para videojuegos
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