CODEWITHSUNDEEP
countdowntimerphaser-framework
Steph
Steph

Reputation: 177

How to add countdown timer to Phaser game

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 relevant code there are no errors in the console but I can't get the timer to appear on the screen. I am new to Phaser and am still learning Javascript. Where I am going wrong please? I have posted only the relevant code below, and the code used for already existing text in the game that is working fine (text to count coins collected).

PlayState = {};

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

PlayState.preload = function () {

this.game.load.image('font:numbers', 'images/numbers.png'); //for the 
//HUD coin count - not the timer

};

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 () {

this.coinFont.text = `x${this.coinPickupCount}`; //for HUD coin count not 
//the timer

};

//TIMER CODE:
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;
};

//BELOW IS CODE FOR THE COIN COUNT NOT THE TIMER
 PlayState._createHud = function () {

                this.keyIcon = this.game.make.image(0, 30, 'icon:key');
                this.keyIcon.anchor.set(0, 0.5);
                 const NUMBERS_STR = '0123456789X ';


                 this.coinFont = this.game.add.retroFont('font:numbers', 20, 
                 26,NUMBERS_STR, 6);

                let coinIcon = this.game.make.image(this.keyIcon.width + 7, 
                 0, 'icon:coin');

                let coinScoreImg = this.game.make.image(coinIcon.x + 
                coinIcon.width, coinIcon.height / 2, this.coinFont);
                coinScoreImg.anchor.set(0, 0.5);

                this.hud = this.game.add.group();
                this.hud.add(coinIcon);
                this.hud.position.set(10, 10);

                this.hud.add(coinScoreImg);
                this.hud.add(this.keyIcon);


                this.hud.fixedToCamera = true;

            };


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

Upvotes: 2

Views: 3713

Answers (2)

Steph
Steph

Reputation: 177

I have finally solved the issue. The text was not showing because it was being rendered AFTER the background image in create. So it was there but being hidden by the background image. I simply moved the timer code to the end of create and it now works.

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);

};

Upvotes: 4

BdR
BdR

Reputation: 3048

You set the initial text to "0:00" and even that doesn't show on screen? First thing I would do is look at the coordinates where the text is located, maybe it's not visible off screen. Instead of this.game.world.centerX, this.game.world.centerY try something like 100,100, does it show up then? Also try to set very long initial text, so something like "blah test ABC 123" instead of "0:00" maybe makes some difference.

Secondly, maybe the Arial font is not available for some reason. If you leave out the {font: '15px..'center'} part it will use a default font, does that change anything?

Thirdly, you say you didn't post all your code here, but maybe you accidentally overwrite the variable this.timeText somewhere in you code? So check that you don't set that variable to be something else.

Finally, I would add a console.log to the updateTimer function, just to see if it is being called. so:

PlayState.updateTimer = function() {
    console.log('updateTimer was called: ' + this.timeInSeconds);
    this.timeInSeconds--;
    // etc.

Upvotes: 0

Related Questions