Botones

Este es el paso 15 de 16 del tutorial Gamedev Phaser. Puedes encontrar el c贸digo fuente como deber铆a quedar despu茅s de completar el tutorial en Gamedev-Phaser-Content-Kit/demos/lesson15.html.

En lugar de comenzar el juego de inmediato, podemos dejar la decisi贸n en el jugador a帽adiendo un bot贸n de Inicio que pueda pulsar. Vamos a investigar c贸mo hacerlo.

Variables nuevas

Necesitamos una variable para almacenar un valor booleano que represente si el juego se est谩 jugando actualmente o no, y otra para representar a nuestro bot贸n. A帽ade las siguientes lineas a tu declaraci贸n de variables:

var playing = false;
var startButton;

Cargando el bot贸n de spritesheet

Podemos cargar el bot贸n de spritesheet de la misma manera que cargamos la animaci贸n del movimiento de la pelota. A帽ade lo siguiente al bot贸n de la funci贸n preload():

game.load.spritesheet('button', 'img/button.png', 120, 40);

El marco de un solo bot贸n mide 120 pixels de ancho y 40 pixels de alto.

Tambi茅n se debe tomar el bot贸n de spritesheet de Github, y guardarlo en el directorio /img.

A帽adiendo el bot贸n al juego

Para a帽adir el bot贸n al juego usaremos el m茅todo add.button. A帽ade las siguientes lineas del bot贸n a la funci贸n create():

startButton = game.add.button(game.world.width*0.5, game.world.height*0.5, 'button', startGame, this, 1, 0, 2);
startButton.anchor.set(0.5);

Los par谩metros del m茅todo button() son los siguientes:

  • Las coordenadas x e y del bot贸n.
  • El nombre del elemento gr谩fico que se mostrar谩 en el bot贸n.
  • Una funci贸n de callback que se ejecutar谩 cuando se presione el bot贸n.
  • Una referencia a this para especificar el contexto de ejecuci贸n.
  • Los marcos que usaremos para los eventos over, out and down.

Nota: El evento over es igual al hover, out es cuando el puntero se mueve fuera del bot贸n y down cuando el bot贸n es presionado.

Ahora necesitamos definir la funci贸n startGame() referenciada en el siguiente c贸digo:

function startGame() {
    startButton.destroy();
    ball.body.velocity.set(150, -150);
    playing = true;
}

Cuando se presiona el bot贸n, se borra el bot贸n, se establecen la velocidad inicial de la pelota y la variable playing a true.

Para terminar con esta secci贸n, vuelve a la funci贸n create(), encuentra la linea ball.body.velocity.set(150, -150);, y b贸rrala. Solo queremos que la pelota se mueva cuando se presione el bot贸n, no antes.

Mantener la paleta inm贸vil antes de que comience el juego

Funciona como se esperaba, pero a煤n podemos mover la paleta cuando el juego a煤n no ha comenzado, lo que parece un poco tonto. Para impedir esto, podemos aprovechar la variable playing y hacer que la paleta solo se mueva cuando el juego haya empezado. Para hacer esto, ajustamos la funci贸n update() as铆:

function update() {
    game.physics.arcade.collide(ball, paddle, ballHitPaddle);
    game.physics.arcade.collide(ball, bricks, ballHitBrick);
    if(playing) {
        paddle.x = game.input.x || game.world.width*0.5;
    }
}

De esta manera la paleta es inamovible hasta que todo est茅 cargado y preparado, pero s铆 cuando el juego actual comience.

Compara tu c贸digo

Puedes comprobar el c贸digo acabado en esta lecci贸n en la demo de abajo, y jugar para entender mejor c贸mo funciona:

Siguientes pasos

La 煤ltima cosa que haremos en esta serie de art铆culos es hacer el juego m谩s interesante a帽adiendo algo de aleatorizaci贸n a la forma en la que la pelota rebota con la paleta.