[SOLVED] Level Timer

Phaser 3
1

Hello!

I am making a “survival” level which lasts 2 minutes. I would like to make a timer appear in the top middle section of the screen.
I figured out how to time the delay event timer, but what I still need to do is display the countdown in MM:SS format as the timer ticks away. I did this before in Phaser 2, but it’s not entirely the same for Phaser 3…

Any help would be appreciated :slight_smile:

2

You’ll just need to get the progress of the timer (.getProgress) in your update method, and call a function that updates your timer display based on that data.

3

I’m not sure if there is built in code for this, however some division and modulus did the trick for me. Try this:

let timeLeft = 120; //Time in total seconds
let seconds = Math.floor(timeLeft % 60); //Seconds to display
let minutes = Math.floor(timeLeft / 60); //Minutes to display
4

I made this timer which works for me now when I call the function in update() { this.updateTimer(); }

//function to pad the time with zeros to stay consistent
zeroPad(number,size){
var stringNumber = String(number);
while(stringNumber.length < (size || 2)){
  stringNumber = "0" + stringNumber;
}
return stringNumber;
}
//function to update the timer
updateTimer(){
    this.timeLeft = ((120000 - this.timedEvent.delay*this.timedEvent.getProgress())/1000).toFixed(0);
    this.seconds = Math.floor(this.timeLeft % 60); //Seconds to display
    this.minutes = Math.floor(this.timeLeft / 60); //Minutes to display
    this.timeFormatted = (this.zeroPad(this.minutes,2)+":"+this.zeroPad(this.seconds,2));
    this.timerLabel.setText(this.timeFormatted);
}

This makes for a nice and consistent on-screen timer