Loading bar with scene files payload

[gzai]

Hi,
Simple loading bar use load image after on progress, on fileprogress, and on complete :

this.load.on('progress', this.onProgress, this);
this.load.on('fileprogress', this.onFileProgress, this);
this.load.on('complete', this.onComplete, this);
this.load.image('aqua_ball');

https://phaser.io/examples/v3/view/loader/game-load-config

But, when we use scene files payload, how we can get callback for progress, fileprogress, and complete to build loading bar same like the example above?

const bootScene = new Phaser.Class({

    Extends: Phaser.Scene,

    initialize:

    function bootScene ()
    {
        Phaser.Scene.call(this, { key: 'boot', 
            pack: {
                files: [
                    { type: 'image', key: 'aqua_ball', url: 'aqua_ball.png' },
                ]
            }
    	});
    },
    init: function (data) {
    	...
    },
    preload: function () {

    	// progress loading bar?
    	this.load.on('progress', this.onProgress, this);
        this.load.on('fileprogress', this.onFileProgress, this);
        this.load.on('complete', this.onComplete, this);

    },
    create: function (data) {
    	...
    },
});

 

[rich]

You can't do this for a files payload. The payload is meant to be used to load in really tiny files that your game needs access to up-front, such as the assets needed to render a nice Preloader, or plugins, or similar.

[gzai]

ahh, so the payload used to load only for really tiny files. I got it. 

If we have many scenes, is it possible to use files payload in every scene?

[rich]

Yes, sure. Usually, you'd use the payload for things like json files that the game needs, or plugins, or maybe some assets the preloader can use like a preload background and loading bar graphic. That kind of stuff.

And then you use the proper Preloader to load the actual game assets.

[Michela Federico]

I'm actually having some issues with this topic.

I have the following piece of code but for some unknown reasons the callbacks for progress and complete never get called and therefore the progress bar doesn't animate and I'm stuck on the boot scene...anyone can help?

import {AbstractScene} from "../../Framework/Components/Core/AbstractScene";
import GameScene from "./GameScene";

export default class BootScene extends Phaser.Scene {
    private _progressBar: Phaser.GameObjects.Graphics;
    private _progressBox: Phaser.GameObjects.Graphics;

    constructor() {
        super({key: 'BootScene'});
    }

    public preload() {
        this._progressBar = this.add.graphics();
        this._progressBox = this.add.graphics();
        this._progressBox.fillStyle(0x222222, 0.8);
        this._progressBox.fillRect(240, 270, 320, 50);

        this.load.on('progress', this._onProgress);
        this.load.on('complete', this._onComplete);
    }

    public create() {
        this.cameras.main.setBackgroundColor('#000');
    }

    private _onProgress(value: number) {
        console.log(value);

        this._progressBar.clear();
        this._progressBar.fillStyle(0xffffff, 1);
        this._progressBar.fillRect(250, 280, 300 * value, 30);
    }

    private _onComplete() {
        console.log('complete');

        this._progressBar.destroy();
        this._progressBox.destroy();

        this.scene.add('GameScene', GameScene, true);
    }
}

 

Edited November 15, 2019 by Michela Federico

[gzai]

@Michela Federico

you can see in this example https://gamedevacademy.org/creating-a-preloading-screen-in-phaser-3/

[Michela Federico]

On 11/18/2019 at 11:46 AM, gzai said:

@Michela Federico

you can see in this example https://gamedevacademy.org/creating-a-preloading-screen-in-phaser-3/

That's exactly the tutorial I'm following but for some weird unknown reasons it doesn't register the callbacks to the events...