Liranan

Launch a function when action is out the screen

Recommended Posts

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!

 

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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"

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.