increase sprite hit area without increasing its body

[pencilking2002]

I would like to increase a sprite's hit area so that its easier to tap on it on mobile. I would like to keep its body the same size however as there are collisions in the game that depend on it. How can I accomplish this? 

 

I tried 

paddle.body.setSize(500, 200, 0, 0);

 

but this seems to increase the body size, screwing up collisions.

 

Thanks! 

[wayfinder]

Add a second, bigger sprite on top of it that doesn't collide with anything and use that for touch input. Just make sure they're always in the same place.

[grammka]

body = game.add.sprite(0, 0);

sprite = game.add.sprite(0, 0, 'sprite');

body.addChild(sprite);

[lewster32]

There is a hitArea property on all pixi DisplayObjects, which Phaser's objects inherit from. You can feed this a new Phaser.Rectangle like so:

// add a hypothetical 10x10 sprite
var sprite = game.add.sprite(0, 0, 'test');

// make the hit area 20x20 - note you can also use negative figures for the first two params (x and y) to offset it from the sprite
sprite.hitArea = new Phaser.Rectangle(0, 0, 20, 20);

I don't know for sure if this works with all input methods but I've tested it with dragging and it works fine there.

[Zaxx]

Hi, lewster32 says good tip.
But you should remember about sprite anchor

So, I use such a universal snippet.  Positive HIT_AREA_PADDING increase hit area, negative - shrink it

var HIT_AREA_PADDING = 16;

sprite.hitArea = new Phaser.Rectangle( 
        sprite.left-HIT_AREA_PADDING, 
        sprite.top-HIT_AREA_PADDING,
        sprite.width + HIT_AREA_PADDING * 2,
        sprite.height + HIT_AREA_PADDING * 2
    );