En el tutorial anterior configuramos la mecánica básica de Maze Runner. En esta entrega mejoraremos la experiencia del jugador añadiendo un temporizador de UI personalizado y música de fondo.
Empezamos con el temporizador. Vamos a extender el script existente localPlayerHUD. Abre el archivo para revisar su estructura. Actualmente importamos Events, pero para mostrar el temporizador según el estado del juego también debemos importar GameState. Actualiza la importación de esta forma:
import { GameState, Events } from GameUtils;
Ahora añadimos propiedades para almacenar el estado del temporizador y su duración acumulada. Debajo de las propiedades existentes incorpora lo siguiente:
private timer = new Binding<string>(0); private timerDisplay = new Binding<string>(flex); private timerID: number = 0;
Definimos tres propiedades: timer como Binding<string> para el valor del contador, timerDisplay como Binding<string> para controlar su visibilidad en el HUD y timerID para guardar el identificador del intervalo. Usamos Binding para que cualquier cambio reactive la UI automáticamente.
Actualiza la función initializeUI para renderizar el temporizador en el HUD. Añade una vista en la esquina inferior izquierda que muestre el valor enlazado a timer y controla su visibilidad con timerDisplay. Estílala con fondo semitransparente y bordes redondeados para que no obstruya la partida. No es necesario pegar todo el bloque de UI, lo importante es mostrar un UI.Text vinculado a timer y envolverlo en un UI.View con display controlado por timerDisplay.
Antes de probar el temporizador necesitamos que el evento gameStateChanged llegue al HUD local. No podemos usar directamente connectLocalBroadcastEvent porque ese listener se destruye al cambiar la propiedad del HUD. La solución es enviar un sendNetworkEvent a cada HUD de jugador y escucharlo con connectNetworkEvent. Abre PlayerController y, al final de handleGameStateChanged, añade:
this.players.forEach((p: hz.Player) => { this.sendNetworkEvent(p, Events.gameStateChanged, { fromState, toState }); });
Esto garantiza que todos los jugadores reciban gameStateChanged en su HUD local cuando el estado del juego cambie. Ahora creamos el listener en el HUD, mostrando el temporizador al entrar en Starting, iniciando el conteo en Playing y deteniéndolo en Ending. Conéctalo dentro de start tras el listener de setHUDSprint:
this.connectNetworkEvent(this.entity.owner.get(), Events.gameStateChanged, (data: { fromState: GameState, toState: GameState }) => this.handleGameStateChanged(data.fromState, data.toState));
Implementa a continuación handleGameStateChanged:
handleGameStateChanged(fromState: GameState, toState: GameState) { if (toState === GameState.Starting) { this.showTimer(); } else if (toState === GameState.Playing) { this.startTimer(); } else if (toState === GameState.Ending) { this.stopTimer(); } }
Ahora implementamos showTimer, startTimer y stopTimer en el HUD. showTimer hace visible el HUD y reinicia el contador:
private showTimer() { this.timerDisplay.set(flex); this.timer.set(0); }
startTimer comienza el conteo usando un setInterval asíncrono y guarda su id en timerID:
private startTimer() { let t = 0; this.timerID = this.async.setInterval(() => { t++; this.timer.set(t.toString()); }, 1000); }
stopTimer detiene el conteo y oculta el HUD:
private stopTimer() { this.async.clearInterval(this.timerID); this.timerDisplay.set(none); }
Al entrar en modo vista previa verás el HUD del temporizador al pasar a Starting, comenzará a contar en Playing y se detendrá y ocultará en Ending.
Pasemos al sonido de fondo. Añadiremos dos pistas: una para el lobby y otra para el área de juego.
Prepara GameController. En propsDefinition añade las definiciones de las dos entidades de sonido:
static propsDefinition = { lobbySound: {type: hz.PropTypes.Entity}, playingSound: {type: hz.PropTypes.Entity}, };
En el editor de escritorio, entra en la pestaña Sounds dentro de Build, cambia a Music y elige dos pistas. Ajusta el volumen y desactiva la reproducción al inicio. Selecciona el objeto GameController y vincula las entidades de sonido a las propiedades lobbySound y playingSound.
En GameController.ts agrega propiedades privadas para almacenar las instancias casteadas a AudioGizmo:
private lobbySound: hz.AudioGizmo | undefined; private playingSound: hz.AudioGizmo | undefined;
Instáncialas al comienzo de start y reproduce la pista del lobby:
this.lobbySound = this.props.lobbySound?.as(hz.AudioGizmo); this.lobbySound?.play(); this.playingSound = this.props.playingSound?.as(hz.AudioGizmo);
Cambia la música según el estado del juego. En setGameState para GameState.Starting, antes de handleNewMatchStarting, añade:
this.lobbySound?.stop(); this.playingSound?.play();
En el mismo setGameState, para GameState.Finished, añade:
this.playingSound?.stop(); this.lobbySound?.play();
Ahora, al iniciar la vista previa, escucharás la música del lobby, al comenzar la partida cambiará a la pista de juego y, al finalizar, volverá la del lobby.
Con esto concluimos esta parte del tutorial. En la siguiente abordaremos la generación del laberinto.
En Q2BSTUDIO somos una empresa de desarrollo de software que crea aplicaciones a medida y software a medida con altos estándares de calidad. Somos especialistas en inteligencia artificial, ciberseguridad, automatización y mucho más. Si buscas acelerar tu roadmap con un socio experto en desarrollo de productos digitales y agentes IA, descubre cómo impulsamos proyectos end to end con nuestro equipo de ingeniería.
Si necesitas un equipo para construir tu próxima plataforma multiplataforma, te invitamos a conocer nuestros servicios de aplicaciones a medida y software a medida. Además, optimizamos despliegues modernos con servicios cloud aws y azure para que tu solución escale con seguridad y eficiencia.
Nuestros servicios incluyen ciberseguridad y pentesting, servicios inteligencia de negocio con power bi, ia para empresas y creación de agentes IA integrados en procesos críticos. Potenciamos tu estrategia de datos y analítica avanzada con modelos de inteligencia artificial, cuadros de mando y automatización segura y gobernada.