Download

HTML5 - STOP locking the mouse cursor!

My game is setup to never lock the mouse cursor.

If the user moves the mouse outside of the viewport, it will lock it on re-entry. Why is it resetting everything I’ve done to fix it just because their mouse leaves the viewport, is this a bug?

It should never lock the mouse cursor. How?

I have ~4 days until this project is due and haven’t found a solution.

Project Settings -> Input -> Default Viewport Mouse Capture Mode = No Capture
On chrome it does it automatically, on Microsoft Edge it comes up asking “Let localhost turn off your mouse pointer?”, saying no will prevent it. Localhost is because I’m testing it on my own machine not online.

^ This seems to be doing nothing for HTML5, submitting as bug report but still need workaround.

hope you still have some time.

even if you disable mouse capturing for level / controller / pawn, etc (wherever you try), in html, most probably it will be captured.

this is an emscripten solution so, is a little complicated. Open a windows explorer and go to folder
C:\Program Files\Epic Games\4.10\Engine\Source\ThirdParty\HTML5\emsdk\emscripten\1.30.0\src

If you are using another version than 4.10, choose that folder. 4.11 has 1.35.0 for emscripten.
You might have installed the engine to somewhere else, or might be compiling yourself.
In that case search for the filename that i’m about to write in your system…

In src folder, find the file named library_browser.js
We will be disabling the part where canvas tries to capture the pointer. Find these lines:



        canvas.requestPointerLock = canvas'requestPointerLock'] ||
                                    canvas'mozRequestPointerLock'] ||
                                    canvas'webkitRequestPointerLock'] ||
                                    canvas'msRequestPointerLock'] ||
                                    function(){};
        canvas.exitPointerLock = document'exitPointerLock'] ||
                                 document'mozExitPointerLock'] ||
                                 document'webkitExitPointerLock'] ||
                                 document'msExitPointerLock'] ||
                                 function(){}; // no-op if function does not exist
        canvas.exitPointerLock = canvas.exitPointerLock.bind(document);


now let’s disable them:



        canvas.requestPointerLock = function(){}; // --- DISABLED
                                    //canvas'requestPointerLock'] ||
                                    //canvas'mozRequestPointerLock'] ||
                                    //canvas'webkitRequestPointerLock'] ||
                                    //canvas'msRequestPointerLock'] ||
                                    //function(){};
        canvas.exitPointerLock = function(){}; // --- DISABLED
                                 //document'exitPointerLock'] ||
                                 //document'mozExitPointerLock'] ||
                                 //document'webkitExitPointerLock'] ||
                                 //document'msExitPointerLock'] ||
                                 //function(){}; // no-op if function does not exist
        canvas.exitPointerLock = canvas.exitPointerLock.bind(document);


this will prevent your canvas taking control of the mouse pointer for the time being.
remember that, on each UE4 update, this file will be overwritten with the original one… so this is not a permanent solution.

after changing this file, you’ll need emcc to recompile your .bc file.
Which means that you’ll need to delete everything in …\Your_Project\Binaries\HTML5 folder,
or simply delete the folder, then package your project again.