Trouble with States, OOP, and 'this'

[BearSoap Software]

Hi!

 

I'm having a problem with a game I'm developing using Phaser (v2.02).

 

I started making this game using faux-OOP, using different .js files for the player character, the level, for enemies, etc. Recently, I learned about the power of states, so naturally I implemented it in my game! However, OOP and states don't seem to play nicely together, at least with my implementation. The primary issue is that, for example, in my level.js file the use of 'this' (this.game.add... etc. etc.) returns an Uncaught TypeError, and a log to the console shows that 'this' doesn't have the properties of a state because I hadn't added it as a state (which is what I need to do, maybe? Not sure how.).

Alright, lemme post some relevant code because that's the only way I'll get any help.

 

Here's a snippet of my index.html file:

<script type="text/javascript">//change back to AUTO when done debuggingvar gamevar = new Phaser.Game(800, 600, Phaser.CANVAS);var playerClass = new BounceGame.Player(gamevar);var hud = new BounceGame.Hud(gamevar);var level = new BounceGame.Gameplay.Level(gamevar);var walkerClass = new BounceGame.Walker(gamevar);var running = true;var score = 0;var highestScore = 0;var numCoins = 0;var score_headBounce = 100;var score_evilHeadBounce = -250var score_perSecond = 10;//alert('game running');gamevar.state.add('boot', BounceGame.Boot);gamevar.state.add('preload', BounceGame.Preloader);gamevar.state.add('menu_main', BounceGame.Menus.Main);gamevar.state.add('menu_modes', BounceGame.Menus.Modes);gamevar.state.add('menu_options', BounceGame.Menus.Options);gamevar.state.add('gameplay', BounceGame.Gameplay);gamevar.state.start('boot');</script>

And here's my game.js file, which contains most of the state information.

BounceGame = { };BounceGame.Boot = function(game){};BounceGame.Preloader = function(game){};BounceGame.MainMenu = function(game){};BounceGame.Gameplay = function(game){	this.initMode = 1;};BounceGame.Boot.prototype = {	//preloadBar: Phaser.Sprite,	preload: function() {		console.log(this);	    this.load.image('preloadBar', 'assets/sprites/player/bigbear.png');	},	create: function() {		console.log('boot started');		gamevar.state.start('preload');	},	update: function() {	}};BounceGame.Preloader.prototype = {	preloadBar: Phaser.Sprite,	preloadText: Phaser.Text,	preload: function() {		this.preloadText = this.add.text(this.world.width / 2, this.world.height / 2 + 200)		this.preloadText.text = this.load.progress;		this.preloadBar = this.add.sprite(this.world.width / 2 - 200, this.world.height / 2, 'preloadBar');		//this.preloadBar.scale.setTo(1,1);		this.preloadBar.anchor.setTo(.5,.5);		this.preloadBar.x = this.world.centerX;		this.preloadBar.y = this.world.centerY;		this.load.setPreloadSprite(this.preloadBar, true);		level.preload();	    playerClass.preload();	    walkerClass.preload();	    hud.preload();	    this.load.image('button_play', 'assets/ui/button_play.png');	    this.load.image('button_options', 'assets/ui/button_options.png');	    this.load.image('button_timed', 'assets/ui/button_timed.png');	    this.load.image('button_endless', 'assets/ui/button_endless.png');	},	create: function() {		console.log('preloader started');		gamevar.state.start('menu_main');	},	update: function() {	}};BounceGame.Gameplay.prototype = {	init: function(mode){		//console.log(this.initMode);		this.initMode = mode;	},	create: function() {		console.log('gameplay started');		level.create();	    playerClass.create();	    walkerClass.create();	    hud.create();		console.log(this.initMode);		switchMode(this.initMode);	},	update: function() {		level.update();	    playerClass.update();	    walkerClass.update();	    hud.update();	},	render: function() {		// gamevar.debug.body(playerSprite);	    gamevar.debug.text("Current Combo: " + currentCombo, 300, 300);	    gamevar.debug.text("Max Combo: " + maxCombo, 300, 332);	    gamevar.debug.text("Current Mode: " + modeToString(currentMode), 32, 32);	    gamevar.debug.text("Coins: " + numCoins, 32, 64);	    gamevar.debug.text("Score: " + score, 600, 64);	    gamevar.debug.text("High Score: " + highestScore, 600, 96);	    //game.debug.text("health:" + playerHealth, playerSprite.x, playerSprite.y - 10);	    gamevar.time.advancedTiming = true;	    gamevar.debug.text("fps: " + gamevar.time.fps, 600, 32);	}};

Finally, my level.js with irrelevant parts snipped:

BounceGame.Gameplay = { };BounceGame.Gameplay.Level = function(game) {};BounceGame.Gameplay.Level.prototype = {	preload: function() {		console.log(this);		this.load.image('platform', 'assets/platform-large.png');		gamevar.load.image('coin', 'assets/blood.png');	},	create: function() {                //SNIP!	},	update: function() {                //SNIP!	}};//misc functions down here...

Originally, the Level object was just BounceGame.Level, not BounceGame.Gameplay.Level. I was hoping changing it would fix the issue, but it didn't.

 

 

It might also be worth including the error messages from using 'this':

 

 

 

Thank you for any help you can provide!

If you need more info just say the word.

 

[Taleforge]

I think you are missing "game" before "load" -> this.game.load.image

or use your gamevar.load

[BearSoap Software]

I think you are missing "game" before "load" -> this.game.load.image

or use your gamevar.load

 Well, gamevar.load does indeed work, however on upon switching from the gameplay state to another state, the objects from Level.js or any other gameplay-related state are either nulled or become broken. 

I'm starting to feel like OOP and states are incompatible, although I'm hoping otherwise.

[jyapayne]

Do you have a link to the webpage?

[BearSoap Software]

Sure thing man.

http://bearsoap.itch.io/bounce-me

 

To replicate the bug, start playing the game, then press Escape to go back to the menu, and then try to play again. Check out the console for error messages.

[Taleforge]

Maybe you could use the not minified version of phaser.js for dev? Would be much easier to read

And did you tried:

this.game.load.image

[BearSoap Software]

Maybe you could use the not minified version of phaser.js for dev? Would be much easier to read

 

...That's a great idea. All these nights spent trying to decipher the space-less phaser-min.js file for error messages...

Thank you!

 

Just updated

 

edit: Oddly enough, that small change seemed to have fixed the error I was getting! Don't ask me why it did, but I'm happy that it's not over my head anymore. I'm still feeling like my code is a bit too hack-y (I manually delete every created object at gameplay state shutdown, for example) but I'll take these as valuable lessons for future endeavours! 

 

edit 2: Okay, so I tested it with the minified file again that I grabbed outta my Phaser git folder and it still works! My guess is that I was accidentally using an outdated version of the Phaser.js file that had some crucial bugs. Regardless, thank you Taleforge for the tip and for the fix!