Problem with replacing options in Options Scene?

Thundros · December 18, 2019, 11:11pm

With the below being my ‘scene’ code, how do i restart the scene with new option buttons, data, etc?

var OptionsScene = new Phaser.Class

({

	Extends : Phaser.Scene,

	initialize :

	function OptionsScene ( ) {

		Phaser.Scene.call ( this, {

			key : 'OptionsScene',
			active : false,

		} );

	},

	CreateGameButton : function ( __objData ) {

		this.__objData = __objData;

		this.__buttonObj = {

			scene : this.__objData.scene,
			x : this.__objData.x,
			y : this.__objData.y,
			key1 : this.__objData.key1,
			key2 : this.__objData.key2,
			text : this.__objData.text,
			targetScene : this.__objData.targetScene,
			locked : this.__objData.locked,

		}

		this.__buttons = new Button ( this.__buttonObj.scene, {

			x : this.__buttonObj.x,
			y : this.__buttonObj.y,
			key1 : this.__buttonObj.key1,
			key2 : this.__buttonObj.key2,
			text : this.__buttonObj.text,
			targetScene : this.__buttonObj.targetScene,
			locked : this.__buttonObj.locked,

		} );

		return this.__buttons;

	},

	updateAudio : function ( ) {

		console.error ( this.sys.game.globals );

		if ( this.model.musicOn === false ) {

			this.__musicButton.setTexture ( 'box' );
			this.sys.game.globals.sound.stop ( );
			this.model.bgMusicPlaying = false;

		}

		else

		{

			this.__musicButton.setTexture ( 'checkedBox' );

			if ( this.model.bgMusicPlaying === false ) {

				this.sys.game.globals.sound.play ( );
				this.model.bgMusicPlaying = true;

			}

		}

		if ( this.model.soundOn === false ) {

			this.__soundButton.setTexture ( 'box' );

		}

		else

		{

			this.__soundButton.setTexture ( 'checkedBox' );

		}

	}, 

	create : function ( ) {

		this.model = this.sys.game.globals.model;

		this.__container = new Container ( );

		this.__CONFIG_WIDTH = ( __config.width );
		this.__CONFIG_HEIGHT = ( __config.height );

		this.__CONFIG_HALF_WIDTH = ( this.__CONFIG_WIDTH / 2 );
		this.__CONFIG_HALF_HEIGHT = ( this.__CONFIG_HEIGHT / 2 );

		this.__WINDOW_WIDTH = ( window.innerWidth );
		this.__WINDOW_HEIGHT = ( window.innerHeight );

		this.__WINDOW_HALF_WIDTH = ( this.__WINDOW_WIDTH / 2 );
		this.__WINDOW_HALF_HEIGHT = ( this.__WINDOW_HEIGHT / 2 );

		// "150 is the size of the font, 50 is the offset"
		// "the font size is 150 i vaguely recall"
		//this.add.rectangle((this.__CONFIG_WIDTH/2),0, 1, 2000, 0xffffff).setOrigin(0,0); // half the screen

		this.__half = ( this.__CONFIG_WIDTH / 2 );
		this.__quarter = ( this.__half / 2 );

		this.__halfLeft = ( this.__half - this.__quarter );
		this.__halfRight = ( this.__half + this.__quarter );

		this.add.rectangle ( ( this.__halfLeft - ( 150 / 2 ) ), 0, 1, 2000, 0xffffff ).setOrigin ( 0, 0 ); // half the screen
		this.add.rectangle ( ( this.__half ), 0, 1, 2000, 0xffffff ).setOrigin ( 0, 0 ); // half the screen
		this.add.rectangle ( ( this.__halfRight + ( 150 / 2 ) ), 0, 1, 2000, 0xffffff ).setOrigin ( 0, 0 ); // half the screen

		this.__textArray = [
			'<', '>', 'Options',
			'Sound Enabled', 'Music Enabled',
		];

		this.__musicButtonX = [
			( ( ( this.__CONFIG_HALF_WIDTH ) - ( 150 / 2 ) ) - ( 48 ) ),
		];

		this.__musicButtonY = [
			( ( this.__CONFIG_HEIGHT ) - ( 385 ) ),
		];

		this.__soundButtonX = [
			( ( ( this.__CONFIG_HALF_WIDTH ) - ( 150 / 2 ) ) - ( 48 ) ),
		];

		this.__soundButtonY = [
			( ( this.__CONFIG_HEIGHT ) - ( 455 ) ),
		];

		this.__optionTitleX = [
			( ( this.__CONFIG_HALF_WIDTH ) - ( 150 / 2 ) ),
		];

		this.__optionTitleY = [
			( ( this.__CONFIG_HALF_HEIGHT ) - ( 200 ) ),
		];

		this.__musicLabelX = [
			( ( ( this.__CONFIG_HALF_WIDTH ) - ( 150 / 2 ) ) - ( 4 ) ),
		];

		this.__musicLabelY = [
			( ( this.__CONFIG_HEIGHT ) - ( 390 ) ),
		];

		this.__soundLabelX = [
			( ( ( this.__CONFIG_HALF_WIDTH ) - ( 150 / 2 ) ) - ( 4 ) ),
		];

		this.__soundLabelY = [
			( ( this.__CONFIG_HEIGHT ) - ( 460 ) ),
		];

		this.__arrowLeftX = [
			( ( ( this.__CONFIG_HALF_WIDTH / 2 ) - ( 150 / 2 ) ) - 5 ),
		];

		this.__arrowLeftY = [
			( ( this.__CONFIG_HALF_HEIGHT ) - ( 250 / 2 ) ),
		];

		this.__arrowRightX = [
			( ( this.__halfRight + ( 150 / 2 ) ) - ( 150 / 2 ) - 9 ), 
		];

		this.__arrowRightY = [
			( ( this.__CONFIG_HALF_HEIGHT ) - ( 250 / 2 ) ),
		];

		this.__musicButton = this.add.image (
			this.__musicButtonX [ 0 ],
			this.__musicButtonY [ 0 ],
			'checkedBox'
		);

		this.__soundButton = this.add.image (
			this.__soundButtonX [ 0 ],
			this.__soundButtonY [ 0 ],
			'checkedBox'
		);

		this.__text = this.add.text (
			( this.__optionTitleX [ 0 ] ),
			( this.__optionTitleY [ 0 ] ),
			this.__textArray [ 2 ],
			{
				fontSize : 40,
			}
		);

		/*

			this.add.rectangle ( this.__halfLeft, 0, 1, 2000, 0xffffff ).setOrigin ( 0, 0 );
			this.add.rectangle ( this.__halfRight, 0, 1, 2000, 0xffffff ).setOrigin ( 0, 0 );

			this.add.rectangle ( this.__arrowLeftX [ 0 ], this.__arrowLeftY [ 0 ], 150, 150, 0xff0000 ).setOrigin ( 0, 0 ); // where the left is now
			this.add.rectangle ( this.__arrowRightX [ 0 ], this.__arrowRightY [ 0 ], 150, 150, 0xff0000 ).setOrigin ( 0, 0 ); // where the right is now

			this.add.rectangle ( this.__halfLeft - 150 / 2, this.__arrowLeftY [ 0 ] - 250, 150, 150, 0x00ff00 ).setOrigin ( 0, 0 ); // where I think it should go
			this.add.rectangle ( this.__halfRight - 150 / 2, this.__arrowRightY [ 0 ] - 250, 150, 150, 0x00ff00 ).setOrigin ( 0, 0 ); // where I think it should go

		*/

		this.__myArrowLeft = this.add.text (
			( this.__arrowLeftX [ 0 ] ), 
			( this.__arrowLeftY [ 0 ] ), 
			this.__textArray [ 0 ], 
			{
				fontSize : 150, 
			}
		);

		this.__myArrowRight = this.add.text (
			( this.__arrowRightX [ 0 ] ), 
			( this.__arrowRightY [ 0 ] ), 
			this.__textArray [ 1 ], 
			{
				fontSize : 150, 
			}
		);

		this.__musicText = this.add.text (
			( this.__musicLabelX [ 0 ] ), 
			( this.__musicLabelY [ 0 ] ), 
			'Music Enabled', 
			{
				fontSize : 24, 
			}
		);

		this.__soundText = this.add.text (
			( this.__soundLabelX [ 0 ] ), 
			( this.__soundLabelY [ 0 ] ), 
			'Sound Enabled', 
			{
				fontSize : 24, 
			}
		);

		this.__musicButton.setInteractive ( );
		this.__soundButton.setInteractive ( );

		this.__myArrowLeft.setInteractive ( );
		this.__myArrowRight.setInteractive ( );


		this.__menuButton = this.CreateGameButton ({
			scene : this,
			x : ( __config.width / 2 ),
			y : ( ( __config.height / 2 ) + ( 100 ) ),
			key1 : 'blueButton1',
			key2 : 'blueButton2',
			text : 'Menu',
			targetScene : 'TitleScene',
			locked : false,
		});

		this.__musicButton.on ( 'pointerdown', function ( ) {
			this.model.musicOn = ( ! ( this.model.musicOn ) );
			this.updateAudio ( );
		}.bind ( this ) );

		this.__soundButton.on ( 'pointerdown', function ( ) {
			this.model.soundOn = ( ! ( this.model.soundOn ) );
			this.updateAudio ( );
		}.bind ( this ) );

		this.__myArrowLeft.on ( 'pointerdown', function ( ) {
			// Where Pagination going backwards works
			__OPTIONS_CURR_PAGE_COUNT -= 1;
			if ( __OPTIONS_CURR_PAGE_COUNT < ( __OPTIONS_MIN_SCENE_COUNT ) ) {
				__OPTIONS_CURR_PAGE_COUNT = __OPTIONS_MAX_SCENE_COUNT;
			}
			console.error ( __OPTIONS_CURR_PAGE_COUNT );
		} );

		this.__myArrowRight.on ( 'pointerdown', function ( ) {
			// Where Pagination going forwards works
			__OPTIONS_CURR_PAGE_COUNT += 1;
			if ( __OPTIONS_CURR_PAGE_COUNT > ( __OPTIONS_MAX_SCENE_COUNT ) ) {
				__OPTIONS_CURR_PAGE_COUNT = __OPTIONS_MIN_SCENE_COUNT;
			}
			console.error ( __OPTIONS_CURR_PAGE_COUNT );
		} );

		/*

			this.__container.create ({
				scene : this, x : 0, y : 0, 
				w : 100, h : 100, useChildIndex : false, 
			});

			this.__container.debug ({
				container : this.__container, 
				add : this.add, 
				x : this.__container.x, 
				y : this.__container.y, 
				w : this.__container.w, 
				h : this.__container.h, 
			});

		*/

		this.updateAudio ( );

	},

});

