Pixi.js: Pointermove raises every single time even not being on top of the sprite

[DavidGOrtega]

Hi guys, I'm experiencing very weird effects with interactive and masks effects so I will create a series of issues regarding to this... sadly to say I have a lot...

I guess that somehow phaser is able to overcome this... but I don't know how yet.

Trying to be as simple as possible here is the first:

var app = new PIXI.Application(800, 600, { backgroundColor: 0x1099bb });
document.body.appendChild(app.view);

var sprite = PIXI.Sprite.fromImage('required/assets/basics/bunny.png');
sprite.interactive = true;
sprite.buttonMode = true;
sprite.on('pointerdown', click1);
sprite.on('pointermove', move1);

app.stage.addChild(sprite);

var sprite2 = PIXI.Sprite.fromImage('required/assets/basics/bunny.png');
sprite2.interactive = true;
sprite2.buttonMode = true;
sprite2.on('pointerdown', click2);
sprite2.on('pointermove', move2);

app.stage.addChild(sprite2);

function click1 () {
  console.log('sprite 1');
}

function click2 () {
  console.log('sprite 2');
}

function move1 () {
  console.log('sprite 1 move');
}

function move2 () {
  console.log('sprite 2 move');
}

this demo will generate two sprites however they overlap. The click_ event will be ok, just only the sprite2 log will be raised, however the move_ event is completely crazy not only logs for the two of them but also appears even just moving on top of the stage outside of the sprites!!

[DavidGOrtega]

Also, the pointermove event appears with just one sprite moving the pointer in the stage outside of the sprite

var app = new PIXI.Application(800, 600, { backgroundColor: 0x1099bb });
document.body.appendChild(app.view);

var sprite = PIXI.Sprite.fromImage('required/assets/basics/bunny.png');
sprite.interactive = true;

sprite.on('pointerdown', click1);
sprite.on('pointermove', move1);

app.stage.addChild(sprite);


function click1 () {
  console.log('sprite 1');
}

function move1 () {
  console.log('sprite 1 move');
}

[themoonrat]

http://pixijs.download/dev/docs/PIXI.interaction.InteractionManager.html#moveWhenInside

Set this to true, and I believe you'll get the behaviour you desire.

[DavidGOrtega]

@themoonrat you are right however it's a little bit tricky to set up.

This is what works, I had to inspect the pixi app.

app.plugins.interaction.moveWhenInside = true;

Previous Failed attemps:

• Thinking that the events are extracted form the already available instance PIXI.interaction.InteractionManager
  ```
  PIXI.interaction.InteractionManager.moveWhenInside = true;

- Using the PIXI.interaction.InteractionManager constructor

var intman = new PIXI.interaction.InteractionManager(app.renderer, {moveWhenInside: true});
```

[themoonrat]

1 works

alternative if you have an instance to the renderer
renderer.plugins.interaction.moveWhenInside = true;
Failed attempt #1 - This is not changing the created instance of the interaction plugin
Failed attempt #2 - Creating a new interaction manager does not effect the one already created by default.

[themoonrat]

@DavidGOrtega closing as I think we've got you covered here :)

[lebesnec]

@themoonrat you are right however it's a little bit tricky to set up.

This is what works, I had to inspect the pixi app.

app.plugins.interaction.moveWhenInside = true;

I had to use this to access the property:

app.renderer.plugins.interaction.moveWhenInside = true;

[themoonrat]

Yep, you're right, sorry!

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.