Problem with loading animation

Phaser 3
1

Hello.

I have a loading animation method that I call at the very beginning in the preload, so that I have a progress bar. Here it is:

loadingAnimation() {
	var progressBar = this.add.graphics();
	var progressBox = this.add.graphics();
	progressBox.fillStyle(0x222222, 0.8);
	progressBox.fillRect(240, 270, 320, 50);
	var width = this.canvas.width;
	var height = this.canvas.height;
	var loadingText = this.make.text({
		x     : width / 2,
		y     : height / 2 - 50,
		text  : 'Loading...',
		style : {
			font : '20px monospace',
			fill : '#ffffff'
		}
	});
	loadingText.setOrigin(0.5, 0.5);

	var percentText = this.make.text({
		x     : width / 2,
		y     : height / 2 - 5,
		text  : '0%',
		style : {
			font : '18px monospace',
			fill : '#ffffff'
		}
	});
	percentText.setOrigin(0.5, 0.5);

	var assetText = this.make.text({
		x     : width / 2,
		y     : height / 2 + 50,
		text  : '',
		style : {
			font : '18px monospace',
			fill : '#ffffff'
		}
	});
	assetText.setOrigin(0.5, 0.5);

	this.load.on('progress', function(value) {
		percentText.setText(parseInt(value * 100) + '%');
		progressBar.clear();
		progressBar.fillStyle(0xffffff, 1);
		progressBar.fillRect(250, 280, 300 * value, 30);
	});

	this.load.on('fileprogress', function(file) {
		assetText.setText('Loading resource: ' + file.key);
	});

	this.load.on('complete', function() {
		progressBar.destroy();
		progressBox.destroy();
		loadingText.destroy();
		percentText.destroy();
		assetText.destroy();
	});
}

It works fine in the first time(or when I reload the page). However, when I restart the scene, it returns an error in this method saying:

phaser.js:23220 Uncaught TypeError: Cannot read property 'width' of null
at Frame.updateUVs (phaser.js:23220)
at Frame.setSize (phaser.js:22984)
at Text.updateText (phaser.js:34949)
at Text.setText (phaser.js:34410)
at LoaderPlugin.<anonymous> (GameScene.js:229)
at LoaderPlugin.emit (phaser.js:2356)
at LoaderPlugin.updateProgress (phaser.js:120033)
at LoaderPlugin.start (phaser.js:120012)
at SceneManager.bootScene (phaser.js:80953)
at SceneManager.start (phaser.js:81623)

Thank you for your help.

2

Could somebody help me out please?

3

You didn’t provide any code regarding your scene(s), so that’s probably why no one has responded. I’d recommend creating a codepen of jsfiddle.

4

@prob oh okay. Then here it is:

In game scene’s create I do the following to start the pause scene:

image.on(
		'pointerup',
		() => {
			this.scene.pause();
			this.scene.launch('PauseScene');
		},
		this
	);

	this.input.keyboard.on(
		'keyup-ESC',
		() => {
			this.scene.pause();
			this.scene.launch('PauseScene');
		},
		this
	);

And in the PauseScene I do this to restart the GameScene:

//... 
else if (type == 'RESTART') {
			this.gameScene.scene.restart();
			this.scene.stop(); }