Steph

How to add countdown timer to Phaser game

Recommended Posts

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

 

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.