i tried 'this.scene.restart ( )' when clicking on both the left arrow & the right arrow, but to no avail.
I tried 'this.restart ( )' when clicking on both the left arrow & the right arrow, but to no avail.

Any help is GREATLY appreciated!

samme · December 19, 2019, 4:30am

What happens?

Thundros · December 19, 2019, 5:14am

Uncaught TypeError: this.scene.restart is not a function OptionsScene.js:294

I updated :

https://thundros.github.io/menu-system-doosan/

jjcapellan · December 19, 2019, 2:01pm

Hi @Thundros,
In your code this is a text object, so you have to use:
this.scene.scene.restart();

Thundros · December 19, 2019, 2:49pm

@jjcapellan : I just did that & it’s not doing anything when I click the arrows.

Here’s the updated demo :

https://thundros.github.io/menu-system-doosan/

jjcapellan · December 19, 2019, 3:29pm

Not really, it is doing something. The listener is modifying the global variable __OPTIONS_CURR_PAGE_COUNT and restarting the scene as you are indicating in your code.
You can check it in the debugger, or simply writing the variable name in the console.
An additional tip: for the arrows I think is better to use the event “pointerup”, since the event “pointerdown” is triggered many times per second.
Regards.

Thundros · December 19, 2019, 3:31pm

@jjcapellan : Then why does it appear it is doing nothing?

