Problem with Title scene class?

So I’m trying to get my title scene class to load.

Here’s the link to my demo :

Problem is after I get past :

if ( ( this.model.musicOn === true ) && ( this.model.bgMusicPlaying === false ) ) {

I get the error :

phaser.js:82849 Audio cache entry missing: bgMusic
phaser.js:26468 Uncaught TypeError: Cannot set property 'seek' of undefined

Here’s 'config.js' :

console.log ( 'HELLO FROM BEGINNING OF CONFIG!' );

// { Internals Section }

this.__PHASER_TYPE = ( Phaser.AUTO ); // Default :: { Phaser.AUTO } // Sets Phaser's type
this.__PHASER_PARENT = ( 'phaser-example' );
this.__PHASER_SCALE_MODE = ( Phaser.Scale.FIT ); // Default :: { Phaser.NONE }
this.__PHASER_SCALE_AUTOCENTER = ( Phaser.Scale.CENTER_BOTH );

// { Game Data Section }

this.__GAME_WIDTH = ( window.innerWidth ); // ( Takes up the inner window's width )
this.__GAME_HEIGHT = ( window.innerHeight ); // ( Takes up the inner window's height )
this.__GAME_PIXELRATIO = ( window.devicePixelRatio ); // ( Get's Device's Pixel Ratio )
this.__GAME_SCREEN = ( this.screen ); // ( Gets the `screen` `data` )
this.__GAME_TRANSPARENT = ( true ); // ( Sets `transparent` )
this.__GAME_TITLE = ( 'Phaser 3 Template' ); // ( Sets Game's `title` )
this.__RESOLUTION_WIDTH = ( this.__GAME_SCREEN.width ); // ( Gets the current `Resolution Width` of `Screen` )
this.__RESOLUTION_HEIGHT = ( this.__GAME_SCREEN.height ); // ( Gets the current `Resolution Height` of `Screen` )
this.__GAME_RATIO_WIDTH = ( this.__GAME_WIDTH * this.__GAME_PIXELRATIO ); // ( Gets Game Width * Pixel Ratio )
this.__GAME_RATIO_HEIGHT = ( this.__GAME_HEIGHT * this.__GAME_PIXELRATIO ); // ( Gets Game Height * Pixel Ratio )
this.__GAME_SCALERATIO = ( this.__GAME_PIXELRATIO / 3 );
this.__GAME_PIXEL_ART = ( false ); // ( Default `Pixel Art` is `false` )
this.__GAME_ANTIALIAS = ( false ); // ( Default `Anti Alias` is `false` )
this.__GAME_BACKGROUND_COLOR = ( '#000' ); // ( Set to `Royal Purple` Background Color )
this.__GAME_TARGETFPS = ( 60 ); // ( Default `Target FPS` is `60` )
this.__GAME_MINFPS = ( 60 ); // ( Default `Minimum FPS` is `60` )
this.__GAME_FORCESETTIMEOUT = ( true ); // ( Default `Force SetTimeout` is `false` )

// { Scenes Section }

this.__SCENES_ARRAY = [
	PreGameScene, 
];

// { Game Physics Section }

this.__GAME_PHYSICS_GRAVITY = ( 500 ); // ( Default value is `500` )
this.__GAME_PHYSICS_FPS = ( 100 ); // ( Default value is `100` )
this.__GAME_PHYSICS_DEBUG = ( true ); // ( Default value is `false` )
this.__GAME_SCENES = ( this.__SCENES_ARRAY ); // ( Default value is an `array` )
this.__GAME_PHYSICS_DEFAULT = ( 'arcade' ); // ( Default value is `arcade` )

this.__GAME_PHYSICS_TYPE = {

	arcade :  {
		debug : this.__GAME_PHYSICS_DEBUG, 
		gravity : {
			y : this.__GAME_PHYSICS_GRAVITY, 
		}, 
		fps : this.__GAME_PHYSICS_FPS, 
	}

}

// { Game Map Section }

this.__MAP_TILE_WIDTH = ( 66 ); // ( Default `Tile Width` is `32` )
this.__MAP_TILE_HEIGHT = ( 66 ); // ( Default `Tile Height is `32` )

// { Game Camera Section }

this.__CAMERA_VIEWPORT_X1 = ( 0 ); // ( Default `X1` is `0` )
this.__CAMERA_VIEWPORT_X2 = ( 0 ); // ( Default `X2` is `0` )
this.__CAMERA_VIEWPORT_Y1 = ( this.__GAME_WIDTH ); // ( Default `Viewport` `width` is `Game's Width` )
this.__CAMERA_VIEWPORT_Y2 = ( this.__GAME_HEIGHT ); // ( Default `Viewport` `height` is `Game's Height` )
this.__CAMERA_DEADZONE_WIDTH = ( this.__GAME_WIDTH ); // ( Default DeadZone `width` is `Game's Width` )
this.__CAMERA_DEADZONE_HEIGHT = ( this.__GAME_HEIGHT ); // ( Default DeadZone `height` is `Game's Height` )
this.__CAMERA_ZOOM_WIDTH = ( 1 ); // ( Default `Width` is `1` )
this.__CAMERA_ZOOM_HEIGHT = ( 1 ); // ( Default `Height` is `1` )
this.__CAMERA_LERP_XSPEED = ( 1 ); // ( Default `Lerp X-Speed` is `1` )
this.__CAMERA_LERP_YSPEED = ( 1 ); // ( Default `Lerp Y-Speed` is `1` )

// { Game Player Section }

this.__PLAYER_MIN_MOVESPEED = ( 200 ); // ( Default is `200` )
this.__PLAYER_MAX_MOVESPEED = ( 600 ); // ( Default is `600` )
this.__PLAYER_MIN_JUMPSPEED = ( 250 ); // ( Default is `250` )
this.__PLAYER_MAX_JUMPSPEED = ( 600 ); // ( Default is `600` )

// { Game Configuration }

this.__config = {

	type : this.__PHASER_TYPE, 
	width : this.__GAME_WIDTH, 
	height : this.__GAME_HEIGHT, 
	parent : this.__PHASER_PARENT, 
	pixelArt : this.__GAME_PIXEL_ART, 
	antialias : this.__GAME_ANTIALIAS, 
	backgroundColor : this.__GAME_BACKGROUND_COLOR, 
	transparent : this.__GAME_TRANSPARENT, 
	title : this.__GAME_TITLE, 
	scene : this.__GAME_SCENES, 

	fps : {

		target : this.__GAME_TARGETFPS, 
		min : this.__GAME_MINFPS, 
		forceSetTimeOut : this.__GAME_FORCESETTIMEOUT, 

	}, 

	scale : {

		mode : this.__PHASER_SCALE_MODE, 
		autoCenter : this.__PHASER_SCALE_AUTOCENTER, 

	}, 

}

console.log ( 'HELLO FROM END OF CONFIG!' );

Here’s the code from 'config.js' I’m calling to activate the 'PreGame' class :

// { Scenes Section }

this.__SCENES_ARRAY = [
	PreGameScene, 
];

Here’s the code, line{s} '216-234' :

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

if ( ( this.model.musicOn === true ) && ( this.model.bgMusicPlaying === false ) ) {

	this.bgMusic = this.sound.add ( 'bgMusic', {
		volume : 0.5, 
		loop : true, 
	});

	if ( this.bgMusic ) {

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

	}

}

Here’s 'PreGameScene.js' :

var PreGameScene = new Phaser.Class

({

	Extends : Phaser.Scene, 

	initialize : 

	function PreScene ( ) {

		Phaser.Scene.call ( this, {

			key : 'PreGameScene', 
			active : true, 

		} );

		const model = new Model ( );

		__game.globals = {

			model, bgMusic : null, 

		};

	}, 

	preload : function ( ) {

		console.log ( 'HELLO FROM PRE-GAME SCENE!' );

	}, 

	create : function ( ) {

		this.scene.add ( 'Boot', BootScene );
		this.scene.add ( 'Preloader', PreloaderScene );
		this.scene.add ( 'Title', TitleScene );
		this.scene.add ( 'Options', OptionsScene );
		this.scene.add ( 'Credits', CreditsScene );
		this.scene.add ( 'Game', GameScene );

		this.scene.start ( 'Boot' );

	}

});

Any help is GREATLY appreciated!

Can someone please help?

Hi @Thundros,
PreloaderScene and TitleScene starts at same time so bgMusic is still not loaded in cache.
Set the active property of TitleScene to false

function TitleScene ( ) {
			Phaser.Scene.call ( this, {
				key : 'TitleScene', 
				active : false  // <------------ Here
			} );
		}

And init it from PreloaderScene

this.scene.start ( 'TitleScene' ); //<-- You have 'Title'. 
// You can put it on load.complete event.

Regards.

1 Like

@jjcapellan : I just tried this.you can see the result here :

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

It’s actually working now, thanks to you! but now in the 'TitleScene.js' class for some reason, I cannot activate the 'GameScene.js', 'OptionsScene.js' or 'CreditsScene.js' for some reason.

Please see above link to see what I mean.

Any help is GREATLY appreciated!

You need to pass the correct scene keys for those as well: GameScene, OptionsScene, CreditsScene.

@samme : Where am I calling the incorrect scene keys?

1 Like

Thank you @samme! It works now! :slight_smile: