Jump to content

How to disable input to Phaser when someone is typing somewhere else on the page (Not the canvas)


Ralph
 Share

Recommended Posts

Basically, I have my Phaser canvas which takes up 80% of my page and the other 80% is a chat bar on the side. My issue is, my game uses WASD controls and some other buttons to open menus. When someone goes to type in the chat box to send a message, phaser also takes the input. So if im typing a message with a bunch of W's in it, my character in the game would be moving forward. Anyone know a way around this, and not using WASD isnt an option in my case! Thanks for the help in advanced!

Link to comment
Share on other sites

Okay, a solution that may work, if you listen for the focus change on your canvas, dispatch an event that the game listens out for to pause the game state. Something like...

-- in your html --

document.querySelector("canvas").onblur = function() {
    // canvas has lost focus
    window.dispatchEvent(new CustomEvent('pauseGame', {detail: 'myParams'}));
}

document.querySelector("canvas").onfocus = function() {
    // canvas has lost focus
    window.dispatchEvent(new CustomEvent('unPause', {detail: 'myParams'}));
}

-- in the game --

window.addEventListener('pauseGame', function(e) {
    // pause the game
});

window.addEventListener('unPause', function(e) {
    // user has clicked on the canvas, unpause the game
});

Hope this helps!

Link to comment
Share on other sites

On 6/20/2016 at 8:50 AM, megmut said:

Okay, a solution that may work, if you listen for the focus change on your canvas, dispatch an event that the game listens out for to pause the game state. Something like...


-- in your html --

document.querySelector("canvas").onblur = function() {
    // canvas has lost focus
    window.dispatchEvent(new CustomEvent('pauseGame', {detail: 'myParams'}));
}

document.querySelector("canvas").onfocus = function() {
    // canvas has lost focus
    window.dispatchEvent(new CustomEvent('unPause', {detail: 'myParams'}));
}

-- in the game --

window.addEventListener('pauseGame', function(e) {
    // pause the game
});

window.addEventListener('unPause', function(e) {
    // user has clicked on the canvas, unpause the game
});

Hope this helps!

The idea is there and i see how it works! However, it always throws an error: "Cannot set property 'onblur' of null" no matter where in my HTML i place the top part of the code, below the canvas or above. I tried to setup a div around my game code then run it off of that, but i couldnt size the div correctly through javascript. Does that make sense? 

Link to comment
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...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...