El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En esta lección aprenderás a mostrar información relevante al jugador, como la puntuación, vidas, tiempo y otros datos, utilizando un HUD (Heads-Up Display) en Phaser. El HUD es esencial para la experiencia de usuario, ya que permite al jugador estar al tanto de su progreso y estado dentro del juego.

Conceptos Clave

HUD (Heads-Up Display): Es la capa de información superpuesta en la pantalla que muestra datos importantes al jugador (puntuación, vidas, tiempo, etc.).
Texto Dinámico: Elementos de texto que cambian durante el juego (por ejemplo, la puntuación que aumenta).
Actualización de HUD: Proceso de refrescar la información mostrada en el HUD en respuesta a eventos del juego.

¿Por qué es importante el HUD?

Feedback inmediato: Informa al jugador sobre su desempeño.
Motivación: Ver la puntuación o los logros incentiva a seguir jugando.
Control: Permite saber cuántas vidas quedan, cuánto tiempo falta, etc.

Elementos Comunes del HUD

Elemento	Descripción	Ejemplo Visual
Puntuación	Número que refleja el progreso o logros	`Score: 1500`
Vidas	Cantidad de intentos restantes	`Lives: ♥♥♥`
Tiempo	Cronómetro o cuenta regresiva	`Time: 01:23`
Nivel	Indica el nivel actual del juego	`Level: 2`
Objetos	Cantidad de objetos recolectados	`Coins: 5/10`

Ejemplo Práctico: Mostrando la Puntuación en Phaser

A continuación, crearemos un HUD básico que muestre la puntuación y las vidas del jugador.

Paso 1: Crear el Texto del HUD

class MyGameScene extends Phaser.Scene {
  constructor() {
    super({ key: 'MyGameScene' });
  }

  create() {
    // Variables de estado
    this.score = 0;
    this.lives = 3;

    // Crear texto de puntuación
    this.scoreText = this.add.text(16, 16, 'Puntuación: 0', {
      fontSize: '24px',
      fill: '#fff'
    });

    // Crear texto de vidas
    this.livesText = this.add.text(16, 48, 'Vidas: 3', {
      fontSize: '24px',
      fill: '#fff'
    });
  }
}

Explicación:

this.add.text(x, y, texto, estilo): Añade un texto en la posición (x, y) con el contenido y estilo especificados.
Guardamos las referencias a los textos (scoreText, livesText) para poder actualizarlos más adelante.

Paso 2: Actualizar el HUD

Cada vez que el jugador gane puntos o pierda una vida, debemos actualizar el HUD.

// Cuando el jugador gana puntos
this.score += 10;
this.scoreText.setText('Puntuación: ' + this.score);

// Cuando el jugador pierde una vida
this.lives -= 1;
this.livesText.setText('Vidas: ' + this.lives);

Explicación:

setText(nuevoTexto): Cambia el contenido del texto mostrado.
Actualizamos el valor de la variable y luego el texto en pantalla.

Ejemplo Completo

class MyGameScene extends Phaser.Scene {
  constructor() {
    super({ key: 'MyGameScene' });
  }

  create() {
    this.score = 0;
    this.lives = 3;

    this.scoreText = this.add.text(16, 16, 'Puntuación: 0', {
      fontSize: '24px',
      fill: '#fff'
    });

    this.livesText = this.add.text(16, 48, 'Vidas: 3', {
      fontSize: '24px',
      fill: '#fff'
    });

    // Simulación: cada 2 segundos suma puntos y cada 5 segundos pierde una vida
    this.time.addEvent({
      delay: 2000,
      callback: () => {
        this.score += 10;
        this.scoreText.setText('Puntuación: ' + this.score);
      },
      loop: true
    });

    this.time.addEvent({
      delay: 5000,
      callback: () => {
        this.lives -= 1;
        this.livesText.setText('Vidas: ' + this.lives);
      },
      loop: true
    });
  }
}

Ejercicio Práctico

Objetivo:
Agrega un cronómetro al HUD que muestre el tiempo transcurrido desde el inicio del juego.

Instrucciones

Crea una variable para almacenar el tiempo.
Añade un texto al HUD para mostrar el tiempo.
Actualiza el texto cada segundo.

Solución

class MyGameScene extends Phaser.Scene {
  constructor() {
    super({ key: 'MyGameScene' });
  }

  create() {
    this.score = 0;
    this.lives = 3;
    this.timeElapsed = 0;

    this.scoreText = this.add.text(16, 16, 'Puntuación: 0', {
      fontSize: '24px',
      fill: '#fff'
    });

    this.livesText = this.add.text(16, 48, 'Vidas: 3', {
      fontSize: '24px',
      fill: '#fff'
    });

    this.timeText = this.add.text(16, 80, 'Tiempo: 0', {
      fontSize: '24px',
      fill: '#fff'
    });

    // Actualizar tiempo cada segundo
    this.time.addEvent({
      delay: 1000,
      callback: () => {
        this.timeElapsed += 1;
        this.timeText.setText('Tiempo: ' + this.timeElapsed);
      },
      loop: true
    });
  }
}

Consejos y Errores Comunes:

Olvidar actualizar el texto: Si solo cambias la variable y no el texto, el HUD no reflejará el cambio.
Posiciones superpuestas: Asegúrate de que los textos no se solapen en pantalla.
Formato de tiempo: Para mostrar minutos y segundos, puedes usar Math.floor y el operador % para dividir el tiempo en minutos y segundos.

Resumen

El HUD es fundamental para mostrar información relevante al jugador.
Puedes usar this.add.text para crear elementos de texto en Phaser.
Actualiza el HUD cada vez que cambie el estado del juego (puntuación, vidas, tiempo, etc.).
Es importante mantener el HUD claro, visible y actualizado.

¡Ahora ya sabes cómo mostrar y actualizar la puntuación y otros elementos del HUD en tus juegos con Phaser! En la próxima lección aprenderás sobre la arquitectura del juego y cómo organizar tu código para proyectos más grandes.

Mostrando Puntuaciones y HUD

Conceptos Clave

¿Por qué es importante el HUD?

Elementos Comunes del HUD

Ejemplo Práctico: Mostrando la Puntuación en Phaser

Paso 1: Crear el Texto del HUD

Paso 2: Actualizar el HUD

Ejemplo Completo

Ejercicio Práctico

Instrucciones

Solución

Resumen

Phaser - Desarrollo de Juegos con JavaScript

Módulo 1: Introducción al Desarrollo de Juegos y Phaser

Módulo 2: Fundamentos de Phaser

Módulo 3: Sprites y Animación

Módulo 4: Física e Interactividad en el Juego

Módulo 5: Mundo del Juego y Cámara

Módulo 6: Audio e Interfaz de Usuario

Módulo 7: Arquitectura del Juego y Gestión de Estados

Módulo 8: Características Avanzadas de Jugabilidad

Módulo 9: Despliegue y Optimización

Módulo 10: Proyecto Final