Jump to content

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. 

Link to comment
Share on other sites

A link to my game is here: <edited> 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?

Edited by Jcras
remove url as game no longer public
Link to comment
Share on other sites

  • 1 month later...

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.

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.

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.


  • Recently Browsing   0 members

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