In-Browser game issues (Chrome and Firefox)

Post reply
Not favoritedFavorited Favorited 0 favourites
  • 3 posts
From the Asset Store
Bundle 7 Games - HTML5 Games "Construct 3"
$45 USD
HTML5 Game Bundle (7 Games) – Created with Construct 3
santidx's avatar
santidx

  • Hi. I'm having issues playing my Construct 3 games directly on the browser (via Itch). The thing is, I have specific issues in both Chrome and Firefox.

    ON CHROME:

    If the game is embedded on the page (typical of Itch) it works just well, but it doesn't seem to focus ON the frame the game is embedded on. This means that if I use the UP and DOWN arrow keys, the game will register them but so will the browser, forcing it to scroll up/down at the same time.

    I don't know what is causing this. If I make the game go Fullscreen while on the browser, it works perfectly and the browser stops focusing; there's no evidence of scrolling when I toggle Fullscreen OFF. This is very annoying for playing games not on fullscreen.

    Also, this issue does not happen on Firefox. The same game on a Firefox browser detects UP/DOWN inputs perfectly without the browser scrolling at the same time.

    ON FIREFOX:

    Toggling Fullscreen or even changing the size of the browser window while the game is running causes the browser to freeze, often needing to ALT-F4 it.

    This issue does not happen on Chrome.

    I don't know why these happen, but they are driving me crazy because no browser is safe from potential game-breaking issues. Exporting the game for Desktop works just fine, but I want to allow players to try it directly on the browser as well.

    Can anyone help me? I am missing some configuration option? Any insight will be greatly appreciated.

    (Max)

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads

  • Hi.

    At the beginning of the game, where you have data loading, you can add a block like this.

    Typically, the platform’s guidelines or documentation specify which workarounds they recommend to bypass the built-in capabilities of the browser’s control buttons. 

    // Disable unwanted page scroll.
window.addEventListener("wheel", (event) => event.preventDefault(), {
 passive: false,
});

// Disable unwanted key events and spacebar scrolling.
window.addEventListener("keydown", (event) => {
 if (["ArrowUp", "ArrowDown", ""].includes(event.key)) {
 event.preventDefault();
 }
});

// This is a fix for handling visibility change
// on webview, it's for an issue reported for Samsung App.
document.addEventListener("visibilitychange", () => {
 if (document.visibilityState) {
 if (document.visibilityState === "hidden") {
 application.publishEvent("OnWebDocumentPause", "True");
 } else if (document.visibilityState === "visible") {
 application.publishEvent("OnWebDocumentPause", "False");
 }
 }
});

// Disable context menu appearing after right click outside of the canvas.
document.addEventListener("contextmenu", (event) => event.preventDefault());

  • At the beginning of the game, where you have data loading, you can add a block like this.

    Typically, the platform’s guidelines or documentation specify which workarounds they recommend to bypass the built-in capabilities of the browser’s control buttons.

    It worked!! :D

    Now Chrome keeps the focus on the game instead of the game AND the browser; and I've also tested it on FireFox and the browser no longer freezes when changing the windows' size! (nor when toggling Fullscreen ON/OFF)

    Thank you so much! I would have never figure it out on my own; I know nothing of Javascript.

    (Max)

Post reply
  • 3 posts
Index icon Return to board index
Jump to:
Active Users
There are 0 visitors browsing this topic (0 users and 0 guests)