Defining a click area - "empty" sprite?

[tackle]

I have a "playfield", clicking anywhere on the screen attacks at that position. Now I'm in the situation where I have to add a pause-button. So, if I implement the button I will both pause the game and trigger my attack at the position of the button, which is wrong.

 

I do this currently:

this.game.input.onDown.add(this.attack,this);

Where this.attack is my attack handling function.

Coming from a AS3 background (and javascript too really) I initially think in terms of event bubbling etc. Here there's no such thing, if I'm not mistaken?

 

I could solve this in a few ways:

 

- In my this.attack function, check if I clicked the area where the pause-button is, in that case handle it that way instead.

Problem: It bloats my attack function with stuff that you could argue doesn't belong there.

 

- I could create a Sprite that is just the size of my playfield and put my main attack listener on this instead. Also - make sure this is invisible.

Problem: I have to use a specific asset for just this purpose (unless I randomly choose another one and set the right width/height) - also I limit myself to having this playfield in a rectangular area, whereas I would like to use the whole screen 'minus' the area for any GUI buttons really (not just pause).

 

How would you solve this in Phaser?

[XekeDeath]

For the sprite option, you can not specify an image, and it will create a blank sprite for you, and you can set the width/height of the area you want to use.

[jmp909]

this currently doesn't work. when creating a blank sprite, it uses the last texture used

https://github.com/photonstorm/phaser/issues/2173

[Trissolo]

create: function() {

.

.

// Just a "switch" variable

this.attackAllowed = true;

.

.

this.pauseButton.events.onInputOver.add(this.doNotAttackImClickingAButton, this);

this.pauseButton.events.onInputOut.add(this.KillEmAll, this); //not sure if it's needed

.

.

},

attack: function(your parameters){

if (this.attackAllowed) {

// your code

}

},

doNotAttackImClickingAButton: function() {

this.attackAllowed = false;

},

KillEmAll: function() {

this.attackAllowed = true;

},

unpause: function() {

// your code

this.attackAllowed = true;

}