Is it possible to adjust the hitArea of a Phaser.Button?

[BdR]

Is it possible to adjust the hitArea of a Phaser.Button, to make it a little bigger, or for that matter make it smaller?

 

I want to make the hit detection of a few buttons a bit bigger so that they can more easily be pressed on touch screens of (relatively small) mobile phones. I know that I could just make bigger images and add empty space around each button, but that's just clumbsy and wasteful.

 

So I tried to change the hitArea by first adding a button normally, then getting its hitArea rectangle, expanding the width and height and then setting it back again. However, when I create a button its .hitArea property is always null.  Here's what I tried:

this._btnStart = this.game.add.button(160, 320, 'button', this.doTap, this, 1, 0, 2);


console.log('Testing.. this._btnStart.body='+this._btnStart.body); // body=undefined

console.log('Testing.. this._btnStart.hitArea='+this._btnStart.hitArea); // hitArea=null


var hitRectangle = this._btnStart.hitArea;

hitRectangle.x -= 16; // error on this line <- Cannot read property 'x' of null

hitRectangle.y -= 16;

hitRectangle.width += 32;

hitRectangle.height += 32;

this._btnStart.hitArea = hitRectangle;

[doyouknowyou]

Best way I fixed this was by duplicating the button, and having one the actual 'hit area' with alpha at 0. The button on top would be the visible sprite, but scaled accordingly.

    //menu button icon (no touch)    menuButtonSmall = game.add.button(buttonX + 10, buttonY + 13, 'menuButton');    menuButtonSmall.scale.setTo(0.4,0.4);    menuButtonSmall.fixedToCamera = true;    menuButtonSmall.anchor.set(0.5,0.5);    // menu button touch area (touch)    menuOpenButton = game.add.button(buttonX + 10, buttonY + 13, 'menuButton');    menuOpenButton.fixedToCamera = true;    menuOpenButton.anchor.set(0.5,0.5);    menuOpenButton.alpha = 0;