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.floory 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.textpara 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.
Phaser - Desarrollo de Juegos con JavaScript
Módulo 1: Introducción al Desarrollo de Juegos y Phaser
- ¿Qué es el Desarrollo de Juegos?
- Descripción general de Phaser
- Configurando tu Entorno de Desarrollo
- Tu Primer Proyecto con Phaser
Módulo 2: Fundamentos de Phaser
- Entendiendo el Bucle de Juego
- Configuración del Juego y Escenas
- Cargando y Mostrando Imágenes
- Trabajando con Texto
- Manejo de Entrada (Teclado y Ratón)
Módulo 3: Sprites y Animación
- ¿Qué son los Sprites?
- Añadiendo y Moviendo Sprites
- Fundamentos de Animación de Sprites
- Grupos de Sprites y Gestión
Módulo 4: Física e Interactividad en el Juego
- Introducción a la Física en Phaser
- Habilitando Física en Sprites
- Colisiones y Superposiciones
- Objetos Interactivos y Eventos
Módulo 5: Mundo del Juego y Cámara
- Creando Tilemaps y Mundos de Juego
- Desplazamiento y Control de Cámara
- Capas y Gestión de Profundidad
Módulo 6: Audio e Interfaz de Usuario
Módulo 7: Arquitectura del Juego y Gestión de Estados
- Organizando el Código del Juego
- Gestionando Múltiples Escenas
- Guardando y Cargando el Estado del Juego
Módulo 8: Características Avanzadas de Jugabilidad
- Efectos de Partículas
- Tweens y Animaciones
- Temporizadores y Eventos Retardados
- IA y Comportamiento de Enemigos
