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'; });
実行結果がこちらです。
今回のソースはこちらです。
/// <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'); } } } }