Confusion with multipler Timers

[bugmenot]

From what I can understand there is only one global 'timer' in phaser. This has presented a problem for my game which involves several one-shot timers for the intro. I would like to iterate over a block of text with a timer, based on the one I found in the examples for multi-timer. Then I would like to spawn additional one-shot timers for objects.

The problem is, having timers outside of functions appears to be impossible. Meaning timers can only modify and existing timer within a function.
The end result is tons of nested timers launching timers and duplicating content, which is a mess.

 

What I would like is:

 

1) First timer controls the text

2) Second timer controls the images

3) Additional images/text controlled by specific timers.

4) Destroy all timers and blank the canvas, begin the game.

 

Here's what I have so far, which duplicates each function so much it causes my alpha background to turn into a solid!

Source: https://pastebin.com/raw/hjMVfVBt

Clearly I am lacking an understanding of phaser timer logic, so I've resorted to posting here in hopes someone understands. I've already researched the API and the forums, still don't get it...

 

[squilibob]

If you are performing things one after another then you are essentially making a queue. Instead of making individual timers for each object you can use the update method and Date.now along with a variable to keep track of when an action was last performed. Here is your code refactored to have a text queue and an emitter queue. There is no defined timers for you to worry about keeping track of since everything is working on phaser's update method.

var
  text,
  emitter,
  current,
  textqueue = [],
  emitterqueue = [],
  texteventdelay = 4000,
  emittereventdelay = 6000,
  lasttextevent = Date.now() - texteventdelay,
  lastemitterevent = Date.now()

function create() {

// Translation can be done here
  textqueue.push({x:32, y:10, text:'This.', fill: 'white' })
  textqueue.push({x:32, y:22, text:'Is.', fill: 'white' })
  textqueue.push({x:32, y:32, text:'An.', fill: 'white' })
  textqueue.push({x:32, y:42, text:'Epic.', fill: 'white' })
  textqueue.push({x:32, y:52, text:'Intro...', fill: 'white' })

// Light: Particle effects
  game.stage.backgroundColor = '#000000';

  emitter = game.add.emitter(game.world.centerX, game.world.centerY, 200);

  emitter.makeParticles('corona');

  emitter.setRotation(0, 0);
  emitter.setAlpha(0.3, 1);
  emitter.setScale(0.1, 1);
  emitter.gravity = 0;
}

function update() {
   if (textqueue && textqueue.length && lasttextevent + texteventdelay < Date.now()) dequeue(textqueue.shift())
   if (emitterqueue && emitterqueue.length && lastemitterevent + emittereventdelay < Date.now()) destroyLight(emitterqueue.shift())
    // TODO
}

function dequeue(nextevent) {
      current && current.destroy()
      current = game.add.text(nextevent.x, nextevent.y,nextevent.text, { fill: nextevent.fill })
      current.scale.setTo(0.5)
      emitterqueue.push(emitLight())
      lasttextevent = Date.now()
}

function emitLight() {
    var back = game.add.image(0, -300, 'waves');
    back.scale.set(2);
    back.smoothed = false;
    back.alpha = 0.2; // Dozens of these appear, drains system resources!!!
    emitter.start(false, 6000, 100);
    return back
}

function destroyLight(toDestroy) {
  toDestroy.destroy()
  emitter.on = false
  lastemitterevent = Date.now()
}

 

[samme]

It runs emitLight and destroyLight four times, is that what you don't want?

Often you can synchronize events just by creating them with the right delay instead of nesting them.

You don't have to remove events once they've passed.