Jump to content

Extending Phaser.Button


Recommended Posts

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?

Link to comment
Share on other sites

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



Link to comment
Share on other sites

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";
Link to comment
Share on other sites

I just solved it by changing

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


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.

Link to comment
Share on other sites

  • 3 years later...

  • Recently Browsing   0 members

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