jjcapellan · December 19, 2019, 4:33pm

The __OPTIONS_CURR_PAGE_COUNT variable has no side effects.
If you mean why the music keeps playing without interruption (with the checkboxes marked). That is normal behavior, since the sound plugin is global and the sounds must be stopped manually.
I don’t know what you expected to happen. Take your time and follow your code step by step.

Thundros · December 19, 2019, 4:55pm

@jjcapellan : I basically want all the option buttons & text to disappear, then load in new options. & it must be seamless when switching between the option scenes.

samme · December 19, 2019, 7:25pm

In that case you may actually want to use multiple instances of OptionsScene instead, and switch back and forth among those.

But if you use scene.restart(), remember it just calls scene create() again. If you want it to run differently the second time, you have to reconfigure the scene beforehand so that create() gives a different result.

Thundros · December 19, 2019, 9:03pm

I actually chose to use 'scene.start ( )', as that’s the easiest. But I have a problem. I created '3' new files called 'key0.js', 'key1.js' & 'key2.js' all of which only contain something that looks like this :

var key1 = new Phaser.Class

({

	Extends : Phaser.Scene,

	initialize :

	function key1 ( ) {

		Phaser.Scene.call ( this, {

			key : 'key1',
			active : false,

		} );

	}, 
	
	myFunc : function ( ) {
	}, 

});

I also included 'key0.js', 'key1.js' & 'key2.js' in the 'index.html' page.
I also included them in the 'Scene Array' variable in 'config.js' like this :

this.__SCENES_ARRAY = [
	PreGameScene, key0, key1, 
	key2, 
];

