phaser3:プログレスバーを作る

今回はloadの機能を使ってプログレスバーを作ってみます。

loadの挙動

ロード状況へのアクセスの仕方

load.onでロード中の処理を記述することができます。
progressは一つのファイルのロードが終わったときに、fileprogressはファイルのロードに入ったときに、completeはすべてのファイルのロードが終わったときに実行されます。

//ロードが進行したときの処理
this.load.on('progress', function (value) {
    progressBar.clear();
    progressBar.fillStyle(0xffffff, 1);
    progressBar.fillRect(250, 280, 300 * value, 30);
});

//ファイルのロードに入ったときの処理
this.load.on('fileprogress', function (file) {
    text.text = file.key;
});

//すべてのロードが完了したときの処理
this.load.on('complete', function () {
    text.text = 'complete';
});

実行結果がこちらです。 f:id:Phaser_3:20190122153325g:plain f:id:Phaser_3:20190122153339p:plain

今回のソースはこちらです。

/// <reference path="../app.ts" />

namespace MyGame {



    export class MyScene1 extends Phaser.Scene {


        constructor() {
            super({ key: 'MyScene1', active: false });
        }

        preload() {

            //プログレスバー用のgraphics
            let progressBar = this.add.graphics();
            let progressBox = this.add.graphics();
            progressBox.fillStyle(0x222222, 0.8);
            progressBox.fillRect(240, 270, 320, 50);

            let text = this.add.text(this.sys.canvas.width / 2, 350,"load");
            text.setOrigin(0.5);

            //ロードが進行したときの処理
            this.load.on('progress', function (value) {
                progressBar.clear();
                progressBar.fillStyle(0xffffff, 1);
                progressBar.fillRect(250, 280, 300 * value, 30);
            });

            //ファイルのロードに入ったときの処理
            this.load.on('fileprogress', function (file) {
                text.text = file.key;
            });

            //すべてのロードが完了したときの処理
            this.load.on('complete', function () {
                text.text = 'complete';
            });

            this.load.image('block', 'assets/images/block.png');
            for (var i = 0; i < 500; i++) {
                this.load.image('block' + i, 'assets/images/block.png');
            }
        }
    }
}