Jump to content

Uncaught TypeError: Cannot read property 'alpha' of undefined


Bavragor
 Share

Recommended Posts

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();
	}
}

 

 

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. :-)

Link to comment
Share on other sites

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. ;)

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...