Extending Phaser.Button

[hpcodecraft]

Hi everyone!

 

I want to extend Phaser.Button to make it scale automatically upon creation. Therefore I've got a global variable SCALE which contains the game's scale factor. I've done the same with Phaser.Sprite already and it works fine, but it seems I can't get it right with the buttons.

Here's my ScaledButton.js:

var ScaledButton = function(game, x, y, key, callback, callbackContext, overFrame, outFrame, downFrame, upFrame, group) {  x*= SCALE;  y*= SCALE;  Phaser.Button.call(this, game, x, y, key, callback, callbackContext, overFrame, outFrame, downFrame, upFrame, group);  this.scale.setTo(SCALE, SCALE);  game.add.existing(this);};ScaledButton.prototype = Object.create(Phaser.Button.prototype);ScaledButton.prototype.constructor = ScaledButton;

In my Game state, I create it like so:

var button = new ScaledButton(this, 2, 146, 'button-texture', doSomething, this, 0, 0, 0);

The button is created and added to the stage, but on mouseover/mouseout it throws the following error into my Chrome console:

Uncaught TypeError: Cannot read property 'style' of undefined [phaser.js:17276]

Any ideas?

 

Oh, and an additional "best pratice" question: In my extended class, I add the object directly by game.add.existing(this).

Is this a good practice or should this be handled outside the class definition?

[xnamex]

I tried your code, and I didn't had any issues. What version are you using?

Also, I guess you're trying to scale up/down everything, why not having a more 'global' function which scales elements all together? 

 

Maybe you should take a look here: https://github.com/photonstorm/phaser/blob/master/resources/Project%20Templates/Full%20Screen%20Mobile/src/Boot.js#L27

 

Cheers!

[hpcodecraft]

I'm using 1.1.5 and just tried 1.1.4 again, with the same results. I'm also using that template you pointed to - here's my scaling code from Boot.js:

create: function() {  Phaser.Canvas.setSmoothingEnabled(this.game.context, false);	//	Unless you specifically know your game needs to support multi-touch I would recommend setting this to 1	this.game.input.maxPointers = 1;	//	Phaser will automatically pause if the browser tab the game is in loses focus. You can disable that here:	this.game.stage.disableVisibilityChange = true;	if(this.game.device.desktop) {		//	If you have any desktop specific settings, they can go in here		this.game.stage.scaleMode = Phaser.StageScaleMode.SHOW_ALL; //resize your window to see the stage resize too		this.game.stage.scale.pageAlignHorizontally = true;		this.game.stage.scale.pageAlignVertically = true;		this.game.stage.scale.refresh();	}	else {		// mobile settings	}	//	By this point the preloader assets have loaded to the cache, we've set the game settings	//	So now let's start the real preloader going		this.game.state.start('Preloader');	}

I'm using the scaled sprites to scale the coordinates of the sprite automatically, too.

My game is 320x180 pixels and with the autoscaling sprites I can position a sprite e.g. at x: 10 and y: 10 in my code and it will always be at the same place on screen, no matter if the user is on a phone or a 40" TV.

At least that's what I'm trying to achieve but I'm quite new to Phaser, so maybe there's a better way to do that

 

For the error thrown to my console: It seems that this.game.canvas is not known in the button's inputHandler, this is the line from phaser.js:

this.game.canvas.style.cursor = "default";

[hpcodecraft]

I just solved it by changing

var button = new ScaledButton(this, 2, 146, 'button-texture', doSomething, this, 0, 0, 0);

to

var button = new ScaledButton(this.game, 2, 146, 'button-texture', doSomething, this, 0, 0, 0);

I guess it's because I'm in a State so this is the State object and not the Game object. With my ScaledSprite class (which is basically the same, only extending Phaser.Sprite) it works the first way, though.

[TomFiveThumbs]

3.5 years later and this thread helped me with exactly what I needed.

It was indeed that you were running "this" instead of "this.game" inside a state. I did the exact same thing.