Phaser Timer Basics Tutorial

How to use Phaser Timers

Timers can be a big part of game development. They can set up how often you want to release monsters or delay the next part of the game from appearing until your player reads a message. Timers can also be used to build clocks that can count up or down and Phaser has what you need to put together several different options for timers. Phaser Timer Snippets can be found under miscellaneous snippets.

One-Shot Timers

A one-shot timer is a timer that will fire an event once after a specified number of seconds. You can also think of it as a delay timer. This example below will call a function called delayOver after 5 seconds.

game.time.events.add(Phaser.Timer.SECOND*5, this.delayOver, this);

Looping Timer

A looping timer works in much the same way as the one-shot but it will keep firing the function until stopped. This code will call a function called addMonster every second

game.time.events.loop(Phaser.Timer.SECOND, this.addMonster, this);

Stopping a Timer

To stop a timer you’ll need to add a reference to it first by assigning it to a variable.

this.monsterTimer=game.time.events.loop(Phaser.Timer.SECOND, this.addMonster, this);

Then when you want to stop the timer you can turn it off like this:

game.time.events.remove(this.monsterTimer);

Adjusting Time

Phaser timers measure in milliseconds. 1000 milliseconds is equal to 1 second. Using the Phaser.Timer.SECOND is the same as just placing 1000 as the first parameter but using the constant makes it easier to read. By multiplying or dividing this constant we can adjust the frequency the function is called.

• Phaser.Timer.SECOND =1 second
• Phaser.Timer.SECOND*5 =5 seconds
• Phaser.Timer.SECOND/2= half a second or call the function twice a second
• Phaser.Timer.SECOND/10 =one tenth a second

Building a Countdown Timer

Say that you want to give the user a certain number of minutes or seconds to complete a level or a game. You can achieve this by setting a one shot timer to call the game over. If you want to display the number of seconds left, however, you’ll need to set up a countdown clock. We can do this by setting up a variable to hold the seconds and then subtracting one per second on a loop timer. We can also convert the number of seconds to minutes. Here is some sample code to do that:

var StateMain = {
    preload: function() {},
    create: function() {
        //total time until trigger
        this.timeInSeconds = 120;
        //make a text field
        this.timeText = game.add.text(game.world.centerX, game.world.centerY, "0:00");
        //turn the text white
        this.timeText.fill = "#ffffff";
        //center the text
        this.timeText.anchor.set(0.5, 0.5);
        //set up a loop timer
        this.timer = game.time.events.loop(Phaser.Timer.SECOND, this.tick, this);
    },
    tick: function() {
        //subtract a second
        this.timeInSeconds--;
        //find how many complete minutes are left
        var minutes = Math.floor(this.timeInSeconds / 60);
        //find the number of seconds left
        //not counting the minutes
        var seconds = this.timeInSeconds - (minutes * 60);
        //make a string showing the time
        var timeString = this.addZeros(minutes) + ":" + this.addZeros(seconds);
        //display the string in the text field
        this.timeText.text = timeString;
        //check if the time is up
        if (this.timeInSeconds == 0) {
            //remove the timer from the game
            game.time.events.remove(this.timer);
            //call your game over or other code here!
            this.timeText.text="Game Over";
        }
    },
    /**
     * add leading zeros to any number less than 10
     * for example turn 1 to 01
     */
    addZeros: function(num) {
        if (num < 10) {
            num = "0" + num;
        }
        return num;
    },
    update: function() {}
}

Countdown Clock Example