hitArea on mobile devices (iOS and Android)

[Marsu]

Hello!

I have a major problem with touch input on sprite buttons. I have some letters as buttons and by default the hitArea was only as big as the letter itself, which was sometimes hard to hit (especially I + J).
So I increased the hitArea by assigning it a rectangle that is much wider.

On the PC in the Browser the enlarged hitArea works fine, but inside a webview inside an iOS or Android-App it doesn't seem to affect anything, I still have to tap the letters about 10 times until I hit it.

Any idea where that problem comes from? It makes the game incredible annoying and pretty much unplayable.

I also tried adding and resizing a physics body, no luck

Example code from the Sprite creation:

letter = this.game.make.bitmapText(0, 0, 'bitmapfont', letters, 170 * scale);
			letter.anchor.set(0.5);
			//this.guessButtons = this.game.add.sprite(200 * scale * (i - (line - 1) * charsPerLine) + 400 * scale, 1650 * scale + 170 * line * scale, letterTex);
			this.guessButtons = this.game.add.sprite(260 * scale * (i - (line - 1) * charsPerLine) + 130 * scale, 1650 * scale + 170 * line * scale, letter._glyphs[0].texture);
			this.guessButtons.hitArea = new Phaser.Rectangle(-100 * scale, -10 * scale, 280 * scale, 190 * scale);
			this.guessButtons.scale = new Phaser.Point(170/200 * scale, 170 / 200 * scale);
			this.guessButtons.name = "guessLetterButton_" + i;
			this.guessButtons.inputEnabled = !this.watchMode;
			this.guessButtons.events.onInputDown.add(this.selectLetter, this, 0, letters);
			this.guessButtons.tint = 0x404040;

 

[icp]

I think you should change the touch input radius:

http://phaser.io/docs/2.4.6/Phaser.Input.html#circle

Try to see if that helps.

[Tom Atom]

Hi,

 use hitArea property. With it you can set not only size, but also shape of the hit area - like this for circle:

letter = this.game.make.bitmapText(0, 0, 'bitmapfont', letters, 170 * scale);
letter.hitArea = new PIXI.Circle(0, 0, 100);

 You can use circle, ellipse, rectangle, polygon ... in fact any shape or class that has method "contains(x, y)".

[Marsu]

21 hours ago, Tom Atom said:

Hi,

 use hitArea property. With it you can set not only size, but also shape of the hit area - like this for circle:

letter = this.game.make.bitmapText(0, 0, 'bitmapfont', letters, 170 * scale);
letter.hitArea = new PIXI.Circle(0, 0, 100);

 You can use circle, ellipse, rectangle, polygon ... in fact any shape or class that has method "contains(x, y)".

What exaclty is wrong with my usage?

this.guessButtons.hitArea = new Phaser.Rectangle(-100 * scale, -10 * scale, 280 * scale, 190 * scale);

And why does it work inside the browser but not the webview?

[Marsu]

I have increased the size of the Sprite itself and added a near-transparent background behind the letter texture by combining them in a bitmapData. Now it works. Its crude, but as long as it works...