prevent mouse leaving window (javascript or nw.js)

Question

I'm using javascript and nw.js for my game.

I use the mouse cursor for targeting and for the GUI. I want to prevent the user from clicking outside of the window, with other words keep the cursor within bounds. If the user clicks out of bounds, the window loses focus and I pause the game (alt-tab must be allowed to work).

1. I was hoping nw.js kiosk mode would help, but it does not.

2. There is a thing called "pointer lock", but this wont really help me, as I need a visible cursor:

Pointer Lock (formerly called mouse lock) provides input methods based on the movement of the mouse over time (i.e., deltas), not just the absolute position of the mouse cursor. It gives you access to raw mouse movement, locks the target of mouse events to a single element, eliminates limits on how far mouse movement can go in a single direction, and removes the cursor from view.

Answer 1

You cannot automate this in plain browsers, but you've tagged the question NW.js, so it's indeed possible with a bit of fudging.

If you want a cursor inside window bounds as you've suggested, you'll need hide the default cursor and lock it to your window, write code that reads mouse x/y values as they change, and then move a fake cursor image around to represent the mouse.

Like browsers, you cannot naively try lock the pointer. It'll spit out errors unless the user triggers it via a click. What you can do is use the NW.js API to fake an initial click, and couple that with something like Three.js's PointerLockControls (working example here - I have my own more complex implementation on GitHub that more directly checks mouse input, but note that the comments in my version are written within the context of my game, and will be bit confusing if read without that context).

If you'd prefer not to use Three.js, you can have a look at this MDN page, and create your own implementation using Three.js code as a guide.

Setup

To enable pointer lock, right after boot, call the following code:

const win = nw.Window.get();
win.focus();

Then, lock the pointer using your chosen implementation. If using the Three.js example above, it'll look something like this:

controls = new PointerLockControls(camera, document.body);
controls.lock();

That hides the pointer and prevents it from leaving the browser. You can use the pointer lock interface to get x/y values as they change with mouse movement, and move a custom .png around to represent in-game mouse movement.

Caveats

In current NW.js versions, users can forcibly kick themselves out of pointer lock by pressing Escape. You can detect this using a normal HTML pointerlockchange event, but you will not be able to forcibly relock the pointer until about 2 seconds have elapsed. To prevent confusing behavior, consider making this a 'feature', and maybe map the menu to something like Backspace instead.