[Fixed] Arrow Keys on HTML embedded game

How do I...?
1

Hi, I’m wondering if anyone knows if there is a way to focus the keyboard arrow keys strictly on a game embedded in an iframe without affecting the webpage it is embedded in.

If the page currently has vertical or horizontal scrollbars (e.g. on a blog or Itch), the arrow keys also move the page accordingly. I notice that HTML games made with, say, Phaser or Construct, somehow allow the arrow keys to function just on the embedded game.

Can this be done by an event in GDevelop or some other condition?

Thanks.

2

I think event.preventDefault is missing, what you think? @arthuro555

3

I think 4ian said once this is not a bug but a feature or something like that? I don’t remember why though, and may be mistaken.

4

OK I’ll submit a fix and ask thx!

5

I managed in my website adding some native javascript, css and two buttons one for lock other for unlock

You can check a working sample here

First add:
CSS

.stop-scrolling {
height: 100%;
overflow: hidden;
}

Javascript:

<script>
  function disableScroll() {
  document.body.classList.add("stop-scrolling");
  }

  function enableScroll() {
  document.body.classList.remove("stop-scrolling");
  }
</script>

HTML for buttons:

<button onclick="disableScroll()" class="btn btn-danger d-inline float-end" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Disable screen scroll" aria-label="Disable screen scroll"><i class="fas fa-lock"></i></button>

<button onclick="enableScroll()" class="btn btn-success d-inline float-end" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Enable screen scroll" aria-label="Enable screen scroll" aria-describedby="tooltip850364"><i class="fas fa-unlock"></i></button>
6

Fixed in Cancel default behavior from browsers when keyboard is used by Bouh · Pull Request #2589 · 4ian/GDevelop · GitHub for the next build b109.
Thanks you for your report!

You can do simplier with this fix.

3 Likes
7

Hi Bouh, I’d like to report that I’ve just tried a simple test using b110 with an iframe. For some reason, the arrow keys (and PageUp/PageDown keys) still move the whole page even though the click focus is on the iframe.

Your fix is definitely working for keys like Space. When I am focused on the iframe, pressing Space will not scroll the entire page. And when I click outside the iframe, it moves the page.

I previously used your intermediate fix from PR #2589 and it works. But the current runtimegame-pixi-renderer.js output by b110 gives the current partial behavior.

Thank you for your attention.