BdR Posted December 14, 2014 Share Posted December 14, 2014 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; Link to comment Share on other sites More sharing options...
doyouknowyou Posted December 14, 2014 Share Posted December 14, 2014 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 More sharing options...
Recommended Posts