Uncaught TypeError: Cannot read property 'alpha' of undefined

[Bavragor]

Hi,

I'm quite new at Phaser/Javascript so forgive me my newbie mistake but when the playGame function is triggered by clicking the button, the group (this.group) is supposed to fade out.

Yet I get the error Uncaught TypeError: Cannot read property 'alpha' of undefined. I have almost the exact construction of code in a different Javascript file and there it does seem to work. So I'm totally at a loss here. Hopefully someone can help me out.

 

The code:

 

Main.Levels = function (game)
{
	this.game = game;
};

Main.Levels.prototype = 
{
	group: Phaser.Group,
	
	create: function()
	{
		this.group = this.game.add.group();
		this.group.alpha = 0;
		
		for(var i = 0; i < 9; i++)
		{
			var lvl = this.game.add.button(120 + (150 * (i % 3)), 270 + (150 * Math.floor(i / 3)), 'lvl' + (i+1));
			lvl.anchor = {x: 0, y: 0};
			lvl.orgWidth = 100;
			lvl.orgHeight = 100;
			lvl.name = i;
				
			lvl.onInputUp.add(this.playGame, lvl);
			
			this.group.add(lvl);
		}
		
		var fade = this.game.add.tween(this.group);
    	fade.to({alpha: 1}, 300);
    	fade.start();
	},
	
	playGame: function()
	{
		var fade = this.game.add.tween(this.group);
		fade.to({alpha: 0}, 300);
		fade.start();
	}
}

 

 

[Bavragor]

Excuse me for bumping, but I still haven't been able to solve this and I'm starting to tear my hair out :/

[AzraelTycka]

Hello,

please give us specific details first, what gives you the error? Consoleshould tell you where the problem occurs. There is at least three times alpha used, which part of your code doesn't work?

Secondly, you can try to run it in jsfiddle, then it will be way easier for us to check what is wrong, ok?

[Bavragor]

Sorry for the lack of details.

As you can see I'm creating 9 buttons in my create function. To each button I'm adding an eventlistener on inputUp and I'm adding them to this.group. This group is fading in at the loading of the state. So far no problems.

When the eventlistener is triggered, aka when I'm clicking on one of the 9 buttons, the group of buttons is supposed to fade out. Yet that's the exact moment when I get the error: ' Uncaught TypeError: Cannot read property 'alpha' of undefined '. In the chrome console it claims to be an 'error' in the following line:  fade.to({alpha: 0}, 300);  (in the playGame function). Yet I cannot see any spelling mistake/common error.

Probably I'm lacking something very obvious, but I don't seem to be able to figure it out.

 

[AzraelTycka]

Well it says that your fade or the object you are tweening is undefined. So check that out first. Use console.log(fade) at the end of your function and see what you get, also check console.log(this) to make sure you are referencing to the correct object. As the last thing set your project in jsfiddle or in phaser test or some similar web app, please.

[Bavragor]

I checked the console with console.log(this) and it is referring the button instead of Main.Levels. Don't ask me why ><.

Do I just copy all my javascript files into the jsfiddle webpage?

[AzraelTycka]

Well, first of all it won't refer to main.levels at all, it can refer to main.levels.prototype at max.

Now you know your problem, so just change that part to what you call the tween on and you are fine.

About jsfiddle, no you don't upload your files there hoping it will work, they don't let you upload everything, for example if you have images or sound files (etc.) you might need to either create a dummy with canvas or point at them at other source.

Usually you just need to prepare some code that works and shows the functionality you are having a problem with nothign more stripped of all the garbage around, use the search on the forum for jsfiddle examples and you will udnerstand. :-)

[Bavragor]

You were right there AzraelTycka. I solved by changing 

 lvl.onInputUp.add(this.playGame, lvl);

to  

lvl.onInputUp.add(this.playGame, this);

now this references the correct object in my playGame() function.

I thank you for helping me out here and actually taking the time to help me understand what was wrong.

[AzraelTycka]

You are welcome, just keep working on ;-).