but for some reason, I’m getting a black screen when I click 1 of the arrows that uses the scene key{s} : 'key0', 'key1' or 'key2'.

Here’s the updated demo :

https://thundros.github.io/menu-system-doosan/

Here’s the direct link to 'OptionsScene.js' :

http://thundros.github.io/menu-system-doosan/src/Scenes/OptionsScene.js

Here’s the direct link to 'config.js' :

https://thundros.github.io/menu-system-doosan/src/Config/config.js

Here’s the code in 'OptionsScene' I am referring to :

this.__myArrowLeft.on ( 'pointerdown', function ( ) {
	// Where Pagination going backwards works
	__OPTIONS_CURR_PAGE_COUNT -= 1;
	if ( __OPTIONS_CURR_PAGE_COUNT < ( __OPTIONS_MIN_SCENE_COUNT ) ) {
		__OPTIONS_CURR_PAGE_COUNT = __OPTIONS_MAX_SCENE_COUNT;
	}
	this.scene.scene.start ( 'key' + __OPTIONS_CURR_PAGE_COUNT );
	console.log ( 'key' + __OPTIONS_CURR_PAGE_COUNT );
} );

this.__myArrowRight.on ( 'pointerdown', function ( ) {
	// Where Pagination going forwards works
	__OPTIONS_CURR_PAGE_COUNT += 1;
	if ( __OPTIONS_CURR_PAGE_COUNT > ( __OPTIONS_MAX_SCENE_COUNT ) ) {
		__OPTIONS_CURR_PAGE_COUNT = __OPTIONS_MIN_SCENE_COUNT;
	}
	this.scene.scene.start ( 'key' + __OPTIONS_CURR_PAGE_COUNT );
	console.log ( 'key' + __OPTIONS_CURR_PAGE_COUNT );
} );

Any help as always is GREATLY appreciated!

jjcapellan · December 19, 2019, 9:25pm

scene.start() shutdown the current scene.
To run scenes in parallel you need scene.launch().
Here the docs:
https://photonstorm.github.io/phaser3-docs/Phaser.Scenes.ScenePlugin.html#launch__anchor

Thundros · December 19, 2019, 10:08pm

@jjcapellan : Ok, NOW it’s staying in the same scene not changing anything?

Updated demo :

https://thundros.github.io/menu-system-doosan/

Code :

this.__myArrowLeft.on ( 'pointerdown', function ( ) {
	// Where Pagination going backwards works
	__OPTIONS_CURR_PAGE_COUNT -= 1;
	if ( __OPTIONS_CURR_PAGE_COUNT < ( __OPTIONS_MIN_SCENE_COUNT ) ) {
		__OPTIONS_CURR_PAGE_COUNT = __OPTIONS_MAX_SCENE_COUNT;
	}
	this.scene.scene.launch ( 'key' + __OPTIONS_CURR_PAGE_COUNT );
	console.log ( 'key' + __OPTIONS_CURR_PAGE_COUNT );
} );

this.__myArrowRight.on ( 'pointerdown', function ( ) {
	// Where Pagination going forwards works
	__OPTIONS_CURR_PAGE_COUNT += 1;
	if ( __OPTIONS_CURR_PAGE_COUNT > ( __OPTIONS_MAX_SCENE_COUNT ) ) {
		__OPTIONS_CURR_PAGE_COUNT = __OPTIONS_MIN_SCENE_COUNT;
	}
	this.scene.scene.launch ( 'key' + __OPTIONS_CURR_PAGE_COUNT );
	console.log ( 'key' + __OPTIONS_CURR_PAGE_COUNT );
} );

jjcapellan · December 19, 2019, 11:04pm

Hi @Thundros,

key0, key1 and key2 scenes are empty.
You should stop previus keyX scene when launch a new one.

Good look this time.

Thundros · December 20, 2019, 3:24pm

@jjcapellan : I updated the demo. It’s still not changing.

https://thundros.github.io/menu-system-doosan/

Direct link to 'key0.js' :

https://thundros.github.io/menu-system-doosan/src/Scene/key0.js

Direct link to 'key1.js' :

https://thundros.github.io/menu-system-doosan/src/Scene/key1.js

Direct link to 'key2.js' :

https://thundros.github.io/menu-system-doosan/src/Scene/key2.js

jjcapellan · December 20, 2019, 4:22pm

key0, key1 and key2 are Phaser.scene objects, so Phaser only calls its init(), preload(), create() and update() methods.

Thundros · December 20, 2019, 4:36pm

@jjcapellan : Right, they’re scene objects which I’m trying to access.

Thundros · December 20, 2019, 6:00pm

@jjcapellan : so I updated the demo & it looks like it’s calling 'create ( )' now, but how do I get rid of the current scene’s options & create new options for 'key0', 'key1' & 'key2'.

Thundros · December 20, 2019, 6:08pm

How can I make https://thundros.github.io/menu-system-doosan/ go to :

'this.scene.scene.start ( 'OptionsScene' );'

when '__OPTIONS_CURR_PAGE_COUNT = 0'?

Here’s the code I have right now but it only works for 'key1.js' & 'key2.js' :

this.__myArrowLeft.on ( 'pointerdown', function ( ) {
	// Where Pagination going backwards works
	__OPTIONS_CURR_PAGE_COUNT -= 1;
	if ( __OPTIONS_CURR_PAGE_COUNT === 0 ) {
		console.error ( 'BLAH 1' );
		this.scene.scene.start ( 'OptionsScene' );
	}
	else if ( __OPTIONS_CURR_PAGE_COUNT < ( __OPTIONS_MIN_SCENE_COUNT ) ) {
		__OPTIONS_CURR_PAGE_COUNT = __OPTIONS_MAX_SCENE_COUNT;
		console.log (
			'\r\n\r\n' + 
				'if' + ' ( ' + __OPTIONS_CURR_PAGE_COUNT + ' ' + '<' + ' ' + __OPTIONS_MIN_SCENE_COUNT + ' ' + ')' + ' ' + '{' + '\r\n' + 
					'\t' + 'this.scene.scene.start' + ' ' + '(' + '\'' + 'key' + __OPTIONS_CURR_PAGE_COUNT + '\'' + ')' + '\r\n' + 
				'}' + 
			'\r\n\r\n'
		);
		console.log ( 'key' + __OPTIONS_CURR_PAGE_COUNT );
		this.scene.scene.start ( 'key' + __OPTIONS_CURR_PAGE_COUNT );
	}
} );

this.__myArrowRight.on ( 'pointerdown', function ( ) {
	// Where Pagination going forwards works
	__OPTIONS_CURR_PAGE_COUNT += 1;
	if ( __OPTIONS_CURR_PAGE_COUNT === 0 ) {
		console.error ( 'BLAH 2' );
		this.scene.scene.start ( 'OptionsScene' );
	}
	else if ( __OPTIONS_CURR_PAGE_COUNT > ( __OPTIONS_MAX_SCENE_COUNT ) ) {
		__OPTIONS_CURR_PAGE_COUNT = __OPTIONS_MIN_SCENE_COUNT;
		console.log (
			'\r\n\r\n' + 
				'if' + ' ( ' + __OPTIONS_CURR_PAGE_COUNT + ' ' + '<' + ' ' + __OPTIONS_MIN_SCENE_COUNT + ' ' + ')' + ' ' + '{' + '\r\n' + 
					'\t' + 'this.scene.scene.start' + ' ' + '(' + '\'' + 'key' + __OPTIONS_CURR_PAGE_COUNT + '\'' + ')' + '\r\n' + 
				'}' + 
			'\r\n\r\n'
		);
		console.log ( 'key' + __OPTIONS_CURR_PAGE_COUNT );
		this.scene.scene.start ( 'key' + __OPTIONS_CURR_PAGE_COUNT );
	}
} );

Here’s the direct link to 'config.js' :

https://thundros.github.io/menu-system-doosan/src/Config/config.js

Here’s the direct link to 'OptionsScene.js' :

https://thundros.github.io/menu-system-doosan/src/Scenes/OptionsScene.js

The exact line{s} to look at in 'OptionsScene.js' are : 'line{s} 289 - 329'
The exact line{s} to look at in 'config.js' are : 'line{s} 88 - 91'

Any help as always is GREATLY appreciated!

Hopefully I have explained well enough? If not, please do let me know & I will do my best to accommodate. Thank You so much!

jjcapellan · December 20, 2019, 9:39pm

You don’t need to start the scene OptionsScene again, because it is already active, as are all the scenes that you start each time you click on the arrows.
I think you should see the examples and documentation to better understand the basics of scene management:
http://labs.phaser.io/index.html?dir=scenes/&q=
https://photonstorm.github.io/phaser3-docs/Phaser.Scenes.ScenePlugin.html

Topic		Replies	Views
Problem with Buttons? Phaser 3	5	1175	December 5, 2019
How do I restart the scene? Phaser 3	1	307	December 24, 2020
The scene doesn't restart Phaser 3	2	417	December 27, 2020
Switching scenes help? Phaser 3	6	148	March 21, 2024
A scene restarted but the image is still display Phaser 3	7	545	August 16, 2020

Problem with replacing options in Options Scene?

Related topics