Keyboard Input not Working for GMS2? Here's How We Fixed it.

If you’ve exported your game made with Gamemaker Studio 2 with the HTML5 export recently, you may have noticed that keyboard input isn’t working at all. No, it’s not just you- this bug affects almost every build of Gamemaker Studio 2 (v2.3.1.542 and older.)

Interestingly, this issue only occurs when the game is exported, then used as an embed on a website. This is why keyboard input works completely fine when you’re testing the game out with the Gamemaker Studio 2 webserver, but is broken when you export the game and upload it to a website.

The issue lies in the fact that Gamemaker doesn’t focus the game window when it’s clicked, meaning your game will never receive any keyboard input from the browser. After all, it makes sense that only focused windows can receive keyboard input, because without it, any banner ad anywhere on the webpage could see any information you’re typing in, posing a great security risk. But what doesn’t make sense is the fact that Yoyo Games hasn’t yet fixed this issue, first reported over three months ago on this Reddit post.

Method One: JavaScript Injection

With this method, all we have to do is create a script, call it when the window is clicked, then go into the compiled game code after export and inject a simple bit of JavaScript to focus the window. This method is much quicker than the following method- but only if you’re going to export it once. It’s more of a “quick and dirty” fix. If you’ll be exporting this game multiple times, in the long run, it’ll save you more time to create an extension (you’ll be shown how to in the following section.)

First, create an empty script named “scr_focus_window”, and give it the description of “FIX WINDOW FOCUS HERE!!!” (or something else unique and easily distinguishable.)

function focus_window() {
	/// @desc FIX WINDOW FOCUS HERE!!!
}

Next, create an object named “obj_focus_window”, and make sure the “Persistent” box is checked in the object’s settings. Place it in the first room of your game. In the object’s Begin Step event, insert the following code:

if(mouse_check_button_pressed(mb_any)) {
    focus_window();
}
What your "focus window" object should look like:
Gamemaker Studio 2 focus window problem fixed: focus window object example

Now, all we need to do is export our game and edit it’s compiled JavaScript code. To export your game, simply select “Build > Run” in the toolbar (first ensuring you are on the correct target, HTML5.) When you are prompted to choose the packaging option, choose a .zip file. Once the export has finished, unzip the zip file containing your game.

With the game unzipped, you’ll have to edit the game’s main JavaScript file. To do this, you can use any text editor, even the Windows built-in Notepad. To edit the file, simply right-click the JavaScript file, and click “Edit.” In the editor, hit CTRL + F to search for a certain phrase. Search for “FIX WINDOW FOCUS HERE!!!” You should see something like the following:

Gamemaker Studio 2 focus window problem fixed: searching for the function

Now, all you need to do is insert the JavaScript code window.focus(); into the next pair of double opening and closing curly braces. Inside those curly braces, enter your JavaScript code.

Where to insert window.focus to fix the issue

And that’s it! Once you’ve done that, all you have to do is save the JavaScript file, zip the folder back up, and boom, now you can rest assured, knowing that all players, regardless of their computer, can play your game.

Gamemaker studio 2 keys not registering issue fixed

Method Two: Gamemaker Extension

With this method, we will create a Gamemaker extension and attach a JavaScript file to it. This method is a bit harder to work with, especially if you’ve never worked with Gamemaker Extensions, but still- it’ll save you a lot of time in the long run if you export your game more than once.

The first step is to create a Gamemaker Extension. To do this, simply right-click the “Extensions” folder in the Gamemaker IDE, select Create > Extension. You can name this extension whatever you’d like, but it’s best to be descriptive- so we’ll just name it “window_focus.” Now that the extension is created, make sure it only copies to the HTML5 platform by un-checking all of the options but “HTML5.” Your extension so far should look like this:

Gamemaker Studio 2 extension example 01

Now, it’s time to add in the script. All this script needs to do is focus the window, and the function for that in JavaScript is window.focus(). Create a JavaScript file named “window_focus.js”, and enter the following code into it:

function window_focus() {
	window.focus();
}

Now we’ll need to add the JavaScript file to our Gamemaker Extension. To do that, click on the little hamburger menu under the “Resources” section and select “Add File.” Select the newly created JavaScript file.

Gamemaker Studio 2 extension example 02

Next, double-click the newly added script under the “Files” list. In the “Functions” section, click the hamburger menu and select “Add Function.” For the name, you should input “window_focus” (this will be the name used to call it within the Gamemaker Program.) For the External Name, you should input “window_focus” as well, as this is the name of the function in the JavaScript file.

Creating and adding a function in Gamemaker Studio 2

Finally, create an object named “obj_focus_window”, and make sure the “Persistent” box is checked in the object’s settings. Place it in the first room of your game. In the object’s Begin Step event, insert the following code:

if(mouse_check_button_pressed(mb_any)) {
    focus_window();
}
What your "focus window" object should look like:
Gamemaker Studio 2 focus window problem fixed: focus window object example

And that’s it! Now, when you export your game, it should be automatically focused when the user clicks on the window.

Email

Comments

(Comments'd go here..)