Motquu Blog - モトクー ブログ

それらしくなった。かっこいい！
非常に簡単にできる。詳しくはここに書いてあった。ただし英語。
Creating a Preloading Screen in Phaser 3（Phaser3でローディング画面を作る）
英語がにがてなのでしばらく見逃してた。

Phaser3では、preload関数内でファイルを個々に読み込むようになってる。そして、読み込みが終わるとcreate関数が呼ばれる。以前ファイルを数えて割合を出してなどと自前でやって失敗した。preloadのファイル読み込みが一瞬で終わるのに、createの前で長く待たされてしまう。preloadのファイル読み込みの間に処理を挟むことはできないのでした。

正しい方法は、this.load.on('progress', function (value) {} のようなリスナーを実装するやり方でした。

1. function preload() {
2.     //
3.     //ここら辺でGraphicなどの描画オブジェクトを準備しておく
4.     //
6.     this.load.on('progress', function (value) {
7.     //リソースが一つ読み込まれるごとにこれが呼ばれるので
8.     //ここで描画処理をする
9.     //valueは0.0（未完了）から 0.1 , 0.5 , 0.9 , 1（完了）のように経過を表す値が入ってくる     
11.     　　console.log(value);//試しにコンソールに出力してみる
12.     });
14.     this.load.on('fileprogress', function (file) {
15.     //file.src でファイル名が取得できる
17.     　　console.log(file.src);//試しにコンソールに出力してみる
18.     });
20.     this.load.on('complete', function () {
21.     //完了時に呼ばれる
23.  　　　　console.log('complete');//試しにコンソールに出力してみる
24.     });
26. 　//
27. 　//ここら辺にリソースの読み込みを記述する
28. 　//
29. 　// this.load.image('image1', 'img/image1.png');
30. 　// this.load.image('image2', 'img/image2.png');
31. 　// ...    のような感じ
32.  
34.   }
36.   function create() {
37.   }
39.   function update() {
40.   }

このようにすると、適切なタイミングで経過の更新を呼び出してくれるのでした。