How to add countdown timer to Phaser game

[Steph]

I am trying to add a simple countdown timer to a Phaser game. When the timer ends I want the game to restart. After adding the timer code there are no errors in the console but I can't get the timer to appear on the screen. Where I am going wrong please? I am new to Phaser and am still learning Javascript - any help would be greatly appreciated! Please see my code below (for clarity, I have only pasted the relevant code, not the whole thing). Thanks for any help in advance.

PlayState = {};

PlayState.init = function () {
//....
};

PlayState.preload = function () {
//....
};

PlayState.create = function () {

//TIMER CODE:
this.timeInSeconds = 120;
this.timeText = this.game.add.text(this.game.world.centerX, 
this.game.world.centerY, "0:00",{font: '15px Arial', fill: '#FFFFFF', align: 
'center'});
this.timeText.anchor.set(0.5, 0.5);
this.timer = this.game.time.events.loop(Phaser.Timer.SECOND, 
this.updateTimer, this);

};

PlayState.update = function () {
//.....
};

PlayState.updateTimer = function() {
    this.timeInSeconds--;
    var minutes = Math.floor(this.timeInSeconds / 60);
    var seconds = this.timeInSeconds - (minutes * 60);
    var timeString = this.addZeros(minutes) + ":" + this.addZeros(seconds);
    this.timeText.text = timeString;

    if (this.timeInSeconds == 0) {
        this.game.state.restart();
    }
};

 //add leading zeros to any number less than 10
 //for example turn 1 to 01

PlayState.addZeros = function(num) {
    if (num < 10) {
        num = "0" + num;
    }
    return num;
};

window.onload = function () {
  let game = new Phaser.Game(1280, 800, Phaser.CANVAS, 'game');
  game.state.add('play', PlayState);
  game.state.start('play');
};

 

[ThatGirlDee]

Did you find an answer to this? I am having a similar problem. 

[Steph]

@ThatGirlDee yes I did. The text was not showing because it was being rendered AFTER the game's background image in PlayState.create. So the timer was there, but it was being hidden by the background image. I simply moved the timer code to the end of PlayState.create and it is now showing. See below: 

PlayState.create = function () {


  this.game.world.setBounds(0, 0, 2560, 800);

  background1 = this.game.add.sprite(0, 0, 'background');

  background2 = this.game.add.sprite(1280, 0, 'background2');

  this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
  this.game.scale.setMinMax(480,320,1280,800);

  this.game.scale.windowConstraints.bottom = 'visual';

  this.game.add.image(0, 0, 'background');
  this._loadLevel(this.game.cache.getJSON('level:1'));

 this._createHud();

//TIMER CODE SHOULD GO HERE AND NOT AT THE BEGINNING OF CREATE

    this.timeInSeconds = 120;
    this.timeText = this.game.add.text(220, 30, "0:00",{font: '30px Arial', fill: 
    '#FFFFFF', align: 'center'});
    this.timeText.anchor.set(0.5, 0.5);
    this.timer = this.game.time.events.loop(Phaser.Timer.SECOND, this.updateTimer, 
    this);
};

 

[quiphop]

Heya!
I had almost similar question back in the days
Please check https://github.com/QuipHop/crackball/blob/master/src/js/game_scene.js 
I've used there looped phaser's timer (timer variable in the source code) 
Let me know if You will have questions