Launch a function when action is out the screen

[Liranan]

Hello everyone, here's my issue.

 

In the game you make lines in a tilemap by click (input.onDown) and moving the cursor over them. 
When you release the cursor (input.onUp) the lines disapear.

 

The problem is: when I move the cursor out the screen, it doesn't detect the event as input.onUp, and I can release the button, come back to the screen and select a new line without destroying the previous one.

 

What I want to know is: is there some way to launch a function when the cursor (in web or mobile) leaves the screen?

 

I've tried some methods, but none of them worked.

 

Thanks!

 

 

[drhayes]

Have you tried tracking the mouseout event on document? You'd have to assign it yourself, I can't think of a Phaser method or signal that covers this specifically.

[Liranan]

Thanks for the answer drhayes

I've tried doing this:

 

document.addEventListener('mouseout', function(){ this.myFunction(); });

 

But didn't work. It said "myFunction" didn't exists (and it did). I'm guessing you can't launch a phaser game function inside a DOM listener

[Gob0]

Thanks for the answer drhayes

I've tried doing this:

 

document.addEventListener('mouseout', function(){ this.myFunction(); });

 

But didn't work. It said "myFunction" didn't exists (and it did). I'm guessing you can't launch a phaser game function inside a DOM listener

Hi, 

 

the error occurs because of the function's scope. You place "this.myFunction()" in a function, so "this" refers to "function()", not your class containing function called "myFunction".

 

Instead, replace "this.myFunction" with "myClass.myFunction" and it will work. 

[Liranan]

Hello Gob0 and thanks for your answer.

 

I'm sure the problem is about the reference "this" but I use it in all the functions of the game and it always works but this time, I assume for being inside the document listener.

I've tried with 'myClass' but it doesn't work either. This is an example of how the code is set if it helps:

 

var mainState = function(){};

mainState.prototype = {

create: function(){

game.input.onUp.add(this.test, this); //this works

document.addEventListener('mouseout', function(){ this.test(); }); //this doesn't work

},

update: function(){

 

},

test: function(){

console.log("test correct");

}

};

 

I've also tried this solution

 

update: function(){

game.input.mouse.mouseOutCallback = this.test();

}

 

But it acts like the mouse always was outside the screen. If I launch the game, the console writes endless texts no matter if the mouse is on the screen or out

 

I've also tried checking in the update function if the mouse coordinates were in or out the screen. At last, it was the method that worked better, but still sometimes miss the movement.

[Gob0]

Try to replace 

document.addEventListener('mouseout', function(){ this.test(); });

with

document.addEventListener('mouseout', function(){ mainState.test(); });

To detect "out of screen", i will use the "blur" event and attach it to the div (or whatever html tag) where phaser game is "running"

[Liranan]

Mmm, it sounds good but I had the same answer for 'mainState.myFunction()'

 

Uncaught TypeError: mainState.myFunction is not a function

 

If I move the listener and the function out of the prototype it works, but it's useless to me because I've to refer the elements inside the prototype

[Gob0]

My bad, i respond too fast and omit to read my answer.

 

So, the right syntax for calling your function is

document.addEventListener('mouseout', function(){ mainState.prototype.test(); });

but be aware that this function will run on a different object instance that the one who add event. This is because you use "prototype" declaration and i'm not sure a phaser game state need a different object for each run.

IMO, singleton is the good fit for this.

[Liranan]

That's it!

 

It works perfectly!

 

Thank you very much Gob0!