Pixi.JS doesn't receive keyboard inputs

[CloverFeywilde]

An HTML5 game I made with Pixi.js doesn't receive keyboard inputs unless I click the full screen icon and then click the white borders around the canvas. Obviously this isn't acceptable for a user experience and a fix or work around is needed.

I'm not the first with this issue: #112

The solution from this thread isn't available anymore, as it relies on a script from Kongregate, which they've since retired and don't have available.

Although it's been closed previously, I think this issue should be taken a bit more seriously, and some solution or workaround should be provided to allow HTML5 developers to get their code running properly on itch.

Any help would be greatly appreciated!

[leafo]

Thanks for opening a ticket. itch.io doesn't do anything special with loading HTML5 games other than putting them in an iframe. When the page loads the iframe typically doesn't have focus (the outer page does). Is sounds like pixi.js is calling preventDefault on them, preventing focus from going to the iframe.

You can try calling focus on the body element when the page loads to see if this has any effect.

More information here: https://stackoverflow.com/questions/369026/setting-focus-to-iframe-contents

[CloverFeywilde]

@leafo I've read the thread you linked, but one thing I wanted to make clear. Where do I need to be applying code changes? On my index.HTML? Or is there some way I'm able to edit the code for the actual itch page itself?

[CloverFeywilde]

After reading up a little more I found another solution that someone else came up with, it however doesn't seem to play nicely with itch.

http://www.html5gamedevs.com/topic/16726-capturing-keyboard-input-within-an-iframe/

at the bottom of the page the guy basically says that when a parent window is available, to bind pixi's controls to said parent window. He also provided this code:

var realWindow = window.parent || window;//..... //Attach event listeners realWindow.addEventListener( "keydown", key.downHandler.bind(key), false ); realWindow.addEventListener( "keyup", key.upHandler.bind(key), false );

Of course this code runs fine locally on my computer. But when trying to run on itch, the console spits this error out:

Uncaught DOMException: Blocked a frame with origin "https://v6p9d9t4.ssl.hwcdn.net" from accessing a cross-origin frame.
    at keyboard (https://v6p9d9t4.ssl.hwcdn.net/html/494652-50061/controls.js:184:14)
    at setup (https://v6p9d9t4.ssl.hwcdn.net/html/494652-50061/main.js:157:8)
    at newGame (https://v6p9d9t4.ssl.hwcdn.net/html/494652-50061/main.js:292:3)
    at Text.<anonymous> (https://v6p9d9t4.ssl.hwcdn.net/html/494652-50061/main.js:315:63)
    at Text.emit (https://v6p9d9t4.ssl.hwcdn.net/html/494652-50061/pixi.js:989:35)
    at InteractionManager.dispatchEvent (https://v6p9d9t4.ssl.hwcdn.net/html/494652-50061/pixi.js:31623:27)
    at InteractionManager.processPointerDown (https://v6p9d9t4.ssl.hwcdn.net/html/494652-50061/pixi.js:32042:18)
    at InteractionManager.processInteractive (https://v6p9d9t4.ssl.hwcdn.net/html/494652-50061/pixi.js:31774:17)
    at InteractionManager.processInteractive (https://v6p9d9t4.ssl.hwcdn.net/html/494652-50061/pixi.js:31726:26)
    at InteractionManager.processInteractive (https://v6p9d9t4.ssl.hwcdn.net/html/494652-50061/pixi.js:31726:26)

[leafo]

That approach won't work, we purposefully host the games on a separate domain from itch.io for security reasons. Additionally, I don't think forwarding keyboard events is a good idea for accessibility reasons. I think you should try to move focus to your game when the page loads. You can try adding this code to your game's initialization:

document.body.focus()

There are some considerations about browsers letting another frame change focus, so you might have to tweak where you run that code. If your game has click handler, you can try putting the focus call there if the game doesn't get focus on initialization.

[CloverFeywilde]

@leafo Tried document.body.focus() in a few areas, one of which is the click handler with no luck. Still won't work unless I go to full screen and then click the outer border.

grr.. This is a pesky problem. Here's a link in case you wanted to see for yourself. once the game loads, go to song 2 and the white block is supposed to move with the left and right arrow keys.

https://forleafe.itch.io/faeriefm?secret=nhivgxJJ8q1kIqJv4PBLUayxhu8

Any other ideas? :c

[fasterthanlime]

@bryanwillis7 Here's what's happening

How web games usually work on itch.io

Mouse & keyboard event handlers are set on the canvas element.

They're paused until you click on the canvas for the first time - which gives it focus.

How pixi.js works

pixi.js sets:

• a keyboard handler on the window element
• various mouse handlers (onmousedown, onmouseup etc.) on the canvas element
  • ...and it calls e.preventDefault() on them

The problem

So, clicking on the canvas of a pixi.js does not set the canvas as the active element (you can check in the devtools with document.activeElement).

That explains the "workaround" you found: when in full-screen clicking the white borders focuses the iframe's "window" object, and keyboard events start to work.

The solution

It looks like the pixi.js event code only calls preventDefault if autoPreventDefault is set:

If you disable that, clicking on the canvas should focus it, as it would normally.

It looks like the full path to the configuration key is renderer.plugins.interaction.autoPreventDefault

[CloverFeywilde]

Thanks so much for this, it helped tremendously. I got it to work in itch.io and all is well. To add on a little for future people who have this issue, as of PIXI v4, this page here should tell you all about the Pixi interaction manager, and its autoPreventDefault child that you have to set to false.

http://pixijs.download/release/docs/PIXI.interaction.InteractionManager.html#autoPreventDefault

To sum it up, you simply take the variable your renderer is set to, and then access the autoPreventDefault variable like so:

yourVariable.renderer.plugins.interaction.autoPreventDefault = false;

that will make it so when you click on the canvas on your itch page, your keyboard controls will work.