# \[SOLVED\] Level Timer

**URL:** <https://phaser.discourse.group/t/solved-level-timer/3064>\
**Category:** Phaser 3\
**Created:** [July 10, 2019, 4:37pm UTC](https://phaser.discourse.group/t/solved-level-timer/3064 "2019-07-10T16:37:49Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ThePandaJam](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/thepandajam/32/1814_2.png) [@ThePandaJam](https://phaser.discourse.group/u/ThePandaJam)\
**Post date:** [July 10, 2019, 4:37pm UTC](https://phaser.discourse.group/t/solved-level-timer/3064/1 "2019-07-10T16:37:49Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![prob](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/prob/32/628_2.png) [@prob](https://phaser.discourse.group/u/prob)\
**Post date:** [July 10, 2019, 4:47pm UTC](https://phaser.discourse.group/t/solved-level-timer/3064/2 "2019-07-10T16:47:32Z")

</div>

You’ll just need to get the progress of the timer ([.getProgress](https://photonstorm.github.io/phaser3-docs/Phaser.Time.TimerEvent.html#getProgress)) in your update method, and call a function that updates your timer display based on that data.

---

<div class="post-metadata">

**Author:** ![Jake.Caron](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jake.caron/32/1841_2.png) [@Jake.Caron](https://phaser.discourse.group/u/Jake.Caron)\
**Post date:** [July 10, 2019, 6:27pm UTC](https://phaser.discourse.group/t/solved-level-timer/3064/3 "2019-07-10T18:27:28Z")

</div>

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

```javascript
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

```

---

<div class="post-metadata">

**Author:** ![ThePandaJam](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/thepandajam/32/1814_2.png) [@ThePandaJam](https://phaser.discourse.group/u/ThePandaJam)\
**Post date:** [July 11, 2019, 11:37am UTC](https://phaser.discourse.group/t/solved-level-timer/3064/4 "2019-07-11T11:37:17Z")

</div>

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