Jump to content

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


Recommended Posts

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. :huh: 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;

Link to comment
Share on other sites

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


  • Recently Browsing   0 members

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