Phaser timer activated events. How?

Question

I'm trying to make a game where certain things happen based on a timer that keeps going up. For example, certain text, images, or clickable buttons only appear after a certain amount of time has passed on a specific screen. Or maybe an image briefly flashes onto the screen when the timer equals certain numbers.

Unfortunately, I have got no clue how to make this happen. Can anyone show me a solution? Examples are perfered.

If it helps, I'm using Phaser 3 in VSCode.

winner_joiner · Accepted Answer · 2023-06-02T07:29:05.773

0

I sugest checking out the time documentation, or the time examples on the official homepage.

Basically you just need to use this.time.addEvent( ... );

UPDATED Herer a short demo:

document.body.style = 'margin:0;';

var config = {
    type: Phaser.AUTO,
    width: 536,
    height: 183,
    scene: {
        create,
        update
    }
}; 

function create () {
    this.label1 = this.add.text(50, 50, 'Timer: 0')
        .setScale(2.5)
        .setOrigin(0)
        .setStyle({fontStyle: 'bold', fontFamily: 'Arial'});
        
    this.label2 = this.add.text(50, 100, 'Update Timer: 0')
        .setScale(2.5)
        .setOrigin(0)
        .setStyle({fontStyle: 'bold', fontFamily: 'Arial'});
    
    this.currentAppTime = 0;
  
    let counter = 1;
  
    this.time.addEvent({
        delay: 1500, 
        callback: () => this.label1.setText(`Timer: ${counter++}` ),
        callbackScope: this, 
        loop: true 
    });
}

function update(time, delta){
    let helperTime = Math.floor(time / 1000);
    if(helperTime > this.currentAppTime){
        this.currentAppTime = helperTime;
        this.label2.setText(`Update Timer: ${this.currentAppTime}` )
    }
}

new Phaser.Game(config);

<script src="//cdn.jsdelivr.net/npm/phaser/dist/phaser.min.js"></script>

edited Jun 02 '23 at 07:29

answered Jun 02 '23 at 03:54

winner_joiner

12,173
4
36
61

Ok, this may help, one detail I'm curious about. Does the timer always get going when the scene is loaded, or can it require conditions to get going, like an if statement? Say, the timer won't go up if the if statement hasn't been triggered. – EmptyStone Jun 02 '23 at 05:03
Sure, if the function ` this.time.addEvent()` is not called the timer will not be created/started, and can be created anywhere in the code. You could even have a `if/else` clause in the callback function of the timer, if you don't want to trigger code. – winner_joiner Jun 02 '23 at 05:11
@EmptyStone I updated the demo to show a timer, that is just based on the `update` function and the time parameter passed. But what to use depence highly on you useCase – winner_joiner Jun 02 '23 at 07:30
@EmptyStone did the solution work? – winner_joiner Jun 06 '23 at 08:20
At first it did, but something happened along the way. I posted another question about it. – EmptyStone Jun 06 '23 at 09:22
@EmptyStone If i helped please consider accepting the answer. Thanks – winner_joiner Jun 06 '23 at 13:47

Phaser timer activated events. How?

1 Answers1