Listener for each tick

Phaser 3
1

Is there a way to listen for every increment in the game’s frames? I want to use an image in my loading scene which rotates as the assets load, then rotates faster and faster as more assets load, by changing a variable every time the loading progresses, which speeds up the rotation (there’s probably a better way to do this)

However I can’t actually make the sprite rotate since update() doesn’t function until everything in preload finishes, so can I pop a listener in preload that will rotate the sprite the same way as rotating an image using update()?:

preload() {

    this.image = this.add.image(this.cameras.main.centerX, this.cameras.main.centerY, "rotate").setOrigin(0.5);

    this.load.on('progress', function (value) {
      this.imageRotate += 0.05;
    }, this);
    // Asset loading here
}

  update() {
    this.image.rotation += this.imageRotate;
  }

Basically want something like this except without the rotating in the update loop

Thanks!

2

Try this perhaps (not tested)

export default class LoadingScene extends Scene {
  constructor() {
    super({
      key: 'LoadingScene',
      //  Splash screen and progress bar textures need to be loaded in a previous scene.
      pack: {
        files: [{
          key: 'background',
          type: 'image'
        }, {
          key: 'progressBar',
          type: 'image'
        }]
      }
    });
  }
preload() {
  //  Display cover and progress bar textures.
    this.showProgressBar();  
    // Asset loading here
}

showProgressBar() {
  this.image = this.add.image(this.cameras.main.centerX, this.cameras.main.centerY, "rotate").setOrigin(0.5);

    this.load.on('progress', function (value) {
      this.image.rotation +=  value; // adapt the value to suit your needs
    }, this);
}

}
1 Like
3

I can’t test it yet, but I think I tried something similar to that, putting the rotation itself inside the load listener, but the image rotates every time an asset loads instead of every frame which makes it look like it’s having a seizure since the asset loading rate changes with different file sizes

4

have you try a custom event ?

```
var evt = document.createEvent("Event");
evt.initEvent("myEvent",true,true);

// custom param
evt.foo = "bar";

//register
document.addEventListener("myEvent",myEventHandler,false);

//invoke
document.dispatchEvent(evt);
```
1 Like
5

If you don’t need to use your update() method for anything else, you can add to preload():

this.sys.sceneUpdate = this.update;
1 Like
6

Thanks espace for the recommendation, but I think I’ll be going with the sceneUpdate statement since it’s way simpler :))

However is it normal for update() to now be run at different rates? I put a console.log in update() as well and it seems that the rate at which it is called isn’t uniform.