Keyboard input within iFrame(clicking doesn't focus)

Recommended Posts

Itch.io puts my game in an iFrame. This means that event listeners don't work unless the iFrame has been clicked on (so no keyboard input). But clicking on the WebGL area within the iFrame doesn't focus the iFrame! If I make the iFrame larger than the rendering area, then click on the border(area between WebGL rendering area and iFrame edge), then my iFrame is focused, and keyboard input works again. But I can't ask players to click on the border before playing! It should be that the player lands on my page, clicks on the WebGL rendering area, and starts playing. And since this is on itch.io, I can't change the .html of the parent window (the one that contains my iFrame). I'm using hexi, so I'm using pixi v3. 

Share this post

Link to post
Share on other sites

A link to my game is here: https://jamescraster.itch.io/portalsnake?secret=G0GfdSAP9YELNp2oUMqJABunvSM so you can see what I mean. I just don't know how to focus the WebGL rendering area when the player clicks on it! If you click on the grey border it works.

Hexi is a collection of modules to go alongside pixi to add new features. It is on github: https://github.com/kittykatattack/hexi

Edit: WASD are the controls, the snake is the green square in the middle, it sometimes(rarely) spawns within a wall so it may be need reloading(I just place the walls randomly at the moment)

Edit: it is like the webgl rendering area is absorbing my clicks, so that the event listener on my index.html file doesn't get focus. Can I add the event listener to my webgl rendering area somehow?

Share this post

Link to post
Share on other sites

Second. Also having this exact problem. Can we work together to maybe come up with a solution here? Asking players to "click the white border so my code works" just looks sloppy and unprofessional.


I saw this and tried including the mentioned code solution in my index.HTML file... but it didn't work for me. I still have to click the white border around my game to focus it and gain access to keyboard controls.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.