gzai

Loading bar with scene files payload

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

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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...

  • Recently Browsing   0 members

    No registered users viewing this page.