Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Phaser JS how to stop event Propagation(firing) from textButton.events.onInputDown event to game.input.onDown event?

Here is the JSFiddle.

I have two events here.

  1. Is game.input.onDown which does some logic (generates particles in my example)
  2. Is textButton.events.onInputDown, where textButton is a Phaser.Text object instance, which does another logic.

The problem is: when I click on my textButton both event are fired 1 and 2.

The question is, how to prevent event 1 from firing when I click on the textButton?

Part of code:

...
//This event is fired on click anywhere event # 1
game.input.onDown.add(particleBurst, this);

//This is Clickable text
textButton = game.add.text(game.world.width - 5, 5, "CLICK ME", fontStyle);
textButton.anchor.setTo(1, 0);
textButton.inputEnabled = true;

//This event is fired on click on text event # 2
textButton.events.onInputDown.add(function () {
    console.log("button is Clicked");
}, this, 2);
...
like image 702
Alexander Arutinyants Avatar asked Dec 25 '14 21:12

Alexander Arutinyants


People also ask

How do you stop event propagation?

stopPropagation() Event Method The stopPropagation() method prevents propagation of the same event from being called. Propagation means bubbling up to parent elements or capturing down to child elements.

How do you stop event handling?

To stop an event from further propagation in the capturing and bubbling phases, you call the Event. stopPropation() method in the event handler. Note that the event. stopPropagation() method doesn't stop any default behaviors of the element e.g., link click, checkbox checked.

What is event dot stop propagation?

The event. stopPropagation() method stops the bubbling of an event to parent elements, preventing any parent event handlers from being executed.

What is phaser3?

Phaser 3 is the new version of the Phaser Game Framework series. It includes a brand-new custom WebGL renderer designed specifically for the needs of modern 2D games. Phaser uses both a Canvas and WebGL renderer internally and automatically switch between them based on browser support.


1 Answers

You can add a background - transparent sprite - and use input.priorityID.

The priorityID is used to determine which game objects should get priority when input events occur. For example if you have several Sprites that overlap, by default the one at the top of the display list is given priority for input events. You can stop this from happening by controlling the priorityID value. The higher the value, the more important they are considered to the Input events.

See: http://docs.phaser.io/InputHandler.js.html#sunlight-1-line-45

// This is event #1 added to background sprite
var bg = game.add.sprite(0, 0);
bg.fixedToCamera = true;
bg.scale.setTo(game.width, game.height);
bg.inputEnabled = true;
bg.input.priorityID = 0; // lower priority
bg.events.onInputDown.add(particleBurst);

Make sure your textButton has higher priority:

textButton.input.priorityID = 1; // higher pirority

Add the clicked sprite (our background) as a first parameter to the particle function:

function particleBurst(bg, pointer) {

This way only one event should be triggered.

Check out modified fiddle: http://jsfiddle.net/g05bbL6g/3/

like image 71
lpiepiora Avatar answered Sep 21 '22 12:09

lpiepiora