Jump to content

Loading bar with scene files payload


gzai
 Share

Recommended Posts

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) {
    	...
    },
});

 

Link to comment
Share on other sites

  • 3 weeks later...

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 by Michela Federico